diff --git a/.changeset/ten-gifts-check.md b/.changeset/ten-gifts-check.md
deleted file mode 100644
index c0cb133c59..0000000000
--- a/.changeset/ten-gifts-check.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"shadcn": patch
----
-
-handling of apply directive inside utility
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
index aff82a102d..126a5b5f83 100644
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -4,3 +4,43 @@ updates:
     directory: "/"
     schedule:
       interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/astro-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/astro-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/next-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/next-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/react-router-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/react-router-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/start-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/start-monorepo"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/vite-app"
+    schedule:
+      interval: "weekly"
+  - package-ecosystem: "npm"
+    directory: "/templates/vite-monorepo"
+    schedule:
+      interval: "weekly"
diff --git a/.github/workflows/code-check.yml b/.github/workflows/code-check.yml
index bfe6fc4525..61255b4d9f 100644
--- a/.github/workflows/code-check.yml
+++ b/.github/workflows/code-check.yml
@@ -77,6 +77,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Build packages
+        run: pnpm --filter=shadcn build
+
       - run: pnpm format:check
 
   tsc:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 11bc27bb0d..3441008c1d 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -19,7 +19,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 20
+          node-version: 22
 
       - uses: pnpm/action-setup@v4
         name: Install pnpm
@@ -42,7 +42,4 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
-      - name: Build packages
-        run: pnpm build --filter=shadcn
-
       - run: pnpm test
diff --git a/.gitignore b/.gitignore
index aecf372c10..c040854c9f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,3 +42,4 @@ tsconfig.tsbuildinfo
 
 .notes
 .playwright-mcp
+shadcn-workspace
diff --git a/apps/v4/app/(app)/(root)/components/appearance-settings.tsx b/apps/v4/app/(app)/(root)/components/appearance-settings.tsx
index 0b4c570bf3..216c89f3e0 100644
--- a/apps/v4/app/(app)/(root)/components/appearance-settings.tsx
+++ b/apps/v4/app/(app)/(root)/components/appearance-settings.tsx
@@ -93,7 +93,7 @@ export function AppearanceSettings() {
               value={gpuCount}
               onChange={handleGpuInputChange}
               size={3}
-              className="h-7 !w-14 font-mono"
+              className="h-7 w-14! font-mono"
               maxLength={3}
             />
             <Button
diff --git a/apps/v4/app/(app)/(root)/components/field-hear.tsx b/apps/v4/app/(app)/(root)/components/field-hear.tsx
index 704cdc9aee..aa21c77d30 100644
--- a/apps/v4/app/(app)/(root)/components/field-hear.tsx
+++ b/apps/v4/app/(app)/(root)/components/field-hear.tsx
@@ -46,7 +46,7 @@ export function FieldHear() {
                   <FieldLabel
                     htmlFor={option.value}
                     key={option.value}
-                    className="!w-fit"
+                    className="w-fit!"
                   >
                     <Field
                       orientation="horizontal"
diff --git a/apps/v4/app/(app)/(root)/components/index.tsx b/apps/v4/app/(app)/(root)/components/index.tsx
index 4c8bc44880..79640798e6 100644
--- a/apps/v4/app/(app)/(root)/components/index.tsx
+++ b/apps/v4/app/(app)/(root)/components/index.tsx
@@ -19,7 +19,7 @@ import { SpinnerEmpty } from "./spinner-empty"
 
 export function RootComponents() {
   return (
-    <div className="theme-container mx-auto grid gap-8 py-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
+    <div className="mx-auto grid gap-8 py-1 theme-container md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-6 2xl:gap-8">
       <div className="flex flex-col gap-6 *:[div]:w-full *:[div]:max-w-full">
         <FieldDemo />
       </div>
diff --git a/apps/v4/app/(app)/(root)/components/input-group-button.tsx b/apps/v4/app/(app)/(root)/components/input-group-button.tsx
index f6fcf4db60..c2ad283fbf 100644
--- a/apps/v4/app/(app)/(root)/components/input-group-button.tsx
+++ b/apps/v4/app/(app)/(root)/components/input-group-button.tsx
@@ -24,7 +24,7 @@ export function InputGroupButtonExample() {
         Input Secure
       </Label>
       <InputGroup className="[--radius:9999px]">
-        <InputGroupInput id="input-secure-19" className="!pl-0.5" />
+        <InputGroupInput id="input-secure-19" className="pl-0.5!" />
         <Popover>
           <PopoverTrigger asChild>
             <InputGroupAddon>
@@ -46,7 +46,7 @@ export function InputGroupButtonExample() {
             <p>You should not enter any sensitive information on this site.</p>
           </PopoverContent>
         </Popover>
-        <InputGroupAddon className="text-muted-foreground !pl-1">
+        <InputGroupAddon className="pl-1! text-muted-foreground">
           https://
         </InputGroupAddon>
         <InputGroupAddon align="inline-end">
diff --git a/apps/v4/app/(app)/(root)/components/input-group-demo.tsx b/apps/v4/app/(app)/(root)/components/input-group-demo.tsx
index 5ffb1ab73b..ca6d52d8d4 100644
--- a/apps/v4/app/(app)/(root)/components/input-group-demo.tsx
+++ b/apps/v4/app/(app)/(root)/components/input-group-demo.tsx
@@ -32,7 +32,7 @@ export function InputGroupDemo() {
         <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
       </InputGroup>
       <InputGroup>
-        <InputGroupInput placeholder="example.com" className="!pl-1" />
+        <InputGroupInput placeholder="example.com" className="pl-1!" />
         <InputGroupAddon>
           <InputGroupText>https://</InputGroupText>
         </InputGroupAddon>
@@ -73,7 +73,7 @@ export function InputGroupDemo() {
             </DropdownMenuContent>
           </DropdownMenu>
           <InputGroupText className="ml-auto">52% used</InputGroupText>
-          <Separator orientation="vertical" className="!h-4" />
+          <Separator orientation="vertical" className="h-4!" />
           <InputGroupButton
             variant="default"
             className="rounded-full"
@@ -87,7 +87,7 @@ export function InputGroupDemo() {
       <InputGroup>
         <InputGroupInput placeholder="@shadcn" />
         <InputGroupAddon align="inline-end">
-          <div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
+          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
             <IconCheck className="size-3 text-white" />
           </div>
         </InputGroupAddon>
diff --git a/apps/v4/app/(app)/(root)/components/item-avatar.tsx b/apps/v4/app/(app)/(root)/components/item-avatar.tsx
index b203de2fde..e63a250a07 100644
--- a/apps/v4/app/(app)/(root)/components/item-avatar.tsx
+++ b/apps/v4/app/(app)/(root)/components/item-avatar.tsx
@@ -42,7 +42,7 @@ export function ItemAvatar() {
       </Item>
       <Item variant="outline">
         <ItemMedia>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
             <Avatar className="hidden sm:flex">
               <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx b/apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
index f020702524..3e84b1ffa5 100644
--- a/apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
+++ b/apps/v4/app/(app)/(root)/components/notion-prompt-form.tsx
@@ -247,7 +247,7 @@ export function NotionPromptForm() {
                 </Command>
               </PopoverContent>
             </Popover>
-            <div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
+            <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
               {mentions.map((mention) => {
                 const item = SAMPLE_DATA.mentionable.find(
                   (item) => item.title === mention
@@ -262,7 +262,7 @@ export function NotionPromptForm() {
                     key={mention}
                     size="sm"
                     variant="secondary"
-                    className="rounded-full !pl-2"
+                    className="rounded-full pl-2!"
                     onClick={() => {
                       setMentions((prev) => prev.filter((m) => m !== mention))
                     }}
@@ -308,7 +308,7 @@ export function NotionPromptForm() {
                 className="min-w-48"
               >
                 <DropdownMenuGroup>
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
                     Select Agent Mode
                   </DropdownMenuLabel>
                   {SAMPLE_DATA.models.map((model) => (
@@ -426,7 +426,7 @@ export function NotionPromptForm() {
                   <DropdownMenuItem>
                     <IconPlus /> Connect Apps
                   </DropdownMenuItem>
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
                     We&apos;ll only search in the sources selected here.
                   </DropdownMenuLabel>
                 </DropdownMenuGroup>
diff --git a/apps/v4/app/(app)/(root)/page.tsx b/apps/v4/app/(app)/(root)/page.tsx
index d21930cc8d..61f8998115 100644
--- a/apps/v4/app/(app)/(root)/page.tsx
+++ b/apps/v4/app/(app)/(root)/page.tsx
@@ -56,7 +56,7 @@ export default function IndexPage() {
         <PageHeaderDescription>{description}</PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm" className="h-[31px] rounded-lg">
-            <Link href="/docs/installation">Get Started</Link>
+            <Link href="/create">New Project</Link>
           </Button>
           <Button asChild size="sm" variant="ghost" className="rounded-lg">
             <Link href="/docs/components">View Components</Link>
@@ -64,12 +64,12 @@ export default function IndexPage() {
         </PageActions>
       </PageHeader>
       <PageNav className="hidden md:flex">
-        <ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+        <ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
         <ThemeSelector className="mr-4 hidden md:flex" />
       </PageNav>
-      <div className="container-wrapper section-soft flex-1 pb-6">
+      <div className="container-wrapper flex-1 section-soft pb-6">
         <div className="container overflow-hidden">
-          <section className="border-border/50 -mx-4 w-[160vw] overflow-hidden rounded-lg border md:hidden md:w-[150vw]">
+          <section className="-mx-4 w-[160vw] overflow-hidden rounded-lg border border-border/50 md:hidden md:w-[150vw]">
             <Image
               src="/r/styles/new-york-v4/dashboard-01-light.png"
               width={1400}
@@ -87,7 +87,7 @@ export default function IndexPage() {
               priority
             />
           </section>
-          <section className="theme-container hidden md:block">
+          <section className="hidden theme-container md:block">
             <RootComponents />
           </section>
         </div>
diff --git a/apps/v4/app/(app)/blocks/layout.tsx b/apps/v4/app/(app)/blocks/layout.tsx
index cc780fd8a0..79bfcd280c 100644
--- a/apps/v4/app/(app)/blocks/layout.tsx
+++ b/apps/v4/app/(app)/blocks/layout.tsx
@@ -71,7 +71,7 @@ export default function BlocksLayout({
           <Link href="/blocks/sidebar">Browse all blocks</Link>
         </Button>
       </PageNav>
-      <div className="container-wrapper section-soft flex-1 md:py-12">
+      <div className="container-wrapper flex-1 section-soft md:py-12">
         <div className="container">{children}</div>
       </div>
     </>
diff --git a/apps/v4/app/(app)/colors/layout.tsx b/apps/v4/app/(app)/colors/layout.tsx
index 58f99ba6a9..0ee9850ca4 100644
--- a/apps/v4/app/(app)/colors/layout.tsx
+++ b/apps/v4/app/(app)/colors/layout.tsx
@@ -62,7 +62,7 @@ export default function ColorsLayout({
       <div className="hidden">
         <div className="container-wrapper">
           <div className="container flex items-center justify-between gap-8 py-4">
-            <ColorsNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+            <ColorsNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
           </div>
         </div>
       </div>
diff --git a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
index d531d3acad..85bcfe394f 100644
--- a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
@@ -134,7 +134,7 @@ export default async function Page(props: {
                 </div>
               </div>
               {doc.description && (
-                <p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
+                <p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
                   {doc.description}
                 </p>
               )}
diff --git a/apps/v4/app/(app)/docs/changelog/page.tsx b/apps/v4/app/(app)/docs/changelog/page.tsx
index eb32733b67..7d08c2be93 100644
--- a/apps/v4/app/(app)/docs/changelog/page.tsx
+++ b/apps/v4/app/(app)/docs/changelog/page.tsx
@@ -57,7 +57,7 @@ export default function ChangelogPage() {
                 </a>
               </Button>
             </div>
-            <p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
+            <p className="text-[1.05rem] text-muted-foreground sm:text-base sm:text-balance md:max-w-[80%]">
               Latest updates and announcements.
             </p>
           </div>
@@ -91,9 +91,9 @@ export default function ChangelogPage() {
                       <Link
                         key={page.url}
                         href={page.url}
-                        className="bg-surface text-surface-foreground hover:bg-surface/80 flex w-full flex-col rounded-xl px-4 py-3 transition-colors"
+                        className="flex w-full flex-col rounded-xl bg-surface px-4 py-3 text-surface-foreground transition-colors hover:bg-surface/80"
                       >
-                        <span className="text-muted-foreground text-xs">
+                        <span className="text-xs text-muted-foreground">
                           {date}
                         </span>
                         <span className="text-sm font-medium">{title}</span>
@@ -110,7 +110,7 @@ export default function ChangelogPage() {
         <div className="h-(--top-spacing) shrink-0"></div>
         <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
           <div className="flex flex-col gap-2 p-4 pt-0 text-sm">
-            <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs font-medium">
+            <p className="sticky top-0 h-6 bg-background text-xs font-medium text-muted-foreground">
               On This Page
             </p>
             {latestPages.map((page) => {
@@ -119,7 +119,7 @@ export default function ChangelogPage() {
                 <Link
                   key={page.url}
                   href={page.url}
-                  className="text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors"
+                  className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
                 >
                   {data.title}
                 </Link>
@@ -128,7 +128,7 @@ export default function ChangelogPage() {
             {olderPages.length > 0 && (
               <a
                 href="#more-updates"
-                className="text-muted-foreground hover:text-foreground text-[0.8rem] no-underline transition-colors"
+                className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground"
               >
                 More Updates
               </a>
diff --git a/apps/v4/app/(app)/docs/layout.tsx b/apps/v4/app/(app)/docs/layout.tsx
index 465f5d0665..b87d79c099 100644
--- a/apps/v4/app/(app)/docs/layout.tsx
+++ b/apps/v4/app/(app)/docs/layout.tsx
@@ -10,7 +10,7 @@ export default function DocsLayout({
   return (
     <div className="container-wrapper flex flex-1 flex-col px-2">
       <SidebarProvider
-        className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]"
+        className="min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)] 3xl:fixed:container 3xl:fixed:px-3"
         style={
           {
             "--sidebar-width": "calc(var(--spacing) * 72)",
diff --git a/apps/v4/app/(app)/examples/authentication/page.tsx b/apps/v4/app/(app)/examples/authentication/page.tsx
index bc499dc57b..aa0147f695 100644
--- a/apps/v4/app/(app)/examples/authentication/page.tsx
+++ b/apps/v4/app/(app)/examples/authentication/page.tsx
@@ -43,8 +43,8 @@ export default function AuthenticationPage() {
         >
           Login
         </Link>
-        <div className="text-primary relative hidden h-full flex-col p-10 lg:flex dark:border-r">
-          <div className="bg-primary/5 absolute inset-0" />
+        <div className="relative hidden h-full flex-col p-10 text-primary lg:flex dark:border-r">
+          <div className="absolute inset-0 bg-primary/5" />
           <div className="relative z-20 flex items-center text-lg font-medium">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -74,7 +74,7 @@ export default function AuthenticationPage() {
               <h1 className="text-2xl font-semibold tracking-tight">
                 Create an account
               </h1>
-              <p className="text-muted-foreground text-sm">
+              <p className="text-sm text-muted-foreground">
                 Enter your email below to create your account
               </p>
             </div>
diff --git a/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx b/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
index c4de911927..e9a10c0f2a 100644
--- a/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/app-sidebar.tsx
@@ -159,10 +159,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton
               asChild
-              className="data-[slot=sidebar-menu-button]:!p-1.5"
+              className="data-[slot=sidebar-menu-button]:p-1.5!"
             >
               <Link href="#">
-                <IconInnerShadowTop className="!size-5" />
+                <IconInnerShadowTop className="size-5!" />
                 <span className="text-base font-semibold">Acme Inc.</span>
               </Link>
             </SidebarMenuButton>
diff --git a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
index 9e9880fbcf..6c3359d836 100644
--- a/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/chart-area-interactive.tsx
@@ -174,7 +174,7 @@ export function ChartAreaInteractive() {
             value={timeRange}
             onValueChange={setTimeRange}
             variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
           >
             <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
             <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
diff --git a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
index 7a039c8161..def0a697fe 100644
--- a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx
@@ -128,9 +128,9 @@ function DragHandle({ id }: { id: number }) {
       {...listeners}
       variant="ghost"
       size="icon"
-      className="text-muted-foreground size-7 hover:bg-transparent"
+      className="size-7 text-muted-foreground hover:bg-transparent"
     >
-      <IconGripVertical className="text-muted-foreground size-3" />
+      <IconGripVertical className="size-3 text-muted-foreground" />
       <span className="sr-only">Drag to reorder</span>
     </Button>
   )
@@ -181,7 +181,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     header: "Section Type",
     cell: ({ row }) => (
       <div className="w-32">
-        <Badge variant="outline" className="text-muted-foreground px-1.5">
+        <Badge variant="outline" className="px-1.5 text-muted-foreground">
           {row.original.type}
         </Badge>
       </div>
@@ -191,7 +191,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     accessorKey: "status",
     header: "Status",
     cell: ({ row }) => (
-      <Badge variant="outline" className="text-muted-foreground px-1.5">
+      <Badge variant="outline" className="px-1.5 text-muted-foreground">
         {row.original.status === "Done" ? (
           <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
         ) : (
@@ -219,7 +219,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Target
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.target}
           id={`${row.original.id}-target`}
         />
@@ -244,7 +244,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Limit
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.limit}
           id={`${row.original.id}-limit`}
         />
@@ -292,7 +292,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
             size="icon"
           >
             <IconDotsVertical />
@@ -425,7 +425,7 @@ export function DataTable({
             <SelectItem value="focus-documents">Focus Documents</SelectItem>
           </SelectContent>
         </Select>
-        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
           <TabsTrigger value="outline">Outline</TabsTrigger>
           <TabsTrigger value="past-performance">
             Past Performance <Badge variant="secondary">3</Badge>
@@ -488,7 +488,7 @@ export function DataTable({
             id={sortableId}
           >
             <Table>
-              <TableHeader className="bg-muted sticky top-0 z-10">
+              <TableHeader className="sticky top-0 z-10 bg-muted">
                 {table.getHeaderGroups().map((headerGroup) => (
                   <TableRow key={headerGroup.id}>
                     {headerGroup.headers.map((header) => {
@@ -531,7 +531,7 @@ export function DataTable({
           </DndContext>
         </div>
         <div className="flex items-center justify-between px-4">
-          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
             {table.getFilteredSelectedRowModel().rows.length} of{" "}
             {table.getFilteredRowModel().rows.length} row(s) selected.
           </div>
@@ -653,7 +653,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
   return (
     <Drawer direction={isMobile ? "bottom" : "right"}>
       <DrawerTrigger asChild>
-        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+        <Button variant="link" className="w-fit px-0 text-left text-foreground">
           {item.header}
         </Button>
       </DrawerTrigger>
diff --git a/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx b/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
index 503c59938a..5a09c82b28 100644
--- a/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-documents.tsx
@@ -52,7 +52,7 @@ export function NavDocuments({
               <DropdownMenuTrigger asChild>
                 <SidebarMenuAction
                   showOnHover
-                  className="data-[state=open]:bg-accent rounded-sm"
+                  className="rounded-sm data-[state=open]:bg-accent"
                 >
                   <IconDots />
                   <span className="sr-only">More</span>
diff --git a/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx b/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
index 4d63e06cf8..bdb066d28e 100644
--- a/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/nav-user.tsx
@@ -55,7 +55,7 @@ export function NavUser({
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{user.name}</span>
-                <span className="text-muted-foreground truncate text-xs">
+                <span className="truncate text-xs text-muted-foreground">
                   {user.email}
                 </span>
               </div>
@@ -76,7 +76,7 @@ export function NavUser({
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{user.name}</span>
-                  <span className="text-muted-foreground truncate text-xs">
+                  <span className="truncate text-xs text-muted-foreground">
                     {user.email}
                   </span>
                 </div>
diff --git a/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx b/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
index f0d1612215..50b2f5662e 100644
--- a/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
+++ b/apps/v4/app/(app)/examples/dashboard/components/site-header.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/registry/new-york-v4/ui/button"
 
 export function SiteHeader() {
   return (
-    <header className="bg-background/90 sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
+    <header className="sticky top-0 z-10 flex h-(--header-height) shrink-0 items-center gap-2 border-b bg-background/90 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
       <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
         <h1 className="text-base font-medium">Documents</h1>
         <div className="ml-auto flex items-center gap-2">
diff --git a/apps/v4/app/(app)/examples/layout.tsx b/apps/v4/app/(app)/examples/layout.tsx
index b8c5b03105..3b8711c52a 100644
--- a/apps/v4/app/(app)/examples/layout.tsx
+++ b/apps/v4/app/(app)/examples/layout.tsx
@@ -65,12 +65,12 @@ export default function ExamplesLayout({
         </PageActions>
       </PageHeader>
       <PageNav id="examples" className="hidden md:flex">
-        <ExamplesNav className="[&>a:first-child]:text-primary flex-1 overflow-hidden" />
+        <ExamplesNav className="flex-1 overflow-hidden [&>a:first-child]:text-primary" />
         <ThemeSelector className="mr-4 hidden md:flex" />
       </PageNav>
-      <div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
-        <div className="theme-container container flex flex-1 scroll-mt-20 flex-col">
-          <div className="bg-background flex flex-col overflow-hidden rounded-lg border bg-clip-padding has-[[data-slot=rtl-components]]:overflow-visible has-[[data-slot=rtl-components]]:border-0 has-[[data-slot=rtl-components]]:bg-transparent md:flex-1 xl:rounded-xl">
+      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
+        <div className="container flex flex-1 scroll-mt-20 flex-col theme-container">
+          <div className="flex flex-col overflow-hidden rounded-lg border bg-background bg-clip-padding has-[[data-slot=rtl-components]]:overflow-visible has-[[data-slot=rtl-components]]:border-0 has-[[data-slot=rtl-components]]:bg-transparent md:flex-1 xl:rounded-xl">
             {children}
           </div>
         </div>
diff --git a/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx b/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
index bc35a65544..1c6234c20a 100644
--- a/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/code-viewer.tsx
@@ -76,7 +76,7 @@ export function CodeViewer() {
             </pre>
           </div>
           <div>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               Your API Key can be found here. You should use environment
               variables or a secret management tool to expose your key to your
               applications.
diff --git a/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx b/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
index 44008c9e2d..54cbe2b4b7 100644
--- a/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/maxlength-selector.tsx
@@ -27,7 +27,7 @@ export function MaxLengthSelector({ defaultValue }: MaxLengthSelectorProps) {
           <div className="grid gap-4">
             <div className="flex items-center justify-between">
               <Label htmlFor="maxlength">Maximum Length</Label>
-              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
                 {value}
               </span>
             </div>
diff --git a/apps/v4/app/(app)/examples/playground/components/model-selector.tsx b/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
index 908dba2dcb..5e5fcd6d76 100644
--- a/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/model-selector.tsx
@@ -78,7 +78,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
             >
               <div className="grid gap-2">
                 <h4 className="leading-none font-medium">{peekedModel.name}</h4>
-                <div className="text-muted-foreground text-sm">
+                <div className="text-sm text-muted-foreground">
                   {peekedModel.description}
                 </div>
                 {peekedModel.strengths ? (
@@ -86,7 +86,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
                     <h5 className="text-sm leading-none font-medium">
                       Strengths
                     </h5>
-                    <ul className="text-muted-foreground text-sm">
+                    <ul className="text-sm text-muted-foreground">
                       {peekedModel.strengths}
                     </ul>
                   </div>
diff --git a/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx b/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
index a1178653c5..2681820cd2 100644
--- a/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/preset-actions.tsx
@@ -70,7 +70,7 @@ export function PresetActions() {
             </DialogDescription>
           </DialogHeader>
           <div className="py-6">
-            <h4 className="text-muted-foreground text-sm">
+            <h4 className="text-sm text-muted-foreground">
               Playground Warnings
             </h4>
             <div className="flex items-start justify-between gap-4 pt-3">
@@ -79,7 +79,7 @@ export function PresetActions() {
                 <span className="font-semibold">
                   Show a warning when content is flagged
                 </span>
-                <span className="text-muted-foreground text-sm">
+                <span className="text-sm text-muted-foreground">
                   A warning will be shown when sexual, hateful, violent or
                   self-harm content is detected.
                 </span>
diff --git a/apps/v4/app/(app)/examples/playground/components/preset-share.tsx b/apps/v4/app/(app)/examples/playground/components/preset-share.tsx
index 60ad0d2d38..4520524722 100644
--- a/apps/v4/app/(app)/examples/playground/components/preset-share.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/preset-share.tsx
@@ -18,7 +18,7 @@ export function PresetShare() {
       <PopoverContent align="end" className="flex w-[520px] flex-col gap-4">
         <div className="flex flex-col gap-1 text-center sm:text-left">
           <h3 className="text-lg font-semibold">Share preset</h3>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             Anyone who has this link and an OpenAI account will be able to view
             this.
           </p>
diff --git a/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx b/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
index cbf308bd64..79ea325902 100644
--- a/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/temperature-selector.tsx
@@ -29,7 +29,7 @@ export function TemperatureSelector({
           <div className="grid gap-4">
             <div className="flex items-center justify-between">
               <Label htmlFor="temperature">Temperature</Label>
-              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
                 {value}
               </span>
             </div>
diff --git a/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx b/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
index 1f02acd323..bee9b1f949 100644
--- a/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
+++ b/apps/v4/app/(app)/examples/playground/components/top-p-selector.tsx
@@ -27,7 +27,7 @@ export function TopPSelector({ defaultValue }: TopPSelectorProps) {
           <div className="grid gap-4">
             <div className="flex items-center justify-between">
               <Label htmlFor="top-p">Top P</Label>
-              <span className="text-muted-foreground hover:border-border w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm">
+              <span className="w-12 rounded-md border border-transparent px-2 py-0.5 text-right text-sm text-muted-foreground hover:border-border">
                 {value}
               </span>
             </div>
diff --git a/apps/v4/app/(app)/examples/playground/page.tsx b/apps/v4/app/(app)/examples/playground/page.tsx
index 26da238993..48ef5e244f 100644
--- a/apps/v4/app/(app)/examples/playground/page.tsx
+++ b/apps/v4/app/(app)/examples/playground/page.tsx
@@ -278,7 +278,7 @@ export default function PlaygroundPage() {
                       placeholder="We're writing to [inset]. Congrats from OpenAI!"
                       className="h-full min-h-[300px] p-4 lg:min-h-[700px] xl:min-h-[700px]"
                     />
-                    <div className="bg-muted rounded-md border"></div>
+                    <div className="rounded-md border bg-muted"></div>
                   </div>
                   <div className="flex items-center gap-2">
                     <Button>Submit</Button>
@@ -312,7 +312,7 @@ export default function PlaygroundPage() {
                         />
                       </div>
                     </div>
-                    <div className="bg-muted min-h-[400px] rounded-md border lg:min-h-[700px]" />
+                    <div className="min-h-[400px] rounded-md border bg-muted lg:min-h-[700px]" />
                   </div>
                   <div className="flex items-center gap-2">
                     <Button>Submit</Button>
diff --git a/apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx b/apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx
index 2ec0b008d6..eabe55bed9 100644
--- a/apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/appearance-settings.tsx
@@ -128,7 +128,7 @@ export function AppearanceSettings() {
                 value={gpuCount}
                 onChange={handleGpuInputChange}
                 size={3}
-                className="h-7 !w-14 font-mono"
+                className="h-7 w-14! font-mono"
                 maxLength={3}
               />
               <Button
diff --git a/apps/v4/app/(app)/examples/rtl/components/field-hear.tsx b/apps/v4/app/(app)/examples/rtl/components/field-hear.tsx
index 8eb14c554e..e982bfdc66 100644
--- a/apps/v4/app/(app)/examples/rtl/components/field-hear.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/field-hear.tsx
@@ -63,7 +63,7 @@ export function FieldHear() {
                     <FieldLabel
                       htmlFor={`rtl-${option.value}`}
                       key={option.value}
-                      className="!w-fit"
+                      className="w-fit!"
                     >
                       <Field
                         orientation="horizontal"
diff --git a/apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx b/apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx
index 89997360de..560d856206 100644
--- a/apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/input-group-button.tsx
@@ -50,7 +50,7 @@ export function InputGroupButtonExample() {
         {t.inputLabel}
       </Label>
       <InputGroup className="[--radius:9999px]">
-        <InputGroupInput id="input-secure-rtl" className="!pr-0.5" />
+        <InputGroupInput id="input-secure-rtl" className="pr-0.5!" />
         <InputGroupAddon>
           <Popover>
             <PopoverTrigger
diff --git a/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx b/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
index e7ae99a0c6..59ccd0137e 100644
--- a/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/input-group-demo.tsx
@@ -116,7 +116,7 @@ export function InputGroupDemo() {
             </DropdownMenuContent>
           </DropdownMenu>
           <InputGroupText className="ms-auto">{t.used}</InputGroupText>
-          <Separator orientation="vertical" className="!h-4" />
+          <Separator orientation="vertical" className="h-4!" />
           <InputGroupButton
             variant="default"
             className="rounded-full"
@@ -130,7 +130,7 @@ export function InputGroupDemo() {
       <InputGroup>
         <InputGroupInput placeholder="shadcn" />
         <InputGroupAddon align="inline-end">
-          <div className="bg-primary text-foreground flex size-4 items-center justify-center rounded-full">
+          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-foreground">
             <IconCheck className="size-3 text-white" />
           </div>
         </InputGroupAddon>
diff --git a/apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx b/apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx
index 88bc254d83..3e6c89b624 100644
--- a/apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx
+++ b/apps/v4/app/(app)/examples/rtl/components/notion-prompt-form.tsx
@@ -288,7 +288,7 @@ export function NotionPromptForm() {
                   </Command>
                 </PopoverContent>
               </Popover>
-              <div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
+              <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
                 {mentions.map((mention) => {
                   const item = SAMPLE_DATA.mentionable.find(
                     (item) => item.title === mention
@@ -303,7 +303,7 @@ export function NotionPromptForm() {
                       key={mention}
                       size="sm"
                       variant="secondary"
-                      className="rounded-full !pr-2"
+                      className="rounded-full pr-2!"
                       onClick={() => {
                         setMentions((prev) => prev.filter((m) => m !== mention))
                       }}
@@ -352,7 +352,7 @@ export function NotionPromptForm() {
                   dir={t.dir}
                 >
                   <DropdownMenuGroup className="w-48">
-                    <DropdownMenuLabel className="text-muted-foreground text-xs">
+                    <DropdownMenuLabel className="text-xs text-muted-foreground">
                       {t.selectAgentMode}
                     </DropdownMenuLabel>
                     {SAMPLE_DATA.models.map((model) => (
@@ -493,7 +493,7 @@ export function NotionPromptForm() {
                     <DropdownMenuItem>
                       <IconPlus /> {t.connectApps}
                     </DropdownMenuItem>
-                    <DropdownMenuLabel className="text-muted-foreground text-xs">
+                    <DropdownMenuLabel className="text-xs text-muted-foreground">
                       {t.searchSourcesNote}
                     </DropdownMenuLabel>
                   </DropdownMenuGroup>
diff --git a/apps/v4/app/(app)/examples/tasks/components/columns.tsx b/apps/v4/app/(app)/examples/tasks/components/columns.tsx
index 8976274e5c..63372ad304 100644
--- a/apps/v4/app/(app)/examples/tasks/components/columns.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/columns.tsx
@@ -79,7 +79,7 @@ export const columns: ColumnDef<Task>[] = [
       return (
         <div className="flex w-[100px] items-center gap-2">
           {status.icon && (
-            <status.icon className="text-muted-foreground size-4" />
+            <status.icon className="size-4 text-muted-foreground" />
           )}
           <span>{status.label}</span>
         </div>
@@ -106,7 +106,7 @@ export const columns: ColumnDef<Task>[] = [
       return (
         <div className="flex items-center gap-2">
           {priority.icon && (
-            <priority.icon className="text-muted-foreground size-4" />
+            <priority.icon className="size-4 text-muted-foreground" />
           )}
           <span>{priority.label}</span>
         </div>
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
index 3204b182a7..a2adaa1c47 100644
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-column-header.tsx
@@ -33,7 +33,7 @@ export function DataTableColumnHeader<TData, TValue>({
           <Button
             variant="ghost"
             size="sm"
-            className="data-[state=open]:bg-accent -ml-3 h-8"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
           >
             <span>{title}</span>
             {column.getIsSorted() === "desc" ? (
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
index 8c657ffad8..f00feaed66 100644
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx
@@ -107,18 +107,18 @@ export function DataTableFacetedFilter<TData, TValue>({
                       className={cn(
                         "flex size-4 items-center justify-center rounded-[4px] border",
                         isSelected
-                          ? "bg-primary border-primary text-primary-foreground"
+                          ? "border-primary bg-primary text-primary-foreground"
                           : "border-input [&_svg]:invisible"
                       )}
                     >
-                      <Check className="text-primary-foreground size-3.5" />
+                      <Check className="size-3.5 text-primary-foreground" />
                     </div>
                     {option.icon && (
-                      <option.icon className="text-muted-foreground size-4" />
+                      <option.icon className="size-4 text-muted-foreground" />
                     )}
                     <span>{option.label}</span>
                     {facets?.get(option.value) && (
-                      <span className="text-muted-foreground ml-auto flex size-4 items-center justify-center font-mono text-xs">
+                      <span className="ml-auto flex size-4 items-center justify-center font-mono text-xs text-muted-foreground">
                         {facets.get(option.value)}
                       </span>
                     )}
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
index b6782a9c54..04cefa556a 100644
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-pagination.tsx
@@ -24,7 +24,7 @@ export function DataTablePagination<TData>({
 }: DataTablePaginationProps<TData>) {
   return (
     <div className="flex items-center justify-between px-2">
-      <div className="text-muted-foreground flex-1 text-sm">
+      <div className="flex-1 text-sm text-muted-foreground">
         {table.getFilteredSelectedRowModel().rows.length} of{" "}
         {table.getFilteredRowModel().rows.length} row(s) selected.
       </div>
diff --git a/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx b/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
index 5e0c80bcdb..61040bb47b 100644
--- a/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/data-table-row-actions.tsx
@@ -36,7 +36,7 @@ export function DataTableRowActions<TData>({
         <Button
           variant="ghost"
           size="icon"
-          className="data-[state=open]:bg-muted size-8"
+          className="size-8 data-[state=open]:bg-muted"
         >
           <MoreHorizontal />
           <span className="sr-only">Open menu</span>
diff --git a/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx b/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
index 8b54a943a6..378054f9ff 100644
--- a/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
+++ b/apps/v4/app/(app)/examples/tasks/components/user-nav.tsx
@@ -30,7 +30,7 @@ export function UserNav() {
         <DropdownMenuLabel className="font-normal">
           <div className="flex flex-col space-y-1">
             <p className="text-sm leading-none font-medium">shadcn</p>
-            <p className="text-muted-foreground text-xs leading-none">
+            <p className="text-xs leading-none text-muted-foreground">
               m@example.com
             </p>
           </div>
diff --git a/apps/v4/app/(app)/layout.tsx b/apps/v4/app/(app)/layout.tsx
index b991fac547..a90385a247 100644
--- a/apps/v4/app/(app)/layout.tsx
+++ b/apps/v4/app/(app)/layout.tsx
@@ -5,7 +5,7 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div
       data-slot="layout"
-      className="bg-background relative z-10 flex min-h-svh flex-col"
+      className="relative z-10 flex min-h-svh flex-col bg-background"
     >
       <SiteHeader />
       <main className="flex flex-1 flex-col">{children}</main>
diff --git a/apps/v4/app/(app)/themes/page.tsx b/apps/v4/app/(app)/themes/page.tsx
index ed0548e614..a9d44bd5f6 100644
--- a/apps/v4/app/(app)/themes/page.tsx
+++ b/apps/v4/app/(app)/themes/page.tsx
@@ -12,8 +12,8 @@ export default function ThemesPage() {
           <ThemeCustomizer />
         </div>
       </div>
-      <div className="container-wrapper section-soft flex flex-1 flex-col pb-6">
-        <div className="theme-container container flex flex-1 flex-col">
+      <div className="container-wrapper flex flex-1 flex-col section-soft pb-6">
+        <div className="container flex flex-1 flex-col theme-container">
           <CardsDemo />
         </div>
       </div>
diff --git a/apps/v4/app/(create)/components/accent-picker.tsx b/apps/v4/app/(create)/components/accent-picker.tsx
index 85364ad491..ae83121779 100644
--- a/apps/v4/app/(create)/components/accent-picker.tsx
+++ b/apps/v4/app/(create)/components/accent-picker.tsx
@@ -26,23 +26,23 @@ export function MenuAccentPicker({
   )
 
   return (
-    <div className="group/picker relative">
+    <div className="group/picker relative pr-3 md:pr-0">
       <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Menu Accent</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Menu Accent</div>
+            <div className="text-sm font-medium text-foreground">
               {currentAccent?.label}
             </div>
           </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="128"
               height="128"
               viewBox="0 0 24 24"
               fill="none"
-              className="text-foreground"
+              className="size-4 text-foreground"
             >
               <path
                 d="M19 12.1294L12.9388 18.207C11.1557 19.9949 10.2641 20.8889 9.16993 20.9877C8.98904 21.0041 8.80705 21.0041 8.62616 20.9877C7.53195 20.8889 6.64039 19.9949 4.85726 18.207L2.83687 16.1811C1.72104 15.0622 1.72104 13.2482 2.83687 12.1294M19 12.1294L10.9184 4.02587M19 12.1294H2.83687M10.9184 4.02587L2.83687 12.1294M10.9184 4.02587L8.89805 2"
@@ -51,7 +51,7 @@ export function MenuAccentPicker({
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 data-accent={currentAccent?.value}
-                className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
+                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
               ></path>
               <path
                 d="M22 20C22 21.1046 21.1046 22 20 22C18.8954 22 18 21.1046 18 20C18 18.8954 20 17 20 17C20 17 22 18.8954 22 20Z"
@@ -60,7 +60,7 @@ export function MenuAccentPicker({
                 strokeLinecap="round"
                 strokeLinejoin="round"
                 data-accent={currentAccent?.value}
-                className="data-[accent=bold]:fill-foreground fill-muted-foreground/30"
+                className="fill-muted-foreground/30 data-[accent=bold]:fill-foreground"
               ></path>
             </svg>
           </div>
@@ -78,7 +78,11 @@ export function MenuAccentPicker({
           >
             <PickerGroup>
               {MENU_ACCENTS.map((accent) => (
-                <PickerRadioItem key={accent.value} value={accent.value}>
+                <PickerRadioItem
+                  key={accent.value}
+                  value={accent.value}
+                  closeOnClick={isMobile}
+                >
                   {accent.label}
                 </PickerRadioItem>
               ))}
@@ -88,7 +92,7 @@ export function MenuAccentPicker({
       </Picker>
       <LockButton
         param="menuAccent"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
       />
     </div>
   )
diff --git a/apps/v4/app/(create)/components/action-menu.tsx b/apps/v4/app/(create)/components/action-menu.tsx
new file mode 100644
index 0000000000..0e6b508ede
--- /dev/null
+++ b/apps/v4/app/(create)/components/action-menu.tsx
@@ -0,0 +1,88 @@
+"use client"
+
+import Script from "next/script"
+import {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/examples/base/ui/command"
+import { type RegistryItem } from "shadcn/schema"
+
+import { useActionMenu } from "@/app/(create)/hooks/use-action-menu"
+
+export const CMD_K_FORWARD_TYPE = "cmd-k-forward"
+
+export function ActionMenu({
+  itemsByBase,
+}: {
+  itemsByBase: Record<string, Pick<RegistryItem, "name" | "title" | "type">[]>
+}) {
+  const {
+    activeRegistryName,
+    getCommandValue,
+    groups,
+    handleSelect,
+    open,
+    setOpen,
+  } = useActionMenu(itemsByBase)
+
+  return (
+    <CommandDialog open={open} onOpenChange={setOpen} className="animate-none!">
+      <Command loop>
+        <CommandInput placeholder="Search" />
+        <CommandList>
+          <CommandEmpty>No items found.</CommandEmpty>
+          <CommandGroup>
+            {groups.map((group) =>
+              group.items.map((item) => (
+                <CommandItem
+                  key={item.id}
+                  value={getCommandValue(item)}
+                  data-checked={activeRegistryName === item.registryName}
+                  className="px-2"
+                  onSelect={() => {
+                    handleSelect(item.registryName)
+                  }}
+                >
+                  {item.label}
+                </CommandItem>
+              ))
+            )}
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </CommandDialog>
+  )
+}
+
+export function ActionMenuScript() {
+  return (
+    <Script
+      id="design-system-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              // Forward Cmd/Ctrl + K (and P) to parent
+              document.addEventListener('keydown', function(e) {
+                if ((e.key === 'k' || e.key === 'p') && (e.metaKey || e.ctrlKey)) {
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({
+                      type: '${CMD_K_FORWARD_TYPE}',
+                      key: e.key
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}
diff --git a/apps/v4/app/(create)/components/base-color-picker.tsx b/apps/v4/app/(create)/components/base-color-picker.tsx
index 65077a7de1..e0d1ec1d7d 100644
--- a/apps/v4/app/(create)/components/base-color-picker.tsx
+++ b/apps/v4/app/(create)/components/base-color-picker.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { useTheme } from "next-themes"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { BASE_COLORS, type BaseColorName } from "@/registry/config"
@@ -10,10 +9,8 @@ import {
   Picker,
   PickerContent,
   PickerGroup,
-  PickerItem,
   PickerRadioGroup,
   PickerRadioItem,
-  PickerSeparator,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
@@ -25,7 +22,6 @@ export function BaseColorPicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const { resolvedTheme, setTheme } = useTheme()
   const mounted = useMounted()
   const [params, setParams] = useDesignSystemSearchParams()
 
@@ -39,22 +35,20 @@ export function BaseColorPicker({
       <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Base Color</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Base Color</div>
+            <div className="text-sm font-medium text-foreground">
               {currentBaseColor?.title}
             </div>
           </div>
-          {mounted && resolvedTheme && (
+          {mounted && (
             <div
               style={
                 {
                   "--color":
-                    currentBaseColor?.cssVars?.[
-                      resolvedTheme as "light" | "dark"
-                    ]?.["muted-foreground"],
+                    currentBaseColor?.cssVars?.dark?.["muted-foreground"],
                 } as React.CSSProperties
               }
-              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2.5"
             />
           )}
         </PickerTrigger>
@@ -66,59 +60,26 @@ export function BaseColorPicker({
           <PickerRadioGroup
             value={currentBaseColor?.name}
             onValueChange={(value) => {
-              if (value === "dark") {
-                setTheme(resolvedTheme === "dark" ? "light" : "dark")
-                return
-              }
-
               setParams({ baseColor: value as BaseColorName })
             }}
           >
             <PickerGroup>
               {BASE_COLORS.map((baseColor) => (
-                <PickerRadioItem key={baseColor.name} value={baseColor.name}>
-                  <div className="flex items-center gap-2">
-                    {mounted && resolvedTheme && (
-                      <div
-                        style={
-                          {
-                            "--color":
-                              baseColor.cssVars?.[
-                                resolvedTheme as "light" | "dark"
-                              ]?.["muted-foreground"],
-                          } as React.CSSProperties
-                        }
-                        className="size-4 rounded-full bg-(--color)"
-                      />
-                    )}
-                    {baseColor.title}
-                  </div>
+                <PickerRadioItem
+                  key={baseColor.name}
+                  value={baseColor.name}
+                  closeOnClick={isMobile}
+                >
+                  {baseColor.title}
                 </PickerRadioItem>
               ))}
             </PickerGroup>
-            <PickerSeparator />
-            <PickerGroup>
-              <PickerItem
-                onClick={() => {
-                  setTheme(resolvedTheme === "dark" ? "light" : "dark")
-                }}
-              >
-                <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                  <div>
-                    Switch to {resolvedTheme === "dark" ? "Light" : "Dark"} Mode
-                  </div>
-                  <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                    Base colors are easier to see in dark mode.
-                  </div>
-                </div>
-              </PickerItem>
-            </PickerGroup>
           </PickerRadioGroup>
         </PickerContent>
       </Picker>
       <LockButton
         param="baseColor"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
       />
     </div>
   )
diff --git a/apps/v4/app/(create)/components/base-picker.tsx b/apps/v4/app/(create)/components/base-picker.tsx
index c6da642ae6..f43b11460d 100644
--- a/apps/v4/app/(create)/components/base-picker.tsx
+++ b/apps/v4/app/(create)/components/base-picker.tsx
@@ -40,49 +40,47 @@ export function BasePicker({
   )
 
   return (
-    <Picker>
-      <PickerTrigger>
-        <div className="flex flex-col justify-start text-left">
-          <div className="text-muted-foreground text-xs">Component Library</div>
-          <div className="text-foreground text-sm font-medium">
-            {currentBase?.title}
+    <div className="group/picker relative">
+      <Picker>
+        <PickerTrigger>
+          <div className="flex flex-col justify-start text-left">
+            <div className="text-xs text-muted-foreground">Base</div>
+            <div className="text-sm font-medium text-foreground">
+              {currentBase?.title}
+            </div>
           </div>
-        </div>
-        {currentBase?.meta?.logo && (
-          <div
-            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
-            dangerouslySetInnerHTML={{
-              __html: currentBase.meta.logo,
-            }}
-          />
-        )}
-      </PickerTrigger>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-      >
-        <PickerRadioGroup
-          value={currentBase?.name}
-          onValueChange={handleValueChange}
+          {currentBase?.meta?.logo && (
+            <div
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 text-foreground select-none md:right-2.5 *:[svg]:size-4 *:[svg]:text-foreground!"
+              dangerouslySetInnerHTML={{
+                __html: currentBase.meta.logo,
+              }}
+            />
+          )}
+        </PickerTrigger>
+        <PickerContent
+          anchor={isMobile ? anchorRef : undefined}
+          side={isMobile ? "top" : "right"}
+          align={isMobile ? "center" : "start"}
         >
-          <PickerGroup>
-            {BASES.map((base) => (
-              <PickerRadioItem key={base.name} value={base.name}>
-                {base.meta?.logo && (
-                  <div
-                    className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
-                    dangerouslySetInnerHTML={{
-                      __html: base.meta.logo,
-                    }}
-                  />
-                )}
-                {base.title}
-              </PickerRadioItem>
-            ))}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
+          <PickerRadioGroup
+            value={currentBase?.name}
+            onValueChange={handleValueChange}
+          >
+            <PickerGroup>
+              {BASES.map((base) => (
+                <PickerRadioItem
+                  key={base.name}
+                  value={base.name}
+                  closeOnClick={isMobile}
+                >
+                  {base.title}
+                </PickerRadioItem>
+              ))}
+            </PickerGroup>
+          </PickerRadioGroup>
+        </PickerContent>
+      </Picker>
+    </div>
   )
 }
diff --git a/apps/v4/app/(create)/components/copy-preset.tsx b/apps/v4/app/(create)/components/copy-preset.tsx
new file mode 100644
index 0000000000..7e94c8aec3
--- /dev/null
+++ b/apps/v4/app/(create)/components/copy-preset.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+
+import { cn } from "@/lib/utils"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
+
+export function CopyPreset({ className }: React.ComponentProps<typeof Button>) {
+  const presetCode = usePresetCode()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const handleCopy = React.useCallback(() => {
+    copyToClipboardWithMeta(`--preset ${presetCode}`, {
+      name: "copy_preset_command",
+      properties: {
+        preset: presetCode,
+      },
+    })
+    setHasCopied(true)
+  }, [presetCode])
+
+  return (
+    <Button
+      variant="outline"
+      onClick={handleCopy}
+      className={cn(
+        "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
+        className
+      )}
+    >
+      <span>{hasCopied ? "Copied" : `--preset ${presetCode}`}</span>
+    </Button>
+  )
+}
diff --git a/apps/v4/app/(create)/components/customizer.tsx b/apps/v4/app/(create)/components/customizer.tsx
index 7354318b75..352cf94632 100644
--- a/apps/v4/app/(create)/components/customizer.tsx
+++ b/apps/v4/app/(create)/components/customizer.tsx
@@ -1,29 +1,43 @@
 "use client"
 
 import * as React from "react"
-import { Settings05Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/examples/base/ui/card"
+import { FieldGroup } from "@/examples/base/ui/field"
+import { Separator } from "@/examples/base/ui/separator"
+import { CardTitle } from "@/examples/radix/ui/card"
+import { type RegistryItem } from "shadcn/schema"
 
 import { useIsMobile } from "@/hooks/use-mobile"
-import { getThemesForBaseColor, PRESETS, STYLES } from "@/registry/config"
-import { FieldGroup } from "@/registry/new-york-v4/ui/field"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { getThemesForBaseColor, STYLES } from "@/registry/config"
 import { MenuAccentPicker } from "@/app/(create)/components/accent-picker"
+import { ActionMenu } from "@/app/(create)/components/action-menu"
 import { BaseColorPicker } from "@/app/(create)/components/base-color-picker"
 import { BasePicker } from "@/app/(create)/components/base-picker"
+import { CopyPreset } from "@/app/(create)/components/copy-preset"
 import { FontPicker } from "@/app/(create)/components/font-picker"
 import { IconLibraryPicker } from "@/app/(create)/components/icon-library-picker"
+import { MainMenu } from "@/app/(create)/components/main-menu"
 import { MenuColorPicker } from "@/app/(create)/components/menu-picker"
-import { PresetPicker } from "@/app/(create)/components/preset-picker"
+import { ProjectForm } from "@/app/(create)/components/project-form"
 import { RadiusPicker } from "@/app/(create)/components/radius-picker"
 import { RandomButton } from "@/app/(create)/components/random-button"
-import { ResetButton } from "@/app/(create)/components/reset-button"
+import { ResetDialog } from "@/app/(create)/components/reset-button"
 import { StylePicker } from "@/app/(create)/components/style-picker"
 import { ThemePicker } from "@/app/(create)/components/theme-picker"
+import { V0Button } from "@/app/(create)/components/v0-button"
 import { FONTS } from "@/app/(create)/lib/fonts"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
-export function Customizer() {
+export function Customizer({
+  itemsByBase,
+}: {
+  itemsByBase: Record<string, Pick<RegistryItem, "name" | "title" | "type">[]>
+}) {
   const [params] = useDesignSystemSearchParams()
   const isMobile = useIsMobile()
   const anchorRef = React.useRef<HTMLDivElement | null>(null)
@@ -34,17 +48,16 @@ export function Customizer() {
   )
 
   return (
-    <div
-      className="no-scrollbar -mx-2.5 flex flex-col overflow-y-auto p-1 md:mx-0 md:h-[calc(100svh-var(--header-height)-2rem)] md:w-48 md:gap-0 md:py-0"
+    <Card
+      className="dark top-24 right-12 isolate z-10 max-h-full min-h-0 w-full self-start rounded-2xl bg-card/90 shadow-xl backdrop-blur-xl md:w-(--customizer-width)"
       ref={anchorRef}
+      size="sm"
     >
-      <div className="no-scrollbar h-14 overflow-x-auto overflow-y-hidden p-px md:h-full md:overflow-x-hidden md:overflow-y-auto">
-        <FieldGroup className="flex h-full flex-1 flex-row gap-2 md:flex-col md:gap-0">
-          <PresetPicker
-            presets={PRESETS}
-            isMobile={isMobile}
-            anchorRef={anchorRef}
-          />
+      <CardHeader className="hidden items-center justify-between gap-2 border-b group-data-reversed/layout:flex-row-reverse md:flex">
+        <MainMenu />
+      </CardHeader>
+      <CardContent className="no-scrollbar min-h-0 flex-1 overflow-x-auto overflow-y-hidden md:overflow-y-auto">
+        <FieldGroup className="flex-row gap-2.5 py-px md:flex-col md:gap-3.25">
           <BasePicker isMobile={isMobile} anchorRef={anchorRef} />
           <StylePicker
             styles={STYLES}
@@ -62,12 +75,14 @@ export function Customizer() {
           <RadiusPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuColorPicker isMobile={isMobile} anchorRef={anchorRef} />
           <MenuAccentPicker isMobile={isMobile} anchorRef={anchorRef} />
-          <div className="mt-auto hidden w-full flex-col items-center gap-0 md:flex">
-            <RandomButton />
-            <ResetButton />
-          </div>
         </FieldGroup>
-      </div>
-    </div>
+      </CardContent>
+      <CardFooter className="flex min-w-0 gap-2 md:flex-col md:**:[button,a]:w-full">
+        <CopyPreset className="flex-1 md:flex-none" />
+        <RandomButton className="flex-1 md:flex-none" />
+        <ActionMenu itemsByBase={itemsByBase} />
+        <ResetDialog />
+      </CardFooter>
+    </Card>
   )
 }
diff --git a/apps/v4/app/(create)/components/design-system-provider.tsx b/apps/v4/app/(create)/components/design-system-provider.tsx
index dae5585076..f5c8d0dc58 100644
--- a/apps/v4/app/(create)/components/design-system-provider.tsx
+++ b/apps/v4/app/(create)/components/design-system-provider.tsx
@@ -6,25 +6,53 @@ import {
   buildRegistryTheme,
   DEFAULT_CONFIG,
   type DesignSystemConfig,
+  type RadiusValue,
 } from "@/registry/config"
 import { useIframeMessageListener } from "@/app/(create)/hooks/use-iframe-sync"
 import { FONTS } from "@/app/(create)/lib/fonts"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import {
+  useDesignSystemSearchParams,
+  type DesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
 
 export function DesignSystemProvider({
   children,
 }: {
   children: React.ReactNode
 }) {
-  const [
-    { style, theme, font, baseColor, menuAccent, menuColor, radius },
-    setSearchParams,
-  ] = useDesignSystemSearchParams({
+  const [searchParams, setSearchParams] = useDesignSystemSearchParams({
     shallow: true, // No need to go through the server…
     history: "replace", // …or push updates into the iframe history.
   })
-  useIframeMessageListener("design-system-params", setSearchParams)
+  const [liveSearchParams, setLiveSearchParams] = React.useState(searchParams)
   const [isReady, setIsReady] = React.useState(false)
+  const { style, theme, font, baseColor, menuAccent, menuColor, radius } =
+    liveSearchParams
+  const effectiveRadius = style === "lyra" ? "none" : radius
+
+  React.useEffect(() => {
+    setLiveSearchParams(searchParams)
+  }, [searchParams])
+
+  const handleDesignSystemMessage = React.useCallback(
+    (nextParams: DesignSystemSearchParams) => {
+      setLiveSearchParams(nextParams)
+      setSearchParams(nextParams)
+    },
+    [setSearchParams]
+  )
+
+  useIframeMessageListener("design-system-params", handleDesignSystemMessage)
+
+  React.useEffect(() => {
+    if (style === "lyra" && radius !== "none") {
+      setLiveSearchParams((prev) => ({
+        ...prev,
+        radius: "none",
+      }))
+      setSearchParams({ radius: "none" as RadiusValue })
+    }
+  }, [style, radius, setSearchParams])
 
   // Use useLayoutEffect for synchronous style updates to prevent flash.
   React.useLayoutEffect(() => {
@@ -34,23 +62,20 @@ export function DesignSystemProvider({
 
     const body = document.body
 
-    // Update style class in place (remove old, add new).
-    body.classList.forEach((className) => {
-      if (className.startsWith("style-")) {
+    // Iterate over a snapshot so removals do not affect traversal.
+    Array.from(body.classList).forEach((className) => {
+      if (
+        className.startsWith("style-") ||
+        className.startsWith("base-color-")
+      ) {
         body.classList.remove(className)
       }
     })
-    body.classList.add(`style-${style}`)
-
-    // Update base color class in place.
-    body.classList.forEach((className) => {
-      if (className.startsWith("base-color-")) {
-        body.classList.remove(className)
-      }
-    })
-    body.classList.add(`base-color-${baseColor}`)
+    body.classList.add(`style-${style}`, `base-color-${baseColor}`)
 
     // Update font.
+    // Always set --font-sans for the preview so the selected font is visible.
+    // The font type (sans/serif/mono) is metadata for the CLI updater.
     const selectedFont = FONTS.find((f) => f.value === font)
     if (selectedFont) {
       const fontFamily = selectedFont.font.style.fontFamily
@@ -61,7 +86,7 @@ export function DesignSystemProvider({
   }, [style, theme, font, baseColor])
 
   const registryTheme = React.useMemo(() => {
-    if (!baseColor || !theme || !menuAccent || !radius) {
+    if (!baseColor || !theme || !menuAccent || !effectiveRadius) {
       return null
     }
 
@@ -70,11 +95,11 @@ export function DesignSystemProvider({
       baseColor,
       theme,
       menuAccent,
-      radius,
+      radius: effectiveRadius,
     }
 
     return buildRegistryTheme(config)
-  }, [baseColor, theme, menuAccent, radius])
+  }, [baseColor, theme, menuAccent, effectiveRadius])
 
   // Use useLayoutEffect for synchronous CSS var updates.
   React.useLayoutEffect(() => {
diff --git a/apps/v4/app/(create)/components/font-picker.tsx b/apps/v4/app/(create)/components/font-picker.tsx
index 5276e8a61a..895b735429 100644
--- a/apps/v4/app/(create)/components/font-picker.tsx
+++ b/apps/v4/app/(create)/components/font-picker.tsx
@@ -14,6 +14,7 @@ import {
   Picker,
   PickerContent,
   PickerGroup,
+  PickerLabel,
   PickerRadioGroup,
   PickerRadioItem,
   PickerSeparator,
@@ -37,19 +38,38 @@ export function FontPicker({
     () => fonts.find((font) => font.value === params.font),
     [fonts, params.font]
   )
+  const groupedFonts = React.useMemo(() => {
+    const groups = new Map<Font["type"], Font[]>()
+
+    for (const font of fonts) {
+      const existing = groups.get(font.type)
+      if (existing) {
+        existing.push(font)
+        continue
+      }
+
+      groups.set(font.type, [font])
+    }
+
+    return Array.from(groups.entries()).map(([type, items]) => ({
+      type,
+      label: `${type.charAt(0).toUpperCase()}${type.slice(1)}`,
+      items,
+    }))
+  }, [fonts])
 
   return (
     <div className="group/picker relative">
       <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Font</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Font</div>
+            <div className="text-sm font-medium text-foreground">
               {currentFont?.name}
             </div>
           </div>
           <div
-            className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none"
+            className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5"
             style={{ fontFamily: currentFont?.font.style.fontFamily }}
           >
             Aa
@@ -59,7 +79,7 @@ export function FontPicker({
           anchor={isMobile ? anchorRef : undefined}
           side={isMobile ? "top" : "right"}
           align={isMobile ? "center" : "start"}
-          className="max-h-96 md:w-72"
+          className="max-h-96"
         >
           <PickerRadioGroup
             value={currentFont?.value}
@@ -67,36 +87,26 @@ export function FontPicker({
               setParams({ font: value as FontValue })
             }}
           >
-            <PickerGroup>
-              {fonts.map((font, index) => (
-                <React.Fragment key={font.value}>
-                  <PickerRadioItem value={font.value}>
-                    <Item size="xs">
-                      <ItemContent className="gap-1">
-                        <ItemTitle className="text-muted-foreground text-xs font-medium">
-                          {font.name}
-                        </ItemTitle>
-                        <ItemDescription
-                          style={{ fontFamily: font.font.style.fontFamily }}
-                        >
-                          Designers love packing quirky glyphs into test
-                          phrases.
-                        </ItemDescription>
-                      </ItemContent>
-                    </Item>
+            {groupedFonts.map((group) => (
+              <PickerGroup key={group.type}>
+                <PickerLabel>{group.label}</PickerLabel>
+                {group.items.map((font) => (
+                  <PickerRadioItem
+                    key={font.value}
+                    value={font.value}
+                    closeOnClick={isMobile}
+                  >
+                    {font.name}
                   </PickerRadioItem>
-                  {index < fonts.length - 1 && (
-                    <PickerSeparator className="opacity-50" />
-                  )}
-                </React.Fragment>
-              ))}
-            </PickerGroup>
+                ))}
+              </PickerGroup>
+            ))}
           </PickerRadioGroup>
         </PickerContent>
       </Picker>
       <LockButton
         param="font"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
       />
     </div>
   )
diff --git a/apps/v4/app/(create)/components/history-buttons.tsx b/apps/v4/app/(create)/components/history-buttons.tsx
new file mode 100644
index 0000000000..391a798b5a
--- /dev/null
+++ b/apps/v4/app/(create)/components/history-buttons.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import Script from "next/script"
+import { Button } from "@/examples/base/ui/button"
+import { Redo02Icon, Undo02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { useHistory } from "@/app/(create)/hooks/use-history"
+
+export const UNDO_FORWARD_TYPE = "undo-forward"
+export const REDO_FORWARD_TYPE = "redo-forward"
+
+export function HistoryButtons() {
+  const { canGoBack, canGoForward, goBack, goForward } = useHistory()
+
+  return (
+    <div className="flex items-center gap-1">
+      <Button
+        variant="ghost"
+        size="icon"
+        title="Undo"
+        disabled={!canGoBack}
+        onClick={goBack}
+      >
+        <HugeiconsIcon icon={Undo02Icon} />
+        <span className="sr-only">Undo</span>
+      </Button>
+      <Button
+        variant="ghost"
+        size="icon"
+        title="Redo"
+        disabled={!canGoForward}
+        onClick={goForward}
+      >
+        <HugeiconsIcon icon={Redo02Icon} />
+        <span className="sr-only">Redo</span>
+      </Button>
+    </div>
+  )
+}
+
+export function HistoryScript() {
+  return (
+    <Script
+      id="history-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              document.addEventListener('keydown', function(e) {
+                if (!e.metaKey && !e.ctrlKey) return;
+                if (
+                  (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+                  e.target instanceof HTMLInputElement ||
+                  e.target instanceof HTMLTextAreaElement ||
+                  e.target instanceof HTMLSelectElement
+                ) {
+                  return;
+                }
+                var key = e.key.toLowerCase();
+                if ((key === 'z' && e.shiftKey) || (key === 'y' && e.ctrlKey)) {
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({ type: '${REDO_FORWARD_TYPE}' }, '*');
+                  }
+                } else if (key === 'z') {
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({ type: '${UNDO_FORWARD_TYPE}' }, '*');
+                  }
+                }
+              });
+            })();
+          `,
+      }}
+    />
+  )
+}
diff --git a/apps/v4/app/(create)/components/icon-library-picker.tsx b/apps/v4/app/(create)/components/icon-library-picker.tsx
index e9b77df8a7..302bbc6fe3 100644
--- a/apps/v4/app/(create)/components/icon-library-picker.tsx
+++ b/apps/v4/app/(create)/components/icon-library-picker.tsx
@@ -1,14 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { lazy, memo, Suspense } from "react"
 
-import { Item, ItemContent, ItemTitle } from "@/registry/bases/radix/ui/item"
-import {
-  iconLibraries,
-  type IconLibrary,
-  type IconLibraryName,
-} from "@/registry/config"
+import { iconLibraries, type IconLibraryName } from "@/registry/config"
 import { LockButton } from "@/app/(create)/components/lock-button"
 import {
   Picker,
@@ -16,124 +10,10 @@ import {
   PickerGroup,
   PickerRadioGroup,
   PickerRadioItem,
-  PickerSeparator,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
-const IconLucide = lazy(() =>
-  import("@/registry/icons/icon-lucide").then((mod) => ({
-    default: mod.IconLucide,
-  }))
-)
-
-const IconTabler = lazy(() =>
-  import("@/registry/icons/icon-tabler").then((mod) => ({
-    default: mod.IconTabler,
-  }))
-)
-
-const IconHugeicons = lazy(() =>
-  import("@/registry/icons/icon-hugeicons").then((mod) => ({
-    default: mod.IconHugeicons,
-  }))
-)
-
-const IconPhosphor = lazy(() =>
-  import("@/registry/icons/icon-phosphor").then((mod) => ({
-    default: mod.IconPhosphor,
-  }))
-)
-
-const IconRemixicon = lazy(() =>
-  import("@/registry/icons/icon-remixicon").then((mod) => ({
-    default: mod.IconRemixicon,
-  }))
-)
-
-const PREVIEW_ICONS = {
-  lucide: [
-    "CopyIcon",
-    "CircleAlertIcon",
-    "TrashIcon",
-    "ShareIcon",
-    "ShoppingBagIcon",
-    "MoreHorizontalIcon",
-    "Loader2Icon",
-    "PlusIcon",
-    "MinusIcon",
-    "ArrowLeftIcon",
-    "ArrowRightIcon",
-    "CheckIcon",
-    "ChevronDownIcon",
-    "ChevronRightIcon",
-  ],
-  tabler: [
-    "IconCopy",
-    "IconExclamationCircle",
-    "IconTrash",
-    "IconShare",
-    "IconShoppingBag",
-    "IconDots",
-    "IconLoader",
-    "IconPlus",
-    "IconMinus",
-    "IconArrowLeft",
-    "IconArrowRight",
-    "IconCheck",
-    "IconChevronDown",
-    "IconChevronRight",
-  ],
-  hugeicons: [
-    "Copy01Icon",
-    "AlertCircleIcon",
-    "Delete02Icon",
-    "Share03Icon",
-    "ShoppingBag01Icon",
-    "MoreHorizontalCircle01Icon",
-    "Loading03Icon",
-    "PlusSignIcon",
-    "MinusSignIcon",
-    "ArrowLeft02Icon",
-    "ArrowRight02Icon",
-    "Tick02Icon",
-    "ArrowDown01Icon",
-    "ArrowRight01Icon",
-  ],
-  phosphor: [
-    "CopyIcon",
-    "WarningCircleIcon",
-    "TrashIcon",
-    "ShareIcon",
-    "BagIcon",
-    "DotsThreeIcon",
-    "SpinnerIcon",
-    "PlusIcon",
-    "MinusIcon",
-    "ArrowLeftIcon",
-    "ArrowRightIcon",
-    "CheckIcon",
-    "CaretDownIcon",
-    "CaretRightIcon",
-  ],
-  remixicon: [
-    "RiFileCopyLine",
-    "RiErrorWarningLine",
-    "RiDeleteBinLine",
-    "RiShareLine",
-    "RiShoppingBagLine",
-    "RiMoreLine",
-    "RiLoaderLine",
-    "RiAddLine",
-    "RiSubtractLine",
-    "RiArrowLeftLine",
-    "RiArrowRightLine",
-    "RiCheckLine",
-    "RiArrowDownSLine",
-    "RiArrowRightSLine",
-  ],
-}
-
 const logos = {
   lucide: (
     <svg
@@ -248,12 +128,12 @@ export function IconLibraryPicker({
       <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Icon Library</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Icon Library</div>
+            <div className="text-sm font-medium text-foreground">
               {currentIconLibrary?.title}
             </div>
           </div>
-          <div className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5 *:[svg]:text-foreground!">
             {logos[currentIconLibrary?.name as keyof typeof logos]}
           </div>
         </PickerTrigger>
@@ -269,16 +149,14 @@ export function IconLibraryPicker({
             }}
           >
             <PickerGroup>
-              {Object.values(iconLibraries).map((iconLibrary, index) => (
-                <React.Fragment key={iconLibrary.name}>
-                  <IconLibraryPickerItem
-                    iconLibrary={iconLibrary}
-                    value={iconLibrary.name}
-                  />
-                  {index < Object.values(iconLibraries).length - 1 && (
-                    <PickerSeparator className="opacity-50" />
-                  )}
-                </React.Fragment>
+              {Object.values(iconLibraries).map((iconLibrary) => (
+                <PickerRadioItem
+                  key={iconLibrary.name}
+                  value={iconLibrary.name}
+                  closeOnClick={isMobile}
+                >
+                  {iconLibrary.title}
+                </PickerRadioItem>
               ))}
             </PickerGroup>
           </PickerRadioGroup>
@@ -286,81 +164,8 @@ export function IconLibraryPicker({
       </Picker>
       <LockButton
         param="iconLibrary"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
       />
     </div>
   )
 }
-
-function IconLibraryPickerItem({
-  iconLibrary,
-  value,
-}: {
-  iconLibrary: IconLibrary
-  value: string
-}) {
-  return (
-    <PickerRadioItem
-      value={value}
-      className="pr-2 *:data-[slot=dropdown-menu-radio-item-indicator]:hidden"
-    >
-      <Item size="xs">
-        <ItemContent className="gap-1">
-          <ItemTitle className="text-muted-foreground text-xs font-medium">
-            {iconLibrary.title}
-          </ItemTitle>
-          <IconLibraryPreview iconLibrary={iconLibrary.name} />
-        </ItemContent>
-      </Item>
-    </PickerRadioItem>
-  )
-}
-
-const IconLibraryPreview = memo(function IconLibraryPreview({
-  iconLibrary,
-}: {
-  iconLibrary: IconLibraryName
-}) {
-  const previewIcons = PREVIEW_ICONS[iconLibrary]
-
-  if (!previewIcons) {
-    return null
-  }
-
-  const IconRenderer =
-    iconLibrary === "lucide"
-      ? IconLucide
-      : iconLibrary === "tabler"
-        ? IconTabler
-        : iconLibrary === "hugeicons"
-          ? IconHugeicons
-          : iconLibrary === "phosphor"
-            ? IconPhosphor
-            : IconRemixicon
-
-  return (
-    <Suspense
-      fallback={
-        <div className="-mx-1 grid w-full grid-cols-7 gap-2">
-          {previewIcons.map((iconName) => (
-            <div
-              key={iconName}
-              className="bg-muted size-6 animate-pulse rounded"
-            />
-          ))}
-        </div>
-      }
-    >
-      <div className="-mx-1 grid w-full grid-cols-7 gap-2">
-        {previewIcons.map((iconName) => (
-          <div
-            key={iconName}
-            className="flex size-6 items-center justify-center *:[svg]:size-5"
-          >
-            <IconRenderer name={iconName} />
-          </div>
-        ))}
-      </div>
-    </Suspense>
-  )
-})
diff --git a/apps/v4/app/(create)/components/icon-placeholder.tsx b/apps/v4/app/(create)/components/icon-placeholder.tsx
index f73c25ba4d..83ce2cab86 100644
--- a/apps/v4/app/(create)/components/icon-placeholder.tsx
+++ b/apps/v4/app/(create)/components/icon-placeholder.tsx
@@ -36,6 +36,15 @@ const IconRemixicon = lazy(() =>
   }))
 )
 
+// Preload all icon renderer modules so switching libraries is instant.
+// These warm the browser module cache; React.lazy resolves immediately
+// for modules that are already loaded.
+void import("@/registry/icons/icon-lucide")
+void import("@/registry/icons/icon-tabler")
+void import("@/registry/icons/icon-hugeicons")
+void import("@/registry/icons/icon-phosphor")
+void import("@/registry/icons/icon-remixicon")
+
 export function IconPlaceholder({
   ...props
 }: {
diff --git a/apps/v4/app/(create)/components/item-explorer.tsx b/apps/v4/app/(create)/components/item-explorer.tsx
index 557a728d0e..022dbd82ae 100644
--- a/apps/v4/app/(create)/components/item-explorer.tsx
+++ b/apps/v4/app/(create)/components/item-explorer.tsx
@@ -2,16 +2,11 @@
 
 import * as React from "react"
 import Link from "next/link"
-import { ChevronRightIcon } from "lucide-react"
-import { type RegistryItem } from "shadcn/schema"
-
-import { cn } from "@/lib/utils"
-import { type Base } from "@/registry/bases"
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/registry/new-york-v4/ui/collapsible"
+} from "@/examples/base/ui/collapsible"
 import {
   Sidebar,
   SidebarContent,
@@ -20,7 +15,12 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
-} from "@/registry/new-york-v4/ui/sidebar"
+} from "@/examples/base/ui/sidebar"
+import { ChevronRightIcon } from "lucide-react"
+import { type RegistryItem } from "shadcn/schema"
+
+import { cn } from "@/lib/utils"
+import { type Base } from "@/registry/bases"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 import { groupItemsByType } from "@/app/(create)/lib/utils"
 
@@ -48,10 +48,10 @@ export function ItemExplorer({
 
   return (
     <Sidebar
-      className="sticky z-30 hidden h-[calc(100svh-var(--header-height)-2rem)] overscroll-none bg-transparent xl:flex"
+      className="sticky z-30 hidden h-full overscroll-none bg-transparent xl:flex"
       collapsible="none"
     >
-      <SidebarContent className="no-scrollbar -mx-1 overflow-x-hidden">
+      <SidebarContent className="-mx-1 no-scrollbar overflow-x-hidden">
         {groupedItems.map((group) => (
           <Collapsible
             key={group.type}
@@ -60,26 +60,26 @@ export function ItemExplorer({
           >
             <SidebarGroup className="px-1 py-0">
               <CollapsibleTrigger className="flex w-full items-center gap-1 py-1.5 text-[0.8rem] font-medium [&[data-state=open]>svg]:rotate-90">
-                <ChevronRightIcon className="text-muted-foreground size-3.5 transition-transform" />
+                <ChevronRightIcon className="size-3.5 text-muted-foreground transition-transform" />
                 <span>{group.title}</span>
               </CollapsibleTrigger>
               <CollapsibleContent>
                 <SidebarGroupContent>
-                  <SidebarMenu className="border-border/50 relative ml-1.5 border-l pl-2">
+                  <SidebarMenu className="relative ml-1.5 border-l border-border/50 pl-2">
                     {group.items.map((item, index) => (
                       <SidebarMenuItem key={item.name} className="relative">
                         <div
                           className={cn(
-                            "border-border/50 absolute top-1/2 -left-2 h-px w-2 border-t",
+                            "absolute top-1/2 -left-2 h-px w-2 border-t border-border/50",
                             index === group.items.length - 1 && "bg-sidebar"
                           )}
                         />
                         {index === group.items.length - 1 && (
-                          <div className="bg-sidebar absolute top-1/2 -bottom-1 -left-2.5 w-1" />
+                          <div className="absolute top-1/2 -bottom-1 -left-2.5 w-1 bg-sidebar" />
                         )}
                         <SidebarMenuButton
                           onClick={() => setParams({ item: item.name })}
-                          className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
+                          className="relative h-[26px] w-fit cursor-pointer overflow-visible border border-transparent text-[0.8rem] font-normal after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md data-[active=true]:border-accent data-[active=true]:bg-accent 3xl:fixed:w-full 3xl:fixed:max-w-48"
                           data-active={item.name === currentItem?.name}
                           isActive={item.name === currentItem?.name}
                         >
diff --git a/apps/v4/app/(create)/components/item-picker.tsx b/apps/v4/app/(create)/components/item-picker.tsx
deleted file mode 100644
index e742c11a8f..0000000000
--- a/apps/v4/app/(create)/components/item-picker.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Script from "next/script"
-import { Search01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { type RegistryItem } from "shadcn/schema"
-
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Combobox,
-  ComboboxCollection,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxGroup,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxLabel,
-  ComboboxList,
-  ComboboxTrigger,
-  ComboboxValue,
-} from "@/registry/new-york-v4/ui/combobox"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-import { groupItemsByType } from "@/app/(create)/lib/utils"
-
-export const CMD_K_FORWARD_TYPE = "cmd-k-forward"
-
-const cachedGroupedItems = React.cache(
-  (items: Pick<RegistryItem, "name" | "title" | "type">[]) => {
-    return groupItemsByType(items)
-  }
-)
-
-export function ItemPicker({
-  items,
-}: {
-  items: Pick<RegistryItem, "name" | "title" | "type">[]
-}) {
-  const [open, setOpen] = React.useState(false)
-  const [params, setParams] = useDesignSystemSearchParams()
-
-  const groupedItems = React.useMemo(() => cachedGroupedItems(items), [items])
-
-  const currentItem = React.useMemo(
-    () => items.find((item) => item.name === params.item) ?? null,
-    [items, params.item]
-  )
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if ((e.key === "k" || e.key === "p") && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [])
-
-  const handleSelect = React.useCallback(
-    (item: Pick<RegistryItem, "name" | "title" | "type">) => {
-      setParams({ item: item.name })
-      setOpen(false)
-    },
-    [setParams]
-  )
-
-  const comboboxValue = React.useMemo(() => {
-    return currentItem ?? null
-  }, [currentItem])
-
-  return (
-    <Combobox
-      autoHighlight
-      items={groupedItems}
-      value={comboboxValue}
-      onValueChange={(value) => {
-        if (value) {
-          handleSelect(value)
-        }
-      }}
-      open={open}
-      onOpenChange={setOpen}
-      itemToStringValue={(item) => {
-        if (!item) {
-          return ""
-        }
-        // Handle both groups and items.
-        if ("items" in item) {
-          return item.title ?? ""
-        }
-        return item.title ?? item.name ?? ""
-      }}
-    >
-      <ComboboxTrigger
-        render={
-          <Button
-            variant="outline"
-            aria-label="Select item"
-            size="sm"
-            className="data-popup-open:bg-muted dark:data-popup-open:bg-muted/50 bg-muted/50 sm:bg-background md:dark:bg-background border-foreground/10 dark:bg-muted/50 h-[calc(--spacing(13.5))] flex-1 touch-manipulation justify-between gap-2 rounded-xl pr-4! pl-2.5 text-left shadow-none select-none *:data-[slot=combobox-trigger-icon]:hidden sm:h-8 sm:max-w-56 sm:rounded-lg sm:pr-2! xl:max-w-64"
-          />
-        }
-      >
-        <ComboboxValue>
-          {(value) => (
-            <>
-              <div className="flex flex-col justify-start text-left sm:hidden">
-                <div className="text-muted-foreground text-xs font-normal">
-                  Preview
-                </div>
-                <div className="text-foreground text-sm font-medium">
-                  {value?.title || "Not Found"}
-                </div>
-              </div>
-              <div className="text-foreground hidden flex-1 text-sm sm:flex">
-                {value?.title || "Not Found"}
-              </div>
-            </>
-          )}
-        </ComboboxValue>
-        <HugeiconsIcon icon={Search01Icon} />
-      </ComboboxTrigger>
-      <ComboboxContent
-        className="ring-foreground/10 min-w-[calc(var(--available-width)---spacing(4))] translate-x-2 animate-none rounded-xl border-0 ring-1 data-open:animate-none sm:min-w-[calc(var(--anchor-width)+--spacing(7))] sm:translate-x-0 xl:w-96"
-        side="bottom"
-        align="end"
-      >
-        <ComboboxInput
-          showTrigger={false}
-          placeholder="Search"
-          className="bg-muted h-8 rounded-lg shadow-none has-focus-visible:border-inherit! has-focus-visible:ring-0! pointer-coarse:hidden"
-        />
-        <ComboboxEmpty>No items found.</ComboboxEmpty>
-        <ComboboxList className="no-scrollbar scroll-my-1 pb-1">
-          {(group) => (
-            <ComboboxGroup key={group.type} items={group.items}>
-              <ComboboxLabel>{group.title}</ComboboxLabel>
-              <ComboboxCollection>
-                {(item) => (
-                  <ComboboxItem
-                    key={item.name}
-                    value={item}
-                    className="group/combobox-item rounded-lg pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base"
-                  >
-                    {item.title}
-                    <span className="text-muted-foreground ml-auto text-xs opacity-0 group-data-[selected=true]/combobox-item:opacity-100">
-                      {group.title}
-                    </span>
-                  </ComboboxItem>
-                )}
-              </ComboboxCollection>
-            </ComboboxGroup>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-      <div
-        data-open={open}
-        className="fixed inset-0 z-50 hidden bg-transparent data-[open=true]:block"
-        onClick={() => setOpen(false)}
-      />
-    </Combobox>
-  )
-}
-
-export function ItemPickerScript() {
-  return (
-    <Script
-      id="design-system-listener"
-      strategy="beforeInteractive"
-      dangerouslySetInnerHTML={{
-        __html: `
-            (function() {
-              // Forward Cmd/Ctrl + K and Cmd/Ctrl + P
-              document.addEventListener('keydown', function(e) {
-                if ((e.key === 'k' || e.key === 'p') && (e.metaKey || e.ctrlKey)) {
-                  e.preventDefault();
-                  if (window.parent && window.parent !== window) {
-                    window.parent.postMessage({
-                      type: '${CMD_K_FORWARD_TYPE}',
-                      key: e.key
-                    }, '*');
-                  }
-                }
-              });
-
-            })();
-          `,
-      }}
-    />
-  )
-}
diff --git a/apps/v4/app/(create)/components/lock-button.tsx b/apps/v4/app/(create)/components/lock-button.tsx
index 773144a1cf..f082c2c8e1 100644
--- a/apps/v4/app/(create)/components/lock-button.tsx
+++ b/apps/v4/app/(create)/components/lock-button.tsx
@@ -7,11 +7,6 @@ import {
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { cn } from "@/lib/utils"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
 import { useLocks, type LockableParam } from "@/app/(create)/hooks/use-locks"
 
 export function LockButton({
@@ -25,26 +20,22 @@ export function LockButton({
   const locked = isLocked(param)
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          onClick={() => toggleLock(param)}
-          data-locked={locked}
-          className={cn(
-            "flex size-4 cursor-pointer items-center justify-center rounded opacity-0 transition-opacity group-focus-within/picker:opacity-100 group-hover/picker:opacity-100 focus:opacity-100 data-[locked=true]:opacity-100 pointer-coarse:hidden",
-            className
-          )}
-          aria-label={locked ? "Unlock" : "Lock"}
-        >
-          <HugeiconsIcon
-            icon={locked ? SquareLock01Icon : SquareUnlock01Icon}
-            strokeWidth={2}
-            className="text-foreground size-5"
-          />
-        </button>
-      </TooltipTrigger>
-      <TooltipContent>{locked ? "Unlock" : "Lock"}</TooltipContent>
-    </Tooltip>
+    <button
+      type="button"
+      title={locked ? "Unlock" : "Lock"}
+      aria-label={locked ? "Unlock" : "Lock"}
+      onClick={() => toggleLock(param)}
+      data-locked={locked}
+      className={cn(
+        "flex size-4 cursor-pointer items-center justify-center rounded opacity-0 ring-foreground/60 transition-opacity outline-none group-focus-within/picker:opacity-100 group-hover/picker:opacity-100 focus:opacity-100 focus-visible:ring-1 data-[locked=true]:opacity-100 pointer-coarse:hidden",
+        className
+      )}
+    >
+      <HugeiconsIcon
+        icon={locked ? SquareLock01Icon : SquareUnlock01Icon}
+        strokeWidth={2}
+        className="size-5 text-foreground"
+      />
+    </button>
   )
 }
diff --git a/apps/v4/app/(create)/components/main-menu.tsx b/apps/v4/app/(create)/components/main-menu.tsx
new file mode 100644
index 0000000000..9e8fd11d3c
--- /dev/null
+++ b/apps/v4/app/(create)/components/main-menu.tsx
@@ -0,0 +1,83 @@
+"use client"
+
+import * as React from "react"
+import { type Button } from "@/examples/base/ui/button"
+import { Menu09Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { cn } from "@/lib/utils"
+import {
+  Picker,
+  PickerContent,
+  PickerGroup,
+  PickerItem,
+  PickerSeparator,
+  PickerShortcut,
+  PickerTrigger,
+} from "@/app/(create)/components/picker"
+import { useActionMenuTrigger } from "@/app/(create)/hooks/use-action-menu"
+import { useHistory } from "@/app/(create)/hooks/use-history"
+import { useRandom } from "@/app/(create)/hooks/use-random"
+import { useReset } from "@/app/(create)/hooks/use-reset"
+import { useThemeToggle } from "@/app/(create)/hooks/use-theme-toggle"
+
+const APPLE_PLATFORM_REGEX = /Mac|iPhone|iPad|iPod/
+
+export function MainMenu({ className }: React.ComponentProps<typeof Button>) {
+  const [isMac, setIsMac] = React.useState(false)
+  const { canGoBack, canGoForward, goBack, goForward } = useHistory()
+  const { openActionMenu } = useActionMenuTrigger()
+  const { randomize } = useRandom()
+  const { toggleTheme } = useThemeToggle()
+  const { setShowResetDialog } = useReset()
+
+  React.useEffect(() => {
+    const platform = navigator.platform
+    const userAgent = navigator.userAgent
+    setIsMac(APPLE_PLATFORM_REGEX.test(platform || userAgent))
+  }, [])
+
+  return (
+    <React.Fragment>
+      <Picker>
+        <PickerTrigger
+          className={cn(
+            "flex items-center justify-between gap-2 rounded-lg px-1.75 ring-1 ring-foreground/10 focus-visible:ring-1",
+            className
+          )}
+        >
+          <span className="font-medium">Menu</span>
+          <HugeiconsIcon icon={Menu09Icon} strokeWidth={2} className="size-5" />
+        </PickerTrigger>
+        <PickerContent side="right" align="start" alignOffset={-8}>
+          <PickerGroup>
+            <PickerItem onClick={openActionMenu}>
+              Navigate...
+              <PickerShortcut>{isMac ? "⌘P" : "Ctrl+P"}</PickerShortcut>
+            </PickerItem>
+            <PickerItem onClick={randomize}>
+              Shuffle <PickerShortcut>R</PickerShortcut>
+            </PickerItem>
+            <PickerItem onClick={toggleTheme}>
+              Light/Dark <PickerShortcut>D</PickerShortcut>
+            </PickerItem>
+          </PickerGroup>
+          <PickerSeparator />
+          <PickerGroup>
+            <PickerItem onClick={goBack} disabled={!canGoBack}>
+              Undo <PickerShortcut>{isMac ? "⌘Z" : "Ctrl+Z"}</PickerShortcut>
+            </PickerItem>
+            <PickerItem onClick={goForward} disabled={!canGoForward}>
+              Redo{" "}
+              <PickerShortcut>{isMac ? "⇧⌘Z" : "Ctrl+Shift+Z"}</PickerShortcut>
+            </PickerItem>
+            <PickerSeparator />
+            <PickerItem onClick={() => setShowResetDialog(true)}>
+              Reset
+            </PickerItem>
+          </PickerGroup>
+        </PickerContent>
+      </Picker>
+    </React.Fragment>
+  )
+}
diff --git a/apps/v4/app/(create)/components/menu-picker.tsx b/apps/v4/app/(create)/components/menu-picker.tsx
index 1d0427c012..df37d715c6 100644
--- a/apps/v4/app/(create)/components/menu-picker.tsx
+++ b/apps/v4/app/(create)/components/menu-picker.tsx
@@ -29,7 +29,7 @@ const MENU_OPTIONS = [
         fill="none"
         role="img"
         stroke="currentColor"
-        className="text-foreground"
+        className="size-4 text-foreground"
       >
         <path
           d="M2 11.5C2 7.02166 2 4.78249 3.39124 3.39124C4.78249 2 7.02166 2 11.5 2C15.9783 2 18.2175 2 19.6088 3.39124C21 4.78249 21 7.02166 21 11.5C21 15.9783 21 18.2175 19.6088 19.6088C18.2175 21 15.9783 21 11.5 21C7.02166 21 4.78249 21 3.39124 19.6088C2 18.2175 2 15.9783 2 11.5Z"
@@ -71,7 +71,7 @@ const MENU_OPTIONS = [
         viewBox="0 0 24 24"
         fill="none"
         role="img"
-        className="fill-foreground text-foreground"
+        className="size-4 fill-background"
       >
         <path
           d="M2 11.5C2 7.02166 2 4.78249 3.39124 3.39124C4.78249 2 7.02166 2 11.5 2C15.9783 2 18.2175 2 19.6088 3.39124C21 4.78249 21 7.02166 21 11.5C21 15.9783 21 18.2175 19.6088 19.6088C18.2175 21 15.9783 21 11.5 21C7.02166 21 4.78249 21 3.39124 19.6088C2 18.2175 2 15.9783 2 11.5Z"
@@ -80,21 +80,21 @@ const MENU_OPTIONS = [
         />
         <path
           d="M8.5 11.5L14.5001 11.5"
-          stroke="var(--background)"
+          stroke="var(--foreground)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M9.5 15H13.5"
-          stroke="var(--background)"
+          stroke="var(--foreground)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
         />
         <path
           d="M7.5 8H15.5"
-          stroke="var(--background)"
+          stroke="var(--foreground)"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -123,12 +123,12 @@ export function MenuColorPicker({
       <Picker>
         <PickerTrigger disabled={mounted && resolvedTheme === "dark"}>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Menu Color</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Menu Color</div>
+            <div className="text-sm font-medium text-foreground">
               {currentMenu?.label}
             </div>
           </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center text-base text-foreground select-none md:right-2.5">
             {currentMenu?.icon}
           </div>
         </PickerTrigger>
@@ -145,8 +145,11 @@ export function MenuColorPicker({
           >
             <PickerGroup>
               {MENU_OPTIONS.map((menu) => (
-                <PickerRadioItem key={menu.value} value={menu.value}>
-                  {menu.icon}
+                <PickerRadioItem
+                  key={menu.value}
+                  value={menu.value}
+                  closeOnClick={isMobile}
+                >
                   {menu.label}
                 </PickerRadioItem>
               ))}
@@ -156,7 +159,7 @@ export function MenuColorPicker({
       </Picker>
       <LockButton
         param="menuColor"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
       />
     </div>
   )
diff --git a/apps/v4/app/(create)/components/mode-switcher.tsx b/apps/v4/app/(create)/components/mode-switcher.tsx
new file mode 100644
index 0000000000..4356113c82
--- /dev/null
+++ b/apps/v4/app/(create)/components/mode-switcher.tsx
@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from "react"
+import Script from "next/script"
+import { Button } from "@/examples/base/ui/button"
+
+import { cn } from "@/lib/utils"
+import { useThemeToggle } from "@/app/(create)/hooks/use-theme-toggle"
+
+export const DARK_MODE_FORWARD_TYPE = "dark-mode-forward"
+
+export function ModeSwitcher({
+  variant = "ghost",
+  className,
+}: {
+  variant?: React.ComponentProps<typeof Button>["variant"]
+  className?: React.ComponentProps<typeof Button>["className"]
+}) {
+  const { toggleTheme } = useThemeToggle()
+
+  return (
+    <Button
+      variant={variant}
+      size="icon"
+      className={cn("group/toggle extend-touch-target", className)}
+      onClick={toggleTheme}
+      id="mode-switcher-button"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4.5"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+        <path d="M12 3l0 18" />
+        <path d="M12 9l4.65 -4.65" />
+        <path d="M12 14.3l7.37 -7.37" />
+        <path d="M12 19.6l8.85 -8.85" />
+      </svg>
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
+
+export function DarkModeScript() {
+  return (
+    <Script
+      id="dark-mode-listener"
+      strategy="beforeInteractive"
+      dangerouslySetInnerHTML={{
+        __html: `
+            (function() {
+              // Forward D key
+              document.addEventListener('keydown', function(e) {
+                if ((e.key === 'd' || e.key === 'D') && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                  if (
+                    (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+                    e.target instanceof HTMLInputElement ||
+                    e.target instanceof HTMLTextAreaElement ||
+                    e.target instanceof HTMLSelectElement
+                  ) {
+                    return;
+                  }
+                  e.preventDefault();
+                  if (window.parent && window.parent !== window) {
+                    window.parent.postMessage({
+                      type: '${DARK_MODE_FORWARD_TYPE}',
+                      key: e.key
+                    }, '*');
+                  }
+                }
+              });
+
+            })();
+          `,
+      }}
+    />
+  )
+}
diff --git a/apps/v4/app/(create)/components/picker.tsx b/apps/v4/app/(create)/components/picker.tsx
index a8563110a2..8e2775389f 100644
--- a/apps/v4/app/(create)/components/picker.tsx
+++ b/apps/v4/app/(create)/components/picker.tsx
@@ -19,7 +19,7 @@ function PickerTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
     <MenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
       className={cn(
-        "hover:bg-muted data-popup-open:bg-muted border-foreground/10 bg-muted/50 relative w-[160px] shrink-0 touch-manipulation rounded-xl border p-2 select-none disabled:opacity-50 md:w-full md:rounded-lg md:border-transparent md:bg-transparent",
+        "relative w-40 shrink-0 touch-manipulation rounded-xl p-3 ring-1 ring-foreground/10 select-none hover:bg-muted focus-visible:ring-foreground/50 focus-visible:outline-none disabled:opacity-50 data-popup-open:bg-muted md:w-full md:rounded-lg md:px-2.5 md:py-2",
         className
       )}
       {...props}
@@ -31,7 +31,7 @@ function PickerContent({
   align = "start",
   alignOffset = 0,
   side = "bottom",
-  sideOffset = 4,
+  sideOffset = 20,
   anchor,
   className,
   ...props
@@ -53,13 +53,13 @@ function PickerContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground cn-menu-target ring-foreground/10 no-scrollbar z-50 max-h-(--available-height) w-[calc(var(--available-width)-(--spacing(3.5)))] min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border-0 p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden md:w-52",
+            "cn-menu-target z-50 no-scrollbar max-h-(--available-height) w-[calc(var(--available-width)-(--spacing(6)))] min-w-32 origin-(--transform-origin) translate-y-2 overflow-x-hidden overflow-y-auto rounded-xl border-0 bg-neutral-950/80 p-1.5 text-neutral-100 ring-1 ring-neutral-950/80 backdrop-blur-xl outline-none md:w-52 dark:bg-neutral-800/90 dark:ring-neutral-700/50 data-closed:overflow-hidden",
             className
           )}
           {...props}
         />
       </MenuPrimitive.Positioner>
-      <div className="absolute inset-0 z-40 bg-transparent" />
+      <div className="absolute inset-y-0 right-0 left-62 z-40 bg-transparent" />
     </MenuPrimitive.Portal>
   )
 }
@@ -80,7 +80,7 @@ function PickerLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8",
+        "px-2 py-1.5 text-xs font-medium text-neutral-400 data-inset:pl-8",
         className
       )}
       {...props}
@@ -103,7 +103,7 @@ function PickerItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium outline-hidden select-none **:text-neutral-100 focus:bg-neutral-600 focus:text-neutral-100 focus:**:text-neutral-100 data-inset:pl-8 dark:focus:bg-neutral-700/80 pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -128,7 +128,7 @@ function PickerSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent/95 focus:text-accent-foreground focus:ring-1 focus:ring-foreground/20 not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 data-open:bg-accent/95 data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -158,7 +158,7 @@ function PickerSubContent({
     <PickerContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100",
+        "w-auto min-w-[96px] rounded-md bg-popover/90 p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 backdrop-blur-xs duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       align={align}
@@ -180,7 +180,7 @@ function PickerCheckboxItem({
     <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent/95 focus:text-accent-foreground focus:ring-1 focus:ring-foreground/20 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",
         className
       )}
       checked={checked}
@@ -220,7 +220,7 @@ function PickerRadioItem({
     <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm font-medium outline-hidden select-none **:text-neutral-100 focus:bg-neutral-600 focus:text-neutral-100 focus:**:text-neutral-100 data-inset:pl-8 dark:focus:bg-neutral-700/80 pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -252,7 +252,10 @@ function PickerSeparator({
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn(
+        "-mx-1.5 my-1.5 h-px bg-neutral-600 dark:bg-neutral-700",
+        className
+      )}
       {...props}
     />
   )
@@ -263,7 +266,7 @@ function PickerShortcut({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-neutral-400! group-focus/dropdown-menu-item:text-neutral-100",
         className
       )}
       {...props}
diff --git a/apps/v4/app/(create)/components/preset-handler.tsx b/apps/v4/app/(create)/components/preset-handler.tsx
new file mode 100644
index 0000000000..1691c80473
--- /dev/null
+++ b/apps/v4/app/(create)/components/preset-handler.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+import { generateRandomPreset, isPresetCode } from "shadcn/preset"
+
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function PresetHandler() {
+  const router = useRouter()
+  const [params, setParams] = useDesignSystemSearchParams()
+  const hasConverted = React.useRef(false)
+
+  React.useEffect(() => {
+    if (params.preset === "random") {
+      router.replace(`/create?preset=${generateRandomPreset()}`)
+    }
+  }, [params.preset, router])
+
+  React.useEffect(() => {
+    if (hasConverted.current) {
+      return
+    }
+    hasConverted.current = true
+
+    if (!params.preset || params.preset === "random") {
+      return
+    }
+
+    if (isPresetCode(params.preset)) {
+      return
+    }
+
+    setParams({ base: params.base })
+  }, [params.preset, params.base, setParams])
+
+  return null
+}
diff --git a/apps/v4/app/(create)/components/preset-picker.tsx b/apps/v4/app/(create)/components/preset-picker.tsx
index da66379155..d30129acaa 100644
--- a/apps/v4/app/(create)/components/preset-picker.tsx
+++ b/apps/v4/app/(create)/components/preset-picker.tsx
@@ -80,8 +80,8 @@ export function PresetPicker({
     <Picker>
       <PickerTrigger>
         <div className="flex flex-col justify-start text-left">
-          <div className="text-muted-foreground text-xs">Preset</div>
-          <div className="text-foreground line-clamp-1 text-sm font-medium">
+          <div className="text-xs text-muted-foreground">Preset</div>
+          <div className="line-clamp-1 text-sm font-medium text-foreground">
             {currentPreset?.description ?? "Custom"}
           </div>
         </div>
@@ -100,7 +100,11 @@ export function PresetPicker({
             {currentBasePresets.map((preset) => {
               const style = STYLES.find((s) => s.name === preset.style)
               return (
-                <PickerRadioItem key={preset.title} value={preset.title}>
+                <PickerRadioItem
+                  key={preset.title}
+                  value={preset.title}
+                  closeOnClick={isMobile}
+                >
                   <div className="flex items-center gap-2">
                     {style?.icon && (
                       <div className="flex size-4 shrink-0 items-center justify-center">
diff --git a/apps/v4/app/(create)/components/preview-controls.tsx b/apps/v4/app/(create)/components/preview-controls.tsx
deleted file mode 100644
index a4bdcd62d0..0000000000
--- a/apps/v4/app/(create)/components/preview-controls.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-"use client"
-
-import { Monitor, Smartphone, Tablet } from "lucide-react"
-
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from "@/registry/new-york-v4/ui/toggle-group"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-
-export function PreviewControls() {
-  const [params, setParams] = useDesignSystemSearchParams({
-    history: "replace",
-  })
-
-  return (
-    <div className="flex h-8 items-center gap-1.5 rounded-md border p-1">
-      <ToggleGroup
-        type="single"
-        value={params.size.toString()}
-        onValueChange={(newValue) => {
-          if (newValue) {
-            setParams({ size: parseInt(newValue) })
-          }
-        }}
-        className="gap-1 *:data-[slot=toggle-group-item]:!size-6 *:data-[slot=toggle-group-item]:!rounded-sm"
-      >
-        <ToggleGroupItem value="100" title="Desktop">
-          <Monitor />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="60" title="Tablet">
-          <Tablet />
-        </ToggleGroupItem>
-        <ToggleGroupItem value="30" title="Mobile">
-          <Smartphone />
-        </ToggleGroupItem>
-      </ToggleGroup>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(create)/components/preview.tsx b/apps/v4/app/(create)/components/preview.tsx
index 24ae974b8c..cf99e7feac 100644
--- a/apps/v4/app/(create)/components/preview.tsx
+++ b/apps/v4/app/(create)/components/preview.tsx
@@ -1,11 +1,13 @@
 "use client"
 
 import * as React from "react"
-import { type PanelImperativeHandle } from "react-resizable-panels"
 
-import { DARK_MODE_FORWARD_TYPE } from "@/components/mode-switcher"
-import { Badge } from "@/registry/new-york-v4/ui/badge"
-import { CMD_K_FORWARD_TYPE } from "@/app/(create)/components/item-picker"
+import { CMD_K_FORWARD_TYPE } from "@/app/(create)/components/action-menu"
+import {
+  REDO_FORWARD_TYPE,
+  UNDO_FORWARD_TYPE,
+} from "@/app/(create)/components/history-buttons"
+import { DARK_MODE_FORWARD_TYPE } from "@/app/(create)/components/mode-switcher"
 import { RANDOMIZE_FORWARD_TYPE } from "@/app/(create)/components/random-button"
 import { sendToIframe } from "@/app/(create)/hooks/use-iframe-sync"
 import {
@@ -13,17 +15,75 @@ import {
   useDesignSystemSearchParams,
 } from "@/app/(create)/lib/search-params"
 
+// Hoisted — avoids recreating on every message event. (js-hoist-regexp)
+const MAC_REGEX = /Mac|iPhone|iPad|iPod/
+
+// Hoisted — only uses module-level constants, no component state. (rendering-hoist-jsx)
+function handleMessage(event: MessageEvent) {
+  if (
+    typeof window === "undefined" ||
+    event.origin !== window.location.origin
+  ) {
+    return
+  }
+
+  const type = event.data.type
+  if (type === CMD_K_FORWARD_TYPE) {
+    const isMac = MAC_REGEX.test(navigator.userAgent)
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: event.data.key || "k",
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === RANDOMIZE_FORWARD_TYPE) {
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: event.data.key || "r",
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === UNDO_FORWARD_TYPE) {
+    const isMac = MAC_REGEX.test(navigator.userAgent)
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "z",
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === REDO_FORWARD_TYPE) {
+    const isMac = MAC_REGEX.test(navigator.userAgent)
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "z",
+        shiftKey: true,
+        metaKey: isMac,
+        ctrlKey: !isMac,
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  } else if (type === DARK_MODE_FORWARD_TYPE) {
+    document.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: event.data.key || "d",
+        bubbles: true,
+        cancelable: true,
+      })
+    )
+  }
+}
+
 export function Preview() {
   const [params] = useDesignSystemSearchParams()
   const iframeRef = React.useRef<HTMLIFrameElement>(null)
-  const resizablePanelRef = React.useRef<PanelImperativeHandle>(null)
-
-  // Sync resizable panel with URL param changes.
-  React.useEffect(() => {
-    if (resizablePanelRef.current && params.size) {
-      resizablePanelRef.current.resize(params.size)
-    }
-  }, [params.size])
 
   React.useEffect(() => {
     const iframe = iframeRef.current
@@ -45,44 +105,6 @@ export function Preview() {
     }
   }, [params])
 
-  const handleMessage = (event: MessageEvent) => {
-    if (event.data.type === CMD_K_FORWARD_TYPE) {
-      const isMac = /Mac|iPhone|iPad|iPod/.test(navigator.userAgent)
-      const key = event.data.key || "k"
-
-      const syntheticEvent = new KeyboardEvent("keydown", {
-        key,
-        metaKey: isMac,
-        ctrlKey: !isMac,
-        bubbles: true,
-        cancelable: true,
-      })
-      document.dispatchEvent(syntheticEvent)
-    }
-
-    if (event.data.type === RANDOMIZE_FORWARD_TYPE) {
-      const key = event.data.key || "r"
-
-      const syntheticEvent = new KeyboardEvent("keydown", {
-        key,
-        bubbles: true,
-        cancelable: true,
-      })
-      document.dispatchEvent(syntheticEvent)
-    }
-
-    if (event.data.type === DARK_MODE_FORWARD_TYPE) {
-      const key = event.data.key || "d"
-
-      const syntheticEvent = new KeyboardEvent("keydown", {
-        key,
-        bubbles: true,
-        cancelable: true,
-      })
-      document.dispatchEvent(syntheticEvent)
-    }
-  }
-
   React.useEffect(() => {
     window.addEventListener("message", handleMessage)
     return () => {
@@ -104,9 +126,9 @@ export function Preview() {
   }, [params.base, params.item])
 
   return (
-    <div className="relative -mx-1 flex flex-1 flex-col justify-center sm:mx-0">
-      <div className="ring-foreground/15 3xl:max-h-[1200px] 3xl:max-w-[1800px] relative -z-0 mx-auto flex w-full flex-1 flex-col overflow-hidden rounded-2xl ring-1">
-        <div className="bg-muted dark:bg-muted/30 absolute inset-0 rounded-2xl" />
+    <div className="relative flex flex-1 flex-col justify-center overflow-hidden rounded-2xl ring ring-foreground/10 md:ring-muted dark:ring-foreground/10">
+      <div className="relative z-0 mx-auto flex w-full flex-1 flex-col overflow-hidden">
+        <div className="absolute inset-0 bg-muted dark:bg-muted/30" />
         <iframe
           key={params.base + params.item}
           ref={iframeRef}
@@ -114,12 +136,6 @@ export function Preview() {
           className="z-10 size-full flex-1"
           title="Preview"
         />
-        <Badge
-          className="absolute right-2 bottom-2 isolate z-10"
-          variant="secondary"
-        >
-          Preview
-        </Badge>
       </div>
     </div>
   )
diff --git a/apps/v4/app/(create)/components/project-form.tsx b/apps/v4/app/(create)/components/project-form.tsx
new file mode 100644
index 0000000000..6399659d35
--- /dev/null
+++ b/apps/v4/app/(create)/components/project-form.tsx
@@ -0,0 +1,311 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/examples/base/ui/dialog"
+import {
+  Field,
+  FieldContent,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "@/examples/base/ui/field"
+import { RadioGroup, RadioGroupItem } from "@/examples/base/ui/radio-group"
+import { Switch } from "@/examples/base/ui/switch"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/examples/base/ui/tabs"
+import { Copy01Icon, Globe02Icon, Tick02Icon } from "@hugeicons/core-free-icons"
+import { HugeiconsIcon } from "@hugeicons/react"
+
+import { cn } from "@/lib/utils"
+import { useConfig } from "@/hooks/use-config"
+import { copyToClipboardWithMeta } from "@/components/copy-button"
+import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
+import {
+  useDesignSystemSearchParams,
+  type DesignSystemSearchParams,
+} from "@/app/(create)/lib/search-params"
+import {
+  getFramework,
+  getTemplateValue,
+  NO_MONOREPO_FRAMEWORKS,
+  TEMPLATES,
+} from "@/app/(create)/lib/templates"
+
+const TURBOREPO_LOGO =
+  '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Turborepo</title><path d="M11.9906 4.1957c-4.2998 0-7.7981 3.501-7.7981 7.8043s3.4983 7.8043 7.7981 7.8043c4.2999 0 7.7982-3.501 7.7982-7.8043s-3.4983-7.8043-7.7982-7.8043m0 11.843c-2.229 0-4.0356-1.8079-4.0356-4.0387s1.8065-4.0387 4.0356-4.0387S16.0262 9.7692 16.0262 12s-1.8065 4.0388-4.0356 4.0388m.6534-13.1249V0C18.9726.3386 24 5.5822 24 12s-5.0274 11.66-11.356 12v-2.9139c4.7167-.3372 8.4516-4.2814 8.4516-9.0861s-3.735-8.749-8.4516-9.0861M5.113 17.9586c-1.2502-1.4446-2.0562-3.2845-2.2-5.3046H0c.151 2.8266 1.2808 5.3917 3.051 7.3668l2.0606-2.0622zM11.3372 24v-2.9139c-2.02-.1439-3.8584-.949-5.3019-2.2018l-2.0606 2.0623c1.975 1.773 4.538 2.9022 7.361 3.0534z"/></svg>'
+const ORIGIN = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:4000"
+const IS_LOCAL_DEV = ORIGIN.includes("localhost")
+const SHADCN_VERSION = process.env.NEXT_PUBLIC_RC ? "@rc" : "@latest"
+const PACKAGE_MANAGERS = ["pnpm", "npm", "yarn", "bun"] as const
+type PackageManager = (typeof PACKAGE_MANAGERS)[number]
+
+export function ProjectForm({
+  className,
+}: React.ComponentProps<typeof Button>) {
+  const [open, setOpen] = React.useState(false)
+  const [params, setParams] = useDesignSystemSearchParams()
+  const presetCode = usePresetCode()
+  const [config, setConfig] = useConfig()
+  const [hasCopied, setHasCopied] = React.useState(false)
+
+  const packageManager = (config.packageManager || "pnpm") as PackageManager
+  const framework = React.useMemo(
+    () => getFramework(params.template ?? "next"),
+    [params.template]
+  )
+  const isMonorepo = React.useMemo(
+    () => params.template?.endsWith("-monorepo") ?? false,
+    [params.template]
+  )
+
+  const hasMonorepo = !NO_MONOREPO_FRAMEWORKS.includes(
+    framework as (typeof NO_MONOREPO_FRAMEWORKS)[number]
+  )
+
+  const commands = React.useMemo(() => {
+    const presetFlag = ` --preset ${presetCode}`
+    const templateFlag = ` --template ${framework}`
+    const monorepoFlag = isMonorepo ? " --monorepo" : ""
+    const rtlFlag = params.rtl ? " --rtl" : ""
+    const flags = `${presetFlag}${templateFlag}${monorepoFlag}${rtlFlag}`
+
+    return IS_LOCAL_DEV && !process.env.NEXT_PUBLIC_RC
+      ? {
+          pnpm: `shadcn init${flags}`,
+          npm: `shadcn init${flags}`,
+          yarn: `shadcn init${flags}`,
+          bun: `shadcn init${flags}`,
+        }
+      : {
+          pnpm: `pnpm dlx shadcn${SHADCN_VERSION} init${flags}`,
+          npm: `npx shadcn${SHADCN_VERSION} init${flags}`,
+          yarn: `yarn dlx shadcn${SHADCN_VERSION} init${flags}`,
+          bun: `bunx --bun shadcn${SHADCN_VERSION} init${flags}`,
+        }
+  }, [framework, isMonorepo, params.rtl, presetCode])
+
+  const command = commands[packageManager]
+
+  React.useEffect(() => {
+    if (hasCopied) {
+      const timer = setTimeout(() => setHasCopied(false), 2000)
+      return () => clearTimeout(timer)
+    }
+  }, [hasCopied])
+
+  const handleCopy = React.useCallback(() => {
+    const properties: Record<string, string> = {
+      command,
+    }
+    if (params.template) {
+      properties.template = params.template
+    }
+    copyToClipboardWithMeta(command, {
+      name: "copy_npm_command",
+      properties,
+    })
+    setHasCopied(true)
+  }, [command, params.template])
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger render={<Button className={cn(className)} />}>
+        Create Project
+      </DialogTrigger>
+      <DialogContent className="min-w-0 sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Create Project</DialogTitle>
+          <DialogDescription>
+            Pick a template and configure your project. Available for all major
+            React frameworks.
+          </DialogDescription>
+        </DialogHeader>
+        <FieldGroup>
+          <Field>
+            <FieldLabel className="sr-only">Template</FieldLabel>
+            <TemplateGrid template={params.template} setParams={setParams} />
+          </Field>
+          <FieldSeparator />
+          <FieldSet>
+            <FieldLegend variant="label" className="sr-only">
+              Options
+            </FieldLegend>
+            <Field
+              orientation="horizontal"
+              data-disabled={hasMonorepo ? undefined : "true"}
+            >
+              <FieldLabel htmlFor="monorepo">
+                <span
+                  className="size-4 text-foreground [&_svg]:size-4 [&_svg]:fill-current"
+                  dangerouslySetInnerHTML={{
+                    __html: TURBOREPO_LOGO,
+                  }}
+                />
+                Create a monorepo
+              </FieldLabel>
+              <Switch
+                id="monorepo"
+                checked={params.template?.endsWith("-monorepo") ?? false}
+                disabled={!hasMonorepo}
+                onCheckedChange={(checked) => {
+                  const framework = getFramework(params.template ?? "next")
+                  setParams({
+                    template: getTemplateValue(
+                      framework,
+                      checked === true
+                    ) as typeof params.template,
+                  })
+                }}
+              />
+            </Field>
+            <FieldSeparator />
+            <Field orientation="horizontal">
+              <FieldLabel htmlFor="rtl">
+                <HugeiconsIcon icon={Globe02Icon} className="size-4" />
+                Enable RTL support
+              </FieldLabel>
+              <Switch
+                id="rtl"
+                checked={params.rtl}
+                onCheckedChange={(checked) =>
+                  setParams({ rtl: checked === true })
+                }
+              />
+            </Field>
+          </FieldSet>
+        </FieldGroup>
+        <DialogFooter className="min-w-0">
+          <div className="flex w-full min-w-0 flex-col gap-3">
+            <Tabs
+              value={packageManager}
+              onValueChange={(value) => {
+                setConfig((prev) => ({
+                  ...prev,
+                  packageManager: value as PackageManager,
+                }))
+              }}
+              className="min-w-0 gap-0 overflow-hidden rounded-lg border bg-surface"
+            >
+              <div className="flex items-center gap-2 px-1 py-1">
+                <TabsList className="font-mono">
+                  {PACKAGE_MANAGERS.map((manager) => {
+                    return (
+                      <TabsTrigger
+                        key={manager}
+                        value={manager}
+                        className="data-[state=active]:shadow-none"
+                      >
+                        {manager}
+                      </TabsTrigger>
+                    )
+                  })}
+                </TabsList>
+                <Button
+                  size="icon-sm"
+                  variant="ghost"
+                  className="ml-auto"
+                  onClick={handleCopy}
+                >
+                  {hasCopied ? (
+                    <HugeiconsIcon icon={Tick02Icon} />
+                  ) : (
+                    <HugeiconsIcon icon={Copy01Icon} />
+                  )}
+                  <span className="sr-only">Copy command</span>
+                </Button>
+              </div>
+              {Object.entries(commands).map(([key, cmd]) => {
+                return (
+                  <TabsContent key={key} value={key}>
+                    <div className="relative overflow-hidden border-t border-border/50 bg-surface px-3 py-3 text-surface-foreground">
+                      <div className="no-scrollbar overflow-x-auto">
+                        <code className="font-mono text-sm whitespace-nowrap">
+                          {cmd}
+                        </code>
+                      </div>
+                    </div>
+                  </TabsContent>
+                )
+              })}
+            </Tabs>
+            <Button onClick={handleCopy} className="h-9 w-full">
+              {hasCopied ? "Copied" : "Copy Command"}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const TemplateGrid = React.memo(function TemplateGrid({
+  template,
+  setParams,
+}: {
+  template: DesignSystemSearchParams["template"]
+  setParams: ReturnType<typeof useDesignSystemSearchParams>[1]
+}) {
+  const isMonorepo = template?.endsWith("-monorepo") ?? false
+  const framework = getFramework(template ?? "next")
+
+  const handleTemplateChange = React.useCallback(
+    (value: string) => {
+      setParams({
+        template: getTemplateValue(
+          value,
+          isMonorepo
+        ) as DesignSystemSearchParams["template"],
+      })
+    },
+    [isMonorepo, setParams]
+  )
+
+  return (
+    <RadioGroup
+      value={framework}
+      onValueChange={handleTemplateChange}
+      className="grid grid-cols-3 gap-2"
+    >
+      {TEMPLATES.map((item) => (
+        <FieldLabel
+          key={item.value}
+          htmlFor={`template-${item.value}`}
+          className="py-1"
+        >
+          <Field className="gap-0" orientation="horizontal">
+            <FieldContent className="flex flex-col items-center justify-center gap-2">
+              <div
+                className="size-6 text-foreground [&_svg]:size-6 *:[svg]:text-foreground!"
+                dangerouslySetInnerHTML={{
+                  __html: item.logo,
+                }}
+              ></div>
+              <FieldTitle className="text-xs">{item.title}</FieldTitle>
+            </FieldContent>
+            <RadioGroupItem
+              value={item.value}
+              id={`template-${item.value}`}
+              className="sr-only absolute"
+            />
+          </Field>
+        </FieldLabel>
+      ))}
+    </RadioGroup>
+  )
+})
diff --git a/apps/v4/app/(create)/components/radius-picker.tsx b/apps/v4/app/(create)/components/radius-picker.tsx
index 27d58da645..05653604bb 100644
--- a/apps/v4/app/(create)/components/radius-picker.tsx
+++ b/apps/v4/app/(create)/components/radius-picker.tsx
@@ -1,5 +1,7 @@
 "use client"
 
+import * as React from "react"
+
 import { RADII, type RadiusValue } from "@/registry/config"
 import { LockButton } from "@/app/(create)/components/lock-button"
 import {
@@ -21,22 +23,26 @@ export function RadiusPicker({
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
   const [params, setParams] = useDesignSystemSearchParams()
+  const isRadiusLocked = params.style === "lyra"
+  const selectedRadiusName = isRadiusLocked ? "none" : params.radius
 
-  const currentRadius = RADII.find((radius) => radius.name === params.radius)
+  const currentRadius = RADII.find(
+    (radius) => radius.name === selectedRadiusName
+  )
   const defaultRadius = RADII.find((radius) => radius.name === "default")
   const otherRadii = RADII.filter((radius) => radius.name !== "default")
 
   return (
     <div className="group/picker relative">
       <Picker>
-        <PickerTrigger>
+        <PickerTrigger disabled={isRadiusLocked}>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Radius</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Radius</div>
+            <div className="text-sm font-medium text-foreground">
               {currentRadius?.label}
             </div>
           </div>
-          <div className="text-foreground pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base select-none">
+          <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 rotate-90 items-center justify-center text-base text-foreground select-none md:right-2.5">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
@@ -63,6 +69,9 @@ export function RadiusPicker({
           <PickerRadioGroup
             value={currentRadius?.name}
             onValueChange={(value) => {
+              if (isRadiusLocked) {
+                return
+              }
               setParams({ radius: value as RadiusValue })
             }}
           >
@@ -71,20 +80,20 @@ export function RadiusPicker({
                 <PickerRadioItem
                   key={defaultRadius.name}
                   value={defaultRadius.name}
+                  closeOnClick={isMobile}
                 >
-                  <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                    <div>{defaultRadius.label}</div>
-                    <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                      Use radius from style
-                    </div>
-                  </div>
+                  {defaultRadius.label}
                 </PickerRadioItem>
               )}
             </PickerGroup>
             <PickerSeparator />
             <PickerGroup>
               {otherRadii.map((radius) => (
-                <PickerRadioItem key={radius.name} value={radius.name}>
+                <PickerRadioItem
+                  key={radius.name}
+                  value={radius.name}
+                  closeOnClick={isMobile}
+                >
                   {radius.label}
                 </PickerRadioItem>
               ))}
@@ -94,7 +103,7 @@ export function RadiusPicker({
       </Picker>
       <LockButton
         param="radius"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
       />
     </div>
   )
diff --git a/apps/v4/app/(create)/components/random-button.tsx b/apps/v4/app/(create)/components/random-button.tsx
index f6d5279c13..cc23a4cfe8 100644
--- a/apps/v4/app/(create)/components/random-button.tsx
+++ b/apps/v4/app/(create)/components/random-button.tsx
@@ -1,146 +1,34 @@
 "use client"
 
-import * as React from "react"
 import Script from "next/script"
+import { Button } from "@/examples/base/ui/button"
 import { DiceFaces05Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
-import {
-  BASE_COLORS,
-  getThemesForBaseColor,
-  iconLibraries,
-  MENU_ACCENTS,
-  MENU_COLORS,
-  RADII,
-  STYLES,
-} from "@/registry/config"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Kbd } from "@/registry/new-york-v4/ui/kbd"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
-import { useLocks } from "@/app/(create)/hooks/use-locks"
-import { FONTS } from "@/app/(create)/lib/fonts"
-import {
-  applyBias,
-  RANDOMIZE_BIASES,
-  type RandomizeContext,
-} from "@/app/(create)/lib/randomize-biases"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { cn } from "@/lib/utils"
+import { useRandom } from "@/app/(create)/hooks/use-random"
 
 export const RANDOMIZE_FORWARD_TYPE = "randomize-forward"
 
-function randomItem<T>(array: readonly T[]): T {
-  return array[Math.floor(Math.random() * array.length)]
-}
-
-export function RandomButton() {
-  const { locks } = useLocks()
-  const [params, setParams] = useDesignSystemSearchParams()
-
-  const handleRandomize = React.useCallback(() => {
-    // Use current value if locked, otherwise randomize.
-    const baseColor = locks.has("baseColor")
-      ? params.baseColor
-      : randomItem(BASE_COLORS).name
-    const selectedStyle = locks.has("style")
-      ? params.style
-      : randomItem(STYLES).name
-
-    // Build context for bias application.
-    const context: RandomizeContext = {
-      style: selectedStyle,
-      baseColor,
-    }
-
-    const availableThemes = getThemesForBaseColor(baseColor)
-    const availableFonts = applyBias(FONTS, context, RANDOMIZE_BIASES.fonts)
-    const availableRadii = applyBias(RADII, context, RANDOMIZE_BIASES.radius)
-
-    const selectedTheme = locks.has("theme")
-      ? params.theme
-      : randomItem(availableThemes).name
-    const selectedFont = locks.has("font")
-      ? params.font
-      : randomItem(availableFonts).value
-    const selectedRadius = locks.has("radius")
-      ? params.radius
-      : randomItem(availableRadii).name
-    const selectedIconLibrary = locks.has("iconLibrary")
-      ? params.iconLibrary
-      : randomItem(Object.values(iconLibraries)).name
-    const selectedMenuAccent = locks.has("menuAccent")
-      ? params.menuAccent
-      : randomItem(MENU_ACCENTS).value
-    const selectedMenuColor = locks.has("menuColor")
-      ? params.menuColor
-      : randomItem(MENU_COLORS).value
-
-    // Update context with selected values for potential future biases.
-    context.theme = selectedTheme
-    context.font = selectedFont
-    context.radius = selectedRadius
-
-    setParams({
-      style: selectedStyle,
-      baseColor,
-      theme: selectedTheme,
-      iconLibrary: selectedIconLibrary,
-      font: selectedFont,
-      menuAccent: selectedMenuAccent,
-      menuColor: selectedMenuColor,
-      radius: selectedRadius,
-    })
-  }, [setParams, locks, params])
-
-  React.useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if ((e.key === "r" || e.key === "R") && !e.metaKey && !e.ctrlKey) {
-        if (
-          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
-          e.target instanceof HTMLInputElement ||
-          e.target instanceof HTMLTextAreaElement ||
-          e.target instanceof HTMLSelectElement
-        ) {
-          return
-        }
-
-        e.preventDefault()
-        handleRandomize()
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [handleRandomize])
+export function RandomButton({
+  variant = "outline",
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { randomize } = useRandom()
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={handleRandomize}
-          className="border-foreground/10 bg-muted/50 h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
-        >
-          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Shuffle</div>
-            <div className="text-foreground text-sm font-medium">
-              Try Random
-            </div>
-          </div>
-          <HugeiconsIcon icon={DiceFaces05Icon} className="size-5 md:hidden" />
-          <Kbd className="bg-foreground/10 text-foreground hidden md:flex">
-            R
-          </Kbd>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent side="left">
-        Use browser back/forward to navigate history
-      </TooltipContent>
-    </Tooltip>
+    <Button
+      variant={variant}
+      onClick={randomize}
+      className={cn(
+        "touch-manipulation bg-transparent! px-2! py-0! text-sm! transition-none select-none hover:bg-muted! pointer-coarse:h-10!",
+        className
+      )}
+      {...props}
+    >
+      <span className="w-full text-center font-medium">Shuffle</span>
+    </Button>
   )
 }
 
diff --git a/apps/v4/app/(create)/components/reset-button.tsx b/apps/v4/app/(create)/components/reset-button.tsx
index 92bca79ce2..c68e4301c2 100644
--- a/apps/v4/app/(create)/components/reset-button.tsx
+++ b/apps/v4/app/(create)/components/reset-button.tsx
@@ -1,10 +1,5 @@
 "use client"
 
-import * as React from "react"
-import { Undo02Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-
-import { DEFAULT_CONFIG } from "@/registry/config"
 import {
   AlertDialog,
   AlertDialogAction,
@@ -14,60 +9,25 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/registry/new-york-v4/ui/alert-dialog"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+} from "@/examples/base/ui/alert-dialog"
 
-export function ResetButton() {
-  const [params, setParams] = useDesignSystemSearchParams()
+import { useReset } from "@/app/(create)/hooks/use-reset"
 
-  const handleReset = React.useCallback(() => {
-    setParams({
-      base: params.base, // Keep the current base value.
-      style: DEFAULT_CONFIG.style,
-      baseColor: DEFAULT_CONFIG.baseColor,
-      theme: DEFAULT_CONFIG.theme,
-      iconLibrary: DEFAULT_CONFIG.iconLibrary,
-      font: DEFAULT_CONFIG.font,
-      menuAccent: DEFAULT_CONFIG.menuAccent,
-      menuColor: DEFAULT_CONFIG.menuColor,
-      radius: DEFAULT_CONFIG.radius,
-      template: DEFAULT_CONFIG.template,
-      item: "preview",
-    })
-  }, [setParams, params.base])
+export function ResetDialog() {
+  const { showResetDialog, setShowResetDialog, confirmReset } = useReset()
 
   return (
-    <AlertDialog>
-      <AlertDialogTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="border-foreground/10 bg-muted/50 hidden h-[calc(--spacing(13.5))] w-[140px] touch-manipulation justify-between rounded-xl border select-none focus-visible:border-transparent focus-visible:ring-1 sm:rounded-lg md:flex md:w-full md:rounded-lg md:border-transparent md:bg-transparent md:pr-3.5! md:pl-2!"
-        >
-          <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Reset</div>
-            <div className="text-foreground text-sm font-medium">
-              Start Over
-            </div>
-          </div>
-          <HugeiconsIcon icon={Undo02Icon} className="-translate-x-0.5" />
-        </Button>
-      </AlertDialogTrigger>
-      <AlertDialogContent className="dialog-ring p-4 sm:max-w-sm">
+    <AlertDialog open={showResetDialog} onOpenChange={setShowResetDialog}>
+      <AlertDialogContent size="sm">
         <AlertDialogHeader>
           <AlertDialogTitle>Reset to defaults?</AlertDialogTitle>
           <AlertDialogDescription>
             This will reset all customization options to their default values.
-            This action cannot be undone.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel className="rounded-lg">Cancel</AlertDialogCancel>
-          <AlertDialogAction className="rounded-lg" onClick={handleReset}>
-            Reset
-          </AlertDialogAction>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={confirmReset}>Reset</AlertDialogAction>
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>
diff --git a/apps/v4/app/(create)/components/share-button.tsx b/apps/v4/app/(create)/components/share-button.tsx
index c65ea08db9..51c118cf2e 100644
--- a/apps/v4/app/(create)/components/share-button.tsx
+++ b/apps/v4/app/(create)/components/share-button.tsx
@@ -1,37 +1,23 @@
 "use client"
 
 import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
 import { Share03Icon, Tick02Icon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
 import { copyToClipboardWithMeta } from "@/components/copy-button"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
+import { usePresetCode } from "@/app/(create)/hooks/use-design-system"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function ShareButton() {
   const [params] = useDesignSystemSearchParams()
+  const presetCode = usePresetCode()
   const [hasCopied, setHasCopied] = React.useState(false)
 
   const shareUrl = React.useMemo(() => {
     const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000"
-    return `${origin}/create?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&item=${params.item}`
-  }, [
-    params.base,
-    params.style,
-    params.baseColor,
-    params.theme,
-    params.iconLibrary,
-    params.font,
-    params.menuAccent,
-    params.menuColor,
-    params.radius,
-    params.item,
-  ])
+    return `${origin}/create?preset=${presetCode}&item=${params.item}`
+  }, [presetCode, params.item])
 
   React.useEffect(() => {
     if (hasCopied) {
@@ -51,23 +37,21 @@ export function ShareButton() {
   }, [shareUrl])
 
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          size="sm"
-          variant="outline"
-          className="rounded-lg shadow-none lg:w-8 xl:w-fit"
-          onClick={handleCopy}
-        >
-          {hasCopied ? (
-            <HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
-          ) : (
-            <HugeiconsIcon icon={Share03Icon} strokeWidth={2} />
-          )}
-          <span className="lg:hidden xl:block">Share</span>
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>Copy Link</TooltipContent>
-    </Tooltip>
+    <Button variant="outline" className="hidden md:flex" onClick={handleCopy}>
+      {hasCopied ? (
+        <HugeiconsIcon
+          icon={Tick02Icon}
+          strokeWidth={2}
+          data-icon="inline-start"
+        />
+      ) : (
+        <HugeiconsIcon
+          icon={Share03Icon}
+          strokeWidth={2}
+          data-icon="inline-start"
+        />
+      )}
+      Share
+    </Button>
   )
 }
diff --git a/apps/v4/app/(create)/components/style-picker.tsx b/apps/v4/app/(create)/components/style-picker.tsx
index 0673808e65..511df2bca9 100644
--- a/apps/v4/app/(create)/components/style-picker.tsx
+++ b/apps/v4/app/(create)/components/style-picker.tsx
@@ -10,7 +10,6 @@ import {
   PickerGroup,
   PickerRadioGroup,
   PickerRadioItem,
-  PickerSeparator,
   PickerTrigger,
 } from "@/app/(create)/components/picker"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
@@ -33,13 +32,13 @@ export function StylePicker({
       <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Style</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Style</div>
+            <div className="text-sm font-medium text-foreground">
               {currentStyle?.title}
             </div>
           </div>
           {currentStyle?.icon && (
-            <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center select-none">
+            <div className="pointer-events-none absolute top-1/2 right-4 flex size-4 -translate-y-1/2 items-center justify-center select-none md:right-2.5">
               {React.cloneElement(currentStyle.icon, {
                 className: "size-4",
               })}
@@ -50,7 +49,6 @@ export function StylePicker({
           anchor={isMobile ? anchorRef : undefined}
           side={isMobile ? "top" : "right"}
           align={isMobile ? "center" : "start"}
-          className="md:w-64"
         >
           <PickerRadioGroup
             value={currentStyle?.name}
@@ -59,29 +57,14 @@ export function StylePicker({
             }}
           >
             <PickerGroup>
-              {styles.map((style, index) => (
-                <React.Fragment key={style.name}>
-                  <PickerRadioItem value={style.name}>
-                    <div className="flex items-start gap-2">
-                      {style.icon && (
-                        <div className="flex size-4 translate-y-0.5 items-center justify-center">
-                          {React.cloneElement(style.icon, {
-                            className: "size-4",
-                          })}
-                        </div>
-                      )}
-                      <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                        <div>{style.title}</div>
-                        <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                          {style.description}
-                        </div>
-                      </div>
-                    </div>
-                  </PickerRadioItem>
-                  {index < styles.length - 1 && (
-                    <PickerSeparator className="opacity-50" />
-                  )}
-                </React.Fragment>
+              {styles.map((style) => (
+                <PickerRadioItem
+                  value={style.name}
+                  key={style.name}
+                  closeOnClick={isMobile}
+                >
+                  {style.title}
+                </PickerRadioItem>
               ))}
             </PickerGroup>
           </PickerRadioGroup>
@@ -89,7 +72,7 @@ export function StylePicker({
       </Picker>
       <LockButton
         param="style"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
       />
     </div>
   )
diff --git a/apps/v4/app/(create)/components/theme-picker.tsx b/apps/v4/app/(create)/components/theme-picker.tsx
index c42df363a0..00a7f52eaf 100644
--- a/apps/v4/app/(create)/components/theme-picker.tsx
+++ b/apps/v4/app/(create)/components/theme-picker.tsx
@@ -1,7 +1,6 @@
 "use client"
 
 import * as React from "react"
-import { useTheme } from "next-themes"
 
 import { useMounted } from "@/hooks/use-mounted"
 import { BASE_COLORS, type Theme, type ThemeName } from "@/registry/config"
@@ -26,7 +25,6 @@ export function ThemePicker({
   isMobile: boolean
   anchorRef: React.RefObject<HTMLDivElement | null>
 }) {
-  const { resolvedTheme } = useTheme()
   const mounted = useMounted()
   const [params, setParams] = useDesignSystemSearchParams()
 
@@ -51,24 +49,22 @@ export function ThemePicker({
       <Picker>
         <PickerTrigger>
           <div className="flex flex-col justify-start text-left">
-            <div className="text-muted-foreground text-xs">Theme</div>
-            <div className="text-foreground text-sm font-medium">
+            <div className="text-xs text-muted-foreground">Theme</div>
+            <div className="text-sm font-medium text-foreground">
               {currentTheme?.title}
             </div>
           </div>
-          {mounted && resolvedTheme && (
+          {mounted && (
             <div
               style={
                 {
                   "--color":
-                    currentTheme?.cssVars?.[
-                      resolvedTheme as "light" | "dark"
-                    ]?.[
+                    currentTheme?.cssVars?.dark?.[
                       currentThemeIsBaseColor ? "muted-foreground" : "primary"
                     ],
                 } as React.CSSProperties
               }
-              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
+              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none md:right-2.5"
             />
           )}
         </PickerTrigger>
@@ -76,7 +72,7 @@ export function ThemePicker({
           anchor={isMobile ? anchorRef : undefined}
           side={isMobile ? "top" : "right"}
           align={isMobile ? "center" : "start"}
-          className="max-h-[23rem]"
+          className="max-h-92"
         >
           <PickerRadioGroup
             value={currentTheme?.name}
@@ -90,34 +86,13 @@ export function ThemePicker({
                   BASE_COLORS.find((baseColor) => baseColor.name === theme.name)
                 )
                 .map((theme) => {
-                  const isBaseColor = BASE_COLORS.find(
-                    (baseColor) => baseColor.name === theme.name
-                  )
                   return (
-                    <PickerRadioItem key={theme.name} value={theme.name}>
-                      <div className="flex items-start gap-2">
-                        {mounted && resolvedTheme && (
-                          <div
-                            style={
-                              {
-                                "--color":
-                                  theme.cssVars?.[
-                                    resolvedTheme as "light" | "dark"
-                                  ]?.[
-                                    isBaseColor ? "muted-foreground" : "primary"
-                                  ],
-                              } as React.CSSProperties
-                            }
-                            className="size-4 translate-y-1 rounded-full bg-(--color)"
-                          />
-                        )}
-                        <div className="flex flex-col justify-start pointer-coarse:gap-1">
-                          <div>{theme.title}</div>
-                          <div className="text-muted-foreground text-xs pointer-coarse:text-sm">
-                            Match base color
-                          </div>
-                        </div>
-                      </div>
+                    <PickerRadioItem
+                      key={theme.name}
+                      value={theme.name}
+                      closeOnClick={isMobile}
+                    >
+                      {theme.title}
                     </PickerRadioItem>
                   )
                 })}
@@ -133,23 +108,12 @@ export function ThemePicker({
                 )
                 .map((theme) => {
                   return (
-                    <PickerRadioItem key={theme.name} value={theme.name}>
-                      <div className="flex items-center gap-2">
-                        {mounted && resolvedTheme && (
-                          <div
-                            style={
-                              {
-                                "--color":
-                                  theme.cssVars?.[
-                                    resolvedTheme as "light" | "dark"
-                                  ]?.["primary"],
-                              } as React.CSSProperties
-                            }
-                            className="size-4 rounded-full bg-(--color)"
-                          />
-                        )}
-                        {theme.title}
-                      </div>
+                    <PickerRadioItem
+                      key={theme.name}
+                      value={theme.name}
+                      closeOnClick={isMobile}
+                    >
+                      {theme.title}
                     </PickerRadioItem>
                   )
                 })}
@@ -159,7 +123,7 @@ export function ThemePicker({
       </Picker>
       <LockButton
         param="theme"
-        className="absolute top-1/2 right-10 -translate-y-1/2"
+        className="absolute top-1/2 right-8 -translate-y-1/2"
       />
     </div>
   )
diff --git a/apps/v4/app/(create)/components/toolbar-controls.tsx b/apps/v4/app/(create)/components/toolbar-controls.tsx
deleted file mode 100644
index 4b22edbeee..0000000000
--- a/apps/v4/app/(create)/components/toolbar-controls.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-"use client"
-
-import * as React from "react"
-import Link from "next/link"
-import {
-  ComputerTerminal01Icon,
-  Copy01Icon,
-  Tick02Icon,
-} from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/react"
-import { toast } from "sonner"
-
-import { useConfig } from "@/hooks/use-config"
-import { copyToClipboardWithMeta } from "@/components/copy-button"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/new-york-v4/ui/dialog"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldTitle,
-} from "@/registry/new-york-v4/ui/field"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/new-york-v4/ui/radio-group"
-import { Switch } from "@/registry/new-york-v4/ui/switch"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/new-york-v4/ui/tabs"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-
-const TEMPLATES = [
-  {
-    value: "next",
-    title: "Next.js",
-    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Next.js</title><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" fill="currentColor"/></svg>',
-  },
-  {
-    value: "start",
-    title: "TanStack Start",
-    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TanStack</title><path d="M11.078.042c.316-.042.65-.014.97-.014 1.181 0 2.341.184 3.472.532a12.3 12.3 0 0 1 3.973 2.086 11.9 11.9 0 0 1 3.432 4.33c1.446 3.15 1.436 6.97-.046 10.107-.958 2.029-2.495 3.727-4.356 4.965-1.518 1.01-3.293 1.629-5.1 1.848-2.298.279-4.784-.129-6.85-1.188-3.88-1.99-6.518-5.994-6.57-10.382-.01-.846.003-1.697.17-2.534.273-1.365.748-2.683 1.463-3.88a12 12 0 0 1 2.966-3.36A12.3 12.3 0 0 1 9.357.3a12 12 0 0 1 1.255-.2l.133-.016zM7.064 19.99c-.535.057-1.098.154-1.557.454.103.025.222 0 .33 0 .258 0 .52-.01.778.002.647.028 1.32.131 1.945.303.8.22 1.505.65 2.275.942.813.307 1.622.402 2.484.402.435 0 .866-.001 1.287-.12-.22-.117-.534-.095-.778-.144a11 11 0 0 1-1.556-.416 12 12 0 0 1-1.093-.467l-.23-.108a15 15 0 0 0-1.012-.44c-.905-.343-1.908-.512-2.873-.408m.808-2.274c-1.059 0-2.13.187-3.083.667q-.346.177-.659.41c-.063.046-.175.106-.199.188s.061.151.11.204c.238-.127.464-.261.718-.357 1.64-.624 3.63-.493 5.268.078.817.285 1.569.712 2.365 1.046.89.374 1.798.616 2.753.74 1.127.147 2.412.028 3.442-.48.362-.179.865-.451 1.018-.847-.189.017-.36.098-.539.154a9 9 0 0 1-.868.222c-.994.2-2.052.24-3.053.06-.943-.17-1.82-.513-2.693-.873l-.111-.046-.223-.092-.112-.046a26 26 0 0 0-1.35-.527c-.89-.31-1.842-.5-2.784-.5M9.728 1.452c-1.27.28-2.407.826-3.502 1.514-.637.4-1.245.81-1.796 1.323-.82.765-1.447 1.695-1.993 2.666-.563 1-.924 2.166-1.098 3.297-.172 1.11-.2 2.277-.004 3.388.245 1.388.712 2.691 1.448 3.897.248-.116.424-.38.629-.557.414-.359.85-.691 1.317-.978a3.5 3.5 0 0 1 .539-.264c.07-.029.187-.055.22-.132.053-.124-.045-.34-.062-.468a7 7 0 0 1-.068-1.109 9.7 9.7 0 0 1 .61-3.177c.29-.76.73-1.45 1.254-2.069.177-.21.365-.405.56-.6.115-.114.258-.212.33-.359-.376 0-.751.108-1.108.218-.769.237-1.518.588-2.155 1.084-.291.226-.504.522-.779.76-.084.073-.235.17-.352.116-.176-.083-.149-.43-.169-.59-.078-.612.154-1.387.45-1.918.473-.852 1.348-1.58 2.376-1.555.444.011.833.166 1.257.266-.107-.153-.252-.264-.389-.39a5.4 5.4 0 0 0-1.107-.8c-.163-.085-.338-.136-.509-.2-.086-.03-.195-.074-.227-.17-.06-.177.26-.342.377-.417.453-.289 1.01-.527 1.556-.54.854-.021 1.688.452 2.04 1.258.123.284.16.583.184.885l.004.057.006.085.002.029.005.057.004.056c.268-.218.457-.54.718-.774.612-.547 1.45-.79 2.245-.544a2.97 2.97 0 0 1 1.71 1.378c.097.173.365.595.171.767-.152.134-.344.03-.504-.026a3 3 0 0 0-.372-.094l-.068-.014-.069-.013a3.9 3.9 0 0 0-1.377-.002c-.282.05-.557.15-.838.192v.06c.768.006 1.51.444 1.89 1.109.157.275.235.59.295.9.075.38.022.796-.082 1.168-.035.125-.098.336-.247.365-.106.02-.195-.085-.256-.155a4.6 4.6 0 0 0-.492-.522 20 20 0 0 0-1.467-1.14c-.267-.19-.56-.44-.868-.556.087.208.171.402.2.63.088.667-.192 1.296-.612 1.798a2.6 2.6 0 0 1-.426.427c-.067.05-.151.114-.24.1-.277-.044-.31-.463-.353-.677-.144-.726-.086-1.447.114-2.158-.178.09-.307.287-.418.45a5.3 5.3 0 0 0-.612 1.138c-.61 1.617-.604 3.51.186 5.066.088.174.221.15.395.15h.157a3 3 0 0 1 .472.018c.08.01.193 0 .257.06.077.072.036.194.018.282-.05.246-.066.469-.066.72.328-.051.419-.576.535-.84.131-.298.265-.597.387-.9.06-.148.14-.314.119-.479-.024-.185-.157-.381-.25-.54-.177-.298-.378-.606-.508-.929-.104-.258-.007-.58.286-.672.161-.05.334.049.439.166.22.244.363.609.523.896l1.249 2.248q.159.286.32.57c.043.074.086.188.173.219.077.028.182-.012.26-.027.198-.04.398-.083.598-.12.24-.043.605-.035.778-.222-.253-.08-.545-.075-.808-.057-.158.01-.333.067-.479-.025-.216-.137-.36-.455-.492-.667-.326-.525-.633-1.057-.945-1.59l-.05-.084-.1-.17q-.075-.126-.149-.255c-.037-.066-.092-.153-.039-.227.056-.076.179-.08.29-.081h.021q.066.001.117-.004a10 10 0 0 1 1.347-.107c-.035-.122-.135-.26-.103-.39.071-.292.49-.383.686-.174.131.14.207.334.292.504.113.223.24.44.361.66.211.383.441.757.658 1.138l.055.094.028.047c.093.156.187.314.238.489-.753-.035-1.318-.909-1.646-1.499-.027.095.016.179.05.27q.103.282.262.54c.152.244.326.495.556.673.408.315.945.317 1.436.283.315-.022.708-.165 1.018-.068s.434.438.25.7c-.138.196-.321.27-.55.3.162.346.373.667.527 1.02.064.146.13.37.283.448.102.051.248.003.358 0-.11-.292-.317-.54-.419-.839.31.015.61.176.898.28.567.202 1.128.424 1.687.648l.258.104c.23.092.462.183.689.283.083.037.198.123.29.07.074-.043.123-.146.169-.215a10.3 10.3 0 0 0 1.393-3.208c.75-2.989.106-6.287-1.695-8.783-.692-.96-1.562-1.789-2.522-2.476-2.401-1.718-5.551-2.407-8.44-1.768m4.908 14.904c-.636.166-1.292.317-1.945.401.086.293.296.577.45.84.059.101.122.237.24.281.132.05.292-.03.417-.072-.058-.158-.155-.3-.235-.45-.033-.06-.084-.133-.056-.206.05-.137.263-.13.381-.153.31-.063.617-.142.928-.204.114-.023.274-.085.389-.047.086.03.138.1.187.174l.022.033q.043.07.097.122c.125.113.313.13.472.162-.097-.219-.259-.41-.362-.63-.06-.127-.11-.315-.242-.388-.182-.102-.557.089-.743.137m-4.01-1.457c-.03.38-.147.689-.33 1.019.21.026.423.036.629.087.154.038.296.11.449.153-.082-.224-.233-.423-.35-.63-.12-.208-.226-.462-.398-.63" fill="currentColor"/></svg>',
-  },
-  {
-    value: "vite",
-    title: "Vite",
-    logo: '<svg xmlns="http://www.w3.org/2000/svg" width="410" height="404" fill="none" viewBox="0 0 410 404"><path fill="var(--foreground)" d="m399.641 59.525-183.998 329.02c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556C6.38 52.19 12.68 43.266 21.028 44.76l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719"/><path fill="var(--background)" d="M292.965 1.574 156.801 28.255a5 5 0 0 0-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.707-1.346-7.935-5.418-7.15l-39.022 7.532c-3.667.707-6.787-2.708-5.752-6.296l25.469-88.291c1.036-3.594-2.095-7.012-5.766-6.293"/></svg>',
-  },
-] as const
-
-export function ToolbarControls() {
-  const [open, setOpen] = React.useState(false)
-  const [params, setParams] = useDesignSystemSearchParams()
-  const [config, setConfig] = useConfig()
-  const [hasCopied, setHasCopied] = React.useState(false)
-
-  const packageManager = config.packageManager || "pnpm"
-
-  const commands = React.useMemo(() => {
-    const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:4000"
-    const url = `${origin}/init?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&template=${params.template}&rtl=${params.rtl}`
-    const templateFlag = params.template ? ` --template ${params.template}` : ""
-    const rtlFlag = params.rtl ? " --rtl" : ""
-    return {
-      pnpm: `pnpm dlx shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
-      npm: `npx shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
-      yarn: `yarn dlx shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
-      bun: `bunx --bun shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
-    }
-  }, [
-    params.base,
-    params.style,
-    params.baseColor,
-    params.theme,
-    params.iconLibrary,
-    params.font,
-    params.menuAccent,
-    params.menuColor,
-    params.radius,
-    params.template,
-    params.rtl,
-  ])
-
-  const command = commands[packageManager]
-
-  React.useEffect(() => {
-    if (hasCopied) {
-      const timer = setTimeout(() => setHasCopied(false), 2000)
-      return () => clearTimeout(timer)
-    }
-  }, [hasCopied])
-
-  const handleCopy = React.useCallback(() => {
-    const properties: Record<string, string> = {
-      command,
-    }
-    if (params.template) {
-      properties.template = params.template
-    }
-    copyToClipboardWithMeta(command, {
-      name: "copy_npm_command",
-      properties,
-    })
-    setOpen(false)
-    setHasCopied(true)
-    toast("Command copied to clipboard.", {
-      description:
-        "Paste and run the command in your terminal to create a new shadcn/ui project.",
-      position: "bottom-center",
-      classNames: {
-        content: "rounded-xl",
-        toast: "rounded-xl!",
-        description: "text-sm/leading-normal!",
-      },
-    })
-  }, [command, params.template, setOpen])
-
-  const handleCopyFromTabs = React.useCallback(() => {
-    const properties: Record<string, string> = {
-      command,
-    }
-    if (params.template) {
-      properties.template = params.template
-    }
-    copyToClipboardWithMeta(command, {
-      name: "copy_npm_command",
-      properties,
-    })
-    setHasCopied(true)
-  }, [command, params.template])
-
-  const selectedTemplate = TEMPLATES.find(
-    (template) => template.value === params.template
-  )
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button size="sm" className="hidden h-[31px] rounded-lg pl-2 md:flex">
-          <HugeiconsIcon
-            icon={ComputerTerminal01Icon}
-            className="hidden xl:flex"
-          />
-          Create Project
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="dialog-ring min-w-0 overflow-hidden rounded-xl sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Create Project</DialogTitle>
-          <DialogDescription className="text-balance">
-            Select a template and run this command to create a{" "}
-            {selectedTemplate?.title} + shadcn/ui project.
-          </DialogDescription>
-        </DialogHeader>
-        <FieldGroup className="gap-3">
-          <Field>
-            <FieldLabel htmlFor="template" className="sr-only">
-              Template
-            </FieldLabel>
-            <RadioGroup
-              id="template"
-              value={params.template}
-              onValueChange={(value) => {
-                setParams({
-                  template: value as "next" | "start" | "vite",
-                })
-              }}
-              className="grid grid-cols-3 gap-2"
-            >
-              {TEMPLATES.map((template) => (
-                <FieldLabel
-                  key={template.value}
-                  htmlFor={template.value}
-                  className="has-data-[state=checked]:border-primary/10 rounded-lg!"
-                >
-                  <Field className="flex min-w-0 flex-col items-center justify-center gap-2 p-3! text-center *:w-auto!">
-                    <RadioGroupItem
-                      value={template.value}
-                      id={template.value}
-                      className="sr-only"
-                    />
-                    {template.logo && (
-                      <div
-                        className="text-foreground *:[svg]:text-foreground! size-6 [&_svg]:size-6"
-                        dangerouslySetInnerHTML={{
-                          __html: template.logo,
-                        }}
-                      />
-                    )}
-                    <FieldTitle>{template.title}</FieldTitle>
-                  </Field>
-                </FieldLabel>
-              ))}
-            </RadioGroup>
-          </Field>
-          <FieldLabel className="has-data-[state=checked]:border-primary/10 rounded-lg!">
-            <Field orientation="horizontal">
-              <FieldContent className="gap-1">
-                <FieldTitle>Enable RTL</FieldTitle>
-                <FieldDescription>
-                  <a
-                    href={`/docs/rtl/${params.template}`}
-                    className="text-foreground underline"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    View the RTL setup guide for {selectedTemplate?.title}.
-                  </a>
-                </FieldDescription>
-              </FieldContent>
-              <Switch
-                checked={params.rtl}
-                onCheckedChange={(rtl) => setParams({ rtl })}
-                className="shadow-none"
-              />
-            </Field>
-          </FieldLabel>
-          <Tabs
-            value={packageManager}
-            onValueChange={(value) => {
-              setConfig({
-                ...config,
-                packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
-              })
-            }}
-            className="bg-surface min-w-0 gap-0 overflow-hidden rounded-lg border"
-          >
-            <div className="flex items-center gap-2 p-2">
-              <TabsList className="*:data-[slot=tabs-trigger]:data-[state=active]:border-input h-auto rounded-none bg-transparent p-0 font-mono group-data-[orientation=horizontal]/tabs:h-8 *:data-[slot=tabs-trigger]:h-7 *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none!">
-                <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-                <TabsTrigger value="npm">npm</TabsTrigger>
-                <TabsTrigger value="yarn">yarn</TabsTrigger>
-                <TabsTrigger value="bun">bun</TabsTrigger>
-              </TabsList>
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    size="icon-sm"
-                    variant="ghost"
-                    className="ml-auto size-7 rounded-lg"
-                    onClick={handleCopyFromTabs}
-                  >
-                    {hasCopied ? (
-                      <HugeiconsIcon icon={Tick02Icon} className="size-4" />
-                    ) : (
-                      <HugeiconsIcon icon={Copy01Icon} className="size-4" />
-                    )}
-                    <span className="sr-only">Copy command</span>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {hasCopied ? "Copied!" : "Copy command"}
-                </TooltipContent>
-              </Tooltip>
-            </div>
-            {Object.entries(commands).map(([key, cmd]) => {
-              return (
-                <TabsContent key={key} value={key}>
-                  <div className="bg-surface border-border/50 text-surface-foreground relative overflow-hidden border-t px-3 py-3">
-                    <div className="no-scrollbar overflow-x-auto">
-                      <code className="font-mono text-sm whitespace-nowrap">
-                        {cmd}
-                      </code>
-                    </div>
-                  </div>
-                </TabsContent>
-              )
-            })}
-          </Tabs>
-        </FieldGroup>
-        <DialogFooter className="bg-muted/50 -mx-6 mt-2 -mb-6 flex flex-col gap-2 border-t p-6 sm:flex-col">
-          <Button
-            size="sm"
-            onClick={handleCopy}
-            className="h-9 w-full rounded-lg"
-          >
-            Copy Command
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
diff --git a/apps/v4/app/(create)/components/v0-button.tsx b/apps/v4/app/(create)/components/v0-button.tsx
index f716e31ca0..627065d0e5 100644
--- a/apps/v4/app/(create)/components/v0-button.tsx
+++ b/apps/v4/app/(create)/components/v0-button.tsx
@@ -1,16 +1,13 @@
 "use client"
 
+import * as React from "react"
+import { Button } from "@/examples/base/ui/button"
+import { Skeleton } from "@/examples/base/ui/skeleton"
+
 import { cn } from "@/lib/utils"
 import { useIsMobile } from "@/hooks/use-mobile"
 import { useMounted } from "@/hooks/use-mounted"
 import { Icons } from "@/components/icons"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Skeleton } from "@/registry/new-york-v4/ui/skeleton"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york-v4/ui/tooltip"
 import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
 
 export function V0Button({ className }: { className?: string }) {
@@ -18,38 +15,43 @@ export function V0Button({ className }: { className?: string }) {
   const isMobile = useIsMobile()
   const isMounted = useMounted()
 
-  const url = `${process.env.NEXT_PUBLIC_APP_URL}/create/v0?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&item=${params.item}`
+  const url = React.useMemo(() => {
+    const searchParams = new URLSearchParams()
+
+    if (params.preset) {
+      searchParams.set("preset", params.preset)
+    }
+
+    searchParams.set("base", params.base)
+
+    return `${process.env.NEXT_PUBLIC_APP_URL}/init/v0?${searchParams.toString()}`
+  }, [params.preset, params.base])
+
+  const title = React.useMemo(() => {
+    return params.base && params.style
+      ? `New ${params.base}-${params.style} project`
+      : "New Project"
+  }, [params.base, params.style])
 
   if (!isMounted) {
     return <Skeleton className="h-8 w-24 rounded-lg" />
   }
 
   return (
-    <>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            size="sm"
-            variant={isMobile ? "default" : "outline"}
-            className={cn(
-              "w-24 rounded-lg shadow-none data-[variant=default]:h-[31px] lg:w-8 xl:w-24",
-              className
-            )}
-            asChild
-          >
-            <a
-              href={`${process.env.NEXT_PUBLIC_V0_URL}/chat/api/open?url=${encodeURIComponent(url)}&title=${params.item}`}
-              target="_blank"
-            >
-              <span className="lg:hidden xl:block">Open in</span>
-              <Icons.v0 className="size-5" />
-            </a>
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Open current design in v0</p>
-        </TooltipContent>
-      </Tooltip>
-    </>
+    <Button
+      nativeButton={false}
+      role="link"
+      variant={isMobile ? "default" : "outline"}
+      className={cn("h-[31px] gap-1 rounded-lg", className)}
+      render={
+        <a
+          href={`${process.env.NEXT_PUBLIC_V0_URL}/chat/api/open?url=${url}&title=${title}`}
+          target="_blank"
+        />
+      }
+    >
+      <span>Open in</span>
+      <Icons.v0 className="size-5" data-icon="inline-end" />
+    </Button>
   )
 }
diff --git a/apps/v4/app/(create)/components/welcome-dialog.tsx b/apps/v4/app/(create)/components/welcome-dialog.tsx
index 589dec5c3b..15a98d6d45 100644
--- a/apps/v4/app/(create)/components/welcome-dialog.tsx
+++ b/apps/v4/app/(create)/components/welcome-dialog.tsx
@@ -1,9 +1,7 @@
 "use client"
 
 import * as React from "react"
-
-import { Icons } from "@/components/icons"
-import { Button } from "@/registry/new-york-v4/ui/button"
+import { Button } from "@/examples/base/ui/button"
 import {
   Dialog,
   DialogClose,
@@ -12,7 +10,9 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/registry/new-york-v4/ui/dialog"
+} from "@/examples/base/ui/dialog"
+
+import { Icons } from "@/components/icons"
 
 const STORAGE_KEY = "shadcn-create-welcome-dialog"
 
@@ -26,20 +26,21 @@ export function WelcomeDialog() {
     }
   }, [])
 
-  const handleOpenChange = (open: boolean) => {
+  // Stable callback — avoids re-creation on every render. (rerender-functional-setstate)
+  const handleOpenChange = React.useCallback((open: boolean) => {
     setIsOpen(open)
     if (!open) {
       localStorage.setItem(STORAGE_KEY, "true")
     }
-  }
+  }, [])
 
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
       <DialogContent
         showCloseButton={false}
-        className="dialog-ring max-w-[23rem] min-w-0 gap-0 overflow-hidden rounded-xl p-0 sm:max-w-sm dark:bg-neutral-900"
+        className="dialog-ring max-w-92 min-w-0 gap-0 overflow-hidden rounded-xl p-0 sm:max-w-sm dark:bg-neutral-900"
       >
-        <div className="flex aspect-[2/1.2] w-full items-center justify-center rounded-t-xl bg-neutral-950 text-center text-neutral-100 sm:aspect-[2/1]">
+        <div className="flex aspect-[2/1.2] w-full items-center justify-center rounded-t-xl bg-neutral-950 text-center text-neutral-100 sm:aspect-2/1">
           <div className="font-mono text-2xl font-bold">
             <Icons.logo className="size-12" />
           </div>
@@ -48,19 +49,17 @@ export function WelcomeDialog() {
           <DialogTitle className="text-left text-base">
             Build your own shadcn/ui
           </DialogTitle>
-          <DialogDescription className="text-foreground text-left leading-relaxed">
+          <DialogDescription className="text-left leading-relaxed text-foreground">
             Customize everything from the ground up. Pick your component
             library, font, color scheme, and more.
           </DialogDescription>
-          <DialogDescription className="text-foreground mt-2 text-left leading-relaxed font-medium">
-            Available for Next.js, Vite, TanStack Start, and v0.
+          <DialogDescription className="mt-2 text-left leading-relaxed font-medium text-foreground">
+            Available for all major React frameworks.
           </DialogDescription>
         </DialogHeader>
-        <DialogFooter className="p-4 pt-0">
-          <DialogClose asChild>
-            <Button className="w-full rounded-lg shadow-none">
-              Get Started
-            </Button>
+        <DialogFooter className="m-0">
+          <DialogClose render={<Button className="w-full" />}>
+            Get Started
           </DialogClose>
         </DialogFooter>
       </DialogContent>
diff --git a/apps/v4/app/(create)/create/layout.tsx b/apps/v4/app/(create)/create/layout.tsx
index 201653ada0..6c80ef2294 100644
--- a/apps/v4/app/(create)/create/layout.tsx
+++ b/apps/v4/app/(create)/create/layout.tsx
@@ -1,3 +1,6 @@
+import { Suspense } from "react"
+
+import { HistoryProvider } from "@/app/(create)/hooks/use-history"
 import { LocksProvider } from "@/app/(create)/hooks/use-locks"
 
 export default function CreateLayout({
@@ -5,5 +8,11 @@ export default function CreateLayout({
 }: {
   children: React.ReactNode
 }) {
-  return <LocksProvider>{children}</LocksProvider>
+  return (
+    <LocksProvider>
+      <Suspense>
+        <HistoryProvider>{children}</HistoryProvider>
+      </Suspense>
+    </LocksProvider>
+  )
 }
diff --git a/apps/v4/app/(create)/create/page.tsx b/apps/v4/app/(create)/create/page.tsx
index a26a2cf9ba..013b5bd3ad 100644
--- a/apps/v4/app/(create)/create/page.tsx
+++ b/apps/v4/app/(create)/create/page.tsx
@@ -1,35 +1,13 @@
 import { type Metadata } from "next"
-import Link from "next/link"
-import { ArrowLeftIcon } from "lucide-react"
-import type { SearchParams } from "nuqs/server"
 
 import { siteConfig } from "@/lib/config"
-import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
-import { Icons } from "@/components/icons"
-import { MainNav } from "@/components/main-nav"
-import { MobileNav } from "@/components/mobile-nav"
-import { ModeSwitcher } from "@/components/mode-switcher"
-import { SiteConfig } from "@/components/site-config"
-import { BASES } from "@/registry/config"
-import { Button } from "@/registry/new-york-v4/ui/button"
-import { Separator } from "@/registry/new-york-v4/ui/separator"
-import { SidebarProvider } from "@/registry/new-york-v4/ui/sidebar"
+import { SiteHeader } from "@/components/site-header"
 import { Customizer } from "@/app/(create)/components/customizer"
-import { ItemExplorer } from "@/app/(create)/components/item-explorer"
-import { ItemPicker } from "@/app/(create)/components/item-picker"
+import { PresetHandler } from "@/app/(create)/components/preset-handler"
 import { Preview } from "@/app/(create)/components/preview"
-import { RandomButton } from "@/app/(create)/components/random-button"
-import { ResetButton } from "@/app/(create)/components/reset-button"
-import { ShareButton } from "@/app/(create)/components/share-button"
-import { ToolbarControls } from "@/app/(create)/components/toolbar-controls"
-import { V0Button } from "@/app/(create)/components/v0-button"
 import { WelcomeDialog } from "@/app/(create)/components/welcome-dialog"
-import { getItemsForBase } from "@/app/(create)/lib/api"
-import { loadDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-
-export const revalidate = false
-export const dynamic = "force-static"
+import { getAllItems } from "@/app/(create)/lib/api"
 
 export const metadata: Metadata = {
   title: "New Project",
@@ -60,87 +38,22 @@ export const metadata: Metadata = {
   },
 }
 
-export default async function CreatePage({
-  searchParams,
-}: {
-  searchParams: Promise<SearchParams>
-}) {
-  const params = await loadDesignSystemSearchParams(searchParams)
-  const base = BASES.find((b) => b.name === params.base) ?? BASES[0]
-
-  const pageTree = source.pageTree
-  const items = await getItemsForBase(base.name)
-
-  const filteredItems = items
-    .filter((item) => item !== null)
-    .map((item) => ({
-      name: item.name,
-      title: item.title,
-      type: item.type,
-    }))
-    .filter((item) => !/\d+$/.test(item.name))
+export default async function CreatePage() {
+  const itemsByBase = await getAllItems()
 
   return (
     <div
       data-slot="layout"
-      className="section-soft relative z-10 flex min-h-svh flex-col"
+      className="group/layout relative z-10 flex h-svh flex-col overflow-hidden section-soft [--customizer-width:--spacing(56)] [--gap:--spacing(4)] md:[--gap:--spacing(6)]"
     >
-      <header className="sticky top-0 z-50 w-full">
-        <div className="container-wrapper 3xl:fixed:px-0 px-6">
-          <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:h-4!">
-            <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:h-4!">
-              <MobileNav
-                tree={pageTree}
-                items={siteConfig.navItems}
-                className="flex lg:hidden"
-              />
-              <Button
-                asChild
-                variant="ghost"
-                size="icon"
-                className="hidden size-8 lg:flex"
-              >
-                <Link href="/">
-                  <Icons.logo className="size-5" />
-                  <span className="sr-only">{siteConfig.name}</span>
-                </Link>
-              </Button>
-              <MainNav items={siteConfig.navItems} className="hidden lg:flex" />
-            </div>
-            <div className="fixed inset-x-0 bottom-0 ml-auto flex flex-1 items-center justify-end gap-2 px-4.5 pb-4 sm:static sm:p-0 lg:ml-0">
-              <ItemPicker items={filteredItems} />
-              <div className="items-center gap-0 sm:hidden">
-                <RandomButton />
-                <ResetButton />
-              </div>
-              <Separator orientation="vertical" className="mr-2 flex" />
-            </div>
-            <div className="ml-auto flex items-center gap-2 sm:ml-0 md:justify-end">
-              <SiteConfig className="3xl:flex hidden" />
-              <Separator orientation="vertical" className="3xl:flex hidden" />
-              <ModeSwitcher />
-              <Separator
-                orientation="vertical"
-                className="mr-0 -ml-2 sm:ml-0"
-              />
-              <ShareButton />
-              <V0Button />
-              <ToolbarControls />
-            </div>
-          </div>
-        </div>
-      </header>
-      <main className="flex flex-1 flex-col pb-16 sm:pb-0">
-        <SidebarProvider className="flex h-auto min-h-min flex-1 flex-col items-start overflow-hidden px-0">
-          <div
-            data-slot="designer"
-            className="3xl:fixed:container flex w-full flex-1 flex-col gap-2 p-6 pt-1 pb-4 [--sidebar-width:--spacing(40)] sm:gap-2 sm:pt-2 md:flex-row md:pb-6 2xl:gap-6"
-          >
-            <ItemExplorer base={base.name} items={filteredItems} />
-            <Preview />
-            <Customizer />
-          </div>
-        </SidebarProvider>
+      <SiteHeader />
+      <main
+        data-slot="designer"
+        className="flex min-h-0 flex-1 flex-col gap-(--gap) p-(--gap) pt-[calc(var(--gap)*0.25)] md:flex-row-reverse"
+      >
+        <Preview />
+        <Customizer itemsByBase={itemsByBase} />
+        <PresetHandler />
         <WelcomeDialog />
       </main>
     </div>
diff --git a/apps/v4/app/(create)/create/v0/route.ts b/apps/v4/app/(create)/create/v0/route.ts
deleted file mode 100644
index 3c727b997c..0000000000
--- a/apps/v4/app/(create)/create/v0/route.ts
+++ /dev/null
@@ -1,374 +0,0 @@
-import { NextResponse, type NextRequest } from "next/server"
-import { track } from "@vercel/analytics/server"
-import dedent from "dedent"
-import {
-  registryItemFileSchema,
-  registryItemSchema,
-  type configSchema,
-  type RegistryItem,
-} from "shadcn/schema"
-import { transformIcons, transformMenu, transformRender } from "shadcn/utils"
-import { Project, ScriptKind } from "ts-morph"
-import { z } from "zod"
-
-import {
-  buildRegistryBase,
-  designSystemConfigSchema,
-  fonts,
-  type DesignSystemConfig,
-} from "@/registry/config"
-
-const { Index } = await import("@/registry/bases/__index__")
-
-export async function GET(request: NextRequest) {
-  try {
-    const searchParams = request.nextUrl.searchParams
-
-    const parseResult = designSystemConfigSchema.safeParse({
-      base: searchParams.get("base"),
-      style: searchParams.get("style"),
-      iconLibrary: searchParams.get("iconLibrary"),
-      baseColor: searchParams.get("baseColor"),
-      theme: searchParams.get("theme"),
-      font: searchParams.get("font"),
-      item: searchParams.get("item"),
-      menuAccent: searchParams.get("menuAccent"),
-      menuColor: searchParams.get("menuColor"),
-      radius: searchParams.get("radius"),
-    })
-
-    if (!parseResult.success) {
-      return NextResponse.json(
-        { error: parseResult.error.issues[0].message },
-        { status: 400 }
-      )
-    }
-
-    const designSystemConfig = parseResult.data
-
-    track("create_open_in_v0", designSystemConfig)
-
-    const payload = await buildV0Payload(designSystemConfig)
-
-    return NextResponse.json(payload)
-  } catch (error) {
-    return NextResponse.json(
-      {
-        error:
-          error instanceof Error ? error.message : "An unknown error occurred",
-      },
-      { status: 500 }
-    )
-  }
-}
-
-async function buildV0Payload(designSystemConfig: DesignSystemConfig) {
-  const registryBase = buildRegistryBase(designSystemConfig)
-
-  // Build all files in parallel.
-  const [globalsCss, layoutFile, componentFiles] = await Promise.all([
-    buildGlobalsCss(registryBase),
-    buildLayoutFile(designSystemConfig),
-    buildComponentFiles(designSystemConfig),
-  ])
-
-  return registryItemSchema.parse({
-    name: designSystemConfig.item ?? "Item",
-    type: "registry:item",
-    files: [globalsCss, layoutFile, ...componentFiles],
-  })
-}
-
-function buildGlobalsCss(registryBase: RegistryItem) {
-  const lightVars = Object.entries(registryBase.cssVars?.light ?? {})
-    .map(([key, value]) => `  --${key}: ${value};`)
-    .join("\n")
-
-  const darkVars = Object.entries(registryBase.cssVars?.dark ?? {})
-    .map(([key, value]) => `  --${key}: ${value};`)
-    .join("\n")
-
-  const content = dedent`@import "tailwindcss";
-@import "tw-animate-css";
-/* @import "shadcn/tailwind.css"; */
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --font-sans: var(--font-sans);
-  --font-mono: var(--font-mono);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-}
-
-:root {
-  ${lightVars}
-}
-
-.dark {
-  ${darkVars}
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-  `
-
-  return registryItemFileSchema.parse({
-    path: "app/globals.css",
-    type: "registry:file",
-    target: "app/globals.css",
-    content,
-  })
-}
-
-function buildLayoutFile(designSystemConfig: DesignSystemConfig) {
-  const font = fonts.find(
-    (font) => font.name === `font-${designSystemConfig.font}`
-  )
-  if (!font) {
-    throw new Error(`Font "${designSystemConfig.font}" not found`)
-  }
-
-  const content = dedent`
-    import type { Metadata } from "next";
-    import { ${font.font.import} } from "next/font/google";
-    import "./globals.css";
-
-    const fontSans = ${font.font.import}({subsets:['latin'],variable:'--font-sans'});
-
-    export const metadata: Metadata = {
-      title: "Create Next App",
-      description: "Generated by create next app",
-    };
-
-    export default function RootLayout({
-      children,
-    }: Readonly<{
-      children: React.ReactNode;
-    }>) {
-      return (
-        <html lang="en" className={fontSans.variable}>
-          <body
-            className="antialiased"
-          >
-            {children}
-          </body>
-        </html>
-      );
-    }
-  `
-
-  return registryItemFileSchema.parse({
-    path: "app/layout.tsx",
-    type: "registry:page",
-    target: "app/layout.tsx",
-    content,
-  })
-}
-
-async function buildComponentFiles(designSystemConfig: DesignSystemConfig) {
-  const files = []
-  const allItemsForBase = Object.values(Index[designSystemConfig.base])
-    .filter(
-      (item: RegistryItem) =>
-        item.type === "registry:ui" || item.name === "example"
-    )
-    .map((item) => item.name)
-
-  const registryItemFiles = await Promise.all(
-    allItemsForBase.map(async (name) => {
-      const file = await getRegistryItemFile(name, designSystemConfig)
-      return file
-    })
-  )
-  files.push(...registryItemFiles)
-
-  const pageFile = {
-    path: "app/page.tsx",
-    type: "registry:page",
-    target: "app/page.tsx",
-    content: dedent`
-      import { Button } from "@/components/ui/button";
-      export default function Page() {
-        return <Button>Click me</Button>
-      }
-    `,
-  }
-
-  // Build the actual item component.
-  if (designSystemConfig.item) {
-    const itemComponentFile = await getRegistryItemFile(
-      designSystemConfig.item,
-      designSystemConfig
-    )
-    if (itemComponentFile) {
-      // Find the export default function from the component file.
-      const exportDefault = itemComponentFile.content.match(
-        /export default function (\w+)/
-      )
-      if (exportDefault) {
-        const functionName = exportDefault[1]
-
-        // Replace the export default function with a named export.
-        itemComponentFile.content = itemComponentFile.content.replace(
-          /export default function (\w+)/,
-          `export function ${functionName}`
-        )
-
-        // Import and render the item on the page.
-        pageFile.content = dedent`import { ${functionName} } from "@/components/${designSystemConfig.item}";
-
-        export default function Page() {
-          return <${functionName} />
-        }`
-      }
-
-      files.push({
-        ...itemComponentFile,
-        target: `components/${designSystemConfig.item}.tsx`,
-        type: "registry:component",
-      })
-    }
-  }
-
-  files.push(pageFile)
-
-  return z.array(registryItemFileSchema).parse(files)
-}
-
-async function getRegistryItemFile(
-  name: string,
-  designSystemConfig: DesignSystemConfig
-) {
-  const response = await fetch(
-    `${process.env.NEXT_PUBLIC_APP_URL}/r/styles/${designSystemConfig.base}-${designSystemConfig.style}/${name}.json`
-  )
-
-  if (!response.ok) {
-    throw new Error(`Failed to fetch registry item: ${response.statusText}`)
-  }
-
-  const json = await response.json()
-  const item = registryItemSchema.parse(json)
-
-  // Build a v0 config i.e components.json
-  const config = {
-    $schema: "https://ui.shadcn.com/schema.json",
-    style: `${designSystemConfig.base}-${designSystemConfig.style}`,
-    rsc: true,
-    tsx: true,
-    tailwind: {
-      config: "",
-      css: "app/globals.css",
-      baseColor: designSystemConfig.baseColor,
-      cssVariables: true,
-      prefix: "",
-    },
-    iconLibrary: designSystemConfig.iconLibrary,
-    aliases: {
-      components: "@/components",
-      utils: "@/lib/utils",
-      ui: "@/components/ui",
-      lib: "@/lib",
-      hooks: "@/hooks",
-    },
-    menuAccent: designSystemConfig.menuAccent,
-    menuColor: designSystemConfig.menuColor,
-    resolvedPaths: {
-      cwd: "/",
-      tailwindConfig: "./tailwind.config.js",
-      tailwindCss: "./globals.css",
-      utils: "./lib/utils",
-      components: "./components",
-      lib: "./lib",
-      hooks: "./hooks",
-      ui: "./components/ui",
-    },
-  } satisfies z.infer<typeof configSchema>
-
-  const file = item.files?.[0]
-  if (!file?.content) {
-    return null
-  }
-
-  const content = await transformFileContent(file.content, config)
-
-  return {
-    ...file,
-    target:
-      name === "example"
-        ? "components/example.tsx"
-        : `components/ui/${name}.tsx`,
-    type: name === "example" ? "registry:component" : "registry:ui",
-    content,
-  }
-}
-
-const transformers = [transformIcons, transformMenu, transformRender]
-
-async function transformFileContent(
-  content: string,
-  config: z.infer<typeof configSchema>
-) {
-  const project = new Project({
-    compilerOptions: {},
-  })
-
-  const sourceFile = project.createSourceFile("component.tsx", content, {
-    scriptKind: ScriptKind.TSX,
-  })
-
-  for (const transformer of transformers) {
-    await transformer({
-      filename: "component.tsx",
-      raw: content,
-      sourceFile,
-      config,
-    })
-  }
-
-  return sourceFile.getText()
-}
diff --git a/apps/v4/app/(create)/hooks/use-action-menu.ts b/apps/v4/app/(create)/hooks/use-action-menu.ts
new file mode 100644
index 0000000000..59b03b975f
--- /dev/null
+++ b/apps/v4/app/(create)/hooks/use-action-menu.ts
@@ -0,0 +1,142 @@
+"use client"
+
+import * as React from "react"
+import { type RegistryItem } from "shadcn/schema"
+import useSWR from "swr"
+
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+import { groupItemsByType } from "@/app/(create)/lib/utils"
+
+const ACTION_MENU_OPEN_KEY = "create:action-menu-open"
+
+type ActionMenuItem = {
+  id: string
+  type: string
+  label: string
+  registryName: string
+}
+
+type ActionMenuGroup = {
+  type: string
+  title: string
+  items: ActionMenuItem[]
+}
+
+type ActionMenuSourceItem = Pick<RegistryItem, "name" | "title" | "type">
+
+const SEARCH_KEYWORDS: Record<string, string> = {
+  "registry:block": "block blocks component components",
+  "registry:item": "item items component components",
+}
+
+function sortRegistryGroups(groups: ReturnType<typeof groupItemsByType>) {
+  return [...groups].sort((a, b) => {
+    if (a.type === b.type) {
+      return a.title.localeCompare(b.title)
+    }
+    if (a.type === "registry:block") {
+      return -1
+    }
+    if (b.type === "registry:block") {
+      return 1
+    }
+    return a.title.localeCompare(b.title)
+  })
+}
+
+export function useActionMenu(
+  itemsByBase: Record<string, ActionMenuSourceItem[]>
+) {
+  const [params, setParams] = useDesignSystemSearchParams()
+  const { data: open = false, mutate: setOpenData } = useSWR<boolean>(
+    ACTION_MENU_OPEN_KEY,
+    {
+      fallbackData: false,
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    }
+  )
+
+  const groups = React.useMemo<ActionMenuGroup[]>(() => {
+    const currentBaseItems = itemsByBase?.[params.base] ?? []
+    const sortedRegistryGroups = sortRegistryGroups(
+      groupItemsByType(currentBaseItems)
+    )
+
+    return sortedRegistryGroups.map((group) => ({
+      type: group.type,
+      title: group.title,
+      items: group.items.map((item) => ({
+        id: `${group.type}:${item.name}`,
+        type: group.type,
+        label: item.title ?? item.name,
+        registryName: item.name,
+      })),
+    }))
+  }, [itemsByBase, params.base])
+
+  const activeRegistryName = params.item
+
+  const handleSelect = React.useCallback(
+    (registryName: string) => {
+      setParams({ item: registryName })
+      void setOpenData(false, { revalidate: false })
+    },
+    [setOpenData, setParams]
+  )
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      void setOpenData(nextOpen, { revalidate: false })
+    },
+    [setOpenData]
+  )
+
+  const getCommandValue = React.useCallback((item: ActionMenuItem) => {
+    const keywords = SEARCH_KEYWORDS[item.type] ?? item.type.replace(":", " ")
+    return `${item.label ?? ""} ${keywords}`.trim()
+  }, [])
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === "p" && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        void setOpenData((currentOpen = false) => !currentOpen, {
+          revalidate: false,
+        })
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [setOpenData])
+
+  return {
+    activeRegistryName,
+    getCommandValue,
+    groups,
+    handleSelect,
+    open,
+    setOpen: handleOpenChange,
+  }
+}
+
+export function useActionMenuTrigger() {
+  const { mutate: setOpenData } = useSWR<boolean>(ACTION_MENU_OPEN_KEY, {
+    fallbackData: false,
+    revalidateOnFocus: false,
+    revalidateIfStale: false,
+    revalidateOnReconnect: false,
+  })
+
+  const openActionMenu = React.useCallback(() => {
+    void setOpenData(true, { revalidate: false })
+  }, [setOpenData])
+
+  return {
+    openActionMenu,
+  }
+}
diff --git a/apps/v4/app/(create)/hooks/use-design-system.ts b/apps/v4/app/(create)/hooks/use-design-system.ts
new file mode 100644
index 0000000000..f759d5525f
--- /dev/null
+++ b/apps/v4/app/(create)/hooks/use-design-system.ts
@@ -0,0 +1,40 @@
+"use client"
+
+import * as React from "react"
+import { encodePreset, isPresetCode } from "shadcn/preset"
+
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+// Returns the current preset code derived from search params.
+export function usePresetCode() {
+  const [params] = useDesignSystemSearchParams()
+
+  return React.useMemo(() => {
+    // If preset is already in the URL, return it.
+    if (params.preset && isPresetCode(params.preset)) {
+      return params.preset
+    }
+
+    // Otherwise encode current params (e.g. on initial load before first interaction).
+    return encodePreset({
+      style: params.style ?? undefined,
+      baseColor: params.baseColor ?? undefined,
+      theme: params.theme ?? undefined,
+      iconLibrary: params.iconLibrary ?? undefined,
+      font: params.font ?? undefined,
+      radius: params.radius ?? undefined,
+      menuAccent: params.menuAccent ?? undefined,
+      menuColor: params.menuColor ?? undefined,
+    } as Parameters<typeof encodePreset>[0])
+  }, [
+    params.preset,
+    params.style,
+    params.baseColor,
+    params.theme,
+    params.iconLibrary,
+    params.font,
+    params.radius,
+    params.menuAccent,
+    params.menuColor,
+  ])
+}
diff --git a/apps/v4/app/(create)/hooks/use-history.tsx b/apps/v4/app/(create)/hooks/use-history.tsx
new file mode 100644
index 0000000000..8612005bf0
--- /dev/null
+++ b/apps/v4/app/(create)/hooks/use-history.tsx
@@ -0,0 +1,145 @@
+"use client"
+
+import * as React from "react"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+
+type HistoryContextValue = {
+  canGoBack: boolean
+  canGoForward: boolean
+  goBack: () => void
+  goForward: () => void
+}
+
+const HistoryContext = React.createContext<HistoryContextValue | null>(null)
+
+export function HistoryProvider({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const preset = searchParams.get("preset") ?? ""
+
+  const entriesRef = React.useRef<string[]>([preset])
+  const indexRef = React.useRef(0)
+  const maxIndexRef = React.useRef(0)
+  const isNavigatingRef = React.useRef(false)
+
+  const [index, setIndex] = React.useState(0)
+  const [maxIndex, setMaxIndex] = React.useState(0)
+
+  React.useEffect(() => {
+    if (isNavigatingRef.current) {
+      isNavigatingRef.current = false
+      return
+    }
+
+    if (preset === entriesRef.current[indexRef.current]) {
+      return
+    }
+
+    const nextEntries = entriesRef.current.slice(0, indexRef.current + 1)
+    nextEntries.push(preset)
+    entriesRef.current = nextEntries
+
+    const nextIndex = nextEntries.length - 1
+    indexRef.current = nextIndex
+    maxIndexRef.current = nextIndex
+    setIndex(nextIndex)
+    setMaxIndex(nextIndex)
+  }, [preset])
+
+  const canGoBack = index > 0
+  const canGoForward = index < maxIndex
+
+  const goBack = React.useCallback(() => {
+    if (indexRef.current <= 0) {
+      return
+    }
+
+    isNavigatingRef.current = true
+    const nextIndex = indexRef.current - 1
+    indexRef.current = nextIndex
+    setIndex(nextIndex)
+
+    const targetPreset = entriesRef.current[nextIndex]
+    const params = new URLSearchParams(window.location.search)
+    if (targetPreset) {
+      params.set("preset", targetPreset)
+    } else {
+      params.delete("preset")
+    }
+    const query = params.toString()
+    router.replace(query ? `${pathname}?${query}` : pathname)
+  }, [pathname, router])
+
+  const goForward = React.useCallback(() => {
+    if (indexRef.current >= maxIndexRef.current) {
+      return
+    }
+
+    isNavigatingRef.current = true
+    const nextIndex = indexRef.current + 1
+    indexRef.current = nextIndex
+    setIndex(nextIndex)
+
+    const targetPreset = entriesRef.current[nextIndex]
+    const params = new URLSearchParams(window.location.search)
+    if (targetPreset) {
+      params.set("preset", targetPreset)
+    } else {
+      params.delete("preset")
+    }
+    const query = params.toString()
+    router.replace(query ? `${pathname}?${query}` : pathname)
+  }, [pathname, router])
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (!e.metaKey && !e.ctrlKey) {
+        return
+      }
+
+      if (
+        (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+        e.target instanceof HTMLInputElement ||
+        e.target instanceof HTMLTextAreaElement ||
+        e.target instanceof HTMLSelectElement
+      ) {
+        return
+      }
+
+      const key = e.key.toLowerCase()
+
+      if ((key === "z" && e.shiftKey) || (key === "y" && e.ctrlKey)) {
+        e.preventDefault()
+        goForward()
+        return
+      }
+
+      if (key === "z") {
+        e.preventDefault()
+        goBack()
+      }
+    }
+
+    document.addEventListener("keydown", down)
+
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [goBack, goForward])
+
+  const value = React.useMemo(
+    () => ({ canGoBack, canGoForward, goBack, goForward }),
+    [canGoBack, canGoForward, goBack, goForward]
+  )
+
+  return <HistoryContext value={value}>{children}</HistoryContext>
+}
+
+export function useHistory() {
+  const context = React.useContext(HistoryContext)
+  if (!context) {
+    throw new Error("useHistory must be used within HistoryProvider")
+  }
+  return context
+}
diff --git a/apps/v4/app/(create)/hooks/use-iframe-sync.tsx b/apps/v4/app/(create)/hooks/use-iframe-sync.tsx
index b914f7c77b..ec0bc70ad3 100644
--- a/apps/v4/app/(create)/hooks/use-iframe-sync.tsx
+++ b/apps/v4/app/(create)/hooks/use-iframe-sync.tsx
@@ -23,6 +23,12 @@ export function useIframeMessageListener<
   messageType: MessageType,
   onMessage: (data: Extract<Message, { type: MessageType }>["data"]) => void
 ) {
+  const onMessageRef = React.useRef(onMessage)
+
+  React.useEffect(() => {
+    onMessageRef.current = onMessage
+  }, [onMessage])
+
   React.useEffect(() => {
     if (!isInIframe()) {
       return
@@ -30,7 +36,7 @@ export function useIframeMessageListener<
 
     const handleMessage = (event: MessageEvent) => {
       if (event.data.type === messageType) {
-        onMessage(event.data.data)
+        onMessageRef.current(event.data.data)
       }
     }
 
@@ -38,7 +44,7 @@ export function useIframeMessageListener<
     return () => {
       window.removeEventListener("message", handleMessage)
     }
-  }, [messageType, onMessage])
+  }, [messageType])
 }
 
 export function sendToIframe<
diff --git a/apps/v4/app/(create)/hooks/use-random.tsx b/apps/v4/app/(create)/hooks/use-random.tsx
new file mode 100644
index 0000000000..b15d29140b
--- /dev/null
+++ b/apps/v4/app/(create)/hooks/use-random.tsx
@@ -0,0 +1,132 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  BASE_COLORS,
+  getThemesForBaseColor,
+  iconLibraries,
+  MENU_ACCENTS,
+  MENU_COLORS,
+  RADII,
+  STYLES,
+} from "@/registry/config"
+import { useLocks } from "@/app/(create)/hooks/use-locks"
+import { FONTS } from "@/app/(create)/lib/fonts"
+import {
+  applyBias,
+  RANDOMIZE_BIASES,
+  type RandomizeContext,
+} from "@/app/(create)/lib/randomize-biases"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+function randomItem<T>(array: readonly T[]): T {
+  return array[Math.floor(Math.random() * array.length)]
+}
+
+export function useRandom() {
+  const { locks } = useLocks()
+  const [params, setParams] = useDesignSystemSearchParams()
+
+  const paramsRef = React.useRef(params)
+  React.useEffect(() => {
+    paramsRef.current = params
+  }, [params])
+
+  const randomize = React.useCallback(() => {
+    const selectedStyle = locks.has("style")
+      ? paramsRef.current.style
+      : randomItem(STYLES).name
+
+    const context: RandomizeContext = {
+      style: selectedStyle,
+    }
+
+    const availableBaseColors = applyBias(
+      BASE_COLORS,
+      context,
+      RANDOMIZE_BIASES.baseColors
+    )
+    const baseColor = locks.has("baseColor")
+      ? paramsRef.current.baseColor
+      : randomItem(availableBaseColors).name
+    context.baseColor = baseColor
+
+    const availableThemes = getThemesForBaseColor(baseColor)
+    const availableFonts = applyBias(FONTS, context, RANDOMIZE_BIASES.fonts)
+    const availableRadii = applyBias(RADII, context, RANDOMIZE_BIASES.radius)
+
+    const selectedTheme = locks.has("theme")
+      ? paramsRef.current.theme
+      : randomItem(availableThemes).name
+    const selectedFont = locks.has("font")
+      ? paramsRef.current.font
+      : randomItem(availableFonts).value
+    const selectedRadius = locks.has("radius")
+      ? paramsRef.current.radius
+      : randomItem(availableRadii).name
+    const selectedIconLibrary = locks.has("iconLibrary")
+      ? paramsRef.current.iconLibrary
+      : randomItem(Object.values(iconLibraries)).name
+    const selectedMenuAccent = locks.has("menuAccent")
+      ? paramsRef.current.menuAccent
+      : randomItem(MENU_ACCENTS).value
+    const selectedMenuColor = locks.has("menuColor")
+      ? paramsRef.current.menuColor
+      : randomItem(MENU_COLORS).value
+
+    context.theme = selectedTheme
+    context.font = selectedFont
+    context.radius = selectedRadius
+
+    const nextParams = {
+      style: selectedStyle,
+      baseColor,
+      theme: selectedTheme,
+      iconLibrary: selectedIconLibrary,
+      font: selectedFont,
+      menuAccent: selectedMenuAccent,
+      menuColor: selectedMenuColor,
+      radius: selectedRadius,
+    }
+
+    // Keep the ref in sync so rapid repeats use the latest randomized state
+    // even before the URL state finishes committing.
+    paramsRef.current = {
+      ...paramsRef.current,
+      ...nextParams,
+    }
+
+    setParams(nextParams)
+  }, [setParams, locks])
+
+  const randomizeRef = React.useRef(randomize)
+  React.useEffect(() => {
+    randomizeRef.current = randomize
+  }, [randomize])
+
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === "r" || e.key === "R") && !e.metaKey && !e.ctrlKey) {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        randomizeRef.current()
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => {
+      document.removeEventListener("keydown", down)
+    }
+  }, [])
+
+  return { randomize }
+}
diff --git a/apps/v4/app/(create)/hooks/use-reset.tsx b/apps/v4/app/(create)/hooks/use-reset.tsx
new file mode 100644
index 0000000000..f185eb9d36
--- /dev/null
+++ b/apps/v4/app/(create)/hooks/use-reset.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import useSWR from "swr"
+
+import { DEFAULT_CONFIG } from "@/registry/config"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+const RESET_DIALOG_KEY = "create:reset-dialog-open"
+
+export function useReset() {
+  const [params, setParams] = useDesignSystemSearchParams()
+  const { data: showResetDialog = false, mutate: setShowResetDialogData } =
+    useSWR<boolean>(RESET_DIALOG_KEY, {
+      fallbackData: false,
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+      revalidateOnReconnect: false,
+    })
+
+  const reset = React.useCallback(() => {
+    setParams({
+      base: params.base,
+      style: DEFAULT_CONFIG.style,
+      baseColor: DEFAULT_CONFIG.baseColor,
+      theme: DEFAULT_CONFIG.theme,
+      iconLibrary: DEFAULT_CONFIG.iconLibrary,
+      font: DEFAULT_CONFIG.font,
+      menuAccent: DEFAULT_CONFIG.menuAccent,
+      menuColor: DEFAULT_CONFIG.menuColor,
+      radius: DEFAULT_CONFIG.radius,
+      template: DEFAULT_CONFIG.template,
+      item: "preview",
+    })
+  }, [setParams, params.base])
+
+  const handleShowResetDialogChange = React.useCallback(
+    (open: boolean) => {
+      void setShowResetDialogData(open, { revalidate: false })
+    },
+    [setShowResetDialogData]
+  )
+
+  const confirmReset = React.useCallback(() => {
+    reset()
+    void setShowResetDialogData(false, { revalidate: false })
+  }, [reset, setShowResetDialogData])
+
+  return {
+    reset,
+    showResetDialog,
+    setShowResetDialog: handleShowResetDialogChange,
+    confirmReset,
+  }
+}
diff --git a/apps/v4/app/(create)/hooks/use-theme-toggle.tsx b/apps/v4/app/(create)/hooks/use-theme-toggle.tsx
new file mode 100644
index 0000000000..36d63eb275
--- /dev/null
+++ b/apps/v4/app/(create)/hooks/use-theme-toggle.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { useMetaColor } from "@/hooks/use-meta-color"
+
+export function useThemeToggle() {
+  const { setTheme, resolvedTheme } = useTheme()
+  const { setMetaColor, metaColor } = useMetaColor()
+
+  React.useEffect(() => {
+    setMetaColor(metaColor)
+  }, [metaColor, setMetaColor])
+
+  const toggleTheme = React.useCallback(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark")
+  }, [resolvedTheme, setTheme])
+
+  // Listen for the D key to toggle theme.
+  React.useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (
+        (e.key === "d" || e.key === "D") &&
+        !e.metaKey &&
+        !e.ctrlKey &&
+        !e.altKey
+      ) {
+        if (
+          (e.target instanceof HTMLElement && e.target.isContentEditable) ||
+          e.target instanceof HTMLInputElement ||
+          e.target instanceof HTMLTextAreaElement ||
+          e.target instanceof HTMLSelectElement
+        ) {
+          return
+        }
+
+        e.preventDefault()
+        toggleTheme()
+      }
+    }
+
+    document.addEventListener("keydown", down)
+    return () => document.removeEventListener("keydown", down)
+  }, [toggleTheme])
+
+  return { toggleTheme }
+}
diff --git a/apps/v4/app/(create)/init/md/build-instructions.ts b/apps/v4/app/(create)/init/md/build-instructions.ts
new file mode 100644
index 0000000000..45d870fa98
--- /dev/null
+++ b/apps/v4/app/(create)/init/md/build-instructions.ts
@@ -0,0 +1,244 @@
+import dedent from "dedent"
+
+import { UI_COMPONENTS } from "@/lib/components"
+import {
+  buildRegistryBase,
+  fonts,
+  type DesignSystemConfig,
+} from "@/registry/config"
+
+// Builds step-by-step markdown instructions for manually setting up a project.
+export function buildInstructions(config: DesignSystemConfig) {
+  const registryBase = buildRegistryBase(config)
+
+  const dependencies = [
+    ...(registryBase.dependencies ?? []),
+    "clsx",
+    "tailwind-merge",
+  ]
+
+  const lightVars = Object.entries(registryBase.cssVars?.light ?? {})
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n")
+
+  const darkVars = Object.entries(registryBase.cssVars?.dark ?? {})
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n")
+
+  const font = fonts.find((f) => f.name === `font-${config.font}`)
+
+  const sections = [
+    buildDependenciesSection(dependencies),
+    buildUtilsSection(),
+    buildCssSection(lightVars, darkVars),
+    buildFontSection(font),
+    buildComponentsJsonSection(config),
+    buildAvailableComponentsSection(config),
+    config.rtl ? buildRtlSection(config) : null,
+  ]
+
+  return sections.filter(Boolean).join("\n\n---\n\n")
+}
+
+function buildDependenciesSection(dependencies: string[]) {
+  const list = dependencies.map((dep) => `- ${dep}`).join("\n")
+
+  return dedent`
+    ## Step 1: Dependencies
+
+    The following dependencies are required:
+
+    ${list}
+  `
+}
+
+function buildUtilsSection() {
+  return dedent`
+    ## Step 2: Create \`lib/utils.ts\`
+
+    \`\`\`ts
+    import { clsx, type ClassValue } from "clsx"
+    import { twMerge } from "tailwind-merge"
+
+    export function cn(...inputs: ClassValue[]) {
+      return twMerge(clsx(inputs))
+    }
+    \`\`\`
+  `
+}
+
+function buildCssSection(lightVars: string, darkVars: string) {
+  return dedent`
+    ## Step 3: Set up CSS
+
+    Add the following to your global CSS file (e.g. \`app/globals.css\`):
+
+    \`\`\`css
+    @import "tailwindcss";
+    @import "tw-animate-css";
+    @import "shadcn/tailwind.css";
+
+    @theme inline {
+      --font-sans: var(--font-sans);
+      --font-mono: var(--font-mono);
+      --color-background: var(--background);
+      --color-foreground: var(--foreground);
+      --color-card: var(--card);
+      --color-card-foreground: var(--card-foreground);
+      --color-popover: var(--popover);
+      --color-popover-foreground: var(--popover-foreground);
+      --color-primary: var(--primary);
+      --color-primary-foreground: var(--primary-foreground);
+      --color-secondary: var(--secondary);
+      --color-secondary-foreground: var(--secondary-foreground);
+      --color-muted: var(--muted);
+      --color-muted-foreground: var(--muted-foreground);
+      --color-accent: var(--accent);
+      --color-accent-foreground: var(--accent-foreground);
+      --color-destructive: var(--destructive);
+      --color-destructive-foreground: var(--destructive-foreground);
+      --color-border: var(--border);
+      --color-input: var(--input);
+      --color-ring: var(--ring);
+      --color-chart-1: var(--chart-1);
+      --color-chart-2: var(--chart-2);
+      --color-chart-3: var(--chart-3);
+      --color-chart-4: var(--chart-4);
+      --color-chart-5: var(--chart-5);
+      --color-sidebar: var(--sidebar);
+      --color-sidebar-foreground: var(--sidebar-foreground);
+      --color-sidebar-primary: var(--sidebar-primary);
+      --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+      --color-sidebar-accent: var(--sidebar-accent);
+      --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+      --color-sidebar-border: var(--sidebar-border);
+      --color-sidebar-ring: var(--sidebar-ring);
+      --radius-sm: calc(var(--radius) * 0.6);
+      --radius-md: calc(var(--radius) * 0.8);
+      --radius-lg: var(--radius);
+      --radius-xl: calc(var(--radius) * 1.4);
+      --radius-2xl: calc(var(--radius) * 1.8);
+      --radius-3xl: calc(var(--radius) * 2.2);
+      --radius-4xl: calc(var(--radius) * 2.6);
+    }
+
+    :root {
+    ${lightVars}
+    }
+
+    .dark {
+    ${darkVars}
+    }
+
+    @layer base {
+      * {
+        @apply border-border outline-ring/50;
+      }
+      body {
+        @apply bg-background text-foreground;
+      }
+    }
+    \`\`\`
+  `
+}
+
+function buildFontSection(font: (typeof fonts)[number] | undefined) {
+  if (!font) {
+    return null
+  }
+
+  const googleFontsUrl = `https://fonts.google.com/specimen/${font.font.import.replace(/_/g, "+")}`
+
+  return dedent`
+    ## Step 4: Set up the font
+
+    This config uses **${font.title}** (\`${font.font.variable}\`).
+
+    ### Next.js
+
+    \`\`\`tsx
+    import { ${font.font.import} } from "next/font/google"
+
+    const fontSans = ${font.font.import}({
+      subsets: ["latin"],
+      variable: "${font.font.variable}",
+    })
+
+    // Add fontSans.variable to your <html> className.
+    // <html className={fontSans.variable}>
+    \`\`\`
+
+    ### Other frameworks
+
+    Add the font from [Google Fonts](${googleFontsUrl}) and set the \`${font.font.variable}\` CSS variable to the font family:
+
+    \`\`\`css
+    :root {
+      ${font.font.variable}: ${font.font.family};
+    }
+    \`\`\`
+  `
+}
+
+function buildComponentsJsonSection(config: DesignSystemConfig) {
+  const componentsJson = {
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: `${config.base}-${config.style}`,
+    tailwind: {
+      css: "app/globals.css",
+      baseColor: config.baseColor,
+    },
+    iconLibrary: config.iconLibrary,
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks",
+    },
+  }
+
+  return dedent`
+    ## Step 5: Create \`components.json\`
+
+    Add a \`components.json\` file to the root of your project:
+
+    \`\`\`json
+    ${JSON.stringify(componentsJson, null, 2)}
+    \`\`\`
+  `
+}
+
+function buildAvailableComponentsSection(config: DesignSystemConfig) {
+  const list = UI_COMPONENTS.join(", ")
+  const style = `${config.base}-${config.style}`
+
+  return dedent`
+    ## Available Components
+
+    ${list}
+
+    To fetch the source for a component, use:
+    \`https://ui.shadcn.com/r/styles/${style}/<component>.json\`
+
+    For documentation and examples, visit:
+    \`https://ui.shadcn.com/docs/components/${config.base}/<component>\`
+  `
+}
+
+function buildRtlSection(config: DesignSystemConfig) {
+  const template =
+    config.template === "next-monorepo" ? "next" : (config.template ?? "next")
+
+  return dedent`
+    ## RTL Support
+
+    Add \`dir="rtl"\` to your root \`<html>\` element:
+
+    \`\`\`html
+    <html dir="rtl">
+    \`\`\`
+
+    For full RTL setup including the \`DirectionProvider\`, see the [RTL documentation](https://ui.shadcn.com/docs/rtl/${template}).
+  `
+}
diff --git a/apps/v4/app/(create)/init/md/route.ts b/apps/v4/app/(create)/init/md/route.ts
new file mode 100644
index 0000000000..8382fb3af4
--- /dev/null
+++ b/apps/v4/app/(create)/init/md/route.ts
@@ -0,0 +1,30 @@
+import { type NextRequest } from "next/server"
+import { track } from "@vercel/analytics/server"
+
+import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
+
+import { buildInstructions } from "./build-instructions"
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const result = parseDesignSystemConfig(searchParams)
+
+    if (!result.success) {
+      return new Response(result.error, { status: 400 })
+    }
+
+    track("create_app_manual", result.data)
+
+    const markdown = buildInstructions(result.data)
+
+    return new Response(markdown, {
+      headers: { "Content-Type": "text/markdown; charset=utf-8" },
+    })
+  } catch (error) {
+    return new Response(
+      error instanceof Error ? error.message : "An unknown error occurred",
+      { status: 500 }
+    )
+  }
+}
diff --git a/apps/v4/app/(create)/init/parse-config.ts b/apps/v4/app/(create)/init/parse-config.ts
new file mode 100644
index 0000000000..173c613d0d
--- /dev/null
+++ b/apps/v4/app/(create)/init/parse-config.ts
@@ -0,0 +1,47 @@
+import { decodePreset, isPresetCode } from "shadcn/preset"
+
+import {
+  designSystemConfigSchema,
+  type DesignSystemConfig,
+} from "@/registry/config"
+
+// Parses design system config from URL search params.
+export function parseDesignSystemConfig(searchParams: URLSearchParams) {
+  let configInput: Record<string, unknown>
+  const presetParam = searchParams.get("preset")
+
+  if (presetParam && isPresetCode(presetParam)) {
+    const decoded = decodePreset(presetParam)
+    if (!decoded) {
+      return { success: false as const, error: "Invalid preset code" }
+    }
+    configInput = {
+      ...decoded,
+      base: searchParams.get("base") ?? "radix",
+      template: searchParams.get("template") ?? undefined,
+      rtl: searchParams.get("rtl") === "true",
+    }
+  } else {
+    configInput = {
+      base: searchParams.get("base"),
+      style: searchParams.get("style"),
+      iconLibrary: searchParams.get("iconLibrary"),
+      baseColor: searchParams.get("baseColor"),
+      theme: searchParams.get("theme"),
+      font: searchParams.get("font"),
+      menuAccent: searchParams.get("menuAccent"),
+      menuColor: searchParams.get("menuColor"),
+      radius: searchParams.get("radius"),
+      template: searchParams.get("template") ?? undefined,
+      rtl: searchParams.get("rtl") === "true",
+    }
+  }
+
+  const result = designSystemConfigSchema.safeParse(configInput)
+
+  if (!result.success) {
+    return { success: false as const, error: result.error.issues[0].message }
+  }
+
+  return { success: true as const, data: result.data as DesignSystemConfig }
+}
diff --git a/apps/v4/app/(create)/init/route.ts b/apps/v4/app/(create)/init/route.ts
index 3f590b8e56..6741dad8c0 100644
--- a/apps/v4/app/(create)/init/route.ts
+++ b/apps/v4/app/(create)/init/route.ts
@@ -2,31 +2,16 @@ import { NextResponse, type NextRequest } from "next/server"
 import { track } from "@vercel/analytics/server"
 import { registryItemSchema } from "shadcn/schema"
 
-import { buildRegistryBase, designSystemConfigSchema } from "@/registry/config"
+import { buildRegistryBase } from "@/registry/config"
+import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
 
 export async function GET(request: NextRequest) {
   try {
     const searchParams = request.nextUrl.searchParams
-
-    const result = designSystemConfigSchema.safeParse({
-      base: searchParams.get("base"),
-      style: searchParams.get("style"),
-      iconLibrary: searchParams.get("iconLibrary"),
-      baseColor: searchParams.get("baseColor"),
-      theme: searchParams.get("theme"),
-      font: searchParams.get("font"),
-      menuAccent: searchParams.get("menuAccent"),
-      menuColor: searchParams.get("menuColor"),
-      radius: searchParams.get("radius"),
-      template: searchParams.get("template"),
-      rtl: searchParams.get("rtl") === "true",
-    })
+    const result = parseDesignSystemConfig(searchParams)
 
     if (!result.success) {
-      return NextResponse.json(
-        { error: result.error.issues[0].message },
-        { status: 400 }
-      )
+      return NextResponse.json({ error: result.error }, { status: 400 })
     }
 
     const registryBase = buildRegistryBase(result.data)
@@ -42,7 +27,10 @@ export async function GET(request: NextRequest) {
       )
     }
 
-    track("create_app", result.data)
+    track("create_app", {
+      ...result.data,
+      preset: searchParams.get("preset") ?? "",
+    })
 
     return NextResponse.json(parseResult.data)
   } catch (error) {
diff --git a/apps/v4/app/(create)/init/v0/route.ts b/apps/v4/app/(create)/init/v0/route.ts
new file mode 100644
index 0000000000..d973eb3391
--- /dev/null
+++ b/apps/v4/app/(create)/init/v0/route.ts
@@ -0,0 +1,36 @@
+import { after, NextResponse, type NextRequest } from "next/server"
+import { track } from "@vercel/analytics/server"
+
+import { parseDesignSystemConfig } from "@/app/(create)/init/parse-config"
+import { buildV0Payload } from "@/app/(create)/lib/v0"
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const result = parseDesignSystemConfig(searchParams)
+
+    if (!result.success) {
+      return NextResponse.json({ error: result.error }, { status: 400 })
+    }
+
+    // Defer analytics to after response is sent.
+    after(() => {
+      track("create_open_in_v0", {
+        ...result.data,
+        preset: searchParams.get("preset") ?? "",
+      })
+    })
+
+    const payload = await buildV0Payload(result.data)
+
+    return NextResponse.json(payload)
+  } catch (error) {
+    return NextResponse.json(
+      {
+        error:
+          error instanceof Error ? error.message : "An unknown error occurred",
+      },
+      { status: 500 }
+    )
+  }
+}
diff --git a/apps/v4/app/(create)/lib/api.ts b/apps/v4/app/(create)/lib/api.ts
index e1819af4bb..a44815d84d 100644
--- a/apps/v4/app/(create)/lib/api.ts
+++ b/apps/v4/app/(create)/lib/api.ts
@@ -2,8 +2,11 @@ import "server-only"
 
 import { registryItemSchema } from "shadcn/schema"
 
-import { getThemesForBaseColor, type BaseName } from "@/registry/config"
-import { ALLOWED_ITEM_TYPES } from "@/app/(create)/lib/constants"
+import { BASES, getThemesForBaseColor, type BaseName } from "@/registry/config"
+import {
+  ALLOWED_ITEM_TYPES,
+  EXCLUDED_ITEMS,
+} from "@/app/(create)/lib/constants"
 
 export async function getItemsForBase(base: BaseName) {
   const { Index } = await import("@/registry/bases/__index__")
@@ -13,8 +16,10 @@ export async function getItemsForBase(base: BaseName) {
     return []
   }
 
-  return Object.values(index).filter((item) =>
-    ALLOWED_ITEM_TYPES.includes(item.type)
+  return Object.values(index).filter(
+    (item) =>
+      ALLOWED_ITEM_TYPES.includes(item.type) &&
+      !EXCLUDED_ITEMS.includes(item.name)
   )
 }
 
@@ -22,7 +27,7 @@ export async function getBaseItem(name: string, base: BaseName) {
   const { Index } = await import("@/registry/bases/__index__")
   const index = Index[base]
 
-  if (!index?.[name]) {
+  if (!index?.[name] || EXCLUDED_ITEMS.includes(name)) {
     return null
   }
 
@@ -33,12 +38,35 @@ export async function getBaseComponent(name: string, base: BaseName) {
   const { Index } = await import("@/registry/bases/__index__")
   const index = Index[base]
 
-  if (!index?.[name]) {
+  if (!index?.[name] || EXCLUDED_ITEMS.includes(name)) {
     return null
   }
 
   return index[name].component
 }
 
+export async function getAllItems() {
+  const entries = await Promise.all(
+    BASES.map(async (base) => {
+      const items = await getItemsForBase(base.name as BaseName)
+      const filtered: Pick<
+        NonNullable<(typeof items)[number]>,
+        "name" | "title" | "type"
+      >[] = []
+      for (const item of items) {
+        if (item !== null && !/\d+$/.test(item.name)) {
+          filtered.push({
+            name: item.name,
+            title: item.title,
+            type: item.type,
+          })
+        }
+      }
+      return [base.name, filtered] as const
+    })
+  )
+  return Object.fromEntries(entries)
+}
+
 // Re-export for server-side use.
 export { getThemesForBaseColor }
diff --git a/apps/v4/app/(create)/lib/constants.ts b/apps/v4/app/(create)/lib/constants.ts
index f42ae9b1d1..78713719e5 100644
--- a/apps/v4/app/(create)/lib/constants.ts
+++ b/apps/v4/app/(create)/lib/constants.ts
@@ -1 +1,3 @@
 export const ALLOWED_ITEM_TYPES = ["registry:block", "registry:example"]
+
+export const EXCLUDED_ITEMS = ["component-example"]
diff --git a/apps/v4/app/(create)/lib/fonts.ts b/apps/v4/app/(create)/lib/fonts.ts
index cf993928f5..92bb3f8f2b 100644
--- a/apps/v4/app/(create)/lib/fonts.ts
+++ b/apps/v4/app/(create)/lib/fonts.ts
@@ -5,12 +5,17 @@ import {
   Geist_Mono,
   Inter,
   JetBrains_Mono,
+  Lora,
+  Merriweather,
   Noto_Sans,
+  Noto_Serif,
   Nunito_Sans,
   Outfit,
+  Playfair_Display,
   Public_Sans,
   Raleway,
   Roboto,
+  Roboto_Slab,
 } from "next/font/google"
 
 const inter = Inter({
@@ -73,6 +78,31 @@ const outfit = Outfit({
   variable: "--font-outfit",
 })
 
+const notoSerif = Noto_Serif({
+  subsets: ["latin"],
+  variable: "--font-noto-serif",
+})
+
+const robotoSlab = Roboto_Slab({
+  subsets: ["latin"],
+  variable: "--font-roboto-slab",
+})
+
+const merriweather = Merriweather({
+  subsets: ["latin"],
+  variable: "--font-merriweather",
+})
+
+const lora = Lora({
+  subsets: ["latin"],
+  variable: "--font-lora",
+})
+
+const playfairDisplay = Playfair_Display({
+  subsets: ["latin"],
+  variable: "--font-playfair-display",
+})
+
 export const FONTS = [
   {
     name: "Geist",
@@ -146,6 +176,36 @@ export const FONTS = [
     font: jetbrainsMono,
     type: "mono",
   },
+  {
+    name: "Noto Serif",
+    value: "noto-serif",
+    font: notoSerif,
+    type: "serif",
+  },
+  {
+    name: "Roboto Slab",
+    value: "roboto-slab",
+    font: robotoSlab,
+    type: "serif",
+  },
+  {
+    name: "Merriweather",
+    value: "merriweather",
+    font: merriweather,
+    type: "serif",
+  },
+  {
+    name: "Lora",
+    value: "lora",
+    font: lora,
+    type: "serif",
+  },
+  {
+    name: "Playfair Display",
+    value: "playfair-display",
+    font: playfairDisplay,
+    type: "serif",
+  },
 ] as const
 
 export type Font = (typeof FONTS)[number]
diff --git a/apps/v4/app/(create)/lib/randomize-biases.ts b/apps/v4/app/(create)/lib/randomize-biases.ts
index c6505b73b7..de04164bfc 100644
--- a/apps/v4/app/(create)/lib/randomize-biases.ts
+++ b/apps/v4/app/(create)/lib/randomize-biases.ts
@@ -1,4 +1,5 @@
 import type {
+  BaseColor,
   BaseColorName,
   Radius,
   StyleName,
@@ -24,11 +25,11 @@ export type BiasFilter<T> = (
 ) => readonly T[]
 
 export type RandomizeBiases = {
+  baseColors?: BiasFilter<BaseColor>
   fonts?: BiasFilter<(typeof FONTS)[number]>
   radius?: BiasFilter<Radius>
   // Add more bias filters as needed:
   // styles?: BiasFilter<Style>
-  // baseColors?: BiasFilter<BaseColor>
   // themes?: BiasFilter<Theme>
   // etc.
 }
@@ -38,6 +39,9 @@ export type RandomizeBiases = {
  * Add biases here to influence random selection based on context.
  */
 export const RANDOMIZE_BIASES: RandomizeBiases = {
+  baseColors: (baseColors) => {
+    return baseColors.filter((c) => c.name !== "gray")
+  },
   fonts: (fonts, context) => {
     // When style is lyra, only use mono fonts.
     if (context.style === "lyra") {
diff --git a/apps/v4/app/(create)/lib/search-params.ts b/apps/v4/app/(create)/lib/search-params.ts
index 9d2733845b..6f7ea199c7 100644
--- a/apps/v4/app/(create)/lib/search-params.ts
+++ b/apps/v4/app/(create)/lib/search-params.ts
@@ -1,3 +1,4 @@
+import * as React from "react"
 import { useQueryStates } from "nuqs"
 import {
   createLoader,
@@ -9,6 +10,7 @@ import {
   type inferParserType,
   type Options,
 } from "nuqs/server"
+import { decodePreset, encodePreset, isPresetCode } from "shadcn/preset"
 
 import {
   BASE_COLORS,
@@ -33,6 +35,7 @@ import {
 import { FONTS } from "@/app/(create)/lib/fonts"
 
 const designSystemSearchParams = {
+  preset: parseAsString.withDefault("a0"),
   base: parseAsStringLiteral<BaseName>(BASES.map((b) => b.name)).withDefault(
     DEFAULT_CONFIG.base
   ),
@@ -63,14 +66,46 @@ const designSystemSearchParams = {
   ).withDefault("default"),
   template: parseAsStringLiteral([
     "next",
+    "next-monorepo",
     "start",
+    "start-monorepo",
+    "react-router",
+    "react-router-monorepo",
     "vite",
+    "vite-monorepo",
+    "astro",
+    "astro-monorepo",
+    "laravel",
   ] as const).withDefault("next"),
   rtl: parseAsBoolean.withDefault(false),
   size: parseAsInteger.withDefault(100),
   custom: parseAsBoolean.withDefault(false),
 }
 
+// Design system param keys that get encoded into the preset code.
+const DESIGN_SYSTEM_KEYS = [
+  "style",
+  "baseColor",
+  "theme",
+  "iconLibrary",
+  "font",
+  "radius",
+  "menuAccent",
+  "menuColor",
+] as const
+
+// Non-design-system keys that get passed through as-is.
+// `base` is not encoded in preset codes — it's an architectural choice, not visual.
+const NON_DESIGN_SYSTEM_KEYS = [
+  "base",
+  "item",
+  "preset",
+  "template",
+  "rtl",
+  "size",
+  "custom",
+] as const
+
 export const loadDesignSystemSearchParams = createLoader(
   designSystemSearchParams
 )
@@ -79,13 +114,94 @@ export const serializeDesignSystemSearchParams = createSerializer(
   designSystemSearchParams
 )
 
-export const useDesignSystemSearchParams = (options: Options = {}) =>
-  useQueryStates(designSystemSearchParams, {
+export type DesignSystemSearchParams = inferParserType<
+  typeof designSystemSearchParams
+>
+
+// Wraps nuqs useQueryStates with transparent preset encoding/decoding.
+// - Reads: if ?preset=CODE is in the URL, decodes it and returns individual values.
+// - Writes: when design system params are set, encodes them into a preset code.
+export function useDesignSystemSearchParams(options: Options = {}) {
+  const [rawParams, rawSetParams] = useQueryStates(designSystemSearchParams, {
     shallow: false,
     history: "push",
     ...options,
   })
 
-export type DesignSystemSearchParams = inferParserType<
-  typeof designSystemSearchParams
->
+  // If preset param exists, decode it and overlay on raw params.
+  const params = React.useMemo(() => {
+    if (rawParams.preset && isPresetCode(rawParams.preset)) {
+      const decoded = decodePreset(rawParams.preset)
+      if (decoded) {
+        return { ...rawParams, ...decoded }
+      }
+    }
+    return rawParams
+  }, [rawParams])
+
+  // Use ref so setParams callback stays stable across renders.
+  const paramsRef = React.useRef(params)
+  React.useEffect(() => {
+    paramsRef.current = params
+  }, [params])
+
+  type RawSetParamsInput = Parameters<typeof rawSetParams>[0]
+
+  const setParams = React.useCallback(
+    (
+      updates:
+        | Partial<DesignSystemSearchParams>
+        | ((
+            old: DesignSystemSearchParams
+          ) => Partial<DesignSystemSearchParams>),
+      setOptions?: Options
+    ) => {
+      const resolvedUpdates =
+        typeof updates === "function" ? updates(paramsRef.current) : updates
+
+      const hasDesignSystemUpdate = DESIGN_SYSTEM_KEYS.some(
+        (key) => key in resolvedUpdates
+      )
+
+      if (!hasDesignSystemUpdate) {
+        // No design system change, pass through directly.
+        return rawSetParams(resolvedUpdates as RawSetParamsInput, setOptions)
+      }
+
+      // Merge current decoded values with updates.
+      const merged = { ...paramsRef.current, ...resolvedUpdates }
+
+      // Encode design system fields into a preset code.
+      // Cast needed: merged values may include null from nuqs resets,
+      // but encodePreset handles missing values by falling back to defaults.
+      const code = encodePreset({
+        style: merged.style ?? undefined,
+        baseColor: merged.baseColor ?? undefined,
+        theme: merged.theme ?? undefined,
+        iconLibrary: merged.iconLibrary ?? undefined,
+        font: merged.font ?? undefined,
+        radius: merged.radius ?? undefined,
+        menuAccent: merged.menuAccent ?? undefined,
+        menuColor: merged.menuColor ?? undefined,
+      } as Parameters<typeof encodePreset>[0])
+
+      // Build update: set preset, clear individual DS params from URL.
+      const rawUpdate: Record<string, unknown> = { preset: code }
+      for (const key of DESIGN_SYSTEM_KEYS) {
+        rawUpdate[key] = null
+      }
+
+      // Pass through non-DS params that were explicitly in the update.
+      for (const key of NON_DESIGN_SYSTEM_KEYS) {
+        if (key in resolvedUpdates) {
+          rawUpdate[key] = (resolvedUpdates as Record<string, unknown>)[key]
+        }
+      }
+
+      return rawSetParams(rawUpdate as RawSetParamsInput, setOptions)
+    },
+    [rawSetParams]
+  )
+
+  return [params, setParams] as const
+}
diff --git a/apps/v4/app/(create)/components/template-picker.tsx b/apps/v4/app/(create)/lib/templates.ts
similarity index 54%
rename from apps/v4/app/(create)/components/template-picker.tsx
rename to apps/v4/app/(create)/lib/templates.ts
index ebfe977d43..e11f06fbad 100644
--- a/apps/v4/app/(create)/components/template-picker.tsx
+++ b/apps/v4/app/(create)/lib/templates.ts
@@ -1,94 +1,55 @@
-"use client"
-
-import {
-  Picker,
-  PickerContent,
-  PickerGroup,
-  PickerRadioGroup,
-  PickerRadioItem,
-  PickerTrigger,
-} from "@/app/(create)/components/picker"
-import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
-
-const TEMPLATES = [
+export const TEMPLATES = [
   {
     value: "next",
     title: "Next.js",
-    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Next.js</title><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z"/></svg>',
-  },
-  {
-    value: "start",
-    title: "TanStack Start",
-    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TanStack</title><path d="M11.078.042c.316-.042.65-.014.97-.014 1.181 0 2.341.184 3.472.532a12.3 12.3 0 0 1 3.973 2.086 11.9 11.9 0 0 1 3.432 4.33c1.446 3.15 1.436 6.97-.046 10.107-.958 2.029-2.495 3.727-4.356 4.965-1.518 1.01-3.293 1.629-5.1 1.848-2.298.279-4.784-.129-6.85-1.188-3.88-1.99-6.518-5.994-6.57-10.382-.01-.846.003-1.697.17-2.534.273-1.365.748-2.683 1.463-3.88a12 12 0 0 1 2.966-3.36A12.3 12.3 0 0 1 9.357.3a12 12 0 0 1 1.255-.2l.133-.016zM7.064 19.99c-.535.057-1.098.154-1.557.454.103.025.222 0 .33 0 .258 0 .52-.01.778.002.647.028 1.32.131 1.945.303.8.22 1.505.65 2.275.942.813.307 1.622.402 2.484.402.435 0 .866-.001 1.287-.12-.22-.117-.534-.095-.778-.144a11 11 0 0 1-1.556-.416 12 12 0 0 1-1.093-.467l-.23-.108a15 15 0 0 0-1.012-.44c-.905-.343-1.908-.512-2.873-.408m.808-2.274c-1.059 0-2.13.187-3.083.667q-.346.177-.659.41c-.063.046-.175.106-.199.188s.061.151.11.204c.238-.127.464-.261.718-.357 1.64-.624 3.63-.493 5.268.078.817.285 1.569.712 2.365 1.046.89.374 1.798.616 2.753.74 1.127.147 2.412.028 3.442-.48.362-.179.865-.451 1.018-.847-.189.017-.36.098-.539.154a9 9 0 0 1-.868.222c-.994.2-2.052.24-3.053.06-.943-.17-1.82-.513-2.693-.873l-.111-.046-.223-.092-.112-.046a26 26 0 0 0-1.35-.527c-.89-.31-1.842-.5-2.784-.5M9.728 1.452c-1.27.28-2.407.826-3.502 1.514-.637.4-1.245.81-1.796 1.323-.82.765-1.447 1.695-1.993 2.666-.563 1-.924 2.166-1.098 3.297-.172 1.11-.2 2.277-.004 3.388.245 1.388.712 2.691 1.448 3.897.248-.116.424-.38.629-.557.414-.359.85-.691 1.317-.978a3.5 3.5 0 0 1 .539-.264c.07-.029.187-.055.22-.132.053-.124-.045-.34-.062-.468a7 7 0 0 1-.068-1.109 9.7 9.7 0 0 1 .61-3.177c.29-.76.73-1.45 1.254-2.069.177-.21.365-.405.56-.6.115-.114.258-.212.33-.359-.376 0-.751.108-1.108.218-.769.237-1.518.588-2.155 1.084-.291.226-.504.522-.779.76-.084.073-.235.17-.352.116-.176-.083-.149-.43-.169-.59-.078-.612.154-1.387.45-1.918.473-.852 1.348-1.58 2.376-1.555.444.011.833.166 1.257.266-.107-.153-.252-.264-.389-.39a5.4 5.4 0 0 0-1.107-.8c-.163-.085-.338-.136-.509-.2-.086-.03-.195-.074-.227-.17-.06-.177.26-.342.377-.417.453-.289 1.01-.527 1.556-.54.854-.021 1.688.452 2.04 1.258.123.284.16.583.184.885l.004.057.006.085.002.029.005.057.004.056c.268-.218.457-.54.718-.774.612-.547 1.45-.79 2.245-.544a2.97 2.97 0 0 1 1.71 1.378c.097.173.365.595.171.767-.152.134-.344.03-.504-.026a3 3 0 0 0-.372-.094l-.068-.014-.069-.013a3.9 3.9 0 0 0-1.377-.002c-.282.05-.557.15-.838.192v.06c.768.006 1.51.444 1.89 1.109.157.275.235.59.295.9.075.38.022.796-.082 1.168-.035.125-.098.336-.247.365-.106.02-.195-.085-.256-.155a4.6 4.6 0 0 0-.492-.522 20 20 0 0 0-1.467-1.14c-.267-.19-.56-.44-.868-.556.087.208.171.402.2.63.088.667-.192 1.296-.612 1.798a2.6 2.6 0 0 1-.426.427c-.067.05-.151.114-.24.1-.277-.044-.31-.463-.353-.677-.144-.726-.086-1.447.114-2.158-.178.09-.307.287-.418.45a5.3 5.3 0 0 0-.612 1.138c-.61 1.617-.604 3.51.186 5.066.088.174.221.15.395.15h.157a3 3 0 0 1 .472.018c.08.01.193 0 .257.06.077.072.036.194.018.282-.05.246-.066.469-.066.72.328-.051.419-.576.535-.84.131-.298.265-.597.387-.9.06-.148.14-.314.119-.479-.024-.185-.157-.381-.25-.54-.177-.298-.378-.606-.508-.929-.104-.258-.007-.58.286-.672.161-.05.334.049.439.166.22.244.363.609.523.896l1.249 2.248q.159.286.32.57c.043.074.086.188.173.219.077.028.182-.012.26-.027.198-.04.398-.083.598-.12.24-.043.605-.035.778-.222-.253-.08-.545-.075-.808-.057-.158.01-.333.067-.479-.025-.216-.137-.36-.455-.492-.667-.326-.525-.633-1.057-.945-1.59l-.05-.084-.1-.17q-.075-.126-.149-.255c-.037-.066-.092-.153-.039-.227.056-.076.179-.08.29-.081h.021q.066.001.117-.004a10 10 0 0 1 1.347-.107c-.035-.122-.135-.26-.103-.39.071-.292.49-.383.686-.174.131.14.207.334.292.504.113.223.24.44.361.66.211.383.441.757.658 1.138l.055.094.028.047c.093.156.187.314.238.489-.753-.035-1.318-.909-1.646-1.499-.027.095.016.179.05.27q.103.282.262.54c.152.244.326.495.556.673.408.315.945.317 1.436.283.315-.022.708-.165 1.018-.068s.434.438.25.7c-.138.196-.321.27-.55.3.162.346.373.667.527 1.02.064.146.13.37.283.448.102.051.248.003.358 0-.11-.292-.317-.54-.419-.839.31.015.61.176.898.28.567.202 1.128.424 1.687.648l.258.104c.23.092.462.183.689.283.083.037.198.123.29.07.074-.043.123-.146.169-.215a10.3 10.3 0 0 0 1.393-3.208c.75-2.989.106-6.287-1.695-8.783-.692-.96-1.562-1.789-2.522-2.476-2.401-1.718-5.551-2.407-8.44-1.768m4.908 14.904c-.636.166-1.292.317-1.945.401.086.293.296.577.45.84.059.101.122.237.24.281.132.05.292-.03.417-.072-.058-.158-.155-.3-.235-.45-.033-.06-.084-.133-.056-.206.05-.137.263-.13.381-.153.31-.063.617-.142.928-.204.114-.023.274-.085.389-.047.086.03.138.1.187.174l.022.033q.043.07.097.122c.125.113.313.13.472.162-.097-.219-.259-.41-.362-.63-.06-.127-.11-.315-.242-.388-.182-.102-.557.089-.743.137m-4.01-1.457c-.03.38-.147.689-.33 1.019.21.026.423.036.629.087.154.038.296.11.449.153-.082-.224-.233-.423-.35-.63-.12-.208-.226-.462-.398-.63"/></svg>',
+    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Next.js</title><path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" fill="currentColor"/></svg>',
   },
   {
     value: "vite",
     title: "Vite",
     logo: '<svg xmlns="http://www.w3.org/2000/svg" width="410" height="404" fill="none" viewBox="0 0 410 404"><path fill="var(--foreground)" d="m399.641 59.525-183.998 329.02c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556C6.38 52.19 12.68 43.266 21.028 44.76l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719"/><path fill="var(--background)" d="M292.965 1.574 156.801 28.255a5 5 0 0 0-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.707-1.346-7.935-5.418-7.15l-39.022 7.532c-3.667.707-6.787-2.708-5.752-6.296l25.469-88.291c1.036-3.594-2.095-7.012-5.766-6.293"/></svg>',
   },
+  {
+    value: "start",
+    title: "TanStack Start",
+    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>TanStack</title><path d="M11.078.042c.316-.042.65-.014.97-.014 1.181 0 2.341.184 3.472.532a12.3 12.3 0 0 1 3.973 2.086 11.9 11.9 0 0 1 3.432 4.33c1.446 3.15 1.436 6.97-.046 10.107-.958 2.029-2.495 3.727-4.356 4.965-1.518 1.01-3.293 1.629-5.1 1.848-2.298.279-4.784-.129-6.85-1.188-3.88-1.99-6.518-5.994-6.57-10.382-.01-.846.003-1.697.17-2.534.273-1.365.748-2.683 1.463-3.88a12 12 0 0 1 2.966-3.36A12.3 12.3 0 0 1 9.357.3a12 12 0 0 1 1.255-.2l.133-.016zM7.064 19.99c-.535.057-1.098.154-1.557.454.103.025.222 0 .33 0 .258 0 .52-.01.778.002.647.028 1.32.131 1.945.303.8.22 1.505.65 2.275.942.813.307 1.622.402 2.484.402.435 0 .866-.001 1.287-.12-.22-.117-.534-.095-.778-.144a11 11 0 0 1-1.556-.416 12 12 0 0 1-1.093-.467l-.23-.108a15 15 0 0 0-1.012-.44c-.905-.343-1.908-.512-2.873-.408m.808-2.274c-1.059 0-2.13.187-3.083.667q-.346.177-.659.41c-.063.046-.175.106-.199.188s.061.151.11.204c.238-.127.464-.261.718-.357 1.64-.624 3.63-.493 5.268.078.817.285 1.569.712 2.365 1.046.89.374 1.798.616 2.753.74 1.127.147 2.412.028 3.442-.48.362-.179.865-.451 1.018-.847-.189.017-.36.098-.539.154a9 9 0 0 1-.868.222c-.994.2-2.052.24-3.053.06-.943-.17-1.82-.513-2.693-.873l-.111-.046-.223-.092-.112-.046a26 26 0 0 0-1.35-.527c-.89-.31-1.842-.5-2.784-.5M9.728 1.452c-1.27.28-2.407.826-3.502 1.514-.637.4-1.245.81-1.796 1.323-.82.765-1.447 1.695-1.993 2.666-.563 1-.924 2.166-1.098 3.297-.172 1.11-.2 2.277-.004 3.388.245 1.388.712 2.691 1.448 3.897.248-.116.424-.38.629-.557.414-.359.85-.691 1.317-.978a3.5 3.5 0 0 1 .539-.264c.07-.029.187-.055.22-.132.053-.124-.045-.34-.062-.468a7 7 0 0 1-.068-1.109 9.7 9.7 0 0 1 .61-3.177c.29-.76.73-1.45 1.254-2.069.177-.21.365-.405.56-.6.115-.114.258-.212.33-.359-.376 0-.751.108-1.108.218-.769.237-1.518.588-2.155 1.084-.291.226-.504.522-.779.76-.084.073-.235.17-.352.116-.176-.083-.149-.43-.169-.59-.078-.612.154-1.387.45-1.918.473-.852 1.348-1.58 2.376-1.555.444.011.833.166 1.257.266-.107-.153-.252-.264-.389-.39a5.4 5.4 0 0 0-1.107-.8c-.163-.085-.338-.136-.509-.2-.086-.03-.195-.074-.227-.17-.06-.177.26-.342.377-.417.453-.289 1.01-.527 1.556-.54.854-.021 1.688.452 2.04 1.258.123.284.16.583.184.885l.004.057.006.085.002.029.005.057.004.056c.268-.218.457-.54.718-.774.612-.547 1.45-.79 2.245-.544a2.97 2.97 0 0 1 1.71 1.378c.097.173.365.595.171.767-.152.134-.344.03-.504-.026a3 3 0 0 0-.372-.094l-.068-.014-.069-.013a3.9 3.9 0 0 0-1.377-.002c-.282.05-.557.15-.838.192v.06c.768.006 1.51.444 1.89 1.109.157.275.235.59.295.9.075.38.022.796-.082 1.168-.035.125-.098.336-.247.365-.106.02-.195-.085-.256-.155a4.6 4.6 0 0 0-.492-.522 20 20 0 0 0-1.467-1.14c-.267-.19-.56-.44-.868-.556.087.208.171.402.2.63.088.667-.192 1.296-.612 1.798a2.6 2.6 0 0 1-.426.427c-.067.05-.151.114-.24.1-.277-.044-.31-.463-.353-.677-.144-.726-.086-1.447.114-2.158-.178.09-.307.287-.418.45a5.3 5.3 0 0 0-.612 1.138c-.61 1.617-.604 3.51.186 5.066.088.174.221.15.395.15h.157a3 3 0 0 1 .472.018c.08.01.193 0 .257.06.077.072.036.194.018.282-.05.246-.066.469-.066.72.328-.051.419-.576.535-.84.131-.298.265-.597.387-.9.06-.148.14-.314.119-.479-.024-.185-.157-.381-.25-.54-.177-.298-.378-.606-.508-.929-.104-.258-.007-.58.286-.672.161-.05.334.049.439.166.22.244.363.609.523.896l1.249 2.248q.159.286.32.57c.043.074.086.188.173.219.077.028.182-.012.26-.027.198-.04.398-.083.598-.12.24-.043.605-.035.778-.222-.253-.08-.545-.075-.808-.057-.158.01-.333.067-.479-.025-.216-.137-.36-.455-.492-.667-.326-.525-.633-1.057-.945-1.59l-.05-.084-.1-.17q-.075-.126-.149-.255c-.037-.066-.092-.153-.039-.227.056-.076.179-.08.29-.081h.021q.066.001.117-.004a10 10 0 0 1 1.347-.107c-.035-.122-.135-.26-.103-.39.071-.292.49-.383.686-.174.131.14.207.334.292.504.113.223.24.44.361.66.211.383.441.757.658 1.138l.055.094.028.047c.093.156.187.314.238.489-.753-.035-1.318-.909-1.646-1.499-.027.095.016.179.05.27q.103.282.262.54c.152.244.326.495.556.673.408.315.945.317 1.436.283.315-.022.708-.165 1.018-.068s.434.438.25.7c-.138.196-.321.27-.55.3.162.346.373.667.527 1.02.064.146.13.37.283.448.102.051.248.003.358 0-.11-.292-.317-.54-.419-.839.31.015.61.176.898.28.567.202 1.128.424 1.687.648l.258.104c.23.092.462.183.689.283.083.037.198.123.29.07.074-.043.123-.146.169-.215a10.3 10.3 0 0 0 1.393-3.208c.75-2.989.106-6.287-1.695-8.783-.692-.96-1.562-1.789-2.522-2.476-2.401-1.718-5.551-2.407-8.44-1.768m4.908 14.904c-.636.166-1.292.317-1.945.401.086.293.296.577.45.84.059.101.122.237.24.281.132.05.292-.03.417-.072-.058-.158-.155-.3-.235-.45-.033-.06-.084-.133-.056-.206.05-.137.263-.13.381-.153.31-.063.617-.142.928-.204.114-.023.274-.085.389-.047.086.03.138.1.187.174l.022.033q.043.07.097.122c.125.113.313.13.472.162-.097-.219-.259-.41-.362-.63-.06-.127-.11-.315-.242-.388-.182-.102-.557.089-.743.137m-4.01-1.457c-.03.38-.147.689-.33 1.019.21.026.423.036.629.087.154.038.296.11.449.153-.082-.224-.233-.423-.35-.63-.12-.208-.226-.462-.398-.63" fill="currentColor"/></svg>',
+  },
+  {
+    value: "laravel",
+    title: "Laravel",
+    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Laravel</title><path d="M23.642 5.43a.364.364 0 0 1 .014.1v5.149c0 .135-.073.26-.189.326l-4.323 2.49v4.934a.378.378 0 0 1-.188.326L9.93 23.949a.316.316 0 0 1-.066.027c-.008.002-.016.008-.024.01a.348.348 0 0 1-.192 0c-.011-.002-.02-.008-.03-.012-.02-.008-.042-.014-.062-.025L.533 18.755a.376.376 0 0 1-.189-.326V2.974c0-.033.005-.066.014-.098.003-.012.01-.02.014-.032a.369.369 0 0 1 .023-.058c.004-.013.015-.022.023-.033l.033-.045c.012-.01.025-.018.037-.027.014-.012.027-.024.041-.034h.001L5.044.05a.375.375 0 0 1 .375 0L9.933 2.697h.002c.015.01.027.021.04.033l.038.027c.013.014.02.03.033.045.008.011.02.021.025.033.01.02.017.038.024.058.003.011.01.021.013.032.01.031.014.064.014.098v9.652l3.76-2.164V5.527c0-.033.004-.066.013-.098.003-.01.01-.02.013-.032a.487.487 0 0 1 .024-.059c.007-.012.018-.02.025-.033.012-.015.021-.03.033-.043.012-.012.025-.02.037-.028.014-.011.026-.023.041-.032h.001l4.513-2.647a.375.375 0 0 1 .375 0l4.513 2.647c.016.011.029.021.042.031.012.01.025.018.036.028.013.014.022.03.034.045.008.012.019.021.024.033a.3.3 0 0 1 .024.06c.006.01.012.021.015.032zm-.74 5.032V5.860l-1.578.908-2.182 1.256v4.603zm-4.514 7.75v-4.605l-2.148 1.227-6.876 3.93v4.649zm-17.642-15.3v15.15l8.25 4.757v-4.645L4.699 15.87l-.003-.002-.002-.001c-.014-.01-.025-.021-.04-.033-.012-.01-.026-.018-.036-.028l-.001-.002c-.013-.012-.021-.028-.032-.043-.01-.013-.022-.023-.03-.037v-.002c-.01-.014-.016-.032-.023-.048-.006-.012-.016-.023-.02-.035l-.002-.001c-.005-.018-.008-.037-.011-.057L4.5 15.58v-9.51l-2.182-1.256-1.578-.908zm4.322-2.474L1.313 2.974l3.756 2.163 3.755-2.163zm2.068 11.22 2.182-1.256V1.974L7.937 3.23 5.755 4.486v11.186zm10.895-7.583-3.755 2.163 3.755 2.164 3.755-2.164zm-.375 4.976-2.182-1.256-1.578-.908v4.603l2.182 1.256 1.578.908zm-8.438 6.186 5.494-3.14 2.944-1.682-3.755-2.163-4.323 2.489-4.136 2.384z" fill="currentColor"/></svg>',
+  },
+  {
+    value: "react-router",
+    title: "React Router",
+    logo: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" fill="currentColor"/></svg>',
+  },
+  {
+    value: "astro",
+    title: "Astro",
+    logo: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Astro</title><path d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z" fill="currentColor"/></svg>',
+  },
 ] as const
 
-export function TemplatePicker({
-  isMobile,
-  anchorRef,
-}: {
-  isMobile: boolean
-  anchorRef: React.RefObject<HTMLDivElement | null>
-}) {
-  const [params, setParams] = useDesignSystemSearchParams()
+export type TemplateValue = (typeof TEMPLATES)[number]["value"]
 
-  const currentTemplate = TEMPLATES.find(
-    (template) => template.value === params.template
-  )
-
-  return (
-    <Picker>
-      <PickerTrigger className="hidden md:flex">
-        <div className="flex flex-col justify-start text-left">
-          <div className="text-muted-foreground text-xs">Template</div>
-          <div className="text-foreground text-sm font-medium">
-            {currentTemplate?.title}
-          </div>
-        </div>
-        {currentTemplate?.logo && (
-          <div
-            className="text-foreground *:[svg]:text-foreground! pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 select-none *:[svg]:size-4"
-            dangerouslySetInnerHTML={{
-              __html: currentTemplate.logo,
-            }}
-          />
-        )}
-      </PickerTrigger>
-      <PickerContent
-        anchor={isMobile ? anchorRef : undefined}
-        side={isMobile ? "top" : "right"}
-        align={isMobile ? "center" : "start"}
-      >
-        <PickerRadioGroup
-          value={params.template}
-          onValueChange={(value) => {
-            setParams({
-              template: value as "next" | "start" | "vite",
-            })
-          }}
-        >
-          <PickerGroup>
-            {TEMPLATES.map((template) => (
-              <PickerRadioItem key={template.value} value={template.value}>
-                {template.logo && (
-                  <div
-                    className="text-foreground *:[svg]:text-foreground! size-4 shrink-0 [&_svg]:size-4"
-                    dangerouslySetInnerHTML={{
-                      __html: template.logo,
-                    }}
-                  />
-                )}
-                {template.title}
-              </PickerRadioItem>
-            ))}
-          </PickerGroup>
-        </PickerRadioGroup>
-      </PickerContent>
-    </Picker>
-  )
+// Extract the base framework from a template value (e.g. "next-monorepo" -> "next").
+export function getFramework(template: string) {
+  return template.replace("-monorepo", "") as TemplateValue
+}
+
+// Frameworks that don't support the monorepo template.
+export const NO_MONOREPO_FRAMEWORKS = ["laravel"] as const
+
+// Build the full template value from a framework and monorepo flag.
+export function getTemplateValue(framework: string, monorepo: boolean) {
+  if (
+    NO_MONOREPO_FRAMEWORKS.includes(
+      framework as (typeof NO_MONOREPO_FRAMEWORKS)[number]
+    )
+  ) {
+    return framework
+  }
+
+  return monorepo ? `${framework}-monorepo` : framework
 }
diff --git a/apps/v4/app/(create)/lib/v0.ts b/apps/v4/app/(create)/lib/v0.ts
new file mode 100644
index 0000000000..9ac905cb4c
--- /dev/null
+++ b/apps/v4/app/(create)/lib/v0.ts
@@ -0,0 +1,564 @@
+import dedent from "dedent"
+import {
+  registryItemFileSchema,
+  registryItemSchema,
+  type configSchema,
+  type RegistryItem,
+} from "shadcn/schema"
+import { transformIcons, transformMenu, transformRender } from "shadcn/utils"
+import { Project, ScriptKind } from "ts-morph"
+import { z } from "zod"
+
+import {
+  buildRegistryBase,
+  fonts,
+  type DesignSystemConfig,
+} from "@/registry/config"
+
+const { Index } = await import("@/registry/bases/__index__")
+
+const THEME_INLINE = `--font-sans: var(--font-sans);
+  --font-mono: var(--font-mono);
+  --font-serif: var(--font-serif);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);`
+
+// Static file — parsed once at module level.
+const themeProviderFile = registryItemFileSchema.parse({
+  path: "components/theme-provider.tsx",
+  type: "registry:component",
+  target: "components/theme-provider.tsx",
+  content: dedent`
+    "use client"
+
+    import * as React from "react"
+    import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+
+    function ThemeProvider({
+      children,
+      ...props
+    }: React.ComponentProps<typeof NextThemesProvider>) {
+      return (
+        <NextThemesProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+          {...props}
+        >
+          <ThemeHotkey />
+          {children}
+        </NextThemesProvider>
+      )
+    }
+
+    function isTypingTarget(target: EventTarget | null) {
+      if (!(target instanceof HTMLElement)) {
+        return false
+      }
+
+      return (
+        target.isContentEditable ||
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.tagName === "SELECT"
+      )
+    }
+
+    function ThemeHotkey() {
+      const { resolvedTheme, setTheme } = useTheme()
+
+      React.useEffect(() => {
+        function onKeyDown(event: KeyboardEvent) {
+          if (event.defaultPrevented || event.repeat) {
+            return
+          }
+
+          if (event.metaKey || event.ctrlKey || event.altKey) {
+            return
+          }
+
+          if (event.key.toLowerCase() !== "d") {
+            return
+          }
+
+          if (isTypingTarget(event.target)) {
+            return
+          }
+
+          setTheme(resolvedTheme === "dark" ? "light" : "dark")
+        }
+
+        window.addEventListener("keydown", onKeyDown)
+
+        return () => {
+          window.removeEventListener("keydown", onKeyDown)
+        }
+      }, [resolvedTheme, setTheme])
+
+      return null
+    }
+
+    export { ThemeProvider }
+  `,
+})
+
+const ALIASES = {
+  components: "@/components",
+  utils: "@/lib/utils",
+  ui: "@/components/ui",
+  lib: "@/lib",
+  hooks: "@/hooks",
+} as const
+
+const transformers = [transformIcons, transformMenu, transformRender]
+
+function getStyle(designSystemConfig: DesignSystemConfig) {
+  return `${designSystemConfig.base}-${designSystemConfig.style}`
+}
+
+export async function buildV0Payload(designSystemConfig: DesignSystemConfig) {
+  const registryBase = buildRegistryBase(designSystemConfig)
+
+  // Only buildComponentFiles is async — run sync builders directly.
+  const globalsCss = buildGlobalsCss(registryBase)
+  const layoutFile = buildLayoutFile(designSystemConfig)
+  const componentFiles = await buildComponentFiles(designSystemConfig)
+
+  const dependencies = [...(registryBase.dependencies ?? []), "next-themes"]
+  const componentsJson = buildComponentsJson(designSystemConfig)
+  const packageJson = buildPackageJson(dependencies)
+
+  return registryItemSchema.parse({
+    name: designSystemConfig.item ?? "open-in-v0",
+    type: "registry:item",
+    dependencies,
+    files: [
+      globalsCss,
+      layoutFile,
+      themeProviderFile,
+      componentsJson,
+      packageJson,
+      ...componentFiles,
+    ],
+  })
+}
+
+function buildGlobalsCss(registryBase: RegistryItem) {
+  const lightVars = Object.entries(registryBase.cssVars?.light ?? {})
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n")
+
+  const darkVars = Object.entries(registryBase.cssVars?.dark ?? {})
+    .map(([key, value]) => `  --${key}: ${value};`)
+    .join("\n")
+
+  const content = dedent`@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  ${THEME_INLINE}
+}
+
+:root {
+  ${lightVars}
+}
+
+.dark {
+  ${darkVars}
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+  `
+
+  return registryItemFileSchema.parse({
+    path: "app/globals.css",
+    type: "registry:file",
+    target: "app/globals.css",
+    content,
+  })
+}
+
+function buildComponentsJson(designSystemConfig: DesignSystemConfig) {
+  const content = JSON.stringify(
+    {
+      $schema: "https://ui.shadcn.com/schema.json",
+      style: getStyle(designSystemConfig),
+      rsc: true,
+      tsx: true,
+      tailwind: {
+        config: "",
+        css: "app/globals.css",
+        baseColor: designSystemConfig.baseColor,
+        cssVariables: true,
+        prefix: "",
+      },
+      aliases: ALIASES,
+      iconLibrary: designSystemConfig.iconLibrary,
+    },
+    null,
+    2
+  )
+
+  return registryItemFileSchema.parse({
+    path: "components.json",
+    type: "registry:file",
+    target: "components.json",
+    content,
+  })
+}
+
+function buildPackageJson(dependencies: string[]) {
+  // Base package.json matching templates/next-app/package.json + component peer deps.
+  const baseDependencies: Record<string, string> = {
+    next: "16.1.6",
+    "next-themes": "^0.4.6",
+    react: "^19.2.4",
+    "react-dom": "^19.2.4",
+    // Utility deps.
+    "class-variance-authority": "^0.7.1",
+    clsx: "^2.1.1",
+    "tailwind-merge": "^3.3.1",
+    // Component peer deps.
+    "date-fns": "4.1.0",
+    "embla-carousel-react": "8.5.1",
+    "input-otp": "1.4.1",
+    "react-day-picker": "9.8.0",
+    "react-resizable-panels": "^2.1.7",
+    recharts: "2.15.4",
+    sonner: "^1.7.4",
+    vaul: "^1.1.2",
+    "@vercel/analytics": "1.3.1",
+  }
+
+  // Merge dynamic dependencies.
+  for (const dep of dependencies) {
+    const atIndex = dep.lastIndexOf("@")
+    if (atIndex > 0) {
+      // Has version: e.g. "shadcn@latest".
+      baseDependencies[dep.slice(0, atIndex)] = dep.slice(atIndex + 1)
+    } else {
+      baseDependencies[dep] = "latest"
+    }
+  }
+
+  const content = JSON.stringify(
+    {
+      name: "next-app",
+      version: "0.0.1",
+      type: "module",
+      private: true,
+      scripts: {
+        dev: "next dev --turbopack",
+        build: "next build",
+        start: "next start",
+        lint: "eslint",
+        format: 'prettier --write "**/*.{ts,tsx}"',
+        typecheck: "tsc --noEmit",
+      },
+      dependencies: baseDependencies,
+      devDependencies: {
+        "@eslint/eslintrc": "^3",
+        "@tailwindcss/postcss": "^4.1.18",
+        "@types/node": "^25.1.0",
+        "@types/react": "^19.2.10",
+        "@types/react-dom": "^19.2.3",
+        eslint: "^9.39.2",
+        "eslint-config-next": "16.1.6",
+        prettier: "^3.8.1",
+        "prettier-plugin-tailwindcss": "^0.7.2",
+        postcss: "^8",
+        tailwindcss: "^4.1.18",
+        "tw-animate-css": "^1.3.4",
+        typescript: "^5.9.3",
+      },
+    },
+    null,
+    2
+  )
+
+  return registryItemFileSchema.parse({
+    path: "package.json",
+    type: "registry:file",
+    target: "package.json",
+    content,
+  })
+}
+
+function buildLayoutFile(designSystemConfig: DesignSystemConfig) {
+  const font = fonts.find(
+    (font) => font.name === `font-${designSystemConfig.font}`
+  )
+  if (!font) {
+    throw new Error(`Font "${designSystemConfig.font}" not found`)
+  }
+
+  // Derive const name from the font's CSS variable (e.g. --font-sans → fontSans).
+  const constName = font.font.variable
+    .replace(/^--/, "")
+    .replace(/-./g, (m) => m[1].toUpperCase())
+
+  // Add font-serif or font-mono class to body when needed. Sans is the default.
+  const fontClass =
+    font.font.variable === "--font-serif"
+      ? "font-serif"
+      : font.font.variable === "--font-mono"
+        ? "font-mono"
+        : ""
+
+  const bodyClassName = fontClass ? `antialiased ${fontClass}` : "antialiased"
+
+  const content = dedent`
+    import type { Metadata } from "next";
+    import { ${font.font.import} } from "next/font/google";
+    import "./globals.css";
+    import { ThemeProvider } from "@/components/theme-provider";
+
+    const ${constName} = ${font.font.import}({subsets:['latin'],variable:'${font.font.variable}'});
+
+    export const metadata: Metadata = {
+      title: "Create Next App",
+      description: "Generated by create next app",
+    };
+
+    export default function RootLayout({
+      children,
+    }: Readonly<{
+      children: React.ReactNode;
+    }>) {
+      return (
+        <html lang="en" suppressHydrationWarning className={${constName}.variable}>
+          <body
+            className="${bodyClassName}"
+          >
+            <ThemeProvider>{children}</ThemeProvider>
+          </body>
+        </html>
+      );
+    }
+  `
+
+  return registryItemFileSchema.parse({
+    path: "app/layout.tsx",
+    type: "registry:page",
+    target: "app/layout.tsx",
+    content,
+  })
+}
+
+async function buildComponentFiles(designSystemConfig: DesignSystemConfig) {
+  const allItemsForBase = Object.values(Index[designSystemConfig.base])
+    .filter((item: RegistryItem) => item.type === "registry:ui")
+    .map((item) => item.name)
+
+  // Build config once for all components.
+  const config = buildTransformConfig(designSystemConfig)
+
+  // Fetch UI components and the item component in parallel.
+  const [registryItemFiles, itemComponentFile] = await Promise.all([
+    Promise.all(
+      allItemsForBase.map((name) =>
+        getRegistryItemFile(name, designSystemConfig, config)
+      )
+    ),
+    designSystemConfig.item
+      ? getRegistryItemFile(designSystemConfig.item, designSystemConfig, config)
+      : null,
+  ])
+
+  const files = [...registryItemFiles.filter(Boolean)]
+
+  const pageFile = {
+    path: "app/page.tsx",
+    type: "registry:page",
+    target: "app/page.tsx",
+    content: dedent`
+      import { Button } from "@/components/ui/button"
+
+      export default function Page() {
+        return (
+          <div className="flex min-h-svh p-6">
+            <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+              <div>
+                <h1 className="font-medium">Project ready!</h1>
+                <p>You may now add components and start building.</p>
+                <p>We&apos;ve already added the button component for you.</p>
+                <Button className="mt-2">Button</Button>
+              </div>
+              <div className="font-mono text-xs text-muted-foreground">
+                (Press <kbd>d</kbd> to toggle dark mode)
+              </div>
+            </div>
+          </div>
+        )
+      }
+    `,
+  }
+
+  // Build the actual item component.
+  if (itemComponentFile) {
+    // Find the export default function from the component file.
+    const exportDefault = itemComponentFile.content.match(
+      /export default function (\w+)/
+    )
+    if (exportDefault) {
+      const functionName = exportDefault[1]
+
+      // Replace the export default function with a named export.
+      itemComponentFile.content = itemComponentFile.content.replace(
+        /export default function (\w+)/,
+        `export function ${functionName}`
+      )
+
+      // Import and render the item on the page.
+      pageFile.content = dedent`import { ${functionName} } from "@/components/${designSystemConfig.item}";
+
+      export default function Page() {
+        return <${functionName} />
+      }`
+    }
+
+    files.push({
+      ...itemComponentFile,
+      target: `components/${designSystemConfig.item}.tsx`,
+      type: "registry:component",
+    })
+  }
+
+  files.push(pageFile)
+
+  return z.array(registryItemFileSchema).parse(files)
+}
+
+function buildTransformConfig(designSystemConfig: DesignSystemConfig) {
+  return {
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: getStyle(designSystemConfig),
+    rsc: true,
+    tsx: true,
+    tailwind: {
+      config: "",
+      css: "app/globals.css",
+      baseColor: designSystemConfig.baseColor,
+      cssVariables: true,
+      prefix: "",
+    },
+    iconLibrary: designSystemConfig.iconLibrary,
+    aliases: ALIASES,
+    menuAccent: designSystemConfig.menuAccent,
+    menuColor: designSystemConfig.menuColor,
+    resolvedPaths: {
+      cwd: "/",
+      tailwindConfig: "./tailwind.config.js",
+      tailwindCss: "./globals.css",
+      utils: "./lib/utils",
+      components: "./components",
+      lib: "./lib",
+      hooks: "./hooks",
+      ui: "./components/ui",
+    },
+  } satisfies z.infer<typeof configSchema>
+}
+
+async function getRegistryItemFile(
+  name: string,
+  designSystemConfig: DesignSystemConfig,
+  config: z.infer<typeof configSchema>
+) {
+  const response = await fetch(
+    `${process.env.NEXT_PUBLIC_APP_URL}/r/styles/${getStyle(designSystemConfig)}/${name}.json`
+  )
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch registry item: ${response.statusText}`)
+  }
+
+  const json = await response.json()
+  const item = registryItemSchema.parse(json)
+
+  const file = item.files?.[0]
+  if (!file?.content) {
+    return null
+  }
+
+  const content = await transformFileContent(file.content, config)
+
+  return {
+    ...file,
+    target:
+      name === "example"
+        ? "components/example.tsx"
+        : `components/ui/${name}.tsx`,
+    type: name === "example" ? "registry:component" : "registry:ui",
+    content,
+  }
+}
+
+async function transformFileContent(
+  content: string,
+  config: z.infer<typeof configSchema>
+) {
+  const project = new Project({ compilerOptions: {} })
+  const sourceFile = project.createSourceFile("component.tsx", content, {
+    scriptKind: ScriptKind.TSX,
+    overwrite: true,
+  })
+
+  for (const transformer of transformers) {
+    await transformer({
+      filename: "component.tsx",
+      raw: content,
+      sourceFile,
+      config,
+    })
+  }
+
+  return sourceFile.getText()
+}
diff --git a/apps/v4/app/(create)/preview/[base]/[name]/page.tsx b/apps/v4/app/(create)/preview/[base]/[name]/page.tsx
index d40b36e57f..3467a03084 100644
--- a/apps/v4/app/(create)/preview/[base]/[name]/page.tsx
+++ b/apps/v4/app/(create)/preview/[base]/[name]/page.tsx
@@ -4,20 +4,34 @@ import { notFound } from "next/navigation"
 
 import { siteConfig } from "@/lib/config"
 import { absoluteUrl } from "@/lib/utils"
-import { DarkModeScript } from "@/components/mode-switcher"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
-import { BASES, type Base } from "@/registry/config"
+import { BASES, type Base, type BaseName } from "@/registry/config"
+import { ActionMenuScript } from "@/app/(create)/components/action-menu"
 import { DesignSystemProvider } from "@/app/(create)/components/design-system-provider"
-import { ItemPickerScript } from "@/app/(create)/components/item-picker"
+import { HistoryScript } from "@/app/(create)/components/history-buttons"
+import { DarkModeScript } from "@/app/(create)/components/mode-switcher"
 import { PreviewStyle } from "@/app/(create)/components/preview-style"
 import { RandomizeScript } from "@/app/(create)/components/random-button"
-import { getBaseComponent, getBaseItem } from "@/app/(create)/lib/api"
-import { ALLOWED_ITEM_TYPES } from "@/app/(create)/lib/constants"
+import {
+  getBaseComponent,
+  getBaseItem,
+  getItemsForBase,
+} from "@/app/(create)/lib/api"
 
 export const revalidate = false
 export const dynamic = "force-static"
 export const dynamicParams = false
 
+function PreventScrollOnFocusScript() {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `(function(){var f=HTMLElement.prototype.focus;HTMLElement.prototype.focus=function(o){f.call(this,Object.assign({},o,{preventScroll:true}))};})();`,
+      }}
+    />
+  )
+}
+
 const getCacheRegistryItem = React.cache(
   async (name: string, base: Base["name"]) => {
     return await getBaseItem(name, base)
@@ -81,23 +95,15 @@ export async function generateMetadata({
 }
 
 export async function generateStaticParams() {
-  const { Index } = await import("@/registry/bases/__index__")
   const params: Array<{ base: string; name: string }> = []
 
   for (const base of BASES) {
-    if (!Index[base.name]) {
-      continue
-    }
-
-    const styleIndex = Index[base.name]
-    for (const itemName in styleIndex) {
-      const item = styleIndex[itemName]
-      if (ALLOWED_ITEM_TYPES.includes(item.type)) {
-        params.push({
-          base: base.name,
-          name: item.name,
-        })
-      }
+    const items = await getItemsForBase(base.name as BaseName)
+    for (const item of items) {
+      params.push({
+        base: base.name,
+        name: item.name,
+      })
     }
   }
 
@@ -130,9 +136,11 @@ export default async function BlockPage({
 
   return (
     <div className="relative">
+      <PreventScrollOnFocusScript />
       <PreviewStyle />
-      <ItemPickerScript />
+      <ActionMenuScript />
       <RandomizeScript />
+      <HistoryScript />
       <DarkModeScript />
       <DesignSystemProvider>
         <Component />
diff --git a/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx b/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
index d4a60d1780..f6cc9eb946 100644
--- a/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/components/chart-revenue.tsx
@@ -101,7 +101,7 @@ export function ChartRevenue() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
index e3004c5948..12c05be3a2 100644
--- a/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/components/nav-user.tsx
@@ -51,7 +51,7 @@ export function NavUser({
             </Avatar>
             <div className="grid flex-1 text-left text-sm leading-tight">
               <span className="truncate font-medium">{user.name}</span>
-              <span className="text-muted-foreground truncate text-xs">
+              <span className="truncate text-xs text-muted-foreground">
                 {user.email}
               </span>
             </div>
diff --git a/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx b/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
index de20722e4d..2fb0ac58f6 100644
--- a/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/components/products-table.tsx
@@ -76,7 +76,7 @@ export function ProductsTable({
         <div className="hidden items-center gap-2 **:data-[slot=button]:size-8 **:data-[slot=select-trigger]:h-8 @3xl/page:flex">
           <Select defaultValue="all">
             <SelectTrigger>
-              <span className="text-muted-foreground text-sm">Category:</span>
+              <span className="text-sm text-muted-foreground">Category:</span>
               <SelectValue placeholder="Select a product" />
             </SelectTrigger>
             <SelectContent>
@@ -88,7 +88,7 @@ export function ProductsTable({
           </Select>
           <Select defaultValue="all">
             <SelectTrigger>
-              <span className="text-muted-foreground text-sm">Price:</span>
+              <span className="text-sm text-muted-foreground">Price:</span>
               <SelectValue placeholder="Select a product" />
             </SelectTrigger>
             <SelectContent>
@@ -100,7 +100,7 @@ export function ProductsTable({
           </Select>
           <Select defaultValue="all">
             <SelectTrigger>
-              <span className="text-muted-foreground text-sm">Status:</span>
+              <span className="text-sm text-muted-foreground">Status:</span>
               <SelectValue placeholder="Select a product" />
             </SelectTrigger>
             <SelectContent>
@@ -184,7 +184,7 @@ export function ProductsTable({
         </Table>
       </CardContent>
       <CardFooter className="flex flex-col items-center justify-between border-t pt-6 @3xl/page:flex-row">
-        <div className="text-muted-foreground hidden text-sm @3xl/page:block">
+        <div className="hidden text-sm text-muted-foreground @3xl/page:block">
           Showing 1-10 of 100 products
         </div>
         <Pagination className="mx-0 w-fit">
diff --git a/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx b/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
index 306add90d7..4fad66816f 100644
--- a/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/components/site-header.tsx
@@ -38,7 +38,7 @@ export function SiteHeader() {
   return (
     <header
       data-slot="site-header"
-      className="bg-background sticky top-0 z-50 flex w-full items-center border-b"
+      className="sticky top-0 z-50 flex w-full items-center border-b bg-background"
     >
       <div className="flex h-(--header-height) w-full items-center gap-2 px-2 pr-4">
         <Button
diff --git a/apps/v4/app/(examples)/dashboard-03/settings/page.tsx b/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
index e8a4d21840..76bbe89d44 100644
--- a/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
+++ b/apps/v4/app/(examples)/dashboard-03/settings/page.tsx
@@ -489,7 +489,7 @@ function FieldDescription({
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-sm @3xl/field-group:col-start-1 @3xl/field-group:row-start-1 @3xl/field-group:translate-y-6",
+        "text-sm text-muted-foreground @3xl/field-group:col-start-1 @3xl/field-group:row-start-1 @3xl/field-group:translate-y-6",
         className
       )}
       {...props}
diff --git a/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx b/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
index f58ca30817..62bf35cb11 100644
--- a/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/app-sidebar.tsx
@@ -158,10 +158,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton
               asChild
-              className="data-[slot=sidebar-menu-button]:!p-1.5"
+              className="data-[slot=sidebar-menu-button]:p-1.5!"
             >
               <a href="#">
-                <IconInnerShadowTop className="!size-5" />
+                <IconInnerShadowTop className="size-5!" />
                 <span className="text-base font-semibold">Acme Inc.</span>
               </a>
             </SidebarMenuButton>
diff --git a/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx b/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
index 609d087628..cb6b5fc22e 100644
--- a/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/chart-area-interactive.tsx
@@ -180,7 +180,7 @@ export function ChartAreaInteractive() {
             value={timeRange}
             onValueChange={setTimeRange}
             variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
           >
             <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
             <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
diff --git a/apps/v4/app/(examples)/dashboard/components/data-table.tsx b/apps/v4/app/(examples)/dashboard/components/data-table.tsx
index 7a039c8161..def0a697fe 100644
--- a/apps/v4/app/(examples)/dashboard/components/data-table.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/data-table.tsx
@@ -128,9 +128,9 @@ function DragHandle({ id }: { id: number }) {
       {...listeners}
       variant="ghost"
       size="icon"
-      className="text-muted-foreground size-7 hover:bg-transparent"
+      className="size-7 text-muted-foreground hover:bg-transparent"
     >
-      <IconGripVertical className="text-muted-foreground size-3" />
+      <IconGripVertical className="size-3 text-muted-foreground" />
       <span className="sr-only">Drag to reorder</span>
     </Button>
   )
@@ -181,7 +181,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     header: "Section Type",
     cell: ({ row }) => (
       <div className="w-32">
-        <Badge variant="outline" className="text-muted-foreground px-1.5">
+        <Badge variant="outline" className="px-1.5 text-muted-foreground">
           {row.original.type}
         </Badge>
       </div>
@@ -191,7 +191,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     accessorKey: "status",
     header: "Status",
     cell: ({ row }) => (
-      <Badge variant="outline" className="text-muted-foreground px-1.5">
+      <Badge variant="outline" className="px-1.5 text-muted-foreground">
         {row.original.status === "Done" ? (
           <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
         ) : (
@@ -219,7 +219,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Target
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.target}
           id={`${row.original.id}-target`}
         />
@@ -244,7 +244,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Limit
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.limit}
           id={`${row.original.id}-limit`}
         />
@@ -292,7 +292,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
             size="icon"
           >
             <IconDotsVertical />
@@ -425,7 +425,7 @@ export function DataTable({
             <SelectItem value="focus-documents">Focus Documents</SelectItem>
           </SelectContent>
         </Select>
-        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
           <TabsTrigger value="outline">Outline</TabsTrigger>
           <TabsTrigger value="past-performance">
             Past Performance <Badge variant="secondary">3</Badge>
@@ -488,7 +488,7 @@ export function DataTable({
             id={sortableId}
           >
             <Table>
-              <TableHeader className="bg-muted sticky top-0 z-10">
+              <TableHeader className="sticky top-0 z-10 bg-muted">
                 {table.getHeaderGroups().map((headerGroup) => (
                   <TableRow key={headerGroup.id}>
                     {headerGroup.headers.map((header) => {
@@ -531,7 +531,7 @@ export function DataTable({
           </DndContext>
         </div>
         <div className="flex items-center justify-between px-4">
-          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
             {table.getFilteredSelectedRowModel().rows.length} of{" "}
             {table.getFilteredRowModel().rows.length} row(s) selected.
           </div>
@@ -653,7 +653,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
   return (
     <Drawer direction={isMobile ? "bottom" : "right"}>
       <DrawerTrigger asChild>
-        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+        <Button variant="link" className="w-fit px-0 text-left text-foreground">
           {item.header}
         </Button>
       </DrawerTrigger>
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx b/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
index 503c59938a..5a09c82b28 100644
--- a/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/nav-documents.tsx
@@ -52,7 +52,7 @@ export function NavDocuments({
               <DropdownMenuTrigger asChild>
                 <SidebarMenuAction
                   showOnHover
-                  className="data-[state=open]:bg-accent rounded-sm"
+                  className="rounded-sm data-[state=open]:bg-accent"
                 >
                   <IconDots />
                   <span className="sr-only">More</span>
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-main.tsx b/apps/v4/app/(examples)/dashboard/components/nav-main.tsx
index 79ffb5cd6e..3fcecdd1a0 100644
--- a/apps/v4/app/(examples)/dashboard/components/nav-main.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/nav-main.tsx
@@ -27,7 +27,7 @@ export function NavMain({
           <SidebarMenuItem className="flex items-center gap-2">
             <SidebarMenuButton
               tooltip="Quick Create"
-              className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
+              className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
             >
               <IconCirclePlusFilled />
               <span>Quick Create</span>
diff --git a/apps/v4/app/(examples)/dashboard/components/nav-user.tsx b/apps/v4/app/(examples)/dashboard/components/nav-user.tsx
index 4d63e06cf8..bdb066d28e 100644
--- a/apps/v4/app/(examples)/dashboard/components/nav-user.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/nav-user.tsx
@@ -55,7 +55,7 @@ export function NavUser({
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{user.name}</span>
-                <span className="text-muted-foreground truncate text-xs">
+                <span className="truncate text-xs text-muted-foreground">
                   {user.email}
                 </span>
               </div>
@@ -76,7 +76,7 @@ export function NavUser({
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{user.name}</span>
-                  <span className="text-muted-foreground truncate text-xs">
+                  <span className="truncate text-xs text-muted-foreground">
                     {user.email}
                   </span>
                 </div>
diff --git a/apps/v4/app/(examples)/dashboard/components/section-cards.tsx b/apps/v4/app/(examples)/dashboard/components/section-cards.tsx
index 4a69bf5ea8..8419b5e92a 100644
--- a/apps/v4/app/(examples)/dashboard/components/section-cards.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/section-cards.tsx
@@ -12,7 +12,7 @@ import {
 
 export function SectionCards() {
   return (
-    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
       <Card className="@container/card">
         <CardHeader>
           <CardDescription>Total Revenue</CardDescription>
diff --git a/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx b/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
index 40bfd982d0..a9c2a8cc0a 100644
--- a/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
+++ b/apps/v4/app/(examples)/dashboard/components/theme-selector.tsx
@@ -64,10 +64,10 @@ export function ThemeSelector() {
           size="sm"
           className="justify-start *:data-[slot=select-value]:w-12"
         >
-          <span className="text-muted-foreground hidden sm:block">
+          <span className="hidden text-muted-foreground sm:block">
             Select a theme:
           </span>
-          <span className="text-muted-foreground block sm:hidden">Theme</span>
+          <span className="block text-muted-foreground sm:hidden">Theme</span>
           <SelectValue placeholder="Select a theme" />
         </SelectTrigger>
         <SelectContent align="end">
diff --git a/apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx b/apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx
index 0d74daf180..9ca2857781 100644
--- a/apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx
+++ b/apps/v4/app/(internal)/sink/(pages)/forms/appearance-settings.tsx
@@ -95,7 +95,7 @@ export function AppearanceSettings() {
                 />
                 <Field
                   orientation="horizontal"
-                  className="@min-[28rem]/field-group:border-t-input @min-[28rem]/field-group:border-t"
+                  className="@min-[28rem]/field-group:border-t @min-[28rem]/field-group:border-t-input"
                 >
                   <FieldTitle>{mode.name}</FieldTitle>
                   <RadioGroupItem id={mode.value} value={mode.value} />
diff --git a/apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx b/apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx
index 75c7cd02eb..910263e5d2 100644
--- a/apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx
+++ b/apps/v4/app/(internal)/sink/(pages)/forms/notion-prompt-form.tsx
@@ -202,7 +202,7 @@ export function NotionPromptForm() {
         <FieldLabel htmlFor="notion-prompt" className="sr-only">
           Prompt
         </FieldLabel>
-        <InputGroup className="bg-background dark:bg-background shadow-none">
+        <InputGroup className="bg-background shadow-none dark:bg-background">
           <InputGroupTextarea
             id="notion-prompt"
             placeholder="Ask, search, or make anything..."
@@ -255,7 +255,7 @@ export function NotionPromptForm() {
                 </Command>
               </PopoverContent>
             </Popover>
-            <div className="no-scrollbar -m-1.5 flex gap-1 overflow-y-auto p-1.5">
+            <div className="-m-1.5 no-scrollbar flex gap-1 overflow-y-auto p-1.5">
               {mentions.map((mention) => {
                 const item = SAMPLE_DATA.mentionable.find(
                   (item) => item.title === mention
@@ -270,7 +270,7 @@ export function NotionPromptForm() {
                     key={mention}
                     size="sm"
                     variant="secondary"
-                    className="rounded-full !pl-2"
+                    className="rounded-full pl-2!"
                     onClick={() => {
                       setMentions((prev) => prev.filter((m) => m !== mention))
                     }}
@@ -319,7 +319,7 @@ export function NotionPromptForm() {
                 className="[--radius:1.2rem]"
               >
                 <DropdownMenuGroup className="w-72">
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
                     Get answers about your workspace
                   </DropdownMenuLabel>
                   {SAMPLE_DATA.models.map((model) => (
@@ -442,7 +442,7 @@ export function NotionPromptForm() {
                   <DropdownMenuItem>
                     <IconPlus /> Connect Apps
                   </DropdownMenuItem>
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                  <DropdownMenuLabel className="text-xs text-muted-foreground">
                     We&apos;ll only search in the sources selected here.
                   </DropdownMenuLabel>
                 </DropdownMenuGroup>
diff --git a/apps/v4/app/(internal)/sink/components/app-sidebar.tsx b/apps/v4/app/(internal)/sink/components/app-sidebar.tsx
index 46ce227320..a52ac88ca2 100644
--- a/apps/v4/app/(internal)/sink/components/app-sidebar.tsx
+++ b/apps/v4/app/(internal)/sink/components/app-sidebar.tsx
@@ -180,7 +180,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
               <Label htmlFor="search" className="sr-only">
                 Search
               </Label>
-              <InputGroup className="bg-background h-8 shadow-none">
+              <InputGroup className="h-8 bg-background shadow-none">
                 <InputGroupInput
                   id="search"
                   placeholder="Search the docs..."
diff --git a/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx b/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
index b995debb82..1d74a861eb 100644
--- a/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/aspect-ratio-demo.tsx
@@ -5,7 +5,7 @@ import { AspectRatio } from "@/registry/new-york-v4/ui/aspect-ratio"
 export function AspectRatioDemo() {
   return (
     <div className="grid w-full max-w-sm items-start gap-4">
-      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
         <Image
           src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
           alt="Photo by Drew Beamer"
@@ -13,7 +13,7 @@ export function AspectRatioDemo() {
           className="h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale"
         />
       </AspectRatio>
-      <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
+      <AspectRatio ratio={1 / 1} className="rounded-lg bg-muted">
         <Image
           src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
           alt="Photo by Drew Beamer"
diff --git a/apps/v4/app/(internal)/sink/components/button-group-demo.tsx b/apps/v4/app/(internal)/sink/components/button-group-demo.tsx
index f911480119..deec8f5d6e 100644
--- a/apps/v4/app/(internal)/sink/components/button-group-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/button-group-demo.tsx
@@ -144,7 +144,7 @@ export function ButtonGroupDemo() {
             <Button variant="outline">Follow</Button>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button variant="outline" className="!pl-2">
+                <Button variant="outline" className="pl-2!">
                   <ChevronDownIcon />
                 </Button>
               </DropdownMenuTrigger>
@@ -377,7 +377,7 @@ export function ButtonGroupDemo() {
           <Button
             variant="outline"
             asChild
-            className="text-muted-foreground pointer-events-none px-2"
+            className="pointer-events-none px-2 text-muted-foreground"
           >
             <span>1.2K</span>
           </Button>
diff --git a/apps/v4/app/(internal)/sink/components/calendar-demo.tsx b/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
index 2cb1b3346c..7878aaa884 100644
--- a/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/calendar-demo.tsx
@@ -14,7 +14,7 @@ import { Label } from "@/registry/new-york-v4/ui/label"
 
 export function CalendarDemo() {
   return (
-    <div className="bg-muted flex flex-1 flex-col flex-wrap justify-center gap-8 p-10 lg:flex-row">
+    <div className="flex flex-1 flex-col flex-wrap justify-center gap-8 bg-muted p-10 lg:flex-row">
       <CalendarSingle />
       <CalendarMultiple />
       <CalendarRange />
@@ -150,7 +150,7 @@ function CalendarWithTime() {
           <div className="flex w-full flex-col gap-2">
             <Label htmlFor="time-from">Start Time</Label>
             <div className="relative flex w-full items-center gap-2">
-              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+              <Clock2Icon className="pointer-events-none absolute left-2.5 size-4 text-muted-foreground select-none" />
               <Input
                 id="time-from"
                 type="time"
@@ -163,7 +163,7 @@ function CalendarWithTime() {
           <div className="flex w-full flex-col gap-2">
             <Label htmlFor="time-to">End Time</Label>
             <div className="relative flex w-full items-center gap-2">
-              <Clock2Icon className="text-muted-foreground pointer-events-none absolute left-2.5 size-4 select-none" />
+              <Clock2Icon className="pointer-events-none absolute left-2.5 size-4 text-muted-foreground select-none" />
               <Input
                 id="time-to"
                 type="time"
diff --git a/apps/v4/app/(internal)/sink/components/card-demo.tsx b/apps/v4/app/(internal)/sink/components/card-demo.tsx
index f7ec39b62f..6470dec453 100644
--- a/apps/v4/app/(internal)/sink/components/card-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/card-demo.tsx
@@ -92,7 +92,7 @@ export function CardDemo() {
           </ol>
         </CardContent>
         <CardFooter>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
             <Avatar>
               <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
index 39f4e46d09..4055369291 100644
--- a/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-area-demo.tsx
@@ -83,7 +83,7 @@ export function ChartAreaDemo() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
index 9d220de1be..c1afa1abf2 100644
--- a/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-bar-demo.tsx
@@ -71,7 +71,7 @@ export function ChartBarDemo() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx b/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
index 7953c70ee4..cb59da61d9 100644
--- a/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-bar-mixed.tsx
@@ -94,7 +94,7 @@ export function ChartBarMixed() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx b/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
index b1f2439dc8..1800e9f605 100644
--- a/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/chart-line-demo.tsx
@@ -89,7 +89,7 @@ export function ChartLineDemo() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               Showing total visitors for the last 6 months
             </div>
           </div>
diff --git a/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx b/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
index 3de6a07bcb..7f3592e8f5 100644
--- a/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/checkbox-demo.tsx
@@ -14,7 +14,7 @@ export function CheckboxDemo() {
         <Checkbox id="terms-2" defaultChecked />
         <div className="grid gap-2">
           <Label htmlFor="terms-2">Accept terms and conditions</Label>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             By clicking this checkbox, you agree to the terms and conditions.
           </p>
         </div>
@@ -23,7 +23,7 @@ export function CheckboxDemo() {
         <Checkbox id="toggle" disabled />
         <Label htmlFor="toggle">Enable notifications</Label>
       </div>
-      <Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
+      <Label className="flex items-start gap-3 rounded-lg border p-3 hover:bg-accent/50 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
         <Checkbox
           id="toggle-2"
           defaultChecked
@@ -33,7 +33,7 @@ export function CheckboxDemo() {
           <p className="text-sm leading-none font-medium">
             Enable notifications
           </p>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             You can enable or disable notifications at any time.
           </p>
         </div>
diff --git a/apps/v4/app/(internal)/sink/components/command-demo.tsx b/apps/v4/app/(internal)/sink/components/command-demo.tsx
index bff278d675..f61c180c95 100644
--- a/apps/v4/app/(internal)/sink/components/command-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/command-demo.tsx
@@ -38,9 +38,9 @@ export function CommandDemo() {
 
   return (
     <>
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         Press{" "}
-        <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+        <kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 select-none">
           <span className="text-xs">⌘</span>J
         </kbd>
       </p>
diff --git a/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx b/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
index b60764d2ee..d314842435 100644
--- a/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/date-picker-demo.tsx
@@ -119,7 +119,7 @@ function DataPickerWithDropdowns() {
             )}
           >
             {date ? format(date, "PPP") : <span>Pick a date</span>}
-            <CalendarIcon className="text-muted-foreground ml-auto" />
+            <CalendarIcon className="ml-auto text-muted-foreground" />
           </Button>
         </DrawerTrigger>
         <DrawerContent>
@@ -153,7 +153,7 @@ function DataPickerWithDropdowns() {
           )}
         >
           {date ? format(date, "PPP") : <span>Pick a date</span>}
-          <CalendarIcon className="text-muted-foreground ml-auto" />
+          <CalendarIcon className="ml-auto text-muted-foreground" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-auto p-0" align="start">
diff --git a/apps/v4/app/(internal)/sink/components/drawer-demo.tsx b/apps/v4/app/(internal)/sink/components/drawer-demo.tsx
index 73890f2c81..a7e3786098 100644
--- a/apps/v4/app/(internal)/sink/components/drawer-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/drawer-demo.tsx
@@ -102,7 +102,7 @@ function DrawerBottom() {
                 <div className="text-7xl font-bold tracking-tighter">
                   {goal}
                 </div>
-                <div className="text-muted-foreground text-[0.70rem] uppercase">
+                <div className="text-[0.70rem] text-muted-foreground uppercase">
                   Calories/day
                 </div>
               </div>
diff --git a/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx b/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
index 1094022f8c..d9b971b806 100644
--- a/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/dropdown-menu-demo.tsx
@@ -222,7 +222,7 @@ function DropdownMenuWithAvatar() {
           </Avatar>
           <div className="grid flex-1 text-left text-sm leading-tight">
             <span className="truncate font-semibold">shadcn</span>
-            <span className="text-muted-foreground truncate text-xs">
+            <span className="truncate text-xs text-muted-foreground">
               shadcn@example.com
             </span>
           </div>
@@ -232,7 +232,7 @@ function DropdownMenuWithAvatar() {
             hugeicons="ChevronUpDownIcon"
             phosphor="CaretUpDownIcon"
             remixicon="RiExpandUpDownLine"
-            className="text-muted-foreground ml-auto"
+            className="ml-auto text-muted-foreground"
           />
         </Button>
       </DropdownMenuTrigger>
@@ -248,7 +248,7 @@ function DropdownMenuWithAvatar() {
             </Avatar>
             <div className="grid flex-1 text-left text-sm leading-tight">
               <span className="truncate font-semibold">shadcn</span>
-              <span className="text-muted-foreground truncate text-xs">
+              <span className="truncate text-xs text-muted-foreground">
                 shadcn@example.com
               </span>
             </div>
@@ -348,7 +348,7 @@ function DropdownMenuAvatarOnly() {
             </Avatar>
             <div className="grid flex-1 text-left text-sm leading-tight">
               <span className="truncate font-semibold">maxleiter</span>
-              <span className="text-muted-foreground truncate text-xs">
+              <span className="truncate text-xs text-muted-foreground">
                 maxleiter@example.com
               </span>
             </div>
diff --git a/apps/v4/app/(internal)/sink/components/empty-demo.tsx b/apps/v4/app/(internal)/sink/components/empty-demo.tsx
index e633d67045..a02ceeb87c 100644
--- a/apps/v4/app/(internal)/sink/components/empty-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/empty-demo.tsx
@@ -59,7 +59,7 @@ export function EmptyDemo() {
           </Button>
         </EmptyContent>
       </Empty>
-      <Empty className="bg-muted min-h-[80svh]">
+      <Empty className="min-h-[80svh] bg-muted">
         <EmptyHeader>
           <EmptyTitle>No results found</EmptyTitle>
           <EmptyDescription>
@@ -114,7 +114,7 @@ export function EmptyDemo() {
           </Button>
         </EmptyContent>
       </Empty>
-      <div className="bg-muted flex min-h-[800px] items-center justify-center rounded-lg p-20">
+      <div className="flex min-h-[800px] items-center justify-center rounded-lg bg-muted p-20">
         <Card className="max-w-sm">
           <CardContent>
             <Empty className="p-4">
@@ -143,7 +143,7 @@ export function EmptyDemo() {
           </CardContent>
         </Card>
       </div>
-      <div className="bg-muted flex min-h-[800px] items-center justify-center rounded-lg p-20">
+      <div className="flex min-h-[800px] items-center justify-center rounded-lg bg-muted p-20">
         <Card className="max-w-sm">
           <CardContent>
             <Empty className="p-4">
diff --git a/apps/v4/app/(internal)/sink/components/field-demo.tsx b/apps/v4/app/(internal)/sink/components/field-demo.tsx
index 597208939e..5f457ba284 100644
--- a/apps/v4/app/(internal)/sink/components/field-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/field-demo.tsx
@@ -91,7 +91,7 @@ import {
 export function FieldDemo() {
   return (
     <div className="@container w-full">
-      <div className="bg-muted grid gap-4 p-4 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 @[140rem]:grid-cols-5">
+      <div className="grid gap-4 bg-muted p-4 @3xl:grid-cols-2 @5xl:grid-cols-3 @[120rem]:grid-cols-4 @[140rem]:grid-cols-5">
         <div className="flex flex-col gap-6">
           <BasicFields />
           <PrivacySettings />
@@ -599,8 +599,8 @@ function PrivacySettings() {
                   id="everyone-f8k"
                   className="sr-only"
                 />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
               </Field>
             </FieldLabel>
             <FieldLabel htmlFor="followers-s7m">
@@ -616,8 +616,8 @@ function PrivacySettings() {
                   id="followers-s7m"
                   className="sr-only"
                 />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
               </Field>
             </FieldLabel>
             <FieldLabel htmlFor="custom-q3r">
@@ -633,8 +633,8 @@ function PrivacySettings() {
                   id="custom-q3r"
                   className="sr-only"
                 />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
               </Field>
             </FieldLabel>
           </RadioGroup>
@@ -699,7 +699,7 @@ function PrivacySettings() {
           <RadioGroup>
             <FieldLabel htmlFor="everyone-3-k4p">
               <Field orientation="horizontal">
-                <div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
+                <div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
                   <IconWorld className="size-4" />
                 </div>
                 <FieldContent>
@@ -713,13 +713,13 @@ function PrivacySettings() {
                   id="everyone-3-k4p"
                   className="sr-only"
                 />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
               </Field>
             </FieldLabel>
             <FieldLabel htmlFor="followers-3-m7j">
               <Field orientation="horizontal">
-                <div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
+                <div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
                   <IconUsers className="size-4" />
                 </div>
                 <FieldContent>
@@ -733,13 +733,13 @@ function PrivacySettings() {
                   id="followers-3-m7j"
                   className="sr-only"
                 />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
               </Field>
             </FieldLabel>
             <FieldLabel htmlFor="custom-3-r9w">
               <Field orientation="horizontal">
-                <div className="bg-muted group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground group-has-data-[state=checked]/field:border-primary flex size-8 shrink-0 items-center justify-center rounded-full border transition-all duration-100">
+                <div className="flex size-8 shrink-0 items-center justify-center rounded-full border bg-muted transition-all duration-100 group-has-data-[state=checked]/field:border-primary group-has-data-[state=checked]/field:bg-primary group-has-data-[state=checked]/field:text-primary-foreground">
                   <IconPlus className="size-4" />
                 </div>
                 <FieldContent>
@@ -753,8 +753,8 @@ function PrivacySettings() {
                   id="custom-3-r9w"
                   className="sr-only"
                 />
-                <IconCircle className="stroke-input size-5 stroke-1 group-has-data-[state=checked]/field:hidden" />
-                <IconCircleCheckFilled className="fill-primary hidden size-5 group-has-data-[state=checked]/field:block" />
+                <IconCircle className="size-5 stroke-input stroke-1 group-has-data-[state=checked]/field:hidden" />
+                <IconCircleCheckFilled className="hidden size-5 fill-primary group-has-data-[state=checked]/field:block" />
               </Field>
             </FieldLabel>
           </RadioGroup>
@@ -1034,7 +1034,7 @@ function ShippingMethods() {
         </CardContent>
       </Card>
       <form>
-        <FieldGroup className="bg-background gap-6 rounded-lg border p-6">
+        <FieldGroup className="gap-6 rounded-lg border bg-background p-6">
           <FieldSet>
             <FieldLegend>GPU Type</FieldLegend>
             <FieldDescription>
diff --git a/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx b/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
index a1b7d3daf0..3ac291ceff 100644
--- a/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/hover-card-demo.tsx
@@ -30,8 +30,8 @@ export function HoverCardDemo() {
               The React Framework – created and maintained by @vercel.
             </p>
             <div className="mt-1 flex items-center gap-2">
-              <CalendarIcon className="text-muted-foreground size-4" />{" "}
-              <span className="text-muted-foreground text-xs">
+              <CalendarIcon className="size-4 text-muted-foreground" />{" "}
+              <span className="text-xs text-muted-foreground">
                 Joined December 2021
               </span>
             </div>
diff --git a/apps/v4/app/(internal)/sink/components/input-group-demo.tsx b/apps/v4/app/(internal)/sink/components/input-group-demo.tsx
index 93c4943b83..1d6171d053 100644
--- a/apps/v4/app/(internal)/sink/components/input-group-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/input-group-demo.tsx
@@ -131,7 +131,7 @@ export function InputGroupDemo() {
           <InputGroup>
             <InputGroupInput id="input-icon-right-08" />
             <InputGroupAddon align="inline-end">
-              <IconLoader2 className="text-muted-foreground animate-spin" />
+              <IconLoader2 className="animate-spin text-muted-foreground" />
             </InputGroupAddon>
           </InputGroup>
         </Field>
@@ -353,7 +353,7 @@ export function InputGroupDemo() {
             <InputGroupInput id="input-addon-20" />
             <InputGroupAddon align="block-start">
               <InputGroupText>First Name</InputGroupText>
-              <IconInfoCircle className="text-muted-foreground ml-auto" />
+              <IconInfoCircle className="ml-auto text-muted-foreground" />
             </InputGroupAddon>
           </InputGroup>
         </Field>
@@ -363,7 +363,7 @@ export function InputGroupDemo() {
             <InputGroupInput id="input-addon-21" />
             <InputGroupAddon align="block-end">
               <InputGroupText>20/240 characters</InputGroupText>
-              <IconInfoCircle className="text-muted-foreground ml-auto" />
+              <IconInfoCircle className="ml-auto text-muted-foreground" />
             </InputGroupAddon>
           </InputGroup>
         </Field>
diff --git a/apps/v4/app/(internal)/sink/components/item-demo.tsx b/apps/v4/app/(internal)/sink/components/item-demo.tsx
index c9fa398824..6aa0169e79 100644
--- a/apps/v4/app/(internal)/sink/components/item-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/item-demo.tsx
@@ -264,7 +264,7 @@ export function ItemDemo() {
           </ItemGroup>
           <Item variant="outline">
             <ItemMedia>
-              <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+              <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
                 <Avatar>
                   <AvatarImage
                     src="https://github.com/shadcn.png"
diff --git a/apps/v4/app/(internal)/sink/components/native-select-demo.tsx b/apps/v4/app/(internal)/sink/components/native-select-demo.tsx
index 19d57ad285..9f26a80635 100644
--- a/apps/v4/app/(internal)/sink/components/native-select-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/native-select-demo.tsx
@@ -17,7 +17,7 @@ export function NativeSelectDemo() {
   return (
     <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-3">
-        <div className="text-muted-foreground text-sm font-medium">
+        <div className="text-sm font-medium text-muted-foreground">
           Basic Select
         </div>
         <div className="flex flex-col gap-4">
@@ -48,7 +48,7 @@ export function NativeSelectDemo() {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="text-muted-foreground text-sm font-medium">
+        <div className="text-sm font-medium text-muted-foreground">
           With Groups
         </div>
         <div className="flex flex-col gap-4">
@@ -89,7 +89,7 @@ export function NativeSelectDemo() {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="text-muted-foreground text-sm font-medium">
+        <div className="text-sm font-medium text-muted-foreground">
           Disabled State
         </div>
         <div className="flex flex-col gap-4">
@@ -110,7 +110,7 @@ export function NativeSelectDemo() {
         </div>
       </div>
       <div className="flex flex-col gap-3">
-        <div className="text-muted-foreground text-sm font-medium">
+        <div className="text-sm font-medium text-muted-foreground">
           Error State
         </div>
         <div className="flex flex-col gap-4">
diff --git a/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx b/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
index 115cd5ef25..6e47c943b9 100644
--- a/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/navigation-menu-demo.tsx
@@ -62,13 +62,13 @@ export function NavigationMenuDemo() {
                 <li className="row-span-3">
                   <NavigationMenuLink asChild>
                     <a
-                      className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-6 no-underline outline-hidden select-none focus:shadow-md"
+                      className="flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b from-muted/50 to-muted p-6 no-underline outline-hidden select-none focus:shadow-md"
                       href="/"
                     >
                       <div className="mt-4 mb-2 text-lg font-medium">
                         shadcn/ui
                       </div>
-                      <p className="text-muted-foreground text-sm leading-tight">
+                      <p className="text-sm leading-tight text-muted-foreground">
                         Beautifully designed components built with Tailwind CSS.
                       </p>
                     </a>
@@ -217,7 +217,7 @@ function ListItem({
       <NavigationMenuLink asChild>
         <Link href={href}>
           <div className="text-sm leading-none font-medium">{title}</div>
-          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
             {children}
           </p>
         </Link>
diff --git a/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx b/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
index 03533fb3eb..f15fc0c1d7 100644
--- a/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/radio-group-demo.tsx
@@ -40,7 +40,7 @@ export function RadioGroupDemo() {
       <RadioGroup defaultValue="starter" className="max-w-sm">
         {plans.map((plan) => (
           <Label
-            className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-4 has-[[data-state=checked]]:border-green-600 has-[[data-state=checked]]:bg-green-50 dark:has-[[data-state=checked]]:border-green-900 dark:has-[[data-state=checked]]:bg-green-950"
+            className="flex items-start gap-3 rounded-lg border p-4 hover:bg-accent/50 has-[[data-state=checked]]:border-green-600 has-[[data-state=checked]]:bg-green-50 dark:has-[[data-state=checked]]:border-green-900 dark:has-[[data-state=checked]]:bg-green-950"
             key={plan.id}
           >
             <RadioGroupItem
@@ -50,7 +50,7 @@ export function RadioGroupDemo() {
             />
             <div className="grid gap-1 font-normal">
               <div className="font-medium">{plan.name}</div>
-              <div className="text-muted-foreground leading-snug">
+              <div className="leading-snug text-muted-foreground">
                 {plan.description}
               </div>
             </div>
diff --git a/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx b/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
index f53bd951ae..25db5ab70e 100644
--- a/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/scroll-area-demo.tsx
@@ -65,9 +65,9 @@ function ScrollAreaHorizontalDemo() {
                 height={400}
               />
             </div>
-            <figcaption className="text-muted-foreground pt-2 text-xs">
+            <figcaption className="pt-2 text-xs text-muted-foreground">
               Photo by{" "}
-              <span className="text-foreground font-semibold">
+              <span className="font-semibold text-foreground">
                 {artwork.artist}
               </span>
             </figcaption>
diff --git a/apps/v4/app/(internal)/sink/components/separator-demo.tsx b/apps/v4/app/(internal)/sink/components/separator-demo.tsx
index 5054ba2bcd..9943453f12 100644
--- a/apps/v4/app/(internal)/sink/components/separator-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/separator-demo.tsx
@@ -5,7 +5,7 @@ export function SeparatorDemo() {
     <div>
       <div className="flex flex-col gap-1">
         <div className="text-sm leading-none font-medium">Tailwind CSS</div>
-        <div className="text-muted-foreground text-sm">
+        <div className="text-sm text-muted-foreground">
           A utility-first CSS framework.
         </div>
       </div>
diff --git a/apps/v4/app/(internal)/sink/components/slider-demo.tsx b/apps/v4/app/(internal)/sink/components/slider-demo.tsx
index e4c63ea361..0932dac158 100644
--- a/apps/v4/app/(internal)/sink/components/slider-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/slider-demo.tsx
@@ -27,7 +27,7 @@ function SliderControlled() {
     <div className="grid w-full gap-3">
       <div className="flex items-center justify-between gap-2">
         <Label htmlFor="slider-demo-temperature">Temperature</Label>
-        <span className="text-muted-foreground text-sm">
+        <span className="text-sm text-muted-foreground">
           {value.join(", ")}
         </span>
       </div>
diff --git a/apps/v4/app/(internal)/sink/components/switch-demo.tsx b/apps/v4/app/(internal)/sink/components/switch-demo.tsx
index ed6db09954..80413f9660 100644
--- a/apps/v4/app/(internal)/sink/components/switch-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/switch-demo.tsx
@@ -30,7 +30,7 @@ export function SwitchDemo() {
       <Label className="flex items-center gap-6 rounded-lg border p-4 has-[[data-state=checked]]:border-blue-600">
         <div className="flex flex-col gap-1">
           <div className="font-medium">Share across devices</div>
-          <div className="text-muted-foreground text-sm font-normal">
+          <div className="text-sm font-normal text-muted-foreground">
             Focus is shared across devices, and turns off when you leave the
             app.
           </div>
diff --git a/apps/v4/app/(internal)/sink/components/textarea-demo.tsx b/apps/v4/app/(internal)/sink/components/textarea-demo.tsx
index b4ba5957c3..8ba32fb2a3 100644
--- a/apps/v4/app/(internal)/sink/components/textarea-demo.tsx
+++ b/apps/v4/app/(internal)/sink/components/textarea-demo.tsx
@@ -23,7 +23,7 @@ export function TextareaDemo() {
           placeholder="Type your message here."
           rows={6}
         />
-        <div className="text-muted-foreground text-sm">
+        <div className="text-sm text-muted-foreground">
           Type your message and press enter to send.
         </div>
       </div>
diff --git a/apps/v4/app/(internal)/sink/components/theme-selector.tsx b/apps/v4/app/(internal)/sink/components/theme-selector.tsx
index 448baba496..e8a03f00a8 100644
--- a/apps/v4/app/(internal)/sink/components/theme-selector.tsx
+++ b/apps/v4/app/(internal)/sink/components/theme-selector.tsx
@@ -113,7 +113,7 @@ export function ThemeSelector({ className }: React.ComponentProps<"div">) {
         <SelectTrigger
           id="theme-selector"
           size="sm"
-          className="bg-secondary text-secondary-foreground border-secondary justify-start shadow-none *:data-[slot=select-value]:w-16"
+          className="justify-start border-secondary bg-secondary text-secondary-foreground shadow-none *:data-[slot=select-value]:w-16"
         >
           <SelectValue placeholder="Select" />
         </SelectTrigger>
diff --git a/apps/v4/app/(internal)/sink/layout.tsx b/apps/v4/app/(internal)/sink/layout.tsx
index d8fa4a323d..5bb2c725e4 100644
--- a/apps/v4/app/(internal)/sink/layout.tsx
+++ b/apps/v4/app/(internal)/sink/layout.tsx
@@ -50,9 +50,9 @@ export default async function SinkLayout({
     >
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 z-10 flex h-14 items-center border-b p-4">
+        <header className="sticky top-0 z-10 flex h-14 items-center border-b bg-background p-4">
           <SidebarTrigger />
-          <Separator orientation="vertical" className="mr-4 ml-2 !h-4" />
+          <Separator orientation="vertical" className="mr-4 ml-2 h-4!" />
           <AppBreadcrumbs />
           <div className="ml-auto flex items-center gap-2">
             <ModeSwitcher />
diff --git a/apps/v4/components/announcement.tsx b/apps/v4/components/announcement.tsx
index 5f869f9a39..4a84900d48 100644
--- a/apps/v4/components/announcement.tsx
+++ b/apps/v4/components/announcement.tsx
@@ -3,26 +3,11 @@ import { ArrowRightIcon } from "lucide-react"
 
 import { Badge } from "@/registry/new-york-v4/ui/badge"
 
-function BaseUILogo() {
-  return (
-    <svg width="17" height="24" viewBox="0 0 17 24" className="size-3">
-      <path
-        fill="currentColor"
-        d="M9.5001 7.01537C9.2245 6.99837 9 7.22385 9 7.49999V23C13.4183 23 17 19.4183 17 15C17 10.7497 13.6854 7.27351 9.5001 7.01537Z"
-      />
-      <path
-        fill="currentColor"
-        d="M8 9.8V12V23C3.58172 23 0 19.0601 0 14.2V12V1C4.41828 1 8 4.93989 8 9.8Z"
-      />
-    </svg>
-  )
-}
-
 export function Announcement() {
   return (
     <Badge asChild variant="secondary" className="bg-muted">
-      <Link href="/docs/changelog/2026-01-rtl">
-        RTL Support <ArrowRightIcon />
+      <Link href="/docs/changelog/2026-03-cli-v4">
+        shadcn/skills, presets and more <ArrowRightIcon />
       </Link>
     </Badge>
   )
diff --git a/apps/v4/components/block-viewer.tsx b/apps/v4/components/block-viewer.tsx
index 887906ba49..5281ad4a4a 100644
--- a/apps/v4/components/block-viewer.tsx
+++ b/apps/v4/components/block-viewer.tsx
@@ -170,22 +170,22 @@ function BlockViewerToolbar({ styleName }: { styleName: Style["name"] }) {
         <div className="h-8 items-center gap-1.5 rounded-md border p-[3px] shadow-none">
           <ToggleGroup
             type="single"
-            defaultValue="100"
+            defaultValue="100%"
             onValueChange={(value) => {
               setView("preview")
               if (resizablePanelRef?.current) {
-                resizablePanelRef.current.resize(parseInt(value))
+                resizablePanelRef.current.resize(value)
               }
             }}
             className="gap-1 *:data-[slot=toggle-group-item]:size-6! *:data-[slot=toggle-group-item]:rounded-sm!"
           >
-            <ToggleGroupItem value="100" title="Desktop">
+            <ToggleGroupItem value="100%" title="Desktop">
               <Monitor />
             </ToggleGroupItem>
-            <ToggleGroupItem value="60" title="Tablet">
+            <ToggleGroupItem value="60%" title="Tablet">
               <Tablet />
             </ToggleGroupItem>
-            <ToggleGroupItem value="30" title="Mobile">
+            <ToggleGroupItem value="30%" title="Mobile">
               <Smartphone />
             </ToggleGroupItem>
             <Separator orientation="vertical" className="h-4!" />
@@ -253,7 +253,7 @@ function BlockViewerIframe({
       height={item.meta?.iframeHeight ?? 930}
       loading="lazy"
       className={cn(
-        "bg-background no-scrollbar relative z-20 w-full",
+        "relative z-20 no-scrollbar w-full bg-background",
         className
       )}
     />
@@ -269,17 +269,17 @@ function BlockViewerView({ styleName }: { styleName: Style["name"] }) {
         <div className="absolute inset-0 right-4 [background-image:radial-gradient(#d4d4d4_1px,transparent_1px)] [background-size:20px_20px] dark:[background-image:radial-gradient(#404040_1px,transparent_1px)]"></div>
         <ResizablePanelGroup
           orientation="horizontal"
-          className="after:bg-surface/50 relative z-10 after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-xl"
+          className="relative z-10 after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-xl after:bg-surface/50"
         >
           <ResizablePanel
             panelRef={resizablePanelRef}
-            className="bg-background relative aspect-[4/2.5] overflow-hidden rounded-lg border md:aspect-auto md:rounded-xl"
+            className="relative aspect-[4/2.5] overflow-hidden rounded-lg border bg-background md:aspect-auto md:rounded-xl"
             defaultSize="100%"
             minSize="30%"
           >
             <BlockViewerIframe styleName={styleName} />
           </ResizablePanel>
-          <ResizableHandle className="after:bg-border relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:-translate-y-1/2 after:rounded-full after:transition-all after:hover:h-10 md:block" />
+          <ResizableHandle className="relative hidden w-3 bg-transparent p-0 after:absolute after:top-1/2 after:right-0 after:h-8 after:w-[6px] after:translate-x-[-1px] after:-translate-y-1/2 after:rounded-full after:bg-border after:transition-all after:hover:h-10 md:block" />
           <ResizablePanel defaultSize="0%" minSize="0%" />
         </ResizablePanelGroup>
       </div>
@@ -296,7 +296,7 @@ function BlockViewerMobile({ children }: { children: React.ReactNode }) {
         <div className="line-clamp-1 text-sm font-medium">
           {item.description}
         </div>
-        <div className="text-muted-foreground ml-auto shrink-0 font-mono text-xs">
+        <div className="ml-auto shrink-0 font-mono text-xs text-muted-foreground">
           {item.name}
         </div>
       </div>
@@ -340,16 +340,16 @@ function BlockViewerCode() {
   const language = file.path.split(".").pop() ?? "tsx"
 
   return (
-    <div className="bg-code text-code-foreground mr-[14px] flex overflow-hidden rounded-xl border group-data-[view=preview]/block-view-wrapper:hidden md:h-(--height)">
+    <div className="mr-[14px] flex overflow-hidden rounded-xl border bg-code text-code-foreground group-data-[view=preview]/block-view-wrapper:hidden md:h-(--height)">
       <div className="w-72">
         <BlockViewerFileTree />
       </div>
       <figure
         data-rehype-pretty-code-figure=""
-        className="!mx-0 mt-0 flex min-w-0 flex-1 flex-col rounded-xl border-none"
+        className="mx-0! mt-0 flex min-w-0 flex-1 flex-col rounded-xl border-none"
       >
         <figcaption
-          className="text-code-foreground [&_svg]:text-code-foreground flex h-12 shrink-0 items-center gap-2 border-b px-4 py-2 [&_svg]:size-4 [&_svg]:opacity-70"
+          className="flex h-12 shrink-0 items-center gap-2 border-b px-4 py-2 text-code-foreground [&_svg]:size-4 [&_svg]:text-code-foreground [&_svg]:opacity-70"
           data-language={language}
         >
           {getIconForLanguageExtension(language)}
@@ -376,7 +376,7 @@ export function BlockViewerFileTree() {
   }
 
   return (
-    <SidebarProvider className="flex !min-h-full flex-col border-r">
+    <SidebarProvider className="flex min-h-full! flex-col border-r">
       <Sidebar collapsible="none" className="w-full flex-1">
         <SidebarGroupLabel className="h-12 rounded-none border-b px-4 text-sm">
           Files
@@ -404,7 +404,7 @@ function Tree({ item, index }: { item: FileTree; index: number }) {
         <SidebarMenuButton
           isActive={item.path === activeFile}
           onClick={() => item.path && setActiveFile(item.path)}
-          className="hover:bg-muted-foreground/15 focus:bg-muted-foreground/15 focus-visible:bg-muted-foreground/15 active:bg-muted-foreground/15 data-[active=true]:bg-muted-foreground/15 rounded-none pl-(--index) whitespace-nowrap"
+          className="rounded-none pl-(--index) whitespace-nowrap hover:bg-muted-foreground/15 focus:bg-muted-foreground/15 focus-visible:bg-muted-foreground/15 active:bg-muted-foreground/15 data-[active=true]:bg-muted-foreground/15"
           data-index={index}
           style={
             {
@@ -428,7 +428,7 @@ function Tree({ item, index }: { item: FileTree; index: number }) {
       >
         <CollapsibleTrigger asChild>
           <SidebarMenuButton
-            className="hover:bg-muted-foreground/15 focus:bg-muted-foreground/15 focus-visible:bg-muted-foreground/15 active:bg-muted-foreground/15 data-[active=true]:bg-muted-foreground/15 rounded-none pl-(--index) whitespace-nowrap"
+            className="rounded-none pl-(--index) whitespace-nowrap hover:bg-muted-foreground/15 focus:bg-muted-foreground/15 focus-visible:bg-muted-foreground/15 active:bg-muted-foreground/15 data-[active=true]:bg-muted-foreground/15"
             style={
               {
                 "--index": `${index * (index === 1 ? 1 : 1.2)}rem`,
diff --git a/apps/v4/components/blocks-nav.tsx b/apps/v4/components/blocks-nav.tsx
index b8f07f9c6b..f549575b04 100644
--- a/apps/v4/components/blocks-nav.tsx
+++ b/apps/v4/components/blocks-nav.tsx
@@ -46,7 +46,7 @@ function BlocksNavLink({
     <Link
       href={`/blocks/${category.slug}`}
       key={category.slug}
-      className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 items-center justify-center px-4 text-center text-base font-medium transition-colors"
+      className="flex h-7 items-center justify-center px-4 text-center text-base font-medium text-muted-foreground transition-colors hover:text-primary data-[active=true]:text-primary"
       data-active={isActive}
     >
       {category.name}
diff --git a/apps/v4/components/callout.tsx b/apps/v4/components/callout.tsx
index 11197b7d1f..9629767cdb 100644
--- a/apps/v4/components/callout.tsx
+++ b/apps/v4/components/callout.tsx
@@ -20,7 +20,7 @@ export function Callout({
     <Alert
       data-variant={variant}
       className={cn(
-        "bg-surface text-surface-foreground border-surface mt-6 w-auto rounded-xl md:-mx-1 **:[code]:border",
+        "mt-6 w-auto rounded-xl border-surface bg-surface text-surface-foreground md:-mx-1 **:[code]:border",
         className
       )}
       {...props}
diff --git a/apps/v4/components/cards/activity-goal.tsx b/apps/v4/components/cards/activity-goal.tsx
index 5f2e5d7832..fd0b7979dc 100644
--- a/apps/v4/components/cards/activity-goal.tsx
+++ b/apps/v4/components/cards/activity-goal.tsx
@@ -96,7 +96,7 @@ export function CardsActivityGoal() {
             <div className="text-4xl font-bold tracking-tighter tabular-nums">
               {goal}
             </div>
-            <div className="text-muted-foreground text-xs uppercase">
+            <div className="text-xs text-muted-foreground uppercase">
               Calories/day
             </div>
           </div>
diff --git a/apps/v4/components/cards/chat.tsx b/apps/v4/components/cards/chat.tsx
index 0681a2ee24..24c0e12558 100644
--- a/apps/v4/components/cards/chat.tsx
+++ b/apps/v4/components/cards/chat.tsx
@@ -111,7 +111,7 @@ export function CardsChat() {
             </Avatar>
             <div className="flex flex-col gap-0.5">
               <p className="text-sm leading-none font-medium">Sofia Davis</p>
-              <p className="text-muted-foreground text-xs">m@example.com</p>
+              <p className="text-xs text-muted-foreground">m@example.com</p>
             </div>
           </div>
           <TooltipProvider delayDuration={0}>
@@ -139,7 +139,7 @@ export function CardsChat() {
                 className={cn(
                   "flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm",
                   message.role === "user"
-                    ? "bg-primary text-primary-foreground ml-auto"
+                    ? "ml-auto bg-primary text-primary-foreground"
                     : "bg-muted"
                 )}
               >
@@ -229,12 +229,12 @@ export function CardsChat() {
                       <p className="text-sm leading-none font-medium">
                         {user.name}
                       </p>
-                      <p className="text-muted-foreground text-sm">
+                      <p className="text-sm text-muted-foreground">
                         {user.email}
                       </p>
                     </div>
                     {selectedUsers.includes(user) ? (
-                      <CheckIcon className="text-primary ml-auto flex size-4" />
+                      <CheckIcon className="ml-auto flex size-4 text-primary" />
                     ) : null}
                   </CommandItem>
                 ))}
@@ -252,7 +252,7 @@ export function CardsChat() {
                 ))}
               </div>
             ) : (
-              <p className="text-muted-foreground text-sm">
+              <p className="text-sm text-muted-foreground">
                 Select users to add to this thread.
               </p>
             )}
diff --git a/apps/v4/components/cards/payment-method.tsx b/apps/v4/components/cards/payment-method.tsx
index 0d36e4b81b..4932e483d0 100644
--- a/apps/v4/components/cards/payment-method.tsx
+++ b/apps/v4/components/cards/payment-method.tsx
@@ -54,13 +54,13 @@ export function CardsPaymentMethod() {
         </div>
         <fieldset className="flex flex-col gap-3">
           <legend className="text-sm font-medium">Plan</legend>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             Select the plan that best fits your needs.
           </p>
           <RadioGroup defaultValue="starter" className="grid gap-3">
             {plans.map((plan) => (
               <Label
-                className="has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-primary/5 flex items-start gap-3 rounded-lg border p-3"
+                className="flex items-start gap-3 rounded-lg border p-3 has-[[data-state=checked]]:border-ring has-[[data-state=checked]]:bg-primary/5"
                 key={plan.id}
               >
                 <RadioGroupItem
@@ -70,7 +70,7 @@ export function CardsPaymentMethod() {
                 />
                 <div className="grid gap-1 font-normal">
                   <div className="font-medium">{plan.name}</div>
-                  <div className="text-muted-foreground pr-2 text-xs leading-snug text-balance">
+                  <div className="pr-2 text-xs leading-snug text-balance text-muted-foreground">
                     {plan.description}
                   </div>
                 </div>
diff --git a/apps/v4/components/cards/payments.tsx b/apps/v4/components/cards/payments.tsx
index d2a04e7000..68153a66f6 100644
--- a/apps/v4/components/cards/payments.tsx
+++ b/apps/v4/components/cards/payments.tsx
@@ -268,7 +268,7 @@ export function CardsPayments() {
           </Table>
         </div>
         <div className="flex items-center justify-end gap-2">
-          <div className="text-muted-foreground flex-1 text-sm">
+          <div className="flex-1 text-sm text-muted-foreground">
             {table.getFilteredSelectedRowModel().rows.length} of{" "}
             {table.getFilteredRowModel().rows.length} row(s) selected.
           </div>
diff --git a/apps/v4/components/cards/report-issue.tsx b/apps/v4/components/cards/report-issue.tsx
index 2e5ddceaeb..c1c9696783 100644
--- a/apps/v4/components/cards/report-issue.tsx
+++ b/apps/v4/components/cards/report-issue.tsx
@@ -61,7 +61,7 @@ export function CardsReportIssue() {
               <Select defaultValue="2">
                 <SelectTrigger
                   id={`security-level-${id}`}
-                  className="w-full [&_span]:!block [&_span]:truncate"
+                  className="w-full [&_span]:block! [&_span]:truncate"
                   aria-label="Security Level"
                 >
                   <SelectValue placeholder="Select level" />
diff --git a/apps/v4/components/cards/team-members.tsx b/apps/v4/components/cards/team-members.tsx
index 352a382e98..6b457c73a1 100644
--- a/apps/v4/components/cards/team-members.tsx
+++ b/apps/v4/components/cards/team-members.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { ChevronDown } from "lucide-react"
+import { ChevronDownIcon } from "lucide-react"
 
 import {
   Avatar,
@@ -28,6 +28,7 @@ import {
   ItemActions,
   ItemContent,
   ItemDescription,
+  ItemGroup,
   ItemTitle,
 } from "@/registry/new-york-v4/ui/item"
 import {
@@ -86,51 +87,55 @@ export function CardsTeamMembers() {
         </CardDescription>
       </CardHeader>
       <CardContent>
-        {teamMembers.map((member) => (
-          <Item key={member.name} size="sm" className="gap-4 px-0">
-            <Avatar className="shrink-0 self-start border">
-              <AvatarImage src={member.avatar} alt="Image" />
-              <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
-            </Avatar>
-            <ItemContent>
-              <ItemTitle>{member.name}</ItemTitle>
-              <ItemDescription>{member.email}</ItemDescription>
-            </ItemContent>
-            <ItemActions>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    className="ml-auto shadow-none"
-                  >
-                    {member.role} <ChevronDown />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent className="p-0" align="end">
-                  <Command>
-                    <CommandInput placeholder="Select role..." />
-                    <CommandList>
-                      <CommandEmpty>No roles found.</CommandEmpty>
-                      <CommandGroup>
-                        {roles.map((role) => (
-                          <CommandItem key={role.name}>
-                            <div className="flex flex-col">
-                              <p className="text-sm font-medium">{role.name}</p>
-                              <p className="text-muted-foreground">
-                                {role.description}
-                              </p>
-                            </div>
-                          </CommandItem>
-                        ))}
-                      </CommandGroup>
-                    </CommandList>
-                  </Command>
-                </PopoverContent>
-              </Popover>
-            </ItemActions>
-          </Item>
-        ))}
+        <ItemGroup>
+          {teamMembers.map((member) => (
+            <Item key={member.name} className="px-0 py-2">
+              <Avatar className="border">
+                <AvatarImage src={member.avatar} alt="Image" />
+                <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
+              </Avatar>
+              <ItemContent>
+                <ItemTitle>{member.name}</ItemTitle>
+                <ItemDescription>{member.email}</ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="ml-auto shadow-none"
+                    >
+                      {member.role} <ChevronDownIcon />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="p-0" align="end">
+                    <Command>
+                      <CommandInput placeholder="Select role..." />
+                      <CommandList>
+                        <CommandEmpty>No roles found.</CommandEmpty>
+                        <CommandGroup>
+                          {roles.map((role) => (
+                            <CommandItem key={role.name}>
+                              <div className="flex flex-col">
+                                <span className="text-sm font-medium">
+                                  {role.name}
+                                </span>
+                                <span className="text-sm text-muted-foreground">
+                                  {role.description}
+                                </span>
+                              </div>
+                            </CommandItem>
+                          ))}
+                        </CommandGroup>
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+              </ItemActions>
+            </Item>
+          ))}
+        </ItemGroup>
       </CardContent>
     </Card>
   )
diff --git a/apps/v4/components/chart-code-viewer.tsx b/apps/v4/components/chart-code-viewer.tsx
index 9ef9cf6639..22bdaa94b1 100644
--- a/apps/v4/components/chart-code-viewer.tsx
+++ b/apps/v4/components/chart-code-viewer.tsx
@@ -37,7 +37,7 @@ export function ChartCodeViewer({
     <Button
       size="sm"
       variant="outline"
-      className="text-foreground hover:bg-muted dark:text-foreground h-6 rounded-[6px] border bg-transparent px-2 text-xs shadow-none"
+      className="h-6 rounded-[6px] border bg-transparent px-2 text-xs text-foreground shadow-none hover:bg-muted dark:text-foreground"
     >
       View Code
     </Button>
@@ -45,7 +45,7 @@ export function ChartCodeViewer({
 
   const content = (
     <div className="flex min-h-0 flex-1 flex-col gap-0">
-      <div className="chart-wrapper theme-container hidden sm:block [&_[data-chart]]:mx-auto [&_[data-chart]]:max-h-[35vh] [&>div]:rounded-none [&>div]:border-0 [&>div]:border-b [&>div]:shadow-none">
+      <div className="chart-wrapper hidden theme-container sm:block [&_[data-chart]]:mx-auto [&_[data-chart]]:max-h-[35vh] [&>div]:rounded-none [&>div]:border-0 [&>div]:border-b [&>div]:shadow-none">
         {children}
       </div>
       <div className="flex min-w-0 flex-1 flex-col overflow-hidden p-4">
@@ -54,7 +54,7 @@ export function ChartCodeViewer({
           className="mt-0 flex h-auto min-w-0 flex-1 flex-col overflow-hidden"
         >
           <figcaption
-            className="text-foreground [&>svg]:text-foreground flex h-12 shrink-0 items-center gap-2 border-b py-2 pr-2 pl-4 [&>svg]:size-4 [&>svg]:opacity-70"
+            className="flex h-12 shrink-0 items-center gap-2 border-b py-2 pr-2 pl-4 text-foreground [&>svg]:size-4 [&>svg]:text-foreground [&>svg]:opacity-70"
             data-language="tsx"
           >
             {getIconForLanguageExtension("tsx")}
diff --git a/apps/v4/components/chart-display.tsx b/apps/v4/components/chart-display.tsx
index 637da1c87f..c147ebe2dc 100644
--- a/apps/v4/components/chart-display.tsx
+++ b/apps/v4/components/chart-display.tsx
@@ -32,7 +32,7 @@ export function ChartDisplay({
         chart={chart}
         className="relative z-20 flex justify-end px-3 py-2.5"
       />
-      <div className="bg-background relative z-10 overflow-hidden rounded-xl">
+      <div className="relative z-10 overflow-hidden rounded-xl bg-background">
         <ChartIframe
           src={`/view/${style}/${chart.name}`}
           height={460}
diff --git a/apps/v4/components/chart-toolbar.tsx b/apps/v4/components/chart-toolbar.tsx
index 8dabf803f1..ccde59482a 100644
--- a/apps/v4/components/chart-toolbar.tsx
+++ b/apps/v4/components/chart-toolbar.tsx
@@ -25,7 +25,7 @@ export function ChartToolbar({
 } & React.ComponentProps<"div">) {
   return (
     <div className={cn("flex items-center gap-2", className)}>
-      <div className="text-muted-foreground flex items-center gap-1.5 pl-1 text-[13px] [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
+      <div className="flex items-center gap-1.5 pl-1 text-[13px] text-muted-foreground [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]">
         <ChartTitle chart={chart} />
       </div>
       <div className="ml-auto flex items-center gap-2 [&>form]:flex">
@@ -33,11 +33,11 @@ export function ChartToolbar({
           event="copy_chart_code"
           name={chart.name}
           code={chart.files?.[0]?.content ?? ""}
-          className="[&_svg]-h-3 text-foreground hover:bg-muted dark:text-foreground h-6 w-6 rounded-[6px] bg-transparent shadow-none [&_svg]:w-3"
+          className="[&_svg]-h-3 h-6 w-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:w-3"
         />
         <Separator
           orientation="vertical"
-          className="mx-0 hidden !h-4 md:flex"
+          className="mx-0 hidden h-4! md:flex"
         />
         <ChartCodeViewer chart={chart}>{children}</ChartCodeViewer>
       </div>
diff --git a/apps/v4/components/charts-nav.tsx b/apps/v4/components/charts-nav.tsx
index 0b2f78fbd2..3504096acb 100644
--- a/apps/v4/components/charts-nav.tsx
+++ b/apps/v4/components/charts-nav.tsx
@@ -53,7 +53,7 @@ export function ChartsNav({
               key={link.href}
               data-active={link.href.startsWith(pathname)}
               className={cn(
-                "text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 shrink-0 items-center justify-center px-4 text-center text-base font-medium transition-colors"
+                "flex h-7 shrink-0 items-center justify-center px-4 text-center text-base font-medium text-muted-foreground transition-colors hover:text-primary data-[active=true]:text-primary"
               )}
             >
               {link.name}
diff --git a/apps/v4/components/code-block-command.tsx b/apps/v4/components/code-block-command.tsx
index a38a7bba47..09b984d23c 100644
--- a/apps/v4/components/code-block-command.tsx
+++ b/apps/v4/components/code-block-command.tsx
@@ -78,9 +78,9 @@ export function CodeBlockCommand({
           })
         }}
       >
-        <div className="border-border/50 flex items-center gap-2 border-b px-3 py-1">
-          <div className="bg-foreground flex size-4 items-center justify-center rounded-[1px] opacity-70">
-            <IconTerminal className="text-code size-3" />
+        <div className="flex items-center gap-2 border-b border-border/50 px-3 py-1">
+          <div className="flex size-4 items-center justify-center rounded-[1px] bg-foreground opacity-70">
+            <IconTerminal className="size-3 text-code" />
           </div>
           <TabsList className="rounded-none bg-transparent p-0">
             {Object.entries(tabs).map(([key]) => {
@@ -88,7 +88,7 @@ export function CodeBlockCommand({
                 <TabsTrigger
                   key={key}
                   value={key}
-                  className="data-[state=active]:bg-background! data-[state=active]:border-input h-7 border border-transparent pt-0.5 shadow-none!"
+                  className="h-7 border border-transparent pt-0.5 shadow-none! data-[state=active]:border-input data-[state=active]:bg-background!"
                 >
                   {key}
                 </TabsTrigger>
diff --git a/apps/v4/components/code-collapsible-wrapper.tsx b/apps/v4/components/code-collapsible-wrapper.tsx
index a6fd46259b..27940b7e69 100644
--- a/apps/v4/components/code-collapsible-wrapper.tsx
+++ b/apps/v4/components/code-collapsible-wrapper.tsx
@@ -30,20 +30,20 @@ export function CodeCollapsibleWrapper({
           <Button
             variant="ghost"
             size="sm"
-            className="text-muted-foreground h-7 rounded-md px-2"
+            className="h-7 rounded-md px-2 text-muted-foreground"
           >
             {isOpened ? "Collapse" : "Expand"}
           </Button>
-          <Separator orientation="vertical" className="mx-1.5 !h-4" />
+          <Separator orientation="vertical" className="mx-1.5 h-4!" />
         </div>
       </CollapsibleTrigger>
       <CollapsibleContent
         forceMount
-        className="relative mt-6 overflow-hidden data-[state=closed]:max-h-64 data-[state=closed]:[content-visibility:auto] [&>figure]:mt-0 [&>figure]:md:!mx-0"
+        className="relative mt-6 overflow-hidden data-[state=closed]:max-h-64 data-[state=closed]:[content-visibility:auto] [&>figure]:mt-0 [&>figure]:md:mx-0!"
       >
         {children}
       </CollapsibleContent>
-      <CollapsibleTrigger className="from-code/70 to-code text-muted-foreground absolute inset-x-0 -bottom-2 flex h-20 items-center justify-center rounded-b-lg bg-gradient-to-b text-sm group-data-[state=open]/collapsible:hidden">
+      <CollapsibleTrigger className="absolute inset-x-0 -bottom-2 flex h-20 items-center justify-center rounded-b-lg bg-gradient-to-b from-code/70 to-code text-sm text-muted-foreground group-data-[state=open]/collapsible:hidden">
         {isOpened ? "Collapse" : "Expand"}
       </CollapsibleTrigger>
     </Collapsible>
diff --git a/apps/v4/components/color-format-selector.tsx b/apps/v4/components/color-format-selector.tsx
index 2b5038f22a..a1160be173 100644
--- a/apps/v4/components/color-format-selector.tsx
+++ b/apps/v4/components/color-format-selector.tsx
@@ -32,13 +32,13 @@ export function ColorFormatSelector({
       <SelectTrigger
         size="sm"
         className={cn(
-          "bg-secondary text-secondary-foreground border-secondary shadow-none",
+          "border-secondary bg-secondary text-secondary-foreground shadow-none",
           className
         )}
         {...props}
       >
         <span className="font-medium">Format: </span>
-        <span className="text-muted-foreground font-mono">{format}</span>
+        <span className="font-mono text-muted-foreground">{format}</span>
       </SelectTrigger>
       <SelectContent align="end" position="popper" className="rounded-xl">
         {Object.entries(formats).map(([format, value]) => (
@@ -48,7 +48,7 @@ export function ColorFormatSelector({
             className="gap-2 rounded-lg [&>span]:flex [&>span]:items-center [&>span]:gap-2"
           >
             <span className="font-medium">{format}</span>
-            <span className="text-muted-foreground font-mono text-xs">
+            <span className="font-mono text-xs text-muted-foreground">
               {value}
             </span>
           </SelectItem>
diff --git a/apps/v4/components/color.tsx b/apps/v4/components/color.tsx
index 20d42d117c..bdde375706 100644
--- a/apps/v4/components/color.tsx
+++ b/apps/v4/components/color.tsx
@@ -42,12 +42,12 @@ export function Color({ color }: { color: Color }) {
       ) : (
         <Clipboard className="group-hover:opacity-100" />
       )}
-      <div className="border-ghost after:border-input w-full flex-1 rounded-md bg-(--bg) after:rounded-lg md:rounded-lg" />
+      <div className="border-ghost w-full flex-1 rounded-md bg-(--bg) after:rounded-lg after:border-input md:rounded-lg" />
       <div className="flex w-full flex-col items-center justify-center gap-1">
-        <span className="text-muted-foreground group-hover:text-foreground group-data-[last-copied=true]:text-primary font-mono text-xs tabular-nums transition-colors sm:hidden xl:flex">
+        <span className="font-mono text-xs text-muted-foreground tabular-nums transition-colors group-hover:text-foreground group-data-[last-copied=true]:text-primary sm:hidden xl:flex">
           {color.className}
         </span>
-        <span className="text-muted-foreground group-hover:text-foreground group-data-[last-copied=true]:text-primary hidden font-mono text-xs tabular-nums transition-colors sm:flex xl:hidden">
+        <span className="hidden font-mono text-xs text-muted-foreground tabular-nums transition-colors group-hover:text-foreground group-data-[last-copied=true]:text-primary sm:flex xl:hidden">
           {color.scale}
         </span>
       </div>
diff --git a/apps/v4/components/colors-nav.tsx b/apps/v4/components/colors-nav.tsx
index a15a59a406..d6a912b65b 100644
--- a/apps/v4/components/colors-nav.tsx
+++ b/apps/v4/components/colors-nav.tsx
@@ -27,7 +27,7 @@ export function ColorsNav({
                 (index === 0 && pathname === "/colors")
               }
               className={cn(
-                "text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 items-center justify-center px-4 text-center text-base font-medium capitalize transition-colors"
+                "flex h-7 items-center justify-center px-4 text-center text-base font-medium text-muted-foreground capitalize transition-colors hover:text-primary data-[active=true]:text-primary"
               )}
             >
               {colorPalette.name}
diff --git a/apps/v4/components/command-menu.tsx b/apps/v4/components/command-menu.tsx
index 184ad56ba7..e316fb8328 100644
--- a/apps/v4/components/command-menu.tsx
+++ b/apps/v4/components/command-menu.tsx
@@ -185,7 +185,7 @@ export function CommandMenu({
     return (
       <CommandGroup
         heading="Pages"
-        className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
+        className="p-0! **:[[cmdk-group-heading]]:scroll-mt-16 **:[[cmdk-group-heading]]:p-3! **:[[cmdk-group-heading]]:pb-1!"
       >
         {navItems.map((item) => (
           <CommandMenuItem
@@ -230,7 +230,7 @@ export function CommandMenu({
         <CommandGroup
           key={group.$id}
           heading={group.name}
-          className="!p-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
+          className="p-0! **:[[cmdk-group-heading]]:scroll-mt-16 **:[[cmdk-group-heading]]:p-3! **:[[cmdk-group-heading]]:pb-1!"
         >
           {pages.map((item) => {
             const isComponent = item.url.includes("/components/")
@@ -248,7 +248,7 @@ export function CommandMenu({
                 }}
               >
                 {isComponent ? (
-                  <div className="border-muted-foreground aspect-square size-4 rounded-full border border-dashed" />
+                  <div className="aspect-square size-4 rounded-full border border-dashed border-muted-foreground" />
                 ) : (
                   <IconArrowRight />
                 )}
@@ -268,7 +268,7 @@ export function CommandMenu({
         heading={
           colorPalette.name.charAt(0).toUpperCase() + colorPalette.name.slice(1)
         }
-        className="!p-0 [&_[cmdk-group-heading]]:!p-3"
+        className="p-0! **:[[cmdk-group-heading]]:p-3!"
       >
         {colorPalette.colors.map((color) => (
           <CommandMenuItem
@@ -290,7 +290,7 @@ export function CommandMenu({
               style={{ "--color": color.oklch } as React.CSSProperties}
             />
             {color.className}
-            <span className="text-muted-foreground ml-auto font-mono text-xs font-normal tabular-nums">
+            <span className="ml-auto font-mono text-xs font-normal text-muted-foreground tabular-nums">
               {color.oklch}
             </span>
           </CommandMenuItem>
@@ -307,7 +307,7 @@ export function CommandMenu({
     return (
       <CommandGroup
         heading="Blocks"
-        className="!p-0 [&_[cmdk-group-heading]]:!p-3"
+        className="p-0! **:[[cmdk-group-heading]]:p-3!"
       >
         {blocks.map((block) => (
           <CommandMenuItem
@@ -330,7 +330,7 @@ export function CommandMenu({
           >
             <SquareDashedIcon />
             {block.description}
-            <span className="text-muted-foreground ml-auto font-mono text-xs font-normal tabular-nums">
+            <span className="ml-auto font-mono text-xs font-normal text-muted-foreground tabular-nums">
               {block.name}
             </span>
           </CommandMenuItem>
@@ -391,13 +391,13 @@ export function CommandMenu({
         <Button
           variant="outline"
           className={cn(
-            "text-foreground dark:bg-card hover:bg-muted/50 relative h-8 w-full justify-start rounded-lg pl-3 font-normal shadow-none sm:pr-12 md:w-48 lg:w-56 xl:w-64"
+            "relative h-8 w-full justify-start rounded-lg pl-3 font-normal text-foreground shadow-none hover:bg-muted/50 sm:pr-12 md:w-48 lg:w-40 xl:w-64 dark:bg-card"
           )}
           onClick={() => setOpen(true)}
           {...props}
         >
-          <span className="hidden lg:inline-flex">Search documentation...</span>
-          <span className="inline-flex lg:hidden">Search...</span>
+          <span className="hidden xl:inline-flex">Search documentation...</span>
+          <span className="inline-flex xl:hidden">Search...</span>
         </Button>
       </DialogTrigger>
       <DialogContent className="rounded-xl border-none bg-clip-padding p-2 pb-11 shadow-2xl ring-4 ring-neutral-200/80 dark:bg-neutral-900 dark:ring-neutral-800">
@@ -406,7 +406,7 @@ export function CommandMenu({
           <DialogDescription>Search for a command to run...</DialogDescription>
         </DialogHeader>
         <Command
-          className="**:data-[slot=command-input-wrapper]:bg-input/50 **:data-[slot=command-input-wrapper]:border-input rounded-none bg-transparent **:data-[slot=command-input]:!h-9 **:data-[slot=command-input]:py-0 **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:!h-9 **:data-[slot=command-input-wrapper]:rounded-md **:data-[slot=command-input-wrapper]:border"
+          className="rounded-none bg-transparent **:data-[slot=command-input]:h-9! **:data-[slot=command-input]:py-0 **:data-[slot=command-input-wrapper]:mb-0 **:data-[slot=command-input-wrapper]:h-9! **:data-[slot=command-input-wrapper]:rounded-md **:data-[slot=command-input-wrapper]:border **:data-[slot=command-input-wrapper]:border-input **:data-[slot=command-input-wrapper]:bg-input/50"
           filter={commandFilter}
         >
           <div className="relative">
@@ -416,12 +416,12 @@ export function CommandMenu({
             />
             {query.isLoading && (
               <div className="pointer-events-none absolute top-1/2 right-3 z-10 flex -translate-y-1/2 items-center justify-center">
-                <Spinner className="text-muted-foreground size-4" />
+                <Spinner className="size-4 text-muted-foreground" />
               </div>
             )}
           </div>
           <CommandList className="no-scrollbar min-h-80 scroll-pt-2 scroll-pb-1.5">
-            <CommandEmpty className="text-muted-foreground py-12 text-center text-sm">
+            <CommandEmpty className="py-12 text-center text-sm text-muted-foreground">
               {query.isLoading ? "Searching..." : "No results found."}
             </CommandEmpty>
             {navItemsSection}
@@ -439,7 +439,7 @@ export function CommandMenu({
             ) : null}
           </CommandList>
         </Command>
-        <div className="text-muted-foreground absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium dark:border-t-neutral-700 dark:bg-neutral-800">
+        <div className="absolute inset-x-0 bottom-0 z-20 flex h-10 items-center gap-2 rounded-b-xl border-t border-t-neutral-100 bg-neutral-50 px-4 text-xs font-medium text-muted-foreground dark:border-t-neutral-700 dark:bg-neutral-800">
           <div className="flex items-center gap-2">
             <CommandMenuKbd>
               <CornerDownLeftIcon />
@@ -451,7 +451,7 @@ export function CommandMenu({
           </div>
           {copyPayload && (
             <>
-              <Separator orientation="vertical" className="!h-4" />
+              <Separator orientation="vertical" className="h-4!" />
               <div className="flex items-center gap-1">
                 <CommandMenuKbd>⌘</CommandMenuKbd>
                 <CommandMenuKbd>C</CommandMenuKbd>
@@ -493,7 +493,7 @@ function CommandMenuItem({
     <CommandItem
       ref={ref}
       className={cn(
-        "data-[selected=true]:border-input data-[selected=true]:bg-input/50 h-9 rounded-md border border-transparent !px-3 font-medium",
+        "h-9 rounded-md border border-transparent px-3! font-medium data-[selected=true]:border-input data-[selected=true]:bg-input/50",
         className
       )}
       {...props}
@@ -507,7 +507,7 @@ function CommandMenuKbd({ className, ...props }: React.ComponentProps<"kbd">) {
   return (
     <kbd
       className={cn(
-        "bg-background text-muted-foreground pointer-events-none flex h-5 items-center justify-center gap-1 rounded border px-1 font-sans text-[0.7rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        "pointer-events-none flex h-5 items-center justify-center gap-1 rounded border bg-background px-1 font-sans text-[0.7rem] font-medium text-muted-foreground select-none [&_svg:not([class*='size-'])]:size-3",
         className
       )}
       {...props}
@@ -555,7 +555,7 @@ function SearchResults({
 
   return (
     <CommandGroup
-      className="!px-0 [&_[cmdk-group-heading]]:scroll-mt-16 [&_[cmdk-group-heading]]:!p-3 [&_[cmdk-group-heading]]:!pb-1"
+      className="px-0! **:[[cmdk-group-heading]]:scroll-mt-16 **:[[cmdk-group-heading]]:p-3! **:[[cmdk-group-heading]]:pb-1!"
       heading="Search Results"
     >
       {uniqueResults.map((item) => {
@@ -567,7 +567,7 @@ function SearchResults({
               router.push(item.url)
               setOpen(false)
             }}
-            className="data-[selected=true]:border-input data-[selected=true]:bg-input/50 h-9 rounded-md border border-transparent !px-3 font-normal"
+            className="h-9 rounded-md border border-transparent px-3! font-normal data-[selected=true]:border-input data-[selected=true]:bg-input/50"
             keywords={[item.content]}
             value={`${item.content} ${item.type}`}
           >
@@ -592,7 +592,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background fixed top-[15%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "fixed top-[15%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className
         )}
         {...props}
diff --git a/apps/v4/components/component-preview-tabs.tsx b/apps/v4/components/component-preview-tabs.tsx
index e893f43d7b..bf487f5513 100644
--- a/apps/v4/components/component-preview-tabs.tsx
+++ b/apps/v4/components/component-preview-tabs.tsx
@@ -122,12 +122,12 @@ export function ComponentPreviewTabs({
         <div
           data-slot="code"
           data-mobile-code-visible={isMobileCodeVisible}
-          className="relative overflow-hidden **:data-[slot=copy-button]:right-4 **:data-[slot=copy-button]:hidden data-[mobile-code-visible=true]:**:data-[slot=copy-button]:flex [&_[data-rehype-pretty-code-figure]]:!m-0 [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
+          className="relative overflow-hidden **:data-[slot=copy-button]:right-4 **:data-[slot=copy-button]:hidden data-[mobile-code-visible=true]:**:data-[slot=copy-button]:flex [&_[data-rehype-pretty-code-figure]]:m-0! [&_[data-rehype-pretty-code-figure]]:rounded-t-none [&_[data-rehype-pretty-code-figure]]:border-t [&_pre]:max-h-72"
         >
           {isMobileCodeVisible ? (
             <>
               {direction === "rtl" && (
-                <div className="bg-code text-muted-foreground no-scrollbar relative z-10 overflow-x-auto border-t p-6 font-mono text-sm">
+                <div className="relative z-10 no-scrollbar overflow-x-auto border-t bg-code p-6 font-mono text-sm text-muted-foreground">
                   <pre>{`// You will notice this example uses dir and data-lang attributes.
 // This is because this site is not RTL by default.
 // In your application, you won't need these.`}</pre>
@@ -160,7 +160,7 @@ export function ComponentPreviewTabs({
                   type="button"
                   size="sm"
                   variant="outline"
-                  className="bg-background text-foreground dark:bg-background dark:text-foreground hover:bg-muted dark:hover:bg-muted relative z-10 rounded-lg shadow-none"
+                  className="relative z-10 rounded-lg bg-background text-foreground shadow-none hover:bg-muted dark:bg-background dark:text-foreground dark:hover:bg-muted"
                   onClick={() => {
                     setIsMobileCodeVisible(true)
                   }}
diff --git a/apps/v4/components/component-preview.tsx b/apps/v4/components/component-preview.tsx
index a59eefbf05..f9d1169d0e 100644
--- a/apps/v4/components/component-preview.tsx
+++ b/apps/v4/components/component-preview.tsx
@@ -37,16 +37,16 @@ export function ComponentPreview({
           alt={name}
           width={1440}
           height={900}
-          className="bg-background absolute top-0 left-0 z-20 w-[970px] max-w-none sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
+          className="absolute top-0 left-0 z-20 w-[970px] max-w-none bg-background sm:w-[1280px] md:hidden dark:hidden md:dark:hidden"
         />
         <Image
           src={`/r/styles/new-york-v4/${name}-dark.png`}
           alt={name}
           width={1440}
           height={900}
-          className="bg-background absolute top-0 left-0 z-20 hidden w-[970px] max-w-none sm:w-[1280px] md:hidden dark:block md:dark:hidden"
+          className="absolute top-0 left-0 z-20 hidden w-[970px] max-w-none bg-background sm:w-[1280px] md:hidden dark:block md:dark:hidden"
         />
-        <div className="bg-background absolute inset-0 hidden w-[1600px] md:block">
+        <div className="absolute inset-0 hidden w-[1600px] bg-background md:block">
           <iframe src={`/view/${styleName}/${name}`} className="size-full" />
         </div>
       </div>
@@ -56,7 +56,7 @@ export function ComponentPreview({
       return (
         <figure className="flex flex-col gap-4">
           {content}
-          <figcaption className="text-muted-foreground text-center text-sm">
+          <figcaption className="text-center text-sm text-muted-foreground">
             {caption}
           </figcaption>
         </figure>
@@ -70,9 +70,9 @@ export function ComponentPreview({
 
   if (!Component) {
     return (
-      <p className="text-muted-foreground mt-6 text-sm">
+      <p className="mt-6 text-sm text-muted-foreground">
         Component{" "}
-        <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm">
+        <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
           {name}
         </code>{" "}
         not found in registry.
@@ -116,7 +116,7 @@ export function ComponentPreview({
         className="flex flex-col data-[hide-code=true]:gap-4"
       >
         {content}
-        <figcaption className="text-muted-foreground -mt-8 text-center text-sm data-[hide-code=true]:mt-0">
+        <figcaption className="-mt-8 text-center text-sm text-muted-foreground data-[hide-code=true]:mt-0">
           {caption}
         </figcaption>
       </figure>
diff --git a/apps/v4/components/component-source.tsx b/apps/v4/components/component-source.tsx
index 0721ce23f3..12b28281cb 100644
--- a/apps/v4/components/component-source.tsx
+++ b/apps/v4/components/component-source.tsx
@@ -1,10 +1,9 @@
-import fs from "node:fs/promises"
-import path from "node:path"
 import * as React from "react"
 
+import { formatCode } from "@/lib/format-code"
 import { highlightCode } from "@/lib/highlight-code"
+import { readFileFromRoot } from "@/lib/read-file"
 import { getDemoItem, getRegistryItem } from "@/lib/registry"
-import { formatCode } from "@/lib/rehype"
 import { cn } from "@/lib/utils"
 import { CodeCollapsibleWrapper } from "@/components/code-collapsible-wrapper"
 import { CopyButton } from "@/components/copy-button"
@@ -42,8 +41,7 @@ export async function ComponentSource({
   }
 
   if (src) {
-    const file = await fs.readFile(path.join(process.cwd(), src), "utf-8")
-    code = file
+    code = await readFileFromRoot(src)
   }
 
   if (!code) {
@@ -102,7 +100,7 @@ function ComponentCode({
       {title && (
         <figcaption
           data-rehype-pretty-code-title=""
-          className="text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70"
+          className="flex items-center gap-2 text-code-foreground [&_svg]:size-4 [&_svg]:text-code-foreground [&_svg]:opacity-70"
           data-language={language}
         >
           {getIconForLanguageExtension(language)}
diff --git a/apps/v4/components/copy-button.tsx b/apps/v4/components/copy-button.tsx
index 0bf6a0c16d..8dbffcad0d 100644
--- a/apps/v4/components/copy-button.tsx
+++ b/apps/v4/components/copy-button.tsx
@@ -7,11 +7,61 @@ import { trackEvent, type Event } from "@/lib/events"
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york-v4/ui/button"
 
-export function copyToClipboardWithMeta(value: string, event?: Event) {
-  navigator.clipboard.writeText(value)
+function legacyCopyToClipboard(value: string) {
+  const textArea = document.createElement("textarea")
+  textArea.value = value
+  textArea.setAttribute("readonly", "")
+  textArea.style.position = "fixed"
+  textArea.style.opacity = "0"
+  textArea.style.pointerEvents = "none"
+
+  document.body.appendChild(textArea)
+  textArea.focus()
+  textArea.select()
+  textArea.setSelectionRange(0, value.length)
+
+  let hasCopied = false
+  try {
+    hasCopied = document.execCommand("copy")
+  } catch {
+    hasCopied = false
+  }
+
+  document.body.removeChild(textArea)
+  return hasCopied
+}
+
+export async function copyToClipboardWithMeta(value: string, event?: Event) {
+  if (typeof window === "undefined") {
+    return false
+  }
+
+  if (!value) {
+    return false
+  }
+
+  let hasCopied = false
+
+  if (navigator.clipboard?.writeText) {
+    try {
+      await navigator.clipboard.writeText(value)
+      hasCopied = true
+    } catch {
+      hasCopied = legacyCopyToClipboard(value)
+    }
+  } else {
+    hasCopied = legacyCopyToClipboard(value)
+  }
+
+  if (!hasCopied) {
+    return false
+  }
+
   if (event) {
     trackEvent(event)
   }
+
+  return true
 }
 
 export function CopyButton({
@@ -42,11 +92,11 @@ export function CopyButton({
       size="icon"
       variant={variant}
       className={cn(
-        "bg-code absolute top-3 right-2 z-10 size-7 hover:opacity-100 focus-visible:opacity-100",
+        "absolute top-3 right-2 z-10 size-7 bg-code hover:opacity-100 focus-visible:opacity-100",
         className
       )}
-      onClick={() => {
-        copyToClipboardWithMeta(
+      onClick={async () => {
+        const hasCopied = await copyToClipboardWithMeta(
           value,
           event
             ? {
@@ -57,7 +107,10 @@ export function CopyButton({
               }
             : undefined
         )
-        setHasCopied(true)
+
+        if (hasCopied) {
+          setHasCopied(true)
+        }
       }}
       {...props}
     >
diff --git a/apps/v4/components/directory-add-button.tsx b/apps/v4/components/directory-add-button.tsx
index ad39bacd73..d5ffce5df6 100644
--- a/apps/v4/components/directory-add-button.tsx
+++ b/apps/v4/components/directory-add-button.tsx
@@ -98,7 +98,7 @@ export function DirectoryAddButton({
       className="gap-0 overflow-hidden rounded-lg border"
     >
       <div className="flex items-center gap-2 border-b p-2">
-        <TabsList className="*:data-[slot=tabs-trigger]:data-[state=active]:border-input h-auto rounded-none bg-transparent p-0 font-mono *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none!">
+        <TabsList className="h-auto rounded-none bg-transparent p-0 font-mono *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none! *:data-[slot=tabs-trigger]:data-[state=active]:border-input">
           <TabsTrigger value="pnpm">pnpm</TabsTrigger>
           <TabsTrigger value="npm">npm</TabsTrigger>
           <TabsTrigger value="yarn">yarn</TabsTrigger>
@@ -127,7 +127,7 @@ export function DirectoryAddButton({
       </div>
       {Object.entries(commands).map(([key, cmd]) => (
         <TabsContent key={key} value={key} className="mt-0">
-          <div className="bg-surface text-surface-foreground px-3 py-3">
+          <div className="bg-surface px-3 py-3 text-surface-foreground">
             <div className="no-scrollbar overflow-x-auto">
               <code className="font-mono text-sm whitespace-nowrap">{cmd}</code>
             </div>
diff --git a/apps/v4/components/directory-list.tsx b/apps/v4/components/directory-list.tsx
index cbfccef825..e84ba6113e 100644
--- a/apps/v4/components/directory-list.tsx
+++ b/apps/v4/components/directory-list.tsx
@@ -42,7 +42,7 @@ export function DirectoryList() {
               <ItemMedia
                 variant="image"
                 dangerouslySetInnerHTML={{ __html: registry.logo }}
-                className="*:[svg]:fill-foreground grayscale *:[svg]:size-8"
+                className="grayscale *:[svg]:size-8 *:[svg]:fill-foreground"
               />
               <ItemContent>
                 <ItemTitle>
diff --git a/apps/v4/components/docs-base-switcher.tsx b/apps/v4/components/docs-base-switcher.tsx
index e8c3487341..05ee248c7a 100644
--- a/apps/v4/components/docs-base-switcher.tsx
+++ b/apps/v4/components/docs-base-switcher.tsx
@@ -21,14 +21,14 @@ export function DocsBaseSwitcher({
           key={baseItem.name}
           href={`/docs/components/${baseItem.name}/${component}`}
           data-active={base === baseItem.name}
-          className="text-muted-foreground hover:text-foreground data-[active=true]:text-foreground after:bg-foreground relative inline-flex items-center justify-center gap-1 pt-1 pb-0.5 text-base font-medium transition-colors after:absolute after:inset-x-0 after:bottom-[-4px] after:h-0.5 after:opacity-0 after:transition-opacity data-[active=true]:after:opacity-100"
+          className="relative inline-flex items-center justify-center gap-1 pt-1 pb-0.5 text-base font-medium text-muted-foreground transition-colors after:absolute after:inset-x-0 after:bottom-[-4px] after:h-0.5 after:bg-foreground after:opacity-0 after:transition-opacity hover:text-foreground data-[active=true]:text-foreground data-[active=true]:after:opacity-100"
         >
           {baseItem.title}
         </Link>
       ))}
       {activeBase?.meta?.logo && (
         <div
-          className="text-muted-foreground ml-auto size-4 shrink-0 opacity-80 [&_svg]:size-4"
+          className="ml-auto size-4 shrink-0 text-muted-foreground opacity-80 [&_svg]:size-4"
           dangerouslySetInnerHTML={{
             __html: activeBase.meta.logo,
           }}
diff --git a/apps/v4/components/docs-breadcrumb.tsx b/apps/v4/components/docs-breadcrumb.tsx
index 573cb494eb..35e99fde69 100644
--- a/apps/v4/components/docs-breadcrumb.tsx
+++ b/apps/v4/components/docs-breadcrumb.tsx
@@ -46,7 +46,7 @@ export function DocsBreadcrumb({
                 <BreadcrumbLink asChild>
                   <Link
                     href={item.url}
-                    className="hover:text-accent-foreground truncate"
+                    className="truncate hover:text-accent-foreground"
                   >
                     {item.name}
                   </Link>
diff --git a/apps/v4/components/docs-copy-page.tsx b/apps/v4/components/docs-copy-page.tsx
index 4f8840e8d4..f6ea3d43e9 100644
--- a/apps/v4/components/docs-copy-page.tsx
+++ b/apps/v4/components/docs-copy-page.tsx
@@ -168,7 +168,7 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {
 
   return (
     <Popover>
-      <div className="bg-secondary group/buttons relative flex rounded-lg *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
+      <div className="group/buttons relative flex rounded-lg bg-secondary *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
         <PopoverAnchor />
         <Button
           variant="secondary"
@@ -196,13 +196,13 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {
         </DropdownMenu>
         <Separator
           orientation="vertical"
-          className="!bg-foreground/5 absolute top-1 right-8 z-0 !h-6 peer-focus-visible:opacity-0 sm:right-7 sm:!h-5"
+          className="absolute top-1 right-8 z-0 h-6! bg-foreground/5! peer-focus-visible:opacity-0 sm:right-7 sm:h-5!"
         />
         <PopoverTrigger asChild className="flex sm:hidden">
           {trigger}
         </PopoverTrigger>
         <PopoverContent
-          className="bg-background/70 dark:bg-background/60 w-52 !origin-center rounded-lg p-1 shadow-none backdrop-blur-sm"
+          className="w-52 origin-center! rounded-lg bg-background/70 p-1 shadow-none backdrop-blur-sm dark:bg-background/60"
           align="start"
         >
           {Object.entries(menuItems).map(([key, value]) => (
@@ -211,7 +211,7 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {
               size="lg"
               asChild
               key={key}
-              className="*:[svg]:text-muted-foreground w-full justify-start text-base font-normal"
+              className="w-full justify-start text-base font-normal *:[svg]:text-muted-foreground"
             >
               {value(url)}
             </Button>
diff --git a/apps/v4/components/docs-page-links.tsx b/apps/v4/components/docs-page-links.tsx
index 5eb332938e..751d334e91 100644
--- a/apps/v4/components/docs-page-links.tsx
+++ b/apps/v4/components/docs-page-links.tsx
@@ -17,11 +17,11 @@ export function DocsPageLinks({ page, url }: { page: string; url: string }) {
 
   return (
     <div className="flex flex-col gap-3 px-6">
-      <ul className="text-muted-foreground flex flex-col gap-2 text-[0.8rem]">
+      <ul className="flex flex-col gap-2 text-[0.8rem] text-muted-foreground">
         <li>
           <button
             onClick={() => copyToClipboard(page)}
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
+            className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
           >
             {isCopied ? (
               <IconCheck className="size-4" />
@@ -36,7 +36,7 @@ export function DocsPageLinks({ page, url }: { page: string; url: string }) {
             href={`${url}.md`}
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
+            className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
           >
             <svg strokeLinejoin="round" viewBox="0 0 22 16" className="size-4">
               <path
@@ -54,7 +54,7 @@ export function DocsPageLinks({ page, url }: { page: string; url: string }) {
             href={getPromptUrl("https://v0.dev", url)}
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
+            className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -72,7 +72,7 @@ export function DocsPageLinks({ page, url }: { page: string; url: string }) {
             href={getPromptUrl("https://chatgpt.com", url)}
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
+            className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -92,7 +92,7 @@ export function DocsPageLinks({ page, url }: { page: string; url: string }) {
             href={getPromptUrl("https://claude.ai/new", url)}
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
+            className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
           >
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -112,7 +112,7 @@ export function DocsPageLinks({ page, url }: { page: string; url: string }) {
             href={getPromptUrl("https://scira.ai/", url)}
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-foreground inline-flex items-center gap-2 transition-colors"
+            className="inline-flex items-center gap-2 transition-colors hover:text-foreground"
           >
             <svg
               width="910"
diff --git a/apps/v4/components/docs-sidebar.tsx b/apps/v4/components/docs-sidebar.tsx
index 1062dd1805..644403e588 100644
--- a/apps/v4/components/docs-sidebar.tsx
+++ b/apps/v4/components/docs-sidebar.tsx
@@ -29,13 +29,21 @@ const TOP_LEVEL_SECTIONS = [
     href: "/docs/installation",
   },
   {
-    name: "Directory",
-    href: "/docs/directory",
+    name: "Theming",
+    href: "/docs/theming",
+  },
+  {
+    name: "CLI",
+    href: "/docs/cli",
   },
   {
     name: "RTL",
     href: "/docs/rtl",
   },
+  {
+    name: "Skills",
+    href: "/docs/skills",
+  },
   {
     name: "MCP Server",
     href: "/docs/mcp",
@@ -54,7 +62,7 @@ const TOP_LEVEL_SECTIONS = [
   },
 ]
 const EXCLUDED_SECTIONS = ["installation", "dark-mode", "changelog", "rtl"]
-const EXCLUDED_PAGES = ["/docs", "/docs/changelog", "/docs/rtl"]
+const EXCLUDED_PAGES = ["/docs", "/docs/changelog", "/docs/rtl", "/docs/new"]
 
 export function DocsSidebar({
   tree,
@@ -70,11 +78,11 @@ export function DocsSidebar({
       {...props}
     >
       <div className="h-9" />
-      <div className="from-background via-background/80 to-background/50 absolute top-8 z-10 h-8 w-(--sidebar-menu-width) shrink-0 bg-gradient-to-b blur-xs" />
-      <div className="via-border absolute top-12 right-2 bottom-0 hidden h-full w-px bg-gradient-to-b from-transparent to-transparent lg:flex" />
-      <SidebarContent className="no-scrollbar mx-auto w-(--sidebar-menu-width) overflow-x-hidden px-2">
+      <div className="absolute top-8 z-10 h-8 w-(--sidebar-menu-width) shrink-0 bg-linear-to-b from-background via-background/80 to-background/50 blur-xs" />
+      <div className="absolute top-12 right-2 bottom-0 hidden h-full w-px bg-linear-to-b from-transparent via-border to-transparent lg:flex" />
+      <SidebarContent className="mx-auto no-scrollbar w-(--sidebar-menu-width) overflow-x-hidden px-2">
         <SidebarGroup className="pt-6">
-          <SidebarGroupLabel className="text-muted-foreground font-medium">
+          <SidebarGroupLabel className="font-medium text-muted-foreground">
             Sections
           </SidebarGroupLabel>
           <SidebarGroupContent>
@@ -92,7 +100,7 @@ export function DocsSidebar({
                           ? pathname === href
                           : pathname.startsWith(href)
                       }
-                      className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
+                      className="relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md data-[active=true]:border-accent data-[active=true]:bg-accent 3xl:fixed:w-full 3xl:fixed:max-w-48"
                     >
                       <Link href={href}>
                         <span className="absolute inset-0 flex w-(--sidebar-menu-width) bg-transparent" />
@@ -118,7 +126,7 @@ export function DocsSidebar({
 
           return (
             <SidebarGroup key={item.$id}>
-              <SidebarGroupLabel className="text-muted-foreground font-medium">
+              <SidebarGroupLabel className="font-medium text-muted-foreground">
                 {item.name}
               </SidebarGroupLabel>
               <SidebarGroupContent>
@@ -138,7 +146,7 @@ export function DocsSidebar({
                           <SidebarMenuButton
                             asChild
                             isActive={page.url === pathname}
-                            className="data-[active=true]:bg-accent data-[active=true]:border-accent 3xl:fixed:w-full 3xl:fixed:max-w-48 relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md"
+                            className="relative h-[30px] w-fit overflow-visible border border-transparent text-[0.8rem] font-medium after:absolute after:inset-x-0 after:-inset-y-1 after:z-0 after:rounded-md data-[active=true]:border-accent data-[active=true]:bg-accent 3xl:fixed:w-full 3xl:fixed:max-w-48"
                           >
                             <Link href={page.url}>
                               <span className="absolute inset-0 flex w-(--sidebar-menu-width) bg-transparent" />
@@ -160,7 +168,7 @@ export function DocsSidebar({
             </SidebarGroup>
           )
         })}
-        <div className="from-background via-background/80 to-background/50 sticky -bottom-1 z-10 h-16 shrink-0 bg-gradient-to-t blur-xs" />
+        <div className="sticky -bottom-1 z-10 h-16 shrink-0 bg-linear-to-t from-background via-background/80 to-background/50 blur-xs" />
       </SidebarContent>
     </Sidebar>
   )
diff --git a/apps/v4/components/docs-toc.tsx b/apps/v4/components/docs-toc.tsx
index eaed3224be..bd3fcf8f1e 100644
--- a/apps/v4/components/docs-toc.tsx
+++ b/apps/v4/components/docs-toc.tsx
@@ -107,14 +107,14 @@ export function DocsTableOfContents({
 
   return (
     <div className={cn("flex flex-col gap-2 p-4 pt-0 text-sm", className)}>
-      <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs font-medium">
+      <p className="sticky top-0 h-6 bg-background text-xs font-medium text-muted-foreground">
         On This Page
       </p>
       {toc.map((item) => (
         <a
           key={item.url}
           href={item.url}
-          className="text-muted-foreground hover:text-foreground data-[active=true]:text-foreground text-[0.8rem] no-underline transition-colors data-[active=true]:font-medium data-[depth=3]:pl-4 data-[depth=4]:pl-6"
+          className="text-[0.8rem] text-muted-foreground no-underline transition-colors hover:text-foreground data-[active=true]:font-medium data-[active=true]:text-foreground data-[depth=3]:pl-4 data-[depth=4]:pl-6"
           data-active={item.url === `#${activeHeading}`}
           data-depth={item.depth}
         >
diff --git a/apps/v4/components/examples-nav.tsx b/apps/v4/components/examples-nav.tsx
index 5b838184a1..3e5a12b0e9 100644
--- a/apps/v4/components/examples-nav.tsx
+++ b/apps/v4/components/examples-nav.tsx
@@ -82,7 +82,7 @@ function ExampleLink({
     <Link
       href={example.href}
       key={example.href}
-      className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 items-center justify-center gap-2 px-4 text-center text-base font-medium transition-colors"
+      className="flex h-7 items-center justify-center gap-2 px-4 text-center text-base font-medium text-muted-foreground transition-colors hover:text-primary data-[active=true]:text-primary"
       data-active={isActive}
     >
       {example.name}
diff --git a/apps/v4/components/github-link.tsx b/apps/v4/components/github-link.tsx
index db9f9d6535..7ba7c56778 100644
--- a/apps/v4/components/github-link.tsx
+++ b/apps/v4/components/github-link.tsx
@@ -31,7 +31,7 @@ export async function StarsCount() {
       : json.stargazers_count.toLocaleString()
 
   return (
-    <span className="text-muted-foreground w-fit text-xs tabular-nums">
+    <span className="w-fit text-xs text-muted-foreground tabular-nums">
       {formattedCount}
     </span>
   )
diff --git a/apps/v4/components/language-selector.tsx b/apps/v4/components/language-selector.tsx
index ee6402912f..673d2f6f54 100644
--- a/apps/v4/components/language-selector.tsx
+++ b/apps/v4/components/language-selector.tsx
@@ -108,7 +108,7 @@ export function LanguageSelector({
       </SelectTrigger>
       <SelectContent
         dir="ltr"
-        className="data-closed:animate-none data-open:animate-none"
+        className="data-open:animate-none data-closed:animate-none"
       >
         <SelectGroup>
           {languageOptions
diff --git a/apps/v4/components/lo-fi/component.tsx b/apps/v4/components/lo-fi/component.tsx
index 54b708ee1b..45244d3698 100644
--- a/apps/v4/components/lo-fi/component.tsx
+++ b/apps/v4/components/lo-fi/component.tsx
@@ -10,7 +10,7 @@ function ComponentContent({ ...props }: React.ComponentProps<typeof Atom>) {
   return (
     <Atom
       shade="50"
-      className="bg-muted/30 ring-muted flex aspect-video items-center justify-center rounded-lg p-4 ring *:w-full *:max-w-[70%]"
+      className="flex aspect-video items-center justify-center rounded-lg bg-muted/30 p-4 ring ring-muted *:w-full *:max-w-[70%]"
       {...props}
     />
   )
@@ -19,7 +19,7 @@ function ComponentContent({ ...props }: React.ComponentProps<typeof Atom>) {
 function ComponentName({ ...props }: React.ComponentProps<"div">) {
   return (
     <div
-      className="text-foreground text-center font-medium underline-offset-2 group-hover:underline"
+      className="text-center font-medium text-foreground underline-offset-2 group-hover:underline"
       {...props}
     />
   )
diff --git a/apps/v4/components/mobile-nav.tsx b/apps/v4/components/mobile-nav.tsx
index 76eecbaee3..2b5004fcf6 100644
--- a/apps/v4/components/mobile-nav.tsx
+++ b/apps/v4/components/mobile-nav.tsx
@@ -27,13 +27,21 @@ const TOP_LEVEL_SECTIONS = [
     href: "/docs/installation",
   },
   {
-    name: "Directory",
-    href: "/docs/directory",
+    name: "Theming",
+    href: "/docs/theming",
+  },
+  {
+    name: "CLI",
+    href: "/docs/cli",
   },
   {
     name: "RTL",
     href: "/docs/rtl",
   },
+  {
+    name: "Skills",
+    href: "/docs/skills",
+  },
   {
     name: "MCP Server",
     href: "/docs/mcp",
@@ -71,7 +79,7 @@ export function MobileNav({
         <Button
           variant="ghost"
           className={cn(
-            "extend-touch-target h-8 touch-manipulation items-center justify-start gap-2.5 !p-0 hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 active:bg-transparent dark:hover:bg-transparent",
+            "extend-touch-target h-8 touch-manipulation items-center justify-start gap-2.5 p-0! hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 active:bg-transparent dark:hover:bg-transparent",
             className
           )}
         >
@@ -79,13 +87,13 @@ export function MobileNav({
             <div className="relative size-4">
               <span
                 className={cn(
-                  "bg-foreground absolute left-0 block h-0.5 w-4 transition-all duration-100",
+                  "absolute left-0 block h-0.5 w-4 bg-foreground transition-all duration-100",
                   open ? "top-[0.4rem] -rotate-45" : "top-1"
                 )}
               />
               <span
                 className={cn(
-                  "bg-foreground absolute left-0 block h-0.5 w-4 transition-all duration-100",
+                  "absolute left-0 block h-0.5 w-4 bg-foreground transition-all duration-100",
                   open ? "top-[0.4rem] rotate-45" : "top-2.5"
                 )}
               />
@@ -98,7 +106,7 @@ export function MobileNav({
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        className="bg-background/90 no-scrollbar h-(--radix-popper-available-height) w-(--radix-popper-available-width) overflow-y-auto rounded-none border-none p-0 shadow-none backdrop-blur duration-100 data-open:animate-none!"
+        className="no-scrollbar h-(--radix-popper-available-height) w-(--radix-popper-available-width) overflow-y-auto rounded-none border-none bg-background/90 p-0 shadow-none backdrop-blur duration-100 data-open:animate-none!"
         align="start"
         side="bottom"
         alignOffset={-16}
@@ -106,7 +114,7 @@ export function MobileNav({
       >
         <div className="flex flex-col gap-12 overflow-auto px-6 py-6">
           <div className="flex flex-col gap-4">
-            <div className="text-muted-foreground text-sm font-medium">
+            <div className="text-sm font-medium text-muted-foreground">
               Menu
             </div>
             <div className="flex flex-col gap-3">
@@ -121,7 +129,7 @@ export function MobileNav({
             </div>
           </div>
           <div className="flex flex-col gap-4">
-            <div className="text-muted-foreground text-sm font-medium">
+            <div className="text-sm font-medium text-muted-foreground">
               Sections
             </div>
             <div className="flex flex-col gap-3">
@@ -149,7 +157,7 @@ export function MobileNav({
                 const pages = getPagesFromFolder(group, currentBase)
                 return (
                   <div key={index} className="flex flex-col gap-4">
-                    <div className="text-muted-foreground text-sm font-medium">
+                    <div className="text-sm font-medium text-muted-foreground">
                       {group.name}
                     </div>
                     <div className="flex flex-col gap-3">
diff --git a/apps/v4/components/mode-switcher.tsx b/apps/v4/components/mode-switcher.tsx
index 6a39f821bf..1cd845d0d9 100644
--- a/apps/v4/components/mode-switcher.tsx
+++ b/apps/v4/components/mode-switcher.tsx
@@ -4,6 +4,7 @@ import * as React from "react"
 import Script from "next/script"
 import { useTheme } from "next-themes"
 
+import { cn } from "@/lib/utils"
 import { useMetaColor } from "@/hooks/use-meta-color"
 import { Button } from "@/registry/new-york-v4/ui/button"
 import { Kbd } from "@/registry/new-york-v4/ui/kbd"
@@ -15,7 +16,13 @@ import {
 
 export const DARK_MODE_FORWARD_TYPE = "dark-mode-forward"
 
-export function ModeSwitcher() {
+export function ModeSwitcher({
+  variant = "ghost",
+  className,
+}: {
+  variant?: React.ComponentProps<typeof Button>["variant"]
+  className?: React.ComponentProps<typeof Button>["className"]
+}) {
   const { setTheme, resolvedTheme } = useTheme()
   const { setMetaColor, metaColor } = useMetaColor()
 
@@ -57,9 +64,9 @@ export function ModeSwitcher() {
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          variant="ghost"
+          variant={variant}
           size="icon"
-          className="group/toggle extend-touch-target size-8"
+          className={cn("group/toggle extend-touch-target size-8", className)}
           onClick={toggleTheme}
         >
           <svg
@@ -93,6 +100,7 @@ export function ModeSwitcher() {
 
 export function DarkModeScript() {
   return (
+    // eslint-disable-next-line @next/next/no-before-interactive-script-outside-document
     <Script
       id="dark-mode-listener"
       strategy="beforeInteractive"
diff --git a/apps/v4/components/open-in-v0-cta.tsx b/apps/v4/components/open-in-v0-cta.tsx
index de5529be0c..b288015c5b 100644
--- a/apps/v4/components/open-in-v0-cta.tsx
+++ b/apps/v4/components/open-in-v0-cta.tsx
@@ -5,7 +5,7 @@ export function OpenInV0Cta({ className }: React.ComponentProps<"div">) {
   return (
     <div
       className={cn(
-        "group bg-surface text-surface-foreground relative flex flex-col gap-2 rounded-lg p-6 text-sm",
+        "group relative flex flex-col gap-2 rounded-lg bg-surface p-6 text-sm text-surface-foreground",
         className
       )}
     >
diff --git a/apps/v4/components/page-header.tsx b/apps/v4/components/page-header.tsx
index b21af6eb9a..46476a133f 100644
--- a/apps/v4/components/page-header.tsx
+++ b/apps/v4/components/page-header.tsx
@@ -23,7 +23,7 @@ function PageHeaderHeading({
   return (
     <h1
       className={cn(
-        "text-primary leading-tighter max-w-3xl text-3xl font-semibold tracking-tight text-balance lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter",
+        "leading-tighter max-w-3xl text-3xl font-semibold tracking-tight text-balance text-primary lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter",
         className
       )}
       {...props}
@@ -38,7 +38,7 @@ function PageHeaderDescription({
   return (
     <p
       className={cn(
-        "text-foreground max-w-4xl text-base text-balance sm:text-lg",
+        "max-w-4xl text-base text-balance text-foreground sm:text-lg",
         className
       )}
       {...props}
diff --git a/apps/v4/components/site-footer.tsx b/apps/v4/components/site-footer.tsx
index 0db63d25a6..4aff430678 100644
--- a/apps/v4/components/site-footer.tsx
+++ b/apps/v4/components/site-footer.tsx
@@ -2,10 +2,10 @@ import { siteConfig } from "@/lib/config"
 
 export function SiteFooter() {
   return (
-    <footer className="group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent dark:group-has-[.section-soft]/body:bg-surface/40 group-has-[.docs-nav]/body:pb-20 group-has-[[data-slot=designer]]/body:hidden group-has-[[data-slot=docs]]/body:hidden group-has-[.docs-nav]/body:sm:pb-0 dark:bg-transparent">
+    <footer className="group-has-[.docs-nav]/body:pb-20 group-has-[.section-soft]/body:bg-surface/40 group-has-[[data-slot=designer]]/body:hidden group-has-[[data-slot=docs]]/body:hidden group-has-[.docs-nav]/body:sm:pb-0 dark:bg-transparent dark:group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent">
       <div className="container-wrapper px-4 xl:px-6">
         <div className="flex h-(--footer-height) items-center justify-between">
-          <div className="text-muted-foreground w-full px-1 text-center text-xs leading-loose sm:text-sm">
+          <div className="w-full px-1 text-center text-xs leading-loose text-muted-foreground sm:text-sm">
             Built by{" "}
             <a
               href={siteConfig.links.twitter}
diff --git a/apps/v4/components/site-header.tsx b/apps/v4/components/site-header.tsx
index 18553c3778..3e0e85bc8f 100644
--- a/apps/v4/components/site-header.tsx
+++ b/apps/v4/components/site-header.tsx
@@ -1,4 +1,5 @@
 import Link from "next/link"
+import { Button } from "@/examples/radix/ui/button"
 import { PlusSignIcon } from "@hugeicons/core-free-icons"
 import { HugeiconsIcon } from "@hugeicons/react"
 
@@ -12,18 +13,18 @@ import { MainNav } from "@/components/main-nav"
 import { MobileNav } from "@/components/mobile-nav"
 import { ModeSwitcher } from "@/components/mode-switcher"
 import { SiteConfig } from "@/components/site-config"
-// import blocks from "@/registry/__blocks__.json"
-import { Button } from "@/registry/new-york-v4/ui/button"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
+import { ProjectForm } from "@/app/(create)/components/project-form"
+import { V0Button } from "@/app/(create)/components/v0-button"
 
 export function SiteHeader() {
   const colors = getColors()
   const pageTree = source.pageTree
 
   return (
-    <header className="bg-background sticky top-0 z-50 w-full">
-      <div className="container-wrapper 3xl:fixed:px-0 px-6">
-        <div className="3xl:fixed:container flex h-(--header-height) items-center **:data-[slot=separator]:!h-4">
+    <header className="sticky top-0 z-50 w-full bg-background">
+      <div className="container-wrapper px-6 3xl:fixed:px-0">
+        <div className="flex h-(--header-height) items-center **:data-[slot=separator]:h-4! 3xl:fixed:container">
           <MobileNav
             tree={pageTree}
             items={siteConfig.navItems}
@@ -54,27 +55,28 @@ export function SiteHeader() {
               className="ml-2 hidden lg:block"
             />
             <GitHubLink />
-            <Separator orientation="vertical" className="3xl:flex hidden" />
-            <SiteConfig className="3xl:flex hidden" />
+            <Separator orientation="vertical" className="hidden 3xl:flex" />
+            <SiteConfig className="hidden 3xl:flex" />
             <Separator orientation="vertical" />
             <ModeSwitcher />
-            <Separator orientation="vertical" className="mr-2" />
-            <Button
-              asChild
-              size="sm"
-              className="hidden h-[31px] rounded-lg sm:flex"
-            >
-              <Link href="/create">
-                <HugeiconsIcon icon={PlusSignIcon} />
-                New Project
-              </Link>
-            </Button>
-            <Button asChild size="sm" className="h-[31px] rounded-lg sm:hidden">
-              <Link href="/create">
-                <HugeiconsIcon icon={PlusSignIcon} />
-                New
-              </Link>
-            </Button>
+            <div className="hidden items-center gap-2 group-has-data-[slot=designer]/layout:md:flex">
+              <Separator orientation="vertical" />
+              <V0Button />
+              <ProjectForm />
+            </div>
+            <div className="hidden items-center gap-2 group-has-data-[slot=designer]/layout:flex group-has-data-[slot=designer]/layout:md:hidden">
+              <Separator orientation="vertical" />
+              <V0Button />
+            </div>
+            <div className="flex items-center gap-2 group-has-data-[slot=designer]/layout:hidden">
+              <Separator orientation="vertical" />
+              <Button asChild size="sm" className="h-[31px] rounded-lg">
+                <Link href="/create">
+                  <HugeiconsIcon icon={PlusSignIcon} />
+                  New
+                </Link>
+              </Button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/apps/v4/components/theme-customizer.tsx b/apps/v4/components/theme-customizer.tsx
index bc46943c67..c3c971d73b 100644
--- a/apps/v4/components/theme-customizer.tsx
+++ b/apps/v4/components/theme-customizer.tsx
@@ -66,7 +66,7 @@ export function ThemeCustomizer({ className }: React.ComponentProps<"div">) {
               variant="link"
               size="sm"
               data-active={activeTheme === theme.name}
-              className="text-muted-foreground hover:text-primary data-[active=true]:text-primary flex h-7 cursor-pointer items-center justify-center px-4 text-center text-base font-medium capitalize transition-colors hover:no-underline"
+              className="flex h-7 cursor-pointer items-center justify-center px-4 text-center text-base font-medium text-muted-foreground capitalize transition-colors hover:text-primary hover:no-underline data-[active=true]:text-primary"
               onClick={() => setActiveTheme(theme.name)}
             >
               {theme.name === "neutral" ? "Default" : theme.name}
@@ -198,10 +198,10 @@ function CustomizerCode({ themeName }: { themeName: string }) {
         <TabsContent value="v4-oklch">
           <figure
             data-rehype-pretty-code-figure
-            className="!mx-0 mt-0 rounded-lg"
+            className="mx-0! mt-0 rounded-lg"
           >
             <figcaption
-              className="text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70"
+              className="flex items-center gap-2 text-code-foreground [&_svg]:size-4 [&_svg]:text-code-foreground [&_svg]:opacity-70"
               data-rehype-pretty-code-title=""
               data-language="css"
               data-theme="github-dark github-light-default"
@@ -214,7 +214,7 @@ function CustomizerCode({ themeName }: { themeName: string }) {
                 data-slot="copy-button"
                 size="icon"
                 variant="ghost"
-                className="bg-code text-code-foreground absolute top-3 right-2 z-10 size-7 shadow-none hover:opacity-100 focus-visible:opacity-100"
+                className="absolute top-3 right-2 z-10 size-7 bg-code text-code-foreground shadow-none hover:opacity-100 focus-visible:opacity-100"
                 onClick={() => {
                   copyToClipboardWithMeta(
                     getThemeCodeOKLCH(activeThemeOKLCH, 0.65),
@@ -278,10 +278,10 @@ function CustomizerCode({ themeName }: { themeName: string }) {
         <TabsContent value="v4-hsl">
           <figure
             data-rehype-pretty-code-figure
-            className="!mx-0 mt-0 rounded-lg"
+            className="mx-0! mt-0 rounded-lg"
           >
             <figcaption
-              className="text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70"
+              className="flex items-center gap-2 text-code-foreground [&_svg]:size-4 [&_svg]:text-code-foreground [&_svg]:opacity-70"
               data-rehype-pretty-code-title=""
               data-language="css"
               data-theme="github-dark github-light-default"
@@ -294,7 +294,7 @@ function CustomizerCode({ themeName }: { themeName: string }) {
                 data-slot="copy-button"
                 size="icon"
                 variant="ghost"
-                className="bg-code text-code-foreground absolute top-3 right-2 z-10 size-7 shadow-none hover:opacity-100 focus-visible:opacity-100"
+                className="absolute top-3 right-2 z-10 size-7 bg-code text-code-foreground shadow-none hover:opacity-100 focus-visible:opacity-100"
                 onClick={() => {
                   copyToClipboardWithMeta(
                     getThemeCodeHSLV4(activeTheme, 0.65),
@@ -362,10 +362,10 @@ function CustomizerCode({ themeName }: { themeName: string }) {
         <TabsContent value="v3">
           <figure
             data-rehype-pretty-code-figure
-            className="!mx-0 mt-0 rounded-lg"
+            className="mx-0! mt-0 rounded-lg"
           >
             <figcaption
-              className="text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70"
+              className="flex items-center gap-2 text-code-foreground [&_svg]:size-4 [&_svg]:text-code-foreground [&_svg]:opacity-70"
               data-rehype-pretty-code-title=""
               data-language="css"
               data-theme="github-dark github-light-default"
@@ -378,7 +378,7 @@ function CustomizerCode({ themeName }: { themeName: string }) {
                 data-slot="copy-button"
                 size="icon"
                 variant="ghost"
-                className="bg-code text-code-foreground absolute top-3 right-2 z-10 size-7 shadow-none hover:opacity-100 focus-visible:opacity-100"
+                className="absolute top-3 right-2 z-10 size-7 bg-code text-code-foreground shadow-none hover:opacity-100 focus-visible:opacity-100"
                 onClick={() => {
                   copyToClipboardWithMeta(getThemeCode(activeTheme, 0.5), {
                     name: "copy_theme_code",
@@ -632,7 +632,7 @@ function CustomizerCode({ themeName }: { themeName: string }) {
 function ColorIndicator({ color }: { color: string }) {
   return (
     <span
-      className="border-border/50 inline-block size-3 border"
+      className="inline-block size-3 border border-border/50"
       style={{ backgroundColor: color }}
     />
   )
diff --git a/apps/v4/content/docs/(root)/blocks.mdx b/apps/v4/content/docs/(root)/_blocks.mdx
similarity index 100%
rename from apps/v4/content/docs/(root)/blocks.mdx
rename to apps/v4/content/docs/(root)/_blocks.mdx
diff --git a/apps/v4/content/docs/(root)/cli.mdx b/apps/v4/content/docs/(root)/cli.mdx
index c425221541..43374f8724 100644
--- a/apps/v4/content/docs/(root)/cli.mdx
+++ b/apps/v4/content/docs/(root)/cli.mdx
@@ -21,21 +21,33 @@ Usage: shadcn init [options] [components...]
 initialize your project and install dependencies
 
 Arguments:
-  components         name, url or local path to component
+  components              name, url or local path to component
 
 Options:
-  -t, --template <template>      the template to use. (next, next-monorepo)
-  -b, --base-color <base-color>  the base color to use. (neutral, gray, zinc, stone, slate)
-  -y, --yes                      skip confirmation prompt. (default: true)
-  -f, --force                    force overwrite of existing configuration. (default: false)
-  -c, --cwd <cwd>                the working directory. defaults to the current directory.
-  -s, --silent                   mute output. (default: false)
-  --src-dir                      use the src directory when creating a new project. (default: false)
-  --no-src-dir                   do not use the src directory when creating a new project.
-  --css-variables                use css variables for theming. (default: true)
-  --no-css-variables             do not use css variables for theming.
-  --no-base-style                do not install the base shadcn style
-  -h, --help                     display help for command
+  -t, --template <template>  the template to use. (next, vite, start, react-router, laravel, astro)
+  -b, --base <base>          the component library to use. (radix, base)
+  -p, --preset [name]        use a preset configuration. (name, URL, or preset code)
+  -n, --name <name>          the name for the new project.
+  -d, --defaults             use default configuration. (default: false)
+  -y, --yes                  skip confirmation prompt. (default: true)
+  -f, --force                force overwrite of existing configuration. (default: false)
+  -c, --cwd <cwd>            the working directory. defaults to the current directory.
+  -s, --silent               mute output. (default: false)
+  --monorepo                 scaffold a monorepo project.
+  --no-monorepo              skip the monorepo prompt.
+  --reinstall                re-install existing UI components.
+  --no-reinstall             do not re-install existing UI components.
+  --rtl                      enable RTL support.
+  --no-rtl                   disable RTL support.
+  --css-variables            use css variables for theming. (default: true)
+  --no-css-variables         do not use css variables for theming.
+  -h, --help                 display help for command
+```
+
+The `create` command is an alias for `init`:
+
+```bash
+npx shadcn@latest create
 ```
 
 ---
@@ -56,20 +68,19 @@ Usage: shadcn add [options] [components...]
 add a component to your project
 
 Arguments:
-  components         name, url or local path to component
+  components           name, url or local path to component
 
 Options:
-  -y, --yes           skip confirmation prompt. (default: false)
-  -o, --overwrite     overwrite existing files. (default: false)
-  -c, --cwd <cwd>     the working directory. defaults to the current directory.
-  -a, --all           add all available components (default: false)
-  -p, --path <path>   the path to add the component to.
-  -s, --silent        mute output. (default: false)
-  --src-dir           use the src directory when creating a new project. (default: false)
-  --no-src-dir        do not use the src directory when creating a new project.
-  --css-variables     use css variables for theming. (default: true)
-  --no-css-variables  do not use css variables for theming.
-  -h, --help          display help for command
+  -y, --yes            skip confirmation prompt. (default: false)
+  -o, --overwrite      overwrite existing files. (default: false)
+  -c, --cwd <cwd>      the working directory. defaults to the current directory.
+  -a, --all            add all available components (default: false)
+  -p, --path <path>    the path to add the component to.
+  -s, --silent         mute output. (default: false)
+  --dry-run            preview changes without writing files. (default: false)
+  --diff [path]        show diff for a file.
+  --view [path]        show file contents.
+  -h, --help           display help for command
 ```
 
 ---
@@ -158,40 +169,6 @@ Options:
 
 ---
 
-## list
-
-Use the `list` command to list all items from a registry.
-
-```bash
-npx shadcn@latest list @acme
-```
-
-**Options**
-
-```bash
-Usage: shadcn list [options] <registries...>
-
-list items from registries
-
-Arguments:
-  registries             the registry names or urls to list items from. Names
-    must be prefixed with @.
-```
-
-**Options**
-
-```bash
-Usage: shadcn list [options] <registries...>
-
-list items from registries
-
-Arguments:
-  registries             the registry names or urls to list items from. Names
-    must be prefixed with @.
-```
-
----
-
 ## build
 
 Use the `build` command to generate the registry JSON files.
@@ -226,6 +203,56 @@ npx shadcn@latest build --output ./public/registry
 
 ---
 
+## docs
+
+Use the `docs` command to fetch documentation and API references for components.
+
+```bash
+npx shadcn@latest docs [component]
+```
+
+**Options**
+
+```bash
+Usage: shadcn docs [options] [component]
+
+fetch documentation and API references for components
+
+Arguments:
+  component          the component to get docs for
+
+Options:
+  -c, --cwd <cwd>    the working directory. defaults to the current directory.
+  -b, --base <base>  the base to use either 'base' or 'radix'. defaults to project base.
+  --json             output as JSON. (default: false)
+  -h, --help         display help for command
+```
+
+---
+
+## info
+
+Use the `info` command to get information about your project.
+
+```bash
+npx shadcn@latest info
+```
+
+**Options**
+
+```bash
+Usage: shadcn info [options]
+
+get information about your project
+
+Options:
+  -c, --cwd <cwd>  the working directory. defaults to the current directory.
+  --json            output as JSON. (default: false)
+  -h, --help        display help for command
+```
+
+---
+
 ## migrate
 
 Use the `migrate` command to run migrations on your project.
diff --git a/apps/v4/content/docs/(root)/components-json.mdx b/apps/v4/content/docs/(root)/components-json.mdx
index 4965b638e2..0da49539b5 100644
--- a/apps/v4/content/docs/(root)/components-json.mdx
+++ b/apps/v4/content/docs/(root)/components-json.mdx
@@ -79,7 +79,7 @@ This is used to generate the default color palette for your components. **This c
 ```json title="components.json"
 {
   "tailwind": {
-    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc"
+    "baseColor": "gray" | "neutral" | "slate" | "stone" | "zinc" | "mauve" | "olive" | "mist" | "taupe"
   }
 }
 ```
diff --git a/apps/v4/content/docs/(root)/figma.mdx b/apps/v4/content/docs/(root)/figma.mdx
index 3a07273b34..5884181802 100644
--- a/apps/v4/content/docs/(root)/figma.mdx
+++ b/apps/v4/content/docs/(root)/figma.mdx
@@ -19,3 +19,4 @@ description: Every component recreated in Figma. With customizable props, typogr
 - [shadcn/ui kit](https://shadcndesign.com) by [ Matt Wierzbicki](https://x.com/matsugfx) - A premium, always up-to-date UI kit for Figma - shadcn/ui compatible and optimized for smooth design-to-dev handoff.
 - [Shadcraft UI Kit](https://shadcraft.com) - The most advanced shadcn-compatible kit with instant theming via [tweakcn](https://tweakcn.com), a pro library of components and templates, and complete coverage of shadcn components and blocks.
 - [shadcn/studio UI Kit](https://shadcnstudio.com/figma) - Accelerate design & development with a shadcn/ui compatible Figma kit with updated components, 550+ blocks, 10+ templates, 20+ themes, and an AI tool that converts designs into shadcn/ui code.
+- [Shadcnblocks.com](https://www.shadcnblocks.com) - A Premium Shadcn Figma UI Kit with components, 500+ pro blocks, shadcn theme variables, light/dark mode and Figma MCP ready.
diff --git a/apps/v4/content/docs/(root)/meta.json b/apps/v4/content/docs/(root)/meta.json
index d5b1f56a05..8162ed9d9a 100644
--- a/apps/v4/content/docs/(root)/meta.json
+++ b/apps/v4/content/docs/(root)/meta.json
@@ -9,13 +9,14 @@
     "[RTL](/docs/rtl)",
     "[CLI](/docs/cli)",
     "monorepo",
-    "typography",
+    "skills",
     "v0",
     "javascript",
     "blocks",
     "figma",
     "[Changelog](/docs/changelog)",
     "[llms.txt](/llms.txt)",
-    "legacy"
+    "legacy",
+    "!new"
   ]
 }
diff --git a/apps/v4/content/docs/(root)/monorepo.mdx b/apps/v4/content/docs/(root)/monorepo.mdx
index c680f258fd..114f9abc8e 100644
--- a/apps/v4/content/docs/(root)/monorepo.mdx
+++ b/apps/v4/content/docs/(root)/monorepo.mdx
@@ -20,19 +20,21 @@ for you.
 
 ### Create a new monorepo project
 
-To create a new monorepo project, run the `init` command. You will be prompted
-to select the type of project you are creating.
+To create a new monorepo project, run the `init` command with the `--monorepo` flag.
 
 ```bash
-npx shadcn@latest init
+npx shadcn@latest init --monorepo
 ```
 
-Select the `Next.js (Monorepo)` option.
+Then select the template you want to use.
 
 ```bash
-? Would you like to start a new project?
-    Next.js
-❯   Next.js (Monorepo)
+? Select a template ›
+❯   Next.js
+    Vite
+    TanStack Start
+    React Router
+    Astro
 ```
 
 This will create a new monorepo project with two workspaces: `web` and `ui`,
@@ -40,8 +42,6 @@ and [Turborepo](https://turbo.build/repo/docs) as the build system.
 
 Everything is set up for you, so you can start adding components to your project.
 
-Note: The monorepo uses React 19 and Tailwind CSS v4.
-
 ### Add components to your project
 
 To add components to your project, run the `add` command **in the path of your app**.
@@ -116,13 +116,13 @@ turbo.json
 ```json showLineNumbers title="apps/web/components.json"
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "radix-nova",
   "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "",
     "css": "../../packages/ui/src/styles/globals.css",
-    "baseColor": "zinc",
+    "baseColor": "neutral",
     "cssVariables": true
   },
   "iconLibrary": "lucide",
@@ -139,13 +139,13 @@ turbo.json
 ```json showLineNumbers title="packages/ui/components.json"
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "radix-nova",
   "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "",
     "css": "src/styles/globals.css",
-    "baseColor": "zinc",
+    "baseColor": "neutral",
     "cssVariables": true
   },
   "iconLibrary": "lucide",
diff --git a/apps/v4/content/docs/(root)/new.mdx b/apps/v4/content/docs/(root)/new.mdx
new file mode 100644
index 0000000000..24efec1b32
--- /dev/null
+++ b/apps/v4/content/docs/(root)/new.mdx
@@ -0,0 +1,106 @@
+---
+title: Your project is ready!
+description: You've created a new project with shadcn/ui.
+---
+
+Here's a few things you can do to get started building with shadcn/ui.
+
+## Add Components
+
+Use the CLI to add components to your project.
+
+```bash
+npx shadcn@latest add button
+```
+
+Then import and use it in your code.
+
+```tsx title="app/page.tsx"
+import { Button } from "@/components/ui/button"
+
+export default function Home() {
+  return <Button>Click me</Button>
+}
+```
+
+Unlike traditional component libraries, shadcn/ui adds the component source code directly to your project under `components/ui/`. You own the code and can customize it however you want.
+
+You can add multiple components at once or add all available components.
+
+```bash
+npx shadcn@latest add button card input label
+```
+
+```bash
+npx shadcn@latest add --all
+```
+
+Browse all components on the [Components](/docs/components) page.
+
+## Customize Your Theme
+
+You can edit your theme directly in your CSS file. Learn more about [Theming](/docs/theming) and how to use CSS variables or utility classes.
+
+If you want to try a new preset, you can create a custom theme visually on [ui.shadcn.com](https://ui.shadcn.com) and apply it to your project using a preset code.
+
+```bash
+npx shadcn@latest init --preset [CODE]
+```
+
+## Add a block
+
+You can add a block to your project using the CLI.
+
+```bash
+npx shadcn@latest add login-03
+```
+
+This will add the `login-03` block to your project. Import and use it in your code.
+
+```tsx title="app/page.tsx"
+import { Login03 } from "@/components/login-03"
+
+export default function Home() {
+  return <Login03 />
+}
+```
+
+## Install from Registries
+
+shadcn/ui has a growing ecosystem of community registries. You can install components from any registry URL using the CLI.
+
+```bash
+npx shadcn@latest add @[registry]/[name]
+```
+
+Browse the [Registry Directory](/docs/directory) for a list of available registries.
+
+## Use AI to Build
+
+shadcn/ui is designed to work with AI. Your AI assistant can read the component source code in your project, understand the APIs, and compose them together to build pages and features.
+
+Here are some example prompts to try:
+
+- _"Create a signup page with a form for entering name, email and password."_
+- _"Create a settings page with a form for updating profile information."_
+- _"Build a dashboard with a header, stats cards, and a data table."_
+
+## Install the shadcn Skills
+
+Install the shadcn skill in your AI assistant. This will give your AI assistant access to the full component registry, documentation, and search.
+
+```bash
+npx skills add shadcn/ui
+```
+
+Learn more about [skills](/docs/skills).
+
+## Connect the MCP Server
+
+The shadcn MCP server gives your AI assistant access to the full component registry, documentation, and search. Connect it in your editor for the best experience.
+
+```bash
+npx shadcn@latest mcp init
+```
+
+Learn more on the [MCP Server](/docs/mcp) page.
diff --git a/apps/v4/content/docs/(root)/skills.mdx b/apps/v4/content/docs/(root)/skills.mdx
new file mode 100644
index 0000000000..edb2ab4a08
--- /dev/null
+++ b/apps/v4/content/docs/(root)/skills.mdx
@@ -0,0 +1,71 @@
+---
+title: Skills
+description: Give your AI assistant deep knowledge of shadcn/ui components, patterns, and best practices.
+---
+
+Skills give AI assistants like Claude Code project-aware context about shadcn/ui. When installed, your AI assistant knows how to find, install, compose, and customize components using the correct APIs and patterns for your project.
+
+For example, you can ask your AI assistant to:
+
+- _"Add a login form with email and password fields."_
+- _"Create a settings page with a form for updating profile information."_
+- _"Build a dashboard with a sidebar, stats cards, and a data table."_
+- _"Switch to --preset [CODE]"_
+- _"Can you add a hero from @tailark?"_
+
+The skill reads your project's `components.json` and provides the assistant with your framework, aliases, installed components, icon library, and base library so it can generate correct code on the first try.
+
+---
+
+## Install
+
+```bash
+npx skills add shadcn/ui
+```
+
+This installs the shadcn skill into your project. Once installed, your AI assistant automatically loads it when working with shadcn/ui components.
+
+Learn more about skills at [skills.sh](https://skills.sh).
+
+---
+
+## What's Included
+
+The skill provides your AI assistant with the following knowledge:
+
+### Project Context
+
+On every interaction, the skill runs `shadcn info --json` to get your project's configuration: framework, Tailwind version, aliases, base library (`radix` or `base`), icon library, installed components, and resolved file paths.
+
+### CLI Commands
+
+Full reference for all CLI commands: `init`, `add`, `search`, `view`, `docs`, `diff`, `info`, and `build`. Includes flags, dry-run mode, smart merge workflows, presets, and templates.
+
+### Theming and Customization
+
+How CSS variables, OKLCH colors, dark mode, custom colors, border radius, and component variants work. Includes guidance for both Tailwind v3 and v4.
+
+### Registry Authoring
+
+How to build and publish custom component registries: `registry.json` format, item types, file objects, dependencies, CSS variables, building, hosting, and user configuration.
+
+### MCP Server
+
+Setup and tools for the shadcn MCP server, which lets AI assistants search, browse, and install components from registries.
+
+---
+
+## How It Works
+
+1. **Project detection** — The skill activates when it finds a `components.json` file in your project.
+2. **Context injection** — It runs `shadcn info --json` to read your project configuration and injects the result into the assistant's context.
+3. **Pattern enforcement** — The assistant follows shadcn/ui composition rules: using `FieldGroup` for forms, `ToggleGroup` for option sets, semantic colors, and correct base-specific APIs.
+4. **Component discovery** — The assistant uses `shadcn docs`, `shadcn search`, or MCP tools to find components and their documentation before generating code.
+
+## Learn More
+
+- [CLI](/docs/cli) — Full CLI command reference
+- [MCP Server](/docs/mcp) — Connect the MCP server for registry access
+- [Theming](/docs/theming) — CSS variables and customization
+- [Registry](/docs/registry) — Building and publishing custom registries
+- [skills.sh](https://skills.sh) — Learn more about AI skills
diff --git a/apps/v4/content/docs/(root)/tailwind-v4.mdx b/apps/v4/content/docs/(root)/tailwind-v4.mdx
index 75e7c008f9..5b4bfc9544 100644
--- a/apps/v4/content/docs/(root)/tailwind-v4.mdx
+++ b/apps/v4/content/docs/(root)/tailwind-v4.mdx
@@ -22,7 +22,7 @@ It’s here! Tailwind v4 and React 19. Ready for you to try out. You can start u
 
 ## Try It Out
 
-You can test Tailwind v4 + React 19 today using the `canary` release of the CLI. See the framework specific guides below for how to get started.
+You can start using Tailwind v4 + React 19 today. See the framework specific guides below for how to get started.
 
 <div className="mt-8 grid gap-4 sm:grid-cols-2 sm:gap-6">
   <LinkedCard href="/docs/installation/next">
@@ -297,7 +297,7 @@ For existing projects, follow the steps below to migrate.
 
 ### March 12, 2025 - New Dark Mode Colors
 
-We've revisted the dark mode colors and updated them to be more accessible.
+We've revisited the dark mode colors and updated them to be more accessible.
 
 If you're running an existing Tailwind v4 project (**not an upgraded one**[^1]), you can update your components to use the new dark mode colors by re-adding your components using the CLI[^2].
 
diff --git a/apps/v4/content/docs/(root)/theming.mdx b/apps/v4/content/docs/(root)/theming.mdx
index dea440f35d..2fdb10d238 100644
--- a/apps/v4/content/docs/(root)/theming.mdx
+++ b/apps/v4/content/docs/(root)/theming.mdx
@@ -34,35 +34,6 @@ To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `
 }
 ```
 
-## Utility classes
-
-```tsx /bg-zinc-950/ /text-zinc-50/ /dark:bg-white/ /dark:text-zinc-950/
-<div className="bg-zinc-950 dark:bg-white" />
-```
-
-To use utility classes for theming set `tailwind.cssVariables` to `false` in your `components.json` file.
-
-```json {8} title="components.json" showLineNumbers
-{
-  "style": "new-york",
-  "rsc": true,
-  "tailwind": {
-    "config": "",
-    "css": "app/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": false
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  }
-}
-```
-
 ## Convention
 
 We use a simple `background` and `foreground` convention for colors. The `background` variable is used for the background color of the component and the `foreground` variable is used for the text color.
@@ -196,399 +167,6 @@ See the [Tailwind CSS documentation](https://tailwindcss.com/docs/colors) for mo
 
 ## Base Colors
 
-For reference, here's a list of the base colors that are available.
+The available base colors are: **Neutral**, **Stone**, **Zinc**, **Mauve**, **Olive**, **Mist**, and **Taupe**.
 
-### Neutral
-
-<CodeCollapsibleWrapper>
-
-```css title="app/globals.css" showLineNumbers
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.556 0 0);
-}
-```
-
-</CodeCollapsibleWrapper>
-
-### Stone
-
-<CodeCollapsibleWrapper>
-
-```css title="app/globals.css" showLineNumbers
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.147 0.004 49.25);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.147 0.004 49.25);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.147 0.004 49.25);
-  --primary: oklch(0.216 0.006 56.043);
-  --primary-foreground: oklch(0.985 0.001 106.423);
-  --secondary: oklch(0.97 0.001 106.424);
-  --secondary-foreground: oklch(0.216 0.006 56.043);
-  --muted: oklch(0.97 0.001 106.424);
-  --muted-foreground: oklch(0.553 0.013 58.071);
-  --accent: oklch(0.97 0.001 106.424);
-  --accent-foreground: oklch(0.216 0.006 56.043);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.923 0.003 48.717);
-  --input: oklch(0.923 0.003 48.717);
-  --ring: oklch(0.709 0.01 56.259);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.001 106.423);
-  --sidebar-foreground: oklch(0.147 0.004 49.25);
-  --sidebar-primary: oklch(0.216 0.006 56.043);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.97 0.001 106.424);
-  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
-  --sidebar-border: oklch(0.923 0.003 48.717);
-  --sidebar-ring: oklch(0.709 0.01 56.259);
-}
-
-.dark {
-  --background: oklch(0.147 0.004 49.25);
-  --foreground: oklch(0.985 0.001 106.423);
-  --card: oklch(0.216 0.006 56.043);
-  --card-foreground: oklch(0.985 0.001 106.423);
-  --popover: oklch(0.216 0.006 56.043);
-  --popover-foreground: oklch(0.985 0.001 106.423);
-  --primary: oklch(0.923 0.003 48.717);
-  --primary-foreground: oklch(0.216 0.006 56.043);
-  --secondary: oklch(0.268 0.007 34.298);
-  --secondary-foreground: oklch(0.985 0.001 106.423);
-  --muted: oklch(0.268 0.007 34.298);
-  --muted-foreground: oklch(0.709 0.01 56.259);
-  --accent: oklch(0.268 0.007 34.298);
-  --accent-foreground: oklch(0.985 0.001 106.423);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.553 0.013 58.071);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.216 0.006 56.043);
-  --sidebar-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.268 0.007 34.298);
-  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.553 0.013 58.071);
-}
-```
-
-</CodeCollapsibleWrapper>
-
-### Zinc
-
-<CodeCollapsibleWrapper>
-
-```css title="app/globals.css" showLineNumbers
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-}
-
-.dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.006 285.885);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-}
-```
-
-</CodeCollapsibleWrapper>
-
-### Gray
-
-<CodeCollapsibleWrapper>
-
-```css title="app/globals.css" showLineNumbers
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
-}
-
-.dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
-}
-```
-
-</CodeCollapsibleWrapper>
-
-### Slate
-
-<CodeCollapsibleWrapper>
-
-```css title="app/globals.css" showLineNumbers
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.129 0.042 264.695);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.129 0.042 264.695);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.129 0.042 264.695);
-  --primary: oklch(0.208 0.042 265.755);
-  --primary-foreground: oklch(0.984 0.003 247.858);
-  --secondary: oklch(0.968 0.007 247.896);
-  --secondary-foreground: oklch(0.208 0.042 265.755);
-  --muted: oklch(0.968 0.007 247.896);
-  --muted-foreground: oklch(0.554 0.046 257.417);
-  --accent: oklch(0.968 0.007 247.896);
-  --accent-foreground: oklch(0.208 0.042 265.755);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.929 0.013 255.508);
-  --input: oklch(0.929 0.013 255.508);
-  --ring: oklch(0.704 0.04 256.788);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.984 0.003 247.858);
-  --sidebar-foreground: oklch(0.129 0.042 264.695);
-  --sidebar-primary: oklch(0.208 0.042 265.755);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
-  --sidebar-border: oklch(0.929 0.013 255.508);
-  --sidebar-ring: oklch(0.704 0.04 256.788);
-}
-
-.dark {
-  --background: oklch(0.129 0.042 264.695);
-  --foreground: oklch(0.984 0.003 247.858);
-  --card: oklch(0.208 0.042 265.755);
-  --card-foreground: oklch(0.984 0.003 247.858);
-  --popover: oklch(0.208 0.042 265.755);
-  --popover-foreground: oklch(0.984 0.003 247.858);
-  --primary: oklch(0.929 0.013 255.508);
-  --primary-foreground: oklch(0.208 0.042 265.755);
-  --secondary: oklch(0.279 0.041 260.031);
-  --secondary-foreground: oklch(0.984 0.003 247.858);
-  --muted: oklch(0.279 0.041 260.031);
-  --muted-foreground: oklch(0.704 0.04 256.788);
-  --accent: oklch(0.279 0.041 260.031);
-  --accent-foreground: oklch(0.984 0.003 247.858);
-  --destructive: oklch(0.704 0.191 22.216);
-  --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.208 0.042 265.755);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-accent: oklch(0.279 0.041 260.031);
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
-}
-```
-
-</CodeCollapsibleWrapper>
+You can set the base color when initializing your project using a preset or by updating the `baseColor` field in your `components.json` file.
diff --git a/apps/v4/content/docs/changelog/2023-06-new-cli.mdx b/apps/v4/content/docs/changelog/2023-06-new-cli.mdx
index 0f9f560080..87c52580b4 100644
--- a/apps/v4/content/docs/changelog/2023-06-new-cli.mdx
+++ b/apps/v4/content/docs/changelog/2023-06-new-cli.mdx
@@ -347,7 +347,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
-      "bg-background/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 backdrop-blur-sm",
+      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -357,7 +357,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
   {
     variants: {
       side: {
@@ -366,7 +366,7 @@ const sheetVariants = cva(
           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
         right:
-          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
       },
     },
     defaultVariants: {
@@ -391,7 +391,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+      <SheetPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -434,7 +434,7 @@ const SheetTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
-    className={cn("text-foreground text-lg font-semibold", className)}
+    className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
 ))
@@ -446,7 +446,7 @@ const SheetDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
 ))
diff --git a/apps/v4/content/docs/changelog/2024-03-blocks.mdx b/apps/v4/content/docs/changelog/2024-03-blocks.mdx
index 79052f3c8d..6cd765ca7d 100644
--- a/apps/v4/content/docs/changelog/2024-03-blocks.mdx
+++ b/apps/v4/content/docs/changelog/2024-03-blocks.mdx
@@ -78,12 +78,12 @@ We're also introducing a "Request a Block" feature. If there's a specific block
 
 If you have a [v0](https://v0.dev) account, you can use the **Edit in v0** feature to open the code on v0 for prompting and further generation.
 
-<div className="bg-background mt-6 flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg border shadow-sm">
+<div className="mt-6 flex aspect-video w-full items-center justify-center overflow-hidden rounded-lg border bg-background shadow-sm">
   <svg
     viewBox="0 0 40 20"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className="text-foreground h-40 w-40"
+    className="h-40 w-40 text-foreground"
   >
     <path
       d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
diff --git a/apps/v4/content/docs/changelog/2025-10-new-components.mdx b/apps/v4/content/docs/changelog/2025-10-new-components.mdx
index f611735337..cba759ba92 100644
--- a/apps/v4/content/docs/changelog/2025-10-new-components.mdx
+++ b/apps/v4/content/docs/changelog/2025-10-new-components.mdx
@@ -163,35 +163,35 @@ Here's a preview with icons:
 
 <ComponentPreview
   name="input-group-icon"
-  className="[&_.preview]:h-[300px] [&_pre]:!h-[300px]"
+  className="[&_.preview]:h-[300px] [&_pre]:h-[300px]!"
 />
 
 You can also add buttons to the input group.
 
 <ComponentPreview
   name="input-group-button"
-  className="[&_.preview]:h-[300px] [&_pre]:!h-[300px]"
+  className="[&_.preview]:h-[300px] [&_pre]:h-[300px]!"
 />
 
 Or text, labels, tooltips,...
 
 <ComponentPreview
   name="input-group-text"
-  className="[&_.preview]:h-[350px] [&_pre]:!h-[350px]"
+  className="[&_.preview]:h-[350px] [&_pre]:h-[350px]!"
 />
 
 It also works with textareas so you can build really complex components with lots of knobs and dials or yet another prompt form.
 
 <ComponentPreview
   name="input-group-textarea"
-  className="[&_.preview]:h-[450px] [&_pre]:!h-[450px]"
+  className="[&_.preview]:h-[450px] [&_pre]:h-[450px]!"
 />
 
 Oh here are some cool ones with spinners:
 
 <ComponentPreview
   name="input-group-spinner"
-  className="[&_.preview]:h-[350px] [&_pre]:!h-[350px]"
+  className="[&_.preview]:h-[350px] [&_pre]:h-[350px]!"
 />
 
 ### Field
@@ -223,21 +223,21 @@ Here's a basic field with an input:
 
 <ComponentPreview
   name="field-input"
-  className="[&_.preview]:h-[350px] [&_pre]:!h-[350px]"
+  className="[&_.preview]:h-[350px] [&_pre]:h-[350px]!"
 />
 
 It works with all form controls. Inputs, textareas, selects, checkboxes, radios, switches, sliders, you name it. Here's a full example:
 
 <ComponentPreview
   name="field-demo"
-  className="[&_.preview]:h-[850px] [&_pre]:!h-[850px]"
+  className="[&_.preview]:h-[850px] [&_pre]:h-[850px]!"
 />
 
 Here are some checkbox fields:
 
 <ComponentPreview
   name="field-checkbox"
-  className="[&_.preview]:h-[500px] [&_pre]:!h-[500px]"
+  className="[&_.preview]:h-[500px] [&_pre]:h-[500px]!"
 />
 
 You can group fields together using `FieldGroup` and `FieldSet`. Perfect for
@@ -255,7 +255,7 @@ multi-section forms.
 
 <ComponentPreview
   name="field-fieldset"
-  className="[&_.preview]:h-[500px] [&_pre]:!h-[500px]"
+  className="[&_.preview]:h-[500px] [&_pre]:h-[500px]!"
 />
 
 Making it responsive is easy. Use `orientation="responsive"` and it switches
@@ -263,14 +263,14 @@ between vertical and horizontal layouts based on container width. Done.
 
 <ComponentPreview
   name="field-responsive"
-  className="[&_.preview]:h-[600px] [&_pre]:!h-[600px]"
+  className="[&_.preview]:h-[600px] [&_pre]:h-[600px]!"
 />
 
 Wait here's more. Wrap your fields in `FieldLabel` to create a selectable field group. Really easy. And it looks great.
 
 <ComponentPreview
   name="field-choice-card"
-  className="[&_.preview]:h-[600px] [&_pre]:!h-[600px]"
+  className="[&_.preview]:h-[600px] [&_pre]:h-[600px]!"
 />
 
 ### Item
@@ -305,26 +305,26 @@ Here's a basic item:
 
 <ComponentPreview
   name="item-demo"
-  className="[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:!h-[300px]"
+  className="[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:h-[300px]!"
 />
 
 You can add icons, avatars, or images to the item.
 
 <ComponentPreview
   name="item-icon"
-  className="[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:!h-[300px]"
+  className="[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:h-[300px]!"
 />
 
 <ComponentPreview
   name="item-avatar"
-  className="[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:!h-[300px]"
+  className="[&_.preview]:h-[300px] [&_.preview]:p-4 [&_pre]:h-[300px]!"
 />
 
 And here's what a list of items looks like with `ItemGroup`:
 
 <ComponentPreview
   name="item-group"
-  className="[&_.preview]:h-[500px] [&_.preview]:p-4 [&_pre]:!h-[500px]"
+  className="[&_.preview]:h-[500px] [&_.preview]:p-4 [&_pre]:h-[500px]!"
 />
 
 Need it as a link? Use the `asChild` prop:
@@ -345,7 +345,7 @@ Need it as a link? Use the `asChild` prop:
 
 <ComponentPreview
   name="item-link"
-  className="[&_.preview]:h-[400px] [&_.preview]:p-4 [&_pre]:!h-[400px]"
+  className="[&_.preview]:h-[400px] [&_.preview]:p-4 [&_pre]:h-[400px]!"
 />
 
 ### Empty
@@ -379,21 +379,21 @@ Here's how you use it:
 
 <ComponentPreview
   name="empty-demo"
-  className="[&_.preview]:h-[400px] [&_.preview]:p-4 [&_pre]:!h-[400px]"
+  className="[&_.preview]:h-[400px] [&_.preview]:p-4 [&_pre]:h-[400px]!"
 />
 
 You can use it with avatars:
 
 <ComponentPreview
   name="empty-avatar"
-  className="[&_.preview]:h-[400px] [&_pre]:!h-[400px]"
+  className="[&_.preview]:h-[400px] [&_pre]:h-[400px]!"
 />
 
 Or with input groups for things like search results or email subscriptions:
 
 <ComponentPreview
   name="empty-input-group"
-  className="[&_.preview]:h-[450px] [&_pre]:!h-[450px]"
+  className="[&_.preview]:h-[450px] [&_pre]:h-[450px]!"
 />
 
 That's it. Seven new components. Works with all your libraries. Ready for your projects.
diff --git a/apps/v4/content/docs/changelog/2026-01-base-ui.mdx b/apps/v4/content/docs/changelog/2026-01-base-ui.mdx
index 2e5401c989..f6bc997aa3 100644
--- a/apps/v4/content/docs/changelog/2026-01-base-ui.mdx
+++ b/apps/v4/content/docs/changelog/2026-01-base-ui.mdx
@@ -6,7 +6,7 @@ date: 2026-01-20
 
 We've shipped full documentation for Base UI components.
 
-<div className="bg-muted/50 mt-6 flex w-full items-center justify-center rounded-lg border py-32">
+<div className="mt-6 flex w-full items-center justify-center rounded-lg border bg-muted/50 py-32">
   <svg width="17" height="24" viewBox="0 0 17 24" className="size-12">
     <path
       fill="currentColor"
diff --git a/apps/v4/content/docs/changelog/2026-03-cli-v4.mdx b/apps/v4/content/docs/changelog/2026-03-cli-v4.mdx
new file mode 100644
index 0000000000..db6553d370
--- /dev/null
+++ b/apps/v4/content/docs/changelog/2026-03-cli-v4.mdx
@@ -0,0 +1,153 @@
+---
+title: March 2026 - shadcn/cli v4
+description: More capable, easier to use. Built for you and your coding agents. Skills, presets, dry run, new templates, monorepo and more.
+date: 2026-03-06
+---
+
+We're releasing version 4 of shadcn/cli. More capable, easier to use. Built for you and your coding agents. Here's everything new.
+
+### shadcn/skills
+
+shadcn/skills gives coding agents the context they need to work with your components and registry correctly. It covers both Radix and Base UI primitives, updated APIs, component patterns and registry workflows. The skill also knows how to use the shadcn CLI, when to invoke it and which flags to pass. Agents make fewer mistakes and produce code that actually matches your design system.
+
+You can ask your agent things like:
+
+- "create a new vite monorepo"
+- "find me a hero from tailark, add it to the homepage, animate the text using an animation from react-bits"
+- "install and configure a sign in page from @clerk"
+
+```bash
+npx skills add shadcn/ui
+```
+
+### Introducing --preset
+
+A preset packs your entire design system config into a short code. Colors, theme, icon library, fonts, radius. One string, everything included.
+
+Build your preset on [shadcn/create](/create), preview it live and grab the code when you're ready.
+
+```bash
+npx shadcn@latest init --preset a1Dg5eFl
+```
+
+Use it to scaffold projects from custom config, share with your team or publish in your registry. Drop it in prompts so your agent knows where to start. Use it across Claude, Codex, v0, Replit. Take your preset with you.
+
+### Switching presets
+
+When you're working on a new app, it can take a few tries to find something you like so we've made switching presets really easy. Run init --preset in your app, and the cli will take care of reconfiguring everything including your components.
+
+```bash
+npx shadcn@latest init --preset ad3qkJ7
+```
+
+### Skills + Presets
+
+Your agent knows how to use presets. Scaffold a project, switch design systems, try something new.
+
+- "create a new next app using --preset adtk27v"
+- "let's try --preset adtk27v"
+
+### New shadcn/create
+
+To help you build custom presets, we rebuilt [shadcn/create](/create). It now includes a library of UI components you can use to preview your presets. See how your colors, fonts and radius apply to real components before you start building.
+
+### New --dry-run, --diff, and --view flags
+
+Inspect what a registry will add to your project before anything gets written. Review the payload yourself or pipe it to your coding agent for a second look.
+
+```bash
+npx shadcn@latest add button --dry-run
+npx shadcn@latest add button --diff
+npx shadcn@latest add button --view
+```
+
+### Updating primitives
+
+You can use the `--diff` flag to check for registry updates. Or ask your agent: "check for updates from @shadcn and merge with my local changes".
+
+```bash
+npx shadcn@latest add button --diff
+```
+
+### shadcn init --template
+
+`shadcn init` now scaffolds full project templates for Next.js, Vite, Laravel, React Router, Astro and TanStack Start. Dark mode included for Next.js and Vite.
+
+```bash
+npx shadcn@latest init
+
+Select a template › - Use arrow-keys. Return to submit.
+❯ Next.js
+  Vite
+  TanStack Start
+  React Router
+  Astro
+  Laravel
+```
+
+Use `--monorepo` to set up a monorepo.
+
+```bash
+npx shadcn@latest init -t next --monorepo
+```
+
+### shadcn init --base
+
+Pick your primitives. Use `--base` to start a project with Radix or Base UI.
+
+```bash
+npx shadcn@latest init --base radix
+```
+
+### shadcn info
+
+The `info` command now shows the full picture: framework, version, CSS vars, which components are installed, and where to find docs and examples for every component. Great for giving coding agents the context they need to work with your project.
+
+```bash
+npx shadcn@latest info
+```
+
+### shadcn docs
+
+Get docs, code and examples for any UI component right from the CLI. Gives your coding agent the context to use your primitives correctly.
+
+```bash
+npx shadcn@latest docs combobox
+
+combobox
+  - docs      https://ui.shadcn.com/docs/components/radix/combobox
+  - examples  https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx
+  - api       https://base-ui.com/react/components/combobox
+```
+
+### registry:base and registry:font
+
+Registries can now distribute an entire design system as a single payload using `registry:base`. Components, dependencies, CSS vars, fonts, config. One install, everything set up.
+
+Fonts are now a first-class registry type. Install and configure them the same way you install components.
+
+```json title="font-inter.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-inter",
+  "type": "registry:font",
+  "font": {
+    "family": "'Inter Variable', sans-serif",
+    "provider": "google",
+    "import": "Inter",
+    "variable": "--font-sans",
+    "subsets": ["latin"]
+  }
+}
+```
+
+```bash
+npx shadcn@latest add font-inter
+```
+
+## Links
+
+- [shadcn/skills](/skills)
+- [shadcn/create](/create)
+- [shadcn/cli](/cli)
+- [shadcn/registry](/docs/registry)
diff --git a/apps/v4/content/docs/components/base/chart.mdx b/apps/v4/content/docs/components/base/chart.mdx
index a0f50f058b..feedc6b631 100644
--- a/apps/v4/content/docs/components/base/chart.mdx
+++ b/apps/v4/content/docs/components/base/chart.mdx
@@ -510,11 +510,11 @@ const chartConfig = {
   },
   chrome: {
     label: "Chrome",
-    color: "hsl(var(--chart-1))",
+    color: "var(--chart-1)",
   },
   safari: {
     label: "Safari",
-    color: "hsl(var(--chart-2))",
+    color: "var(--chart-2)",
   },
 } satisfies ChartConfig
 ```
@@ -556,11 +556,11 @@ const chartData = [
 const chartConfig = {
   chrome: {
     label: "Chrome",
-    color: "hsl(var(--chart-1))",
+    color: "var(--chart-1)",
   },
   safari: {
     label: "Safari",
-    color: "hsl(var(--chart-2))",
+    color: "var(--chart-2)",
   },
 } satisfies ChartConfig
 ```
diff --git a/apps/v4/content/docs/components/base/data-table.mdx b/apps/v4/content/docs/components/base/data-table.mdx
index 23295d86e5..03a90f65fc 100644
--- a/apps/v4/content/docs/components/base/data-table.mdx
+++ b/apps/v4/content/docs/components/base/data-table.mdx
@@ -827,7 +827,7 @@ This adds a checkbox to each row and a checkbox in the header to select all rows
 You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
 
 ```tsx
-<div className="text-muted-foreground flex-1 text-sm">
+<div className="flex-1 text-sm text-muted-foreground">
   {table.getFilteredSelectedRowModel().rows.length} of{" "}
   {table.getFilteredRowModel().rows.length} row(s) selected.
 </div>
diff --git a/apps/v4/content/docs/components/base/date-picker.mdx b/apps/v4/content/docs/components/base/date-picker.mdx
index f12e8f628e..47aa77ca1c 100644
--- a/apps/v4/content/docs/components/base/date-picker.mdx
+++ b/apps/v4/content/docs/components/base/date-picker.mdx
@@ -41,7 +41,7 @@ export function DatePickerDemo() {
           <Button
             variant="outline"
             data-empty={!date}
-            className="data-[empty=true]:text-muted-foreground justify-start text-left font-normal"
+            className="justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
           />
         }
       >
diff --git a/apps/v4/content/docs/components/base/native-select.mdx b/apps/v4/content/docs/components/base/native-select.mdx
index 12ba224e12..d644eebd86 100644
--- a/apps/v4/content/docs/components/base/native-select.mdx
+++ b/apps/v4/content/docs/components/base/native-select.mdx
@@ -7,7 +7,7 @@ component: true
 
 import { InfoIcon } from "lucide-react"
 
-<Callout variant="info" icon={<InfoIcon className="!translate-y-[3px]" />}>
+<Callout variant="info" icon={<InfoIcon className="translate-y-[3px]!" />}>
   For a styled select component, see the [Select](/docs/components/select)
   component.
 </Callout>
diff --git a/apps/v4/content/docs/components/base/select.mdx b/apps/v4/content/docs/components/base/select.mdx
index 5282d7d547..53e0c848af 100644
--- a/apps/v4/content/docs/components/base/select.mdx
+++ b/apps/v4/content/docs/components/base/select.mdx
@@ -67,15 +67,23 @@ import {
 ```
 
 ```tsx showLineNumbers
-<Select>
+const items = [
+  { label: "Light", value: "light" },
+  { label: "Dark", value: "dark" },
+  { label: "System", value: "system" },
+]
+
+<Select items={items}>
   <SelectTrigger className="w-[180px]">
     <SelectValue placeholder="Theme" />
   </SelectTrigger>
   <SelectContent>
     <SelectGroup>
-      <SelectItem value="light">Light</SelectItem>
-      <SelectItem value="dark">Dark</SelectItem>
-      <SelectItem value="system">System</SelectItem>
+      {items.map((item) => (
+        <SelectItem key={item.value} value={item.value}>
+          {item.label}
+        </SelectItem>
+      ))}
     </SelectGroup>
   </SelectContent>
 </Select>
diff --git a/apps/v4/content/docs/components/base/typography.mdx b/apps/v4/content/docs/components/base/typography.mdx
index af8a044337..6d2eff786e 100644
--- a/apps/v4/content/docs/components/base/typography.mdx
+++ b/apps/v4/content/docs/components/base/typography.mdx
@@ -10,7 +10,7 @@ We do not ship any typography styles by default. This page is an example of how
 <ComponentPreview
   styleName="base-nova"
   name="typography-demo"
-  className="[&_.preview]:!h-auto"
+  className="[&_.preview]:h-auto!"
   hideCode
 />
 
@@ -74,5 +74,5 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   styleName="base-nova"
   name="typography-rtl"
   direction="rtl"
-  className="[&_.preview]:!h-auto"
+  className="[&_.preview]:h-auto!"
 />
diff --git a/apps/v4/content/docs/components/radix/chart.mdx b/apps/v4/content/docs/components/radix/chart.mdx
index 8bfa840a97..3aeb2c0f09 100644
--- a/apps/v4/content/docs/components/radix/chart.mdx
+++ b/apps/v4/content/docs/components/radix/chart.mdx
@@ -510,11 +510,11 @@ const chartConfig = {
   },
   chrome: {
     label: "Chrome",
-    color: "hsl(var(--chart-1))",
+    color: "var(--chart-1)",
   },
   safari: {
     label: "Safari",
-    color: "hsl(var(--chart-2))",
+    color: "var(--chart-2)",
   },
 } satisfies ChartConfig
 ```
@@ -556,11 +556,11 @@ const chartData = [
 const chartConfig = {
   chrome: {
     label: "Chrome",
-    color: "hsl(var(--chart-1))",
+    color: "var(--chart-1)",
   },
   safari: {
     label: "Safari",
-    color: "hsl(var(--chart-2))",
+    color: "var(--chart-2)",
   },
 } satisfies ChartConfig
 ```
diff --git a/apps/v4/content/docs/components/radix/data-table.mdx b/apps/v4/content/docs/components/radix/data-table.mdx
index 0a417136d8..beea3c4fe3 100644
--- a/apps/v4/content/docs/components/radix/data-table.mdx
+++ b/apps/v4/content/docs/components/radix/data-table.mdx
@@ -827,7 +827,7 @@ This adds a checkbox to each row and a checkbox in the header to select all rows
 You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
 
 ```tsx
-<div className="text-muted-foreground flex-1 text-sm">
+<div className="flex-1 text-sm text-muted-foreground">
   {table.getFilteredSelectedRowModel().rows.length} of{" "}
   {table.getFilteredRowModel().rows.length} row(s) selected.
 </div>
diff --git a/apps/v4/content/docs/components/radix/date-picker.mdx b/apps/v4/content/docs/components/radix/date-picker.mdx
index 5be14cd6c2..20ac0cc5f3 100644
--- a/apps/v4/content/docs/components/radix/date-picker.mdx
+++ b/apps/v4/content/docs/components/radix/date-picker.mdx
@@ -40,7 +40,7 @@ export function DatePickerDemo() {
         <Button
           variant="outline"
           data-empty={!date}
-          className="data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal"
+          className="w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground"
         >
           <CalendarIcon />
           {date ? format(date, "PPP") : <span>Pick a date</span>}
diff --git a/apps/v4/content/docs/components/radix/native-select.mdx b/apps/v4/content/docs/components/radix/native-select.mdx
index 1b8a7a45f0..3b16d3e7d4 100644
--- a/apps/v4/content/docs/components/radix/native-select.mdx
+++ b/apps/v4/content/docs/components/radix/native-select.mdx
@@ -7,7 +7,7 @@ component: true
 
 import { InfoIcon } from "lucide-react"
 
-<Callout variant="info" icon={<InfoIcon className="!translate-y-[3px]" />}>
+<Callout variant="info" icon={<InfoIcon className="translate-y-[3px]!" />}>
   For a styled select component, see the [Select](/docs/components/select)
   component.
 </Callout>
diff --git a/apps/v4/content/docs/components/radix/typography.mdx b/apps/v4/content/docs/components/radix/typography.mdx
index d22e43661e..42fe911924 100644
--- a/apps/v4/content/docs/components/radix/typography.mdx
+++ b/apps/v4/content/docs/components/radix/typography.mdx
@@ -10,7 +10,7 @@ We do not ship any typography styles by default. This page is an example of how
 <ComponentPreview
   styleName="radix-nova"
   name="typography-demo"
-  className="[&_.preview]:!h-auto"
+  className="[&_.preview]:h-auto!"
   hideCode
 />
 
@@ -74,5 +74,5 @@ To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl)
   styleName="radix-nova"
   name="typography-rtl"
   direction="rtl"
-  className="[&_.preview]:!h-auto"
+  className="[&_.preview]:h-auto!"
 />
diff --git a/apps/v4/content/docs/forms/index.mdx b/apps/v4/content/docs/forms/index.mdx
index e202e0f139..93ffda24fa 100644
--- a/apps/v4/content/docs/forms/index.mdx
+++ b/apps/v4/content/docs/forms/index.mdx
@@ -37,6 +37,6 @@ Start by selecting your framework. Then follow the instructions to learn how to
       <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
     </svg>
     <p className="mt-2 font-medium">useActionState</p>
-    <p className="text-muted-foreground mt-1 text-xs">(Coming Soon)</p>
+    <p className="mt-1 text-xs text-muted-foreground">(Coming Soon)</p>
   </LinkedCard>
 </div>
diff --git a/apps/v4/content/docs/forms/next.mdx b/apps/v4/content/docs/forms/next.mdx
index 554114e505..03974285e8 100644
--- a/apps/v4/content/docs/forms/next.mdx
+++ b/apps/v4/content/docs/forms/next.mdx
@@ -13,7 +13,7 @@ We are going to build the following form with a simple text input and a textarea
 
 <ComponentPreview
   name="form-next-demo"
-  className="[&_.preview]:h-[700px] [&_pre]:!h-[700px]"
+  className="[&_.preview]:h-[700px] [&_pre]:h-[700px]!"
 />
 
 <Callout icon={<InfoIcon />}>
@@ -371,7 +371,7 @@ Here is an example of a more complex form with multiple fields and validation.
 
 <ComponentPreview
   name="form-next-complex"
-  className="[&_.preview]:h-[1100px] [&_pre]:!h-[1100px]"
+  className="[&_.preview]:h-[1100px] [&_pre]:h-[1100px]!"
   hideCode
 />
 
diff --git a/apps/v4/content/docs/installation/astro.mdx b/apps/v4/content/docs/installation/astro.mdx
index 40d306bbe3..d760b550ed 100644
--- a/apps/v4/content/docs/installation/astro.mdx
+++ b/apps/v4/content/docs/installation/astro.mdx
@@ -3,6 +3,12 @@ title: Astro
 description: Install and configure shadcn/ui for Astro
 ---
 
+<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
+
+**Starting a new project?** Use [shadcn/create](/create) for a fully configured Astro app with custom themes, Base UI or Radix, and icon libraries.
+
+</Callout>
+
 <Steps>
 
 ### Create project
@@ -10,34 +16,13 @@ description: Install and configure shadcn/ui for Astro
 Start by creating a new Astro project:
 
 ```bash
-npx create-astro@latest astro-app  --template with-tailwindcss --install --add react --git
+npx shadcn@latest init -t astro
 ```
 
-### Edit tsconfig.json file
-
-Add the following code to the `tsconfig.json` file to resolve paths:
-
-```ts title="tsconfig.json" {4-9} showLineNumbers
-{
-  "compilerOptions": {
-    // ...
-    "baseUrl": ".",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-    // ...
-  }
-}
-```
-
-### Run the CLI
-
-Run the `shadcn` init command to setup your project:
+**For a monorepo project, use `--monorepo` flag:**
 
 ```bash
-npx shadcn@latest init
+npx shadcn@latest init -t astro --monorepo
 ```
 
 ### Add Components
@@ -65,7 +50,7 @@ import { Button } from "@/components/ui/button"
 	</head>
 
 	<body>
-		<div className="grid place-items-center h-screen content-center">
+		<div class="grid place-items-center h-screen content-center">
 			<Button>Button</Button>
 		</div>
 	</body>
diff --git a/apps/v4/content/docs/installation/gatsby.mdx b/apps/v4/content/docs/installation/gatsby.mdx
index 3b7d53fcae..49828109ab 100644
--- a/apps/v4/content/docs/installation/gatsby.mdx
+++ b/apps/v4/content/docs/installation/gatsby.mdx
@@ -4,9 +4,8 @@ description: Install and configure Gatsby.
 ---
 
 <Callout className="mb-6 border-blue-600 bg-blue-50 dark:border-blue-900 dark:bg-blue-950 [&_code]:bg-blue-100 dark:[&_code]:bg-blue-900">
-  **Update:** We have added full support for React 19 and Tailwind v4 in the
-  `canary` release. See the docs for [Tailwind v4](/docs/tailwind-v4) for more
-  information.
+  **Note:** This guide is for Gatsby with Tailwind CSS v3. For new projects, we
+  recommend using one of the other frameworks that support Tailwind CSS v4.
 </Callout>
 
 <Steps>
@@ -85,22 +84,6 @@ Run the `shadcn` init command to setup your project:
 npx shadcn@latest init
 ```
 
-### Configure components.json
-
-You will be asked a few questions to configure `components.json`:
-
-```txt showLineNumbers
-Would you like to use TypeScript (recommended)? no / yes
-Which style would you like to use? › Default
-Which color would you like to use as base color? › Slate
-Where is your global CSS file? › › ./src/styles/globals.css
-Do you want to use CSS variables for colors? › no / yes
-Where is your tailwind.config.js located? › tailwind.config.js
-Configure the import alias for components: › @/components
-Configure the import alias for utils: › @/lib/utils
-Are you using React Server Components? › no
-```
-
 ### That's it
 
 You can now start adding components to your project.
diff --git a/apps/v4/content/docs/installation/index.mdx b/apps/v4/content/docs/installation/index.mdx
index a69a00a8ce..781dfd871a 100644
--- a/apps/v4/content/docs/installation/index.mdx
+++ b/apps/v4/content/docs/installation/index.mdx
@@ -5,7 +5,7 @@ description: How to install dependencies and structure your app.
 
 <Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
 
-**Starting a new project?** Use [shadcn/create](/create) to scaffold a complete app with custom themes, components, and presets. Works with Next.js, Vite, and TanStack Start.
+**Starting a new project?** Use [shadcn/create](/create) to scaffold a complete app with custom themes, components, and presets. For Next.js, Vite, Laravel, React Router, Astro, and TanStack Start.
 
 </Callout>
 
@@ -14,7 +14,7 @@ description: How to install dependencies and structure your app.
 Run the following command to create a new project with shadcn/ui:
 
 ```bash
-npx shadcn@latest create
+npx shadcn@latest init
 ```
 
 This will guide you through the process of creating a new project with shadcn/ui with your preferred framework, icon library, and theme.
@@ -50,67 +50,57 @@ Start by selecting your framework of choice. Then follow the instructions to ins
     </svg>
     <p className="mt-2 font-medium">Vite</p>
   </LinkedCard>
-  <LinkedCard href="/docs/installation/laravel">
-    <svg
-      role="img"
-      viewBox="0 0 62 65"
+
+<LinkedCard href="/docs/installation/tanstack">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className="h-10 w-10"
+    fill="currentColor"
+  >
+    <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
+  </svg>
+  <p className="mt-2 font-medium">TanStack Start</p>
+</LinkedCard>
+<LinkedCard href="/docs/installation/laravel">
+  <svg
+    role="img"
+    viewBox="0 0 62 65"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-10 w-10"
+  >
+    <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" />
+  </svg>
+  <p className="mt-2 font-medium">Laravel</p>
+</LinkedCard>
+<LinkedCard href="/docs/installation/react-router">
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    className="h-10 w-10"
+    fill="currentColor"
+  >
+    <path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" />
+  </svg>
+  <p className="mt-2 font-medium">React Router</p>
+</LinkedCard>
+<LinkedCard href="/docs/installation/astro">
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-10 w-10"
+    fill="currentColor"
+  >
+    <title>Astro</title>
+    <path
+      d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z"
       fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-10 w-10"
-    >
-      <path d="M61.8548 14.6253C61.8778 14.7102 61.8895 14.7978 61.8897 14.8858V28.5615C61.8898 28.737 61.8434 28.9095 61.7554 29.0614C61.6675 29.2132 61.5409 29.3392 61.3887 29.4265L49.9104 36.0351V49.1337C49.9104 49.4902 49.7209 49.8192 49.4118 49.9987L25.4519 63.7916C25.3971 63.8227 25.3372 63.8427 25.2774 63.8639C25.255 63.8714 25.2338 63.8851 25.2101 63.8913C25.0426 63.9354 24.8666 63.9354 24.6991 63.8913C24.6716 63.8838 24.6467 63.8689 24.6205 63.8589C24.5657 63.8389 24.5084 63.8215 24.456 63.7916L0.501061 49.9987C0.348882 49.9113 0.222437 49.7853 0.134469 49.6334C0.0465019 49.4816 0.000120578 49.3092 0 49.1337L0 8.10652C0 8.01678 0.0124642 7.92953 0.0348998 7.84477C0.0423783 7.8161 0.0598282 7.78993 0.0697995 7.76126C0.0884958 7.70891 0.105946 7.65531 0.133367 7.6067C0.152063 7.5743 0.179485 7.54812 0.20192 7.51821C0.230588 7.47832 0.256763 7.43719 0.290416 7.40229C0.319084 7.37362 0.356476 7.35243 0.388883 7.32751C0.425029 7.29759 0.457436 7.26518 0.498568 7.2415L12.4779 0.345059C12.6296 0.257786 12.8015 0.211853 12.9765 0.211853C13.1515 0.211853 13.3234 0.257786 13.475 0.345059L25.4531 7.2415H25.4556C25.4955 7.26643 25.5292 7.29759 25.5653 7.32626C25.5977 7.35119 25.6339 7.37362 25.6625 7.40104C25.6974 7.43719 25.7224 7.47832 25.7523 7.51821C25.7735 7.54812 25.8021 7.5743 25.8196 7.6067C25.8483 7.65656 25.8645 7.70891 25.8844 7.76126C25.8944 7.78993 25.9118 7.8161 25.9193 7.84602C25.9423 7.93096 25.954 8.01853 25.9542 8.10652V33.7317L35.9355 27.9844V14.8846C35.9355 14.7973 35.948 14.7088 35.9704 14.6253C35.9792 14.5954 35.9954 14.5692 36.0053 14.5405C36.0253 14.4882 36.0427 14.4346 36.0702 14.386C36.0888 14.3536 36.1163 14.3274 36.1375 14.2975C36.1674 14.2576 36.1923 14.2165 36.2272 14.1816C36.2559 14.1529 36.292 14.1317 36.3244 14.1068C36.3618 14.0769 36.3942 14.0445 36.4341 14.0208L48.4147 7.12434C48.5663 7.03694 48.7383 6.99094 48.9133 6.99094C49.0883 6.99094 49.2602 7.03694 49.4118 7.12434L61.3899 14.0208C61.4323 14.0457 61.4647 14.0769 61.5021 14.1055C61.5333 14.1305 61.5694 14.1529 61.5981 14.1803C61.633 14.2165 61.6579 14.2576 61.6878 14.2975C61.7103 14.3274 61.7377 14.3536 61.7551 14.386C61.7838 14.4346 61.8 14.4882 61.8199 14.5405C61.8312 14.5692 61.8474 14.5954 61.8548 14.6253ZM59.893 27.9844V16.6121L55.7013 19.0252L49.9104 22.3593V33.7317L59.8942 27.9844H59.893ZM47.9149 48.5566V37.1768L42.2187 40.4299L25.953 49.7133V61.2003L47.9149 48.5566ZM1.99677 9.83281V48.5566L23.9562 61.199V49.7145L12.4841 43.2219L12.4804 43.2194L12.4754 43.2169C12.4368 43.1945 12.4044 43.1621 12.3682 43.1347C12.3371 43.1097 12.3009 43.0898 12.2735 43.0624L12.271 43.0586C12.2386 43.0275 12.2162 42.9888 12.1887 42.9539C12.1638 42.9203 12.1339 42.8916 12.114 42.8567L12.1127 42.853C12.0903 42.8156 12.0766 42.7707 12.0604 42.7283C12.0442 42.6909 12.023 42.656 12.013 42.6161C12.0005 42.5688 11.998 42.5177 11.9931 42.4691C11.9881 42.4317 11.9781 42.3943 11.9781 42.3569V15.5801L6.18848 12.2446L1.99677 9.83281ZM12.9777 2.36177L2.99764 8.10652L12.9752 13.8513L22.9541 8.10527L12.9752 2.36177H12.9777ZM18.1678 38.2138L23.9574 34.8809V9.83281L19.7657 12.2459L13.9749 15.5801V40.6281L18.1678 38.2138ZM48.9133 9.14105L38.9344 14.8858L48.9133 20.6305L58.8909 14.8846L48.9133 9.14105ZM47.9149 22.3593L42.124 19.0252L37.9323 16.6121V27.9844L43.7219 31.3174L47.9149 33.7317V22.3593ZM24.9533 47.987L39.59 39.631L46.9065 35.4555L36.9352 29.7145L25.4544 36.3242L14.9907 42.3482L24.9533 47.987Z" />
-    </svg>
-    <p className="mt-2 font-medium">Laravel</p>
-  </LinkedCard>
-  <LinkedCard href="/docs/installation/react-router">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      className="h-10 w-10"
-      fill="currentColor"
-    >
-      <path d="M12.118 5.466a2.306 2.306 0 0 0-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 0 0-1.613-.73zm-4.785 4.36a2.145 2.145 0 0 0-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 0 0-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" />
-    </svg>
-    <p className="mt-2 font-medium">React Router</p>
-  </LinkedCard>
-  <LinkedCard href="/docs/installation/astro">
-    <svg
-      role="img"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      className="h-10 w-10"
-      fill="currentColor"
-    >
-      <title>Astro</title>
-      <path
-        d="M16.074 16.86C15.354 17.476 13.917 17.895 12.262 17.895C10.23 17.895 8.527 17.263 8.075 16.412C7.914 16.9 7.877 17.458 7.877 17.814C7.877 17.814 7.771 19.564 8.988 20.782C8.988 20.15 9.501 19.637 10.133 19.637C11.216 19.637 11.215 20.582 11.214 21.349V21.418C11.214 22.582 11.925 23.579 12.937 24C12.7812 23.6794 12.7005 23.3275 12.701 22.971C12.701 21.861 13.353 21.448 14.111 20.968C14.713 20.585 15.383 20.161 15.844 19.308C16.0926 18.8493 16.2225 18.3357 16.222 17.814C16.2221 17.4903 16.1722 17.1685 16.074 16.86ZM15.551 0.6C15.747 0.844 15.847 1.172 16.047 1.829L20.415 16.176C18.7743 15.3246 17.0134 14.7284 15.193 14.408L12.35 4.8C12.3273 4.72337 12.2803 4.65616 12.2162 4.60844C12.152 4.56072 12.0742 4.53505 11.9943 4.53528C11.9143 4.5355 11.8366 4.56161 11.7727 4.60969C11.7089 4.65777 11.6623 4.72524 11.64 4.802L8.83 14.405C7.00149 14.724 5.23264 15.3213 3.585 16.176L7.974 1.827C8.174 1.171 8.274 0.843 8.471 0.6C8.64406 0.385433 8.86922 0.218799 9.125 0.116C9.415 0 9.757 0 10.443 0H13.578C14.264 0 14.608 0 14.898 0.117C15.1529 0.219851 15.3783 0.386105 15.551 0.6Z"
-        fill="currentColor"
-      />
-    </svg>
-    <p className="mt-2 font-medium">Astro</p>
-  </LinkedCard>
-  <LinkedCard href="/docs/installation/tanstack">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      className="h-10 w-10"
-      fill="currentColor"
-    >
-      <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
-    </svg>
-    <p className="mt-2 font-medium">TanStack Start</p>
-  </LinkedCard>
-  <LinkedCard href="/docs/installation/tanstack-router">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      className="h-10 w-10"
-      fill="currentColor"
-    >
-      <path d="M6.93 13.688a.343.343 0 0 1 .468.132l.063.106c.48.851.98 1.66 1.5 2.426a35.65 35.65 0 0 0 2.074 2.742.345.345 0 0 1-.039.484l-.074.066c-2.543 2.223-4.191 2.665-4.953 1.333-.746-1.305-.477-3.672.808-7.11a.344.344 0 0 1 .153-.18ZM17.75 16.3a.34.34 0 0 1 .395.27l.02.1c.628 3.286.187 4.93-1.325 4.93-1.48 0-3.36-1.402-5.649-4.203a.327.327 0 0 1-.074-.222c0-.188.156-.34.344-.34h.121a32.984 32.984 0 0 0 2.809-.098c1.07-.086 2.191-.23 3.359-.437zm.871-6.977a.353.353 0 0 1 .445-.21l.102.034c3.262 1.11 4.504 2.332 3.719 3.664-.766 1.305-2.993 2.254-6.684 2.848a.362.362 0 0 1-.238-.047.343.343 0 0 1-.125-.476l.062-.106a34.07 34.07 0 0 0 1.367-2.523c.477-.989.93-2.051 1.352-3.184zM7.797 8.34a.362.362 0 0 1 .238.047.343.343 0 0 1 .125.476l-.062.106a34.088 34.088 0 0 0-1.367 2.523c-.477.988-.93 2.051-1.352 3.184a.353.353 0 0 1-.445.21l-.102-.034C1.57 13.742.328 12.52 1.113 11.188 1.88 9.883 4.106 8.934 7.797 8.34Zm5.281-3.984c2.543-2.223 4.192-2.664 4.953-1.332.746 1.304.477 3.671-.808 7.109a.344.344 0 0 1-.153.18.343.343 0 0 1-.468-.133l-.063-.106a34.64 34.64 0 0 0-1.5-2.426 35.65 35.65 0 0 0-2.074-2.742.345.345 0 0 1 .039-.484ZM7.285 2.274c1.48 0 3.364 1.402 5.649 4.203a.349.349 0 0 1 .078.218.348.348 0 0 1-.348.344l-.117-.004a34.584 34.584 0 0 0-2.809.102 35.54 35.54 0 0 0-3.363.437.343.343 0 0 1-.394-.273l-.02-.098c-.629-3.285-.188-4.93 1.324-4.93Zm2.871 5.812h3.688a.638.638 0 0 1 .55.316l1.848 3.22a.644.644 0 0 1 0 .628l-1.847 3.223a.638.638 0 0 1-.551.316h-3.688a.627.627 0 0 1-.547-.316L7.758 12.25a.644.644 0 0 1 0-.629L9.61 8.402a.627.627 0 0 1 .546-.316Zm3.23.793a.638.638 0 0 1 .552.316l1.39 2.426a.644.644 0 0 1 0 .629l-1.39 2.43a.638.638 0 0 1-.551.316h-2.774a.627.627 0 0 1-.546-.316l-1.395-2.43a.644.644 0 0 1 0-.629l1.395-2.426a.627.627 0 0 1 .546-.316Zm-.491.867h-1.79a.624.624 0 0 0-.546.316l-.899 1.56a.644.644 0 0 0 0 .628l.899 1.563a.632.632 0 0 0 .547.316h1.789a.632.632 0 0 0 .547-.316l.898-1.563a.644.644 0 0 0 0-.629l-.898-1.558a.624.624 0 0 0-.547-.317Zm-.477.828c.227 0 .438.121.547.317l.422.73a.625.625 0 0 1 0 .629l-.422.734a.627.627 0 0 1-.547.317h-.836a.632.632 0 0 1-.547-.317l-.422-.734a.625.625 0 0 1 0-.629l.422-.73a.632.632 0 0 1 .547-.317zm-.418.817a.548.548 0 0 0-.473.273.547.547 0 0 0 0 .547.544.544 0 0 0 .473.27.544.544 0 0 0 .473-.27.547.547 0 0 0 0-.547.548.548 0 0 0-.473-.273Zm-4.422.546h.98M18.98 7.75c.391-1.895.477-3.344.223-4.398-.148-.63-.422-1.137-.84-1.508-.441-.39-1-.582-1.625-.582-1.035 0-2.12.472-3.281 1.367a14.9 14.9 0 0 0-1.473 1.316 1.206 1.206 0 0 0-.136-.144c-1.446-1.285-2.66-2.082-3.7-2.39-.617-.184-1.195-.2-1.722-.024-.559.187-1.004.574-1.317 1.117-.515.894-.652 2.074-.46 3.527.078.59.214 1.235.402 1.934a1.119 1.119 0 0 0-.215.047C3.008 8.62 1.71 9.269.926 10.015c-.465.442-.77.938-.883 1.481-.113.578 0 1.156.312 1.7.516.894 1.465 1.597 2.817 2.155.543.223 1.156.426 1.844.61a1.023 1.023 0 0 0-.07.226c-.391 1.891-.477 3.344-.223 4.395.148.629.425 1.14.84 1.508.44.39 1 .582 1.625.582 1.035 0 2.12-.473 3.28-1.364.477-.37.973-.816 1.489-1.336a1.2 1.2 0 0 0 .195.227c1.446 1.285 2.66 2.082 3.7 2.39.617.184 1.195.2 1.722.024.559-.187 1.004-.574 1.317-1.117.515-.894.652-2.074.46-3.527a14.941 14.941 0 0 0-.425-2.012 1.225 1.225 0 0 0 .238-.047c1.828-.61 3.125-1.258 3.91-2.004.465-.441.77-.937.883-1.48.113-.578 0-1.157-.313-1.7-.515-.894-1.464-1.597-2.816-2.156a14.576 14.576 0 0 0-1.906-.625.865.865 0 0 0 .059-.195z" />
-    </svg>
-    <p className="mt-2 font-medium">TanStack Router</p>
-  </LinkedCard>
+    />
+  </svg>
+  <p className="mt-2 font-medium">Astro</p>
+</LinkedCard>
   <LinkedCard href="/docs/installation/manual">
     <svg
       role="img"
diff --git a/apps/v4/content/docs/installation/laravel.mdx b/apps/v4/content/docs/installation/laravel.mdx
index 8f9b8ea30a..b74aa59346 100644
--- a/apps/v4/content/docs/installation/laravel.mdx
+++ b/apps/v4/content/docs/installation/laravel.mdx
@@ -3,16 +3,32 @@ title: Laravel
 description: Install and configure shadcn/ui for Laravel
 ---
 
+<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
+
+**Starting a new project?** Use [shadcn/create](/create) for a fully configured Laravel app with custom themes, Base UI or Radix, and icon libraries.
+
+</Callout>
+
 <Steps>
 
-### Create project
+### Create Project
 
-Start by creating a new Laravel project with Inertia and React using the laravel installer `laravel new my-app`:
+Start by creating a new Laravel project with Inertia and React using the laravel installer:
 
 ```bash
 laravel new my-app --react
 ```
 
+### Run the shadcn/ui CLI
+
+Run the `init` command to configure shadcn/ui in your Laravel project:
+
+```bash
+npx shadcn@latest init --force
+```
+
+If asked to overwrite the existing components, answer `y` to continue.
+
 ### Add Components
 
 You can now start adding components to your project.
diff --git a/apps/v4/content/docs/installation/manual.mdx b/apps/v4/content/docs/installation/manual.mdx
index f6b5451357..3d338fe1c8 100644
--- a/apps/v4/content/docs/installation/manual.mdx
+++ b/apps/v4/content/docs/installation/manual.mdx
@@ -74,10 +74,13 @@ Add the following to your styles/globals.css file. You can learn more about usin
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
diff --git a/apps/v4/content/docs/installation/next.mdx b/apps/v4/content/docs/installation/next.mdx
index 8679b8078b..0df231b20c 100644
--- a/apps/v4/content/docs/installation/next.mdx
+++ b/apps/v4/content/docs/installation/next.mdx
@@ -16,10 +16,14 @@ description: Install and configure shadcn/ui for Next.js.
 Run the `init` command to create a new Next.js project or to setup an existing one:
 
 ```bash
-npx shadcn@latest init
+npx shadcn@latest init -t next
 ```
 
-Choose between a Next.js project or a Monorepo.
+**For a monorepo project, use `--monorepo` flag:**
+
+```bash
+npx shadcn@latest init -t next --monorepo
+```
 
 ### Add Components
 
diff --git a/apps/v4/content/docs/installation/react-router.mdx b/apps/v4/content/docs/installation/react-router.mdx
index f296cdeae8..2c6eb4ac39 100644
--- a/apps/v4/content/docs/installation/react-router.mdx
+++ b/apps/v4/content/docs/installation/react-router.mdx
@@ -3,20 +3,24 @@ title: React Router
 description: Install and configure shadcn/ui for React Router.
 ---
 
+<Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
+
+**Starting a new project?** Use [shadcn/create](/create) for a fully configured React Router app with custom themes, Base UI or Radix, and icon libraries.
+
+</Callout>
+
 <Steps>
 
 ### Create project
 
 ```bash
-npx create-react-router@latest my-app
+npx shadcn@latest init -t react-router
 ```
 
-### Run the CLI
-
-Run the `shadcn` init command to setup your project:
+**For a monorepo project, use `--monorepo` flag:**
 
 ```bash
-npx shadcn@latest init
+npx shadcn@latest init -t react-router --monorepo
 ```
 
 ### Add Components
@@ -30,7 +34,7 @@ npx shadcn@latest add button
 The command above will add the `Button` component to your project. You can then import it like this:
 
 ```tsx showLineNumbers title="app/routes/home.tsx"
-import { Button } from "~/components/ui/button"
+import { Button } from "@/components/ui/button"
 
 import type { Route } from "./+types/home"
 
diff --git a/apps/v4/content/docs/installation/remix.mdx b/apps/v4/content/docs/installation/remix.mdx
index fb11248de1..cad10579ce 100644
--- a/apps/v4/content/docs/installation/remix.mdx
+++ b/apps/v4/content/docs/installation/remix.mdx
@@ -27,69 +27,6 @@ Run the `shadcn` init command to setup your project:
 npx shadcn@latest init
 ```
 
-### Configure components.json
-
-You will be asked a few questions to configure `components.json`:
-
-```bash
-Which color would you like to use as base color? › Neutral
-```
-
-### App structure
-
-<Callout>
-
-**Note**: This app structure is only a suggestion. You can place the files wherever you want.
-
-</Callout>
-
-- Place the UI components in the `app/components/ui` folder.
-- Your own components can be placed in the `app/components` folder.
-- The `app/lib` folder contains all the utility functions. We have a `utils.ts` where we define the `cn` helper.
-- The `app/tailwind.css` file contains the global CSS.
-
-### Install Tailwind CSS
-
-```bash
-npm install -D tailwindcss@latest autoprefixer@latest
-```
-
-Then we create a `postcss.config.js` file:
-
-```js title="postcss.config.js" showLineNumbers
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
-```
-
-And finally we add the following to our `remix.config.js` file:
-
-```js title="remix.config.js" {4-5} showLineNumbers
-/** @type {import('@remix-run/dev').AppConfig} */
-export default {
-  ...
-  tailwind: true,
-  postcss: true,
-  ...
-};
-```
-
-### Add `tailwind.css` to your app
-
-In your `app/root.tsx` file, import the `tailwind.css` file:
-
-```js {1, 4} showLineNumbers title="app/root.tsx"
-import styles from "./tailwind.css?url"
-
-export const links: LinksFunction = () => [
-  { rel: "stylesheet", href: styles },
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
-]
-```
-
 ### That's it
 
 You can now start adding components to your project.
diff --git a/apps/v4/content/docs/installation/tanstack.mdx b/apps/v4/content/docs/installation/tanstack.mdx
index a236b552a1..e5f63ee5be 100644
--- a/apps/v4/content/docs/installation/tanstack.mdx
+++ b/apps/v4/content/docs/installation/tanstack.mdx
@@ -5,7 +5,7 @@ description: Install and configure shadcn/ui for TanStack Start.
 
 <Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
 
-**Want custom themes?** Use [shadcn/create](/create) for an interactive setup with custom themes, icon libraries, and presets.
+**Starting a new project?** Use [shadcn/create](/create) for a fully configured TanStack Start app with custom themes, Base UI or Radix, and icon libraries.
 
 </Callout>
 
@@ -16,7 +16,13 @@ description: Install and configure shadcn/ui for TanStack Start.
 Run the following command to create a new TanStack Start project with shadcn/ui:
 
 ```bash
-npm create @tanstack/start@latest --tailwind --add-ons shadcn
+npx shadcn@latest init -t tanstack
+```
+
+**For a monorepo project, use `--monorepo` flag:**
+
+```bash
+npx shadcn@latest init -t tanstack --monorepo
 ```
 
 ### Add Components
@@ -42,9 +48,3 @@ function App() {
 ```
 
 </Steps>
-
-If you want to add all `shadcn/ui` components, you can run the following command:
-
-```bash
-npx shadcn@latest add --all
-```
diff --git a/apps/v4/content/docs/installation/vite.mdx b/apps/v4/content/docs/installation/vite.mdx
index d450df15cd..042dd7958b 100644
--- a/apps/v4/content/docs/installation/vite.mdx
+++ b/apps/v4/content/docs/installation/vite.mdx
@@ -5,114 +5,24 @@ description: Install and configure shadcn/ui for Vite.
 
 <Callout className="mb-6 border-emerald-600 bg-emerald-100 dark:border-emerald-400 dark:bg-emerald-900">
 
-**Starting fresh?** Use [shadcn/create](/create) to save time. It handles Tailwind, TypeScript, and path alias configuration for you, plus custom themes and presets.
+**Starting fresh?** Use [shadcn/create](/create) to configure a Vite project with custom themes, Base UI or Radix, and icon libraries.
 
 </Callout>
 
 <Steps>
 
-### Create project
+### Create Project
 
-Start by creating a new React project using `vite`. Select the **React + TypeScript** template:
+Run the `init` command to create a new Vite project or to setup an existing one:
 
 ```bash
-npm create vite@latest
+npx shadcn@latest init -t vite
 ```
 
-### Add Tailwind CSS
+**For a monorepo project, use `--monorepo` flag:**
 
 ```bash
-npm install tailwindcss @tailwindcss/vite
-```
-
-Replace everything in `src/index.css` with the following:
-
-```css title="src/index.css"
-@import "tailwindcss";
-```
-
-### Edit tsconfig.json file
-
-The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.
-Add the `baseUrl` and `paths` properties to the `compilerOptions` section of the `tsconfig.json` and
-`tsconfig.app.json` files:
-
-```ts title="tsconfig.json" {11-16} showLineNumbers
-{
-  "files": [],
-  "references": [
-    {
-      "path": "./tsconfig.app.json"
-    },
-    {
-      "path": "./tsconfig.node.json"
-    }
-  ],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  }
-}
-```
-
-### Edit tsconfig.app.json file
-
-Add the following code to the `tsconfig.app.json` file to resolve paths, for your IDE:
-
-```ts title="tsconfig.app.json" {4-9} showLineNumbers
-{
-  "compilerOptions": {
-    // ...
-    "baseUrl": ".",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-    // ...
-  }
-}
-```
-
-### Update vite.config.ts
-
-Add the following code to the vite.config.ts so your app can resolve paths without error:
-
-```bash
-npm install -D @types/node
-```
-
-```typescript title="vite.config.ts" showLineNumbers {1,2,8-13}
-import path from "path"
-import tailwindcss from "@tailwindcss/vite"
-import react from "@vitejs/plugin-react"
-import { defineConfig } from "vite"
-
-// https://vite.dev/config/
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src"),
-    },
-  },
-})
-```
-
-### Run the CLI
-
-Run the `shadcn` init command to setup your project:
-
-```bash
-npx shadcn@latest init
-```
-
-You will be asked a few questions to configure `components.json`.
-
-```txt
-Which color would you like to use as base color? › Neutral
+npx shadcn@latest init -t vite --monorepo
 ```
 
 ### Add Components
@@ -125,18 +35,16 @@ npx shadcn@latest add button
 
 The command above will add the `Button` component to your project. You can then import it like this:
 
-```tsx showLineNumbers title="src/App.tsx"
+```tsx {1,6} showLineNumbers title="src/App.tsx"
 import { Button } from "@/components/ui/button"
 
-function App() {
+export default function Home() {
   return (
-    <div className="flex min-h-svh flex-col items-center justify-center">
+    <div>
       <Button>Click me</Button>
     </div>
   )
 }
-
-export default App
 ```
 
 </Steps>
diff --git a/apps/v4/content/docs/registry/examples.mdx b/apps/v4/content/docs/registry/examples.mdx
index 8588a518d7..bbd58686ef 100644
--- a/apps/v4/content/docs/registry/examples.mdx
+++ b/apps/v4/content/docs/registry/examples.mdx
@@ -195,6 +195,368 @@ On `npx shadcn add`, the following will:
 }
 ```
 
+## registry:ui
+
+### UI component
+
+A `registry:ui` item is a reusable UI component. It can have dependencies, registry dependencies, and CSS variables.
+
+```json title="button.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "button",
+  "type": "registry:ui",
+  "dependencies": ["radix-ui"],
+  "files": [
+    {
+      "path": "ui/button.tsx",
+      "content": "...",
+      "type": "registry:ui"
+    }
+  ]
+}
+```
+
+### UI component with CSS variables
+
+```json title="sidebar.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "sidebar",
+  "type": "registry:ui",
+  "dependencies": ["radix-ui"],
+  "registryDependencies": ["button", "separator", "sheet", "tooltip"],
+  "files": [
+    {
+      "path": "ui/sidebar.tsx",
+      "content": "...",
+      "type": "registry:ui"
+    }
+  ],
+  "cssVars": {
+    "light": {
+      "sidebar-background": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+      "sidebar-border": "oklch(0.92 0.004 286.32)"
+    },
+    "dark": {
+      "sidebar-background": "oklch(0.141 0.005 285.823)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(0.274 0.006 286.033)"
+    }
+  }
+}
+```
+
+## registry:lib
+
+### Utility library
+
+A `registry:lib` item is a utility library. Use it to share helper functions, constants, or other non-component code.
+
+```json title="utils.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "utils",
+  "type": "registry:lib",
+  "dependencies": ["clsx", "tailwind-merge"],
+  "files": [
+    {
+      "path": "lib/utils.ts",
+      "content": "import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}",
+      "type": "registry:lib"
+    }
+  ]
+}
+```
+
+## registry:hook
+
+### Custom hook
+
+A `registry:hook` item is a custom React hook.
+
+```json title="use-mobile.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-mobile",
+  "type": "registry:hook",
+  "files": [
+    {
+      "path": "hooks/use-mobile.ts",
+      "content": "...",
+      "type": "registry:hook"
+    }
+  ]
+}
+```
+
+### Hook with dependencies
+
+```json title="use-debounce.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "use-debounce",
+  "type": "registry:hook",
+  "dependencies": ["react"],
+  "files": [
+    {
+      "path": "hooks/use-debounce.ts",
+      "content": "...",
+      "type": "registry:hook"
+    }
+  ]
+}
+```
+
+## registry:font
+
+### Custom font
+
+A `registry:font` item installs a Google Font. The `font` field is required and configures the font family, provider, import name, and CSS variable.
+
+```json title="font-inter.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-inter",
+  "type": "registry:font",
+  "font": {
+    "family": "'Inter Variable', sans-serif",
+    "provider": "google",
+    "import": "Inter",
+    "variable": "--font-sans",
+    "subsets": ["latin"]
+  }
+}
+```
+
+### Monospace font
+
+```json title="font-jetbrains-mono.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-jetbrains-mono",
+  "type": "registry:font",
+  "font": {
+    "family": "'JetBrains Mono Variable', monospace",
+    "provider": "google",
+    "import": "JetBrains_Mono",
+    "variable": "--font-mono",
+    "weight": ["400", "500", "600", "700"],
+    "subsets": ["latin"]
+  }
+}
+```
+
+### Serif font
+
+```json title="font-lora.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-lora",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-serif",
+    "subsets": ["latin"]
+  }
+}
+```
+
+### Font with custom selector
+
+Use the `selector` field to apply a font to specific CSS selectors instead of globally on `html`. This is useful for heading fonts or other targeted font applications.
+
+```json title="font-playfair-display.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-heading",
+    "subsets": ["latin"],
+    "selector": "h1, h2, h3, h4, h5, h6"
+  }
+}
+```
+
+When `selector` is set, the font utility class (e.g. `font-heading`) is applied via CSS `@apply` on the specified selector within `@layer base`, instead of being added to the `<html>` element. The CSS variable is still injected on `<html>` so it's available globally.
+
+## registry:base
+
+### Custom base
+
+A `registry:base` item is a complete design system base. It defines the full set of dependencies, CSS variables, and configuration for a project. The `config` field is unique to `registry:base` items.
+
+The `config` field accepts the following properties (all optional):
+
+| Property             | Type                               | Description                                                     |
+| -------------------- | ---------------------------------- | --------------------------------------------------------------- |
+| `style`              | `string`                           | The style name for the base.                                    |
+| `iconLibrary`        | `string`                           | The icon library to use (e.g. `lucide`).                        |
+| `rsc`                | `boolean`                          | Whether to enable React Server Components. Defaults to `false`. |
+| `tsx`                | `boolean`                          | Whether to use TypeScript. Defaults to `true`.                  |
+| `rtl`                | `boolean`                          | Whether to enable right-to-left support. Defaults to `false`.   |
+| `menuColor`          | `"default" \| "inverted"`          | The menu color scheme. Defaults to `"default"`.                 |
+| `menuAccent`         | `"subtle" \| "bold"`               | The menu accent style. Defaults to `"subtle"`.                  |
+| `tailwind.baseColor` | `string`                           | The base color name (e.g. `neutral`, `slate`, `zinc`).          |
+| `tailwind.css`       | `string`                           | Path to the Tailwind CSS file.                                  |
+| `tailwind.prefix`    | `string`                           | A prefix to add to all Tailwind classes.                        |
+| `aliases.components` | `string`                           | Import alias for components.                                    |
+| `aliases.utils`      | `string`                           | Import alias for utilities.                                     |
+| `aliases.ui`         | `string`                           | Import alias for UI components.                                 |
+| `aliases.lib`        | `string`                           | Import alias for lib.                                           |
+| `aliases.hooks`      | `string`                           | Import alias for hooks.                                         |
+| `registries`         | `Record<string, string \| object>` | Custom registry URLs. Keys must start with `@`.                 |
+
+```json title="custom-base.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-base",
+  "type": "registry:base",
+  "config": {
+    "style": "custom-base",
+    "iconLibrary": "lucide",
+    "tailwind": {
+      "baseColor": "neutral"
+    }
+  },
+  "dependencies": [
+    "class-variance-authority",
+    "tw-animate-css",
+    "lucide-react"
+  ],
+  "registryDependencies": ["utils", "font-inter"],
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.21 0.006 285.885)",
+      "primary-foreground": "oklch(0.985 0 0)"
+    },
+    "dark": {
+      "background": "oklch(0.141 0.005 285.823)",
+      "foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.985 0 0)",
+      "primary-foreground": "oklch(0.21 0.006 285.885)"
+    }
+  },
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  }
+}
+```
+
+### Base from scratch
+
+Use `extends: none` to create a base that doesn't extend shadcn/ui defaults.
+
+```json title="custom-base.json" showLineNumbers
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "my-design-system",
+  "extends": "none",
+  "type": "registry:base",
+  "config": {
+    "style": "my-design-system",
+    "iconLibrary": "lucide",
+    "tailwind": {
+      "baseColor": "slate"
+    }
+  },
+  "dependencies": ["tailwind-merge", "clsx", "tw-animate-css", "lucide-react"],
+  "registryDependencies": ["utils", "font-geist"],
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)"
+    },
+    "dark": {
+      "background": "oklch(0.141 0.005 285.823)",
+      "foreground": "oklch(0.985 0 0)"
+    }
+  }
+}
+```
+
+## Common Fields
+
+### Author
+
+Use the `author` field to add attribution to your registry items.
+
+```json title="example-item.json" showLineNumbers {5}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:ui",
+  "author": "shadcn",
+  "files": [
+    {
+      "path": "ui/custom-component.tsx",
+      "content": "...",
+      "type": "registry:ui"
+    }
+  ]
+}
+```
+
+### Dev dependencies
+
+Use the `devDependencies` field to install packages as dev dependencies.
+
+```json title="example-item.json" showLineNumbers {5}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-item",
+  "type": "registry:item",
+  "devDependencies": ["@types/mdx"],
+  "files": [
+    {
+      "path": "lib/mdx.ts",
+      "content": "...",
+      "type": "registry:lib"
+    }
+  ]
+}
+```
+
+### Metadata
+
+Use the `meta` field to attach arbitrary metadata to your registry items. This can be used to store custom data that your tools or scripts can use.
+
+```json title="example-item.json" showLineNumbers {5-8}
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "custom-component",
+  "type": "registry:ui",
+  "meta": {
+    "category": "forms",
+    "version": "2.0.0"
+  },
+  "files": [
+    {
+      "path": "ui/custom-component.tsx",
+      "content": "...",
+      "type": "registry:ui"
+    }
+  ]
+}
+```
+
 ## CSS Variables
 
 ### Custom Theme Variables
diff --git a/apps/v4/content/docs/registry/faq.mdx b/apps/v4/content/docs/registry/faq.mdx
index ea7ab24bba..2e1963caae 100644
--- a/apps/v4/content/docs/registry/faq.mdx
+++ b/apps/v4/content/docs/registry/faq.mdx
@@ -63,12 +63,12 @@ To add a new color you need to add it to `cssVars` under `light` and `dark` keys
   ],
   "cssVars": {
     "light": {
-      "brand-background": "20 14.3% 4.1%",
-      "brand-accent": "20 14.3% 4.1%"
+      "brand-background": "oklch(0.205 0.015 18)",
+      "brand-accent": "oklch(0.205 0.015 18)"
     },
     "dark": {
-      "brand-background": "20 14.3% 4.1%",
-      "brand-accent": "20 14.3% 4.1%"
+      "brand-background": "oklch(0.205 0.015 18)",
+      "brand-accent": "oklch(0.205 0.015 18)"
     }
   }
 }
diff --git a/apps/v4/content/docs/registry/registry-item-json.mdx b/apps/v4/content/docs/registry/registry-item-json.mdx
index 49cc117077..0b43e6846a 100644
--- a/apps/v4/content/docs/registry/registry-item-json.mdx
+++ b/apps/v4/content/docs/registry/registry-item-json.mdx
@@ -34,10 +34,10 @@ The `registry-item.json` schema is used to define your custom registry items.
       "font-heading": "Poppins, sans-serif"
     },
     "light": {
-      "brand": "20 14.3% 4.1%"
+      "brand": "oklch(0.205 0.015 18)"
     },
     "dark": {
-      "brand": "20 14.3% 4.1%"
+      "brand": "oklch(0.205 0.015 18)"
     }
   }
 }
diff --git a/apps/v4/examples/base/aspect-ratio-demo.tsx b/apps/v4/examples/base/aspect-ratio-demo.tsx
index 26fe477fd9..dd07b6f6cb 100644
--- a/apps/v4/examples/base/aspect-ratio-demo.tsx
+++ b/apps/v4/examples/base/aspect-ratio-demo.tsx
@@ -3,7 +3,7 @@ import { AspectRatio } from "@/examples/base/ui/aspect-ratio"
 
 export default function AspectRatioDemo() {
   return (
-    <AspectRatio ratio={16 / 9} className="bg-muted w-full max-w-sm rounded-lg">
+    <AspectRatio ratio={16 / 9} className="w-full max-w-sm rounded-lg bg-muted">
       <Image
         src="https://avatar.vercel.sh/shadcn1"
         alt="Photo"
diff --git a/apps/v4/examples/base/aspect-ratio-portrait.tsx b/apps/v4/examples/base/aspect-ratio-portrait.tsx
index 28e087d1ec..468f137fc7 100644
--- a/apps/v4/examples/base/aspect-ratio-portrait.tsx
+++ b/apps/v4/examples/base/aspect-ratio-portrait.tsx
@@ -5,7 +5,7 @@ export function AspectRatioPortrait() {
   return (
     <AspectRatio
       ratio={9 / 16}
-      className="bg-muted w-full max-w-[10rem] rounded-lg"
+      className="w-full max-w-[10rem] rounded-lg bg-muted"
     >
       <Image
         src="https://avatar.vercel.sh/shadcn1"
diff --git a/apps/v4/examples/base/aspect-ratio-rtl.tsx b/apps/v4/examples/base/aspect-ratio-rtl.tsx
index d503b32e27..cd65fc4010 100644
--- a/apps/v4/examples/base/aspect-ratio-rtl.tsx
+++ b/apps/v4/examples/base/aspect-ratio-rtl.tsx
@@ -35,7 +35,7 @@ export function AspectRatioRtl() {
 
   return (
     <figure className="w-full max-w-sm" dir={dir}>
-      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
@@ -43,7 +43,7 @@ export function AspectRatioRtl() {
           className="rounded-lg object-cover grayscale dark:brightness-20"
         />
       </AspectRatio>
-      <figcaption className="text-muted-foreground mt-2 text-center text-sm">
+      <figcaption className="mt-2 text-center text-sm text-muted-foreground">
         {t.caption}
       </figcaption>
     </figure>
diff --git a/apps/v4/examples/base/aspect-ratio-square.tsx b/apps/v4/examples/base/aspect-ratio-square.tsx
index 5c45f15ca4..56dab50eb6 100644
--- a/apps/v4/examples/base/aspect-ratio-square.tsx
+++ b/apps/v4/examples/base/aspect-ratio-square.tsx
@@ -5,7 +5,7 @@ export function AspectRatioSquare() {
   return (
     <AspectRatio
       ratio={1 / 1}
-      className="bg-muted w-full max-w-[12rem] rounded-lg"
+      className="w-full max-w-[12rem] rounded-lg bg-muted"
     >
       <Image
         src="https://avatar.vercel.sh/shadcn1"
diff --git a/apps/v4/examples/base/button-group-dropdown.tsx b/apps/v4/examples/base/button-group-dropdown.tsx
index a95c9b71c1..43f96e23b4 100644
--- a/apps/v4/examples/base/button-group-dropdown.tsx
+++ b/apps/v4/examples/base/button-group-dropdown.tsx
@@ -27,7 +27,7 @@ export default function ButtonGroupDropdown() {
       <Button variant="outline">Follow</Button>
       <DropdownMenu>
         <DropdownMenuTrigger
-          render={<Button variant="outline" className="!pl-2" />}
+          render={<Button variant="outline" className="pl-2!" />}
         >
           <ChevronDownIcon />
         </DropdownMenuTrigger>
diff --git a/apps/v4/examples/base/calendar-hijri.tsx b/apps/v4/examples/base/calendar-hijri.tsx
index cbf8b458ae..78f70b111b 100644
--- a/apps/v4/examples/base/calendar-hijri.tsx
+++ b/apps/v4/examples/base/calendar-hijri.tsx
@@ -55,7 +55,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -69,61 +69,61 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
           defaultClassNames.day
         ),
         range_start: cn(
@@ -133,7 +133,7 @@ function Calendar({
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -223,7 +223,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/examples/base/calendar-time.tsx b/apps/v4/examples/base/calendar-time.tsx
index 2a044442bd..7bfd5dff3f 100644
--- a/apps/v4/examples/base/calendar-time.tsx
+++ b/apps/v4/examples/base/calendar-time.tsx
@@ -26,7 +26,7 @@ export function CalendarWithTime() {
           className="p-0"
         />
       </CardContent>
-      <CardFooter className="bg-card border-t">
+      <CardFooter className="border-t bg-card">
         <FieldGroup>
           <Field>
             <FieldLabel htmlFor="time-from">Start Time</FieldLabel>
diff --git a/apps/v4/examples/base/card-small.tsx b/apps/v4/examples/base/card-small.tsx
index 629308b2c9..12af49512d 100644
--- a/apps/v4/examples/base/card-small.tsx
+++ b/apps/v4/examples/base/card-small.tsx
@@ -23,15 +23,15 @@ export function CardSmall() {
       <CardContent>
         <ul className="grid gap-2 py-2 text-sm">
           <li className="flex gap-2">
-            <ChevronRightIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
+            <ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
             <span>Choose a schedule (daily, or weekly).</span>
           </li>
           <li className="flex gap-2">
-            <ChevronRightIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
+            <ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
             <span>Send to channels or specific teammates.</span>
           </li>
           <li className="flex gap-2">
-            <ChevronRightIcon className="text-muted-foreground mt-0.5 size-4 shrink-0" />
+            <ChevronRightIcon className="mt-0.5 size-4 shrink-0 text-muted-foreground" />
             <span>Include charts, tables, and key metrics.</span>
           </li>
         </ul>
diff --git a/apps/v4/examples/base/carousel-api.tsx b/apps/v4/examples/base/carousel-api.tsx
index 8dc53d89c7..eedba13226 100644
--- a/apps/v4/examples/base/carousel-api.tsx
+++ b/apps/v4/examples/base/carousel-api.tsx
@@ -46,7 +46,7 @@ export default function CarouselDApiDemo() {
         <CarouselPrevious />
         <CarouselNext />
       </Carousel>
-      <div className="text-muted-foreground py-2 text-center text-sm">
+      <div className="py-2 text-center text-sm text-muted-foreground">
         Slide {current} of {count}
       </div>
     </div>
diff --git a/apps/v4/examples/base/chart-demo.tsx b/apps/v4/examples/base/chart-demo.tsx
index a74be7d3ce..a61706b824 100644
--- a/apps/v4/examples/base/chart-demo.tsx
+++ b/apps/v4/examples/base/chart-demo.tsx
@@ -80,8 +80,8 @@ export function ChartDemo() {
 
   return (
     <Card className="py-0 pb-4">
-      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
-        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
+      <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
           <CardTitle>Bar Chart - Interactive</CardTitle>
           <CardDescription>
             Showing total visitors for the last 3 months
@@ -94,10 +94,10 @@ export function ChartDemo() {
               <button
                 key={chart}
                 data-active={activeChart === chart}
-                className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
                 onClick={() => setActiveChart(chart)}
               >
-                <span className="text-muted-foreground text-xs">
+                <span className="text-xs text-muted-foreground">
                   {chartConfig[chart].label}
                 </span>
                 <span className="text-lg leading-none font-bold sm:text-3xl">
diff --git a/apps/v4/examples/base/chart-tooltip.tsx b/apps/v4/examples/base/chart-tooltip.tsx
index ea524211ef..b4f2aee682 100644
--- a/apps/v4/examples/base/chart-tooltip.tsx
+++ b/apps/v4/examples/base/chart-tooltip.tsx
@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 
 export function ChartTooltipDemo() {
   return (
-    <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
+    <div className="grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
       <div>
         <div className="absolute top-[45px] left-[-35px] z-10 text-sm font-medium">
           Label
@@ -75,7 +75,7 @@ export function ChartTooltipDemo() {
           className="w-[8rem]"
         />
       </div>
-      <div className="!hidden md:!flex">
+      <div className="hidden! md:flex!">
         <TooltipDemo
           label="Page Views"
           payload={[{ name: "Desktop", value: 12486, fill: "var(--chart-3)" }]}
@@ -83,7 +83,7 @@ export function ChartTooltipDemo() {
           indicator="line"
         />
       </div>
-      <div className="!items-start !justify-start">
+      <div className="items-start! justify-start!">
         <div className="absolute top-[60px] left-[50px] z-10 text-sm font-medium">
           Indicator
         </div>
@@ -152,7 +152,7 @@ function TooltipDemo({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
         className
       )}
     >
@@ -165,7 +165,7 @@ function TooltipDemo({
             <div
               key={index}
               className={cn(
-                "[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                 indicator === "dot" && "items-center"
               )}
             >
@@ -200,7 +200,7 @@ function TooltipDemo({
                     {nestLabel ? tooltipLabel : null}
                     <span className="text-muted-foreground">{item.name}</span>
                   </div>
-                  <span className="text-foreground font-mono font-medium tabular-nums">
+                  <span className="font-mono font-medium text-foreground tabular-nums">
                     {item.value.toLocaleString()}
                   </span>
                 </div>
diff --git a/apps/v4/examples/base/collapsible-basic.tsx b/apps/v4/examples/base/collapsible-basic.tsx
index d22b7af92a..0995feaf61 100644
--- a/apps/v4/examples/base/collapsible-basic.tsx
+++ b/apps/v4/examples/base/collapsible-basic.tsx
@@ -12,7 +12,7 @@ export function CollapsibleBasic() {
   return (
     <Card className="mx-auto w-full max-w-sm">
       <CardContent>
-        <Collapsible className="data-open:bg-muted rounded-md">
+        <Collapsible className="rounded-md data-open:bg-muted">
           <CollapsibleTrigger
             render={<Button variant="ghost" className="w-full" />}
           >
diff --git a/apps/v4/examples/base/collapsible-file-tree.tsx b/apps/v4/examples/base/collapsible-file-tree.tsx
index 17b7053886..2fe413b7a6 100644
--- a/apps/v4/examples/base/collapsible-file-tree.tsx
+++ b/apps/v4/examples/base/collapsible-file-tree.tsx
@@ -72,7 +72,7 @@ export function CollapsibleFileTree() {
               <Button
                 variant="ghost"
                 size="sm"
-                className="group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none"
+                className="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground"
               />
             }
           >
@@ -80,7 +80,7 @@ export function CollapsibleFileTree() {
             <FolderIcon />
             {fileItem.name}
           </CollapsibleTrigger>
-          <CollapsibleContent className="style-lyra:ml-4 mt-1 ml-5">
+          <CollapsibleContent className="mt-1 ml-5 style-lyra:ml-4">
             <div className="flex flex-col gap-1">
               {fileItem.items.map((child) => renderItem(child))}
             </div>
@@ -93,7 +93,7 @@ export function CollapsibleFileTree() {
         key={fileItem.name}
         variant="link"
         size="sm"
-        className="text-foreground w-full justify-start gap-2"
+        className="w-full justify-start gap-2 text-foreground"
       >
         <FileIcon />
         <span>{fileItem.name}</span>
diff --git a/apps/v4/examples/base/command-dialog.tsx b/apps/v4/examples/base/command-dialog.tsx
index 5aef898896..b3a075f6fe 100644
--- a/apps/v4/examples/base/command-dialog.tsx
+++ b/apps/v4/examples/base/command-dialog.tsx
@@ -37,9 +37,9 @@ export function CommandDialogDemo() {
 
   return (
     <>
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         Press{" "}
-        <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+        <kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 select-none">
           <span className="text-xs">⌘</span>J
         </kbd>
       </p>
diff --git a/apps/v4/examples/base/data-table-demo.tsx b/apps/v4/examples/base/data-table-demo.tsx
index 52112b3cfa..4203427901 100644
--- a/apps/v4/examples/base/data-table-demo.tsx
+++ b/apps/v4/examples/base/data-table-demo.tsx
@@ -290,7 +290,7 @@ export function DataTableDemo() {
         </Table>
       </div>
       <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="text-muted-foreground flex-1 text-sm">
+        <div className="flex-1 text-sm text-muted-foreground">
           {table.getFilteredSelectedRowModel().rows.length} of{" "}
           {table.getFilteredRowModel().rows.length} row(s) selected.
         </div>
diff --git a/apps/v4/examples/base/data-table-rtl.tsx b/apps/v4/examples/base/data-table-rtl.tsx
index e202a9b474..ab8b7147ba 100644
--- a/apps/v4/examples/base/data-table-rtl.tsx
+++ b/apps/v4/examples/base/data-table-rtl.tsx
@@ -401,7 +401,7 @@ export function DataTableRtl() {
         </Table>
       </div>
       <div className="flex items-center justify-end gap-2 py-4">
-        <div className="text-muted-foreground flex-1 text-sm">
+        <div className="flex-1 text-sm text-muted-foreground">
           {table.getFilteredSelectedRowModel().rows.length} {t.rowsSelected}{" "}
           {table.getFilteredRowModel().rows.length} {t.rowsSelectedSuffix}
         </div>
diff --git a/apps/v4/examples/base/date-picker-demo.tsx b/apps/v4/examples/base/date-picker-demo.tsx
index da7e8a298a..fe67c440ab 100644
--- a/apps/v4/examples/base/date-picker-demo.tsx
+++ b/apps/v4/examples/base/date-picker-demo.tsx
@@ -21,7 +21,7 @@ export function DatePickerDemo() {
           <Button
             variant={"outline"}
             data-empty={!date}
-            className="data-[empty=true]:text-muted-foreground w-[212px] justify-between text-left font-normal"
+            className="w-[212px] justify-between text-left font-normal data-[empty=true]:text-muted-foreground"
           />
         }
       >
diff --git a/apps/v4/examples/base/date-picker-natural-language.tsx b/apps/v4/examples/base/date-picker-natural-language.tsx
index bd5939833e..3eefc295cf 100644
--- a/apps/v4/examples/base/date-picker-natural-language.tsx
+++ b/apps/v4/examples/base/date-picker-natural-language.tsx
@@ -93,7 +93,7 @@ export function DatePickerNaturalLanguage() {
           </Popover>
         </InputGroupAddon>
       </InputGroup>
-      <div className="text-muted-foreground px-1 text-sm">
+      <div className="px-1 text-sm text-muted-foreground">
         Your post will be published on{" "}
         <span className="font-medium">{formatDate(date)}</span>.
       </div>
diff --git a/apps/v4/examples/base/date-picker-rtl.tsx b/apps/v4/examples/base/date-picker-rtl.tsx
index 8eb9a775b9..7e69a8a09d 100644
--- a/apps/v4/examples/base/date-picker-rtl.tsx
+++ b/apps/v4/examples/base/date-picker-rtl.tsx
@@ -72,7 +72,7 @@ export function DatePickerRtl() {
           <Button
             variant={"outline"}
             data-empty={!date}
-            className="data-[empty=true]:text-muted-foreground w-[212px] justify-between text-left font-normal"
+            className="w-[212px] justify-between text-left font-normal data-[empty=true]:text-muted-foreground"
             dir={dir}
           />
         }
diff --git a/apps/v4/examples/base/date-picker-time.tsx b/apps/v4/examples/base/date-picker-time.tsx
index 6e9a6002b7..0d71d70a9f 100644
--- a/apps/v4/examples/base/date-picker-time.tsx
+++ b/apps/v4/examples/base/date-picker-time.tsx
@@ -55,7 +55,7 @@ export function DatePickerTime() {
           id="time-picker-optional"
           step="1"
           defaultValue="10:30:00"
-          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          className="appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
         />
       </Field>
     </FieldGroup>
diff --git a/apps/v4/examples/base/dialog-scrollable-content.tsx b/apps/v4/examples/base/dialog-scrollable-content.tsx
index 7b5f8e29da..b4379fb5c0 100644
--- a/apps/v4/examples/base/dialog-scrollable-content.tsx
+++ b/apps/v4/examples/base/dialog-scrollable-content.tsx
@@ -21,7 +21,7 @@ export function DialogScrollableContent() {
             This is a dialog with scrollable content.
           </DialogDescription>
         </DialogHeader>
-        <div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
+        <div className="-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4">
           {Array.from({ length: 10 }).map((_, index) => (
             <p key={index} className="mb-4 leading-normal">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
diff --git a/apps/v4/examples/base/dialog-sticky-footer.tsx b/apps/v4/examples/base/dialog-sticky-footer.tsx
index f513c5e6ee..44181f8df3 100644
--- a/apps/v4/examples/base/dialog-sticky-footer.tsx
+++ b/apps/v4/examples/base/dialog-sticky-footer.tsx
@@ -24,7 +24,7 @@ export function DialogStickyFooter() {
             scrolls.
           </DialogDescription>
         </DialogHeader>
-        <div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
+        <div className="-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4">
           {Array.from({ length: 10 }).map((_, index) => (
             <p key={index} className="mb-4 leading-normal">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
diff --git a/apps/v4/examples/base/drawer-demo.tsx b/apps/v4/examples/base/drawer-demo.tsx
index c02ab9bd42..0016105dba 100644
--- a/apps/v4/examples/base/drawer-demo.tsx
+++ b/apps/v4/examples/base/drawer-demo.tsx
@@ -91,7 +91,7 @@ export function DrawerDemo() {
                 <div className="text-7xl font-bold tracking-tighter">
                   {goal}
                 </div>
-                <div className="text-muted-foreground text-[0.70rem] uppercase">
+                <div className="text-[0.70rem] text-muted-foreground uppercase">
                   Calories/day
                 </div>
               </div>
diff --git a/apps/v4/examples/base/drawer-rtl.tsx b/apps/v4/examples/base/drawer-rtl.tsx
index 4cf3aa3518..3129b2a9e1 100644
--- a/apps/v4/examples/base/drawer-rtl.tsx
+++ b/apps/v4/examples/base/drawer-rtl.tsx
@@ -142,7 +142,7 @@ export function DrawerRtl() {
                 <div className="text-7xl font-bold tracking-tighter">
                   {goal.toLocaleString(locale)}
                 </div>
-                <div className="text-muted-foreground text-[0.70rem] uppercase">
+                <div className="text-[0.70rem] text-muted-foreground uppercase">
                   {t.caloriesPerDay}
                 </div>
               </div>
diff --git a/apps/v4/examples/base/empty-avatar-group.tsx b/apps/v4/examples/base/empty-avatar-group.tsx
index 3813c2de31..84b4bd8f32 100644
--- a/apps/v4/examples/base/empty-avatar-group.tsx
+++ b/apps/v4/examples/base/empty-avatar-group.tsx
@@ -15,7 +15,7 @@ export default function EmptyAvatarGroup() {
     <Empty>
       <EmptyHeader>
         <EmptyMedia>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
             <Avatar>
               <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/examples/base/empty-background.tsx b/apps/v4/examples/base/empty-background.tsx
index 60137a0e8b..3e0651e21d 100644
--- a/apps/v4/examples/base/empty-background.tsx
+++ b/apps/v4/examples/base/empty-background.tsx
@@ -12,7 +12,7 @@ import { RefreshCcwIcon } from "lucide-react"
 
 export function EmptyMuted() {
   return (
-    <Empty className="bg-muted/30 h-full">
+    <Empty className="h-full bg-muted/30">
       <EmptyHeader>
         <EmptyMedia variant="icon">
           <IconBell />
diff --git a/apps/v4/examples/base/file-upload-list.tsx b/apps/v4/examples/base/file-upload-list.tsx
index 9bf0e7d6c3..3f507c87cf 100644
--- a/apps/v4/examples/base/file-upload-list.tsx
+++ b/apps/v4/examples/base/file-upload-list.tsx
@@ -57,7 +57,7 @@ export function FileUploadList() {
             <Progress value={file.progress} className="w-32" />
           </ItemContent>
           <ItemActions className="w-16 justify-end">
-            <span className="text-muted-foreground text-sm">
+            <span className="text-sm text-muted-foreground">
               {file.timeRemaining}
             </span>
           </ItemActions>
diff --git a/apps/v4/examples/base/hover-card-demo.tsx b/apps/v4/examples/base/hover-card-demo.tsx
index 2e438f7de5..1b8a8c53b5 100644
--- a/apps/v4/examples/base/hover-card-demo.tsx
+++ b/apps/v4/examples/base/hover-card-demo.tsx
@@ -19,7 +19,7 @@ export default function HoverCardDemo() {
       <HoverCardContent className="flex w-64 flex-col gap-0.5">
         <div className="font-semibold">@nextjs</div>
         <div>The React Framework – created and maintained by @vercel.</div>
-        <div className="text-muted-foreground mt-1 text-xs">
+        <div className="mt-1 text-xs text-muted-foreground">
           Joined December 2021
         </div>
       </HoverCardContent>
diff --git a/apps/v4/examples/base/hover-card-rtl.tsx b/apps/v4/examples/base/hover-card-rtl.tsx
index 0115e13ff3..f6b0d632b5 100644
--- a/apps/v4/examples/base/hover-card-rtl.tsx
+++ b/apps/v4/examples/base/hover-card-rtl.tsx
@@ -81,7 +81,7 @@ export function HoverCardRtl() {
               dir={dir}
             >
               <div className="font-semibold">{t.name}</div>
-              <div className="text-muted-foreground text-sm">{t.price}</div>
+              <div className="text-sm text-muted-foreground">{t.price}</div>
             </HoverCardContent>
           </HoverCard>
         ))}
@@ -102,7 +102,7 @@ export function HoverCardRtl() {
               dir={dir}
             >
               <div className="font-semibold">{t.name}</div>
-              <div className="text-muted-foreground text-sm">{t.price}</div>
+              <div className="text-sm text-muted-foreground">{t.price}</div>
             </HoverCardContent>
           </HoverCard>
         ))}
diff --git a/apps/v4/examples/base/input-group-button.tsx b/apps/v4/examples/base/input-group-button.tsx
index 098019f7c3..68236dffe7 100644
--- a/apps/v4/examples/base/input-group-button.tsx
+++ b/apps/v4/examples/base/input-group-button.tsx
@@ -57,7 +57,7 @@ export default function InputGroupButtonExample() {
             <p>You should not enter any sensitive information on this site.</p>
           </PopoverContent>
         </Popover>
-        <InputGroupAddon className="text-muted-foreground pl-1.5">
+        <InputGroupAddon className="pl-1.5 text-muted-foreground">
           https://
         </InputGroupAddon>
         <InputGroupInput id="input-secure-19" />
diff --git a/apps/v4/examples/base/input-group-dropdown.tsx b/apps/v4/examples/base/input-group-dropdown.tsx
index c0323987fe..a085b16ca2 100644
--- a/apps/v4/examples/base/input-group-dropdown.tsx
+++ b/apps/v4/examples/base/input-group-dropdown.tsx
@@ -49,7 +49,7 @@ export function InputGroupDropdown() {
           <DropdownMenu>
             <DropdownMenuTrigger
               render={
-                <InputGroupButton variant="ghost" className="!pr-1.5 text-xs" />
+                <InputGroupButton variant="ghost" className="pr-1.5! text-xs" />
               }
             >
               Search In... <ChevronDownIcon className="size-3" />
diff --git a/apps/v4/examples/base/input-group-text.tsx b/apps/v4/examples/base/input-group-text.tsx
index bd16ce6024..3c3b2f5399 100644
--- a/apps/v4/examples/base/input-group-text.tsx
+++ b/apps/v4/examples/base/input-group-text.tsx
@@ -22,7 +22,7 @@ export default function InputGroupTextExample() {
         <InputGroupAddon>
           <InputGroupText>https://</InputGroupText>
         </InputGroupAddon>
-        <InputGroupInput placeholder="example.com" className="!pl-0.5" />
+        <InputGroupInput placeholder="example.com" className="pl-0.5!" />
         <InputGroupAddon align="inline-end">
           <InputGroupText>.com</InputGroupText>
         </InputGroupAddon>
@@ -36,7 +36,7 @@ export default function InputGroupTextExample() {
       <InputGroup>
         <InputGroupTextarea placeholder="Enter your message" />
         <InputGroupAddon align="block-end">
-          <InputGroupText className="text-muted-foreground text-xs">
+          <InputGroupText className="text-xs text-muted-foreground">
             120 characters left
           </InputGroupText>
         </InputGroupAddon>
diff --git a/apps/v4/examples/base/input-group-textarea-examples.tsx b/apps/v4/examples/base/input-group-textarea-examples.tsx
index 1c25a5a8ef..7d0ed2e974 100644
--- a/apps/v4/examples/base/input-group-textarea-examples.tsx
+++ b/apps/v4/examples/base/input-group-textarea-examples.tsx
@@ -77,7 +77,7 @@ export function InputGroupTextareaExamples() {
           <InputGroupTextarea id="prompt-31" />
           <InputGroupAddon align="block-start">
             <InputGroupText>Ask, Search or Chat...</InputGroupText>
-            <InfoIcon className="text-muted-foreground ml-auto" />
+            <InfoIcon className="ml-auto text-muted-foreground" />
           </InputGroupAddon>
         </InputGroup>
         <FieldDescription>
diff --git a/apps/v4/examples/base/input-group-with-addons.tsx b/apps/v4/examples/base/input-group-with-addons.tsx
index e8a7af0882..1a151caa53 100644
--- a/apps/v4/examples/base/input-group-with-addons.tsx
+++ b/apps/v4/examples/base/input-group-with-addons.tsx
@@ -69,7 +69,7 @@ export function InputGroupWithAddons() {
           <InputGroupInput id="input-addon-20" />
           <InputGroupAddon align="block-start">
             <InputGroupText>First Name</InputGroupText>
-            <InfoIcon className="text-muted-foreground ml-auto" />
+            <InfoIcon className="ml-auto text-muted-foreground" />
           </InputGroupAddon>
         </InputGroup>
       </Field>
@@ -79,7 +79,7 @@ export function InputGroupWithAddons() {
           <InputGroupInput id="input-addon-21" />
           <InputGroupAddon align="block-end">
             <InputGroupText>20/240 characters</InputGroupText>
-            <InfoIcon className="text-muted-foreground ml-auto" />
+            <InfoIcon className="ml-auto text-muted-foreground" />
           </InputGroupAddon>
         </InputGroup>
       </Field>
diff --git a/apps/v4/examples/base/input-group-with-tooltip.tsx b/apps/v4/examples/base/input-group-with-tooltip.tsx
index ee3d1295a4..46e77e4942 100644
--- a/apps/v4/examples/base/input-group-with-tooltip.tsx
+++ b/apps/v4/examples/base/input-group-with-tooltip.tsx
@@ -120,7 +120,7 @@ export function InputGroupWithTooltip({
                 </PopoverHeader>
               </PopoverContent>
             </Popover>
-            <InputGroupAddon className="text-muted-foreground pl-1">
+            <InputGroupAddon className="pl-1 text-muted-foreground">
               https://
             </InputGroupAddon>
             <InputGroupInput id="input-secure-19" />
diff --git a/apps/v4/examples/base/input-otp-form.tsx b/apps/v4/examples/base/input-otp-form.tsx
index bf690f4cd2..ef237c9808 100644
--- a/apps/v4/examples/base/input-otp-form.tsx
+++ b/apps/v4/examples/base/input-otp-form.tsx
@@ -60,11 +60,11 @@ export function InputOTPForm() {
           <Button type="submit" className="w-full">
             Verify
           </Button>
-          <div className="text-muted-foreground text-sm">
+          <div className="text-sm text-muted-foreground">
             Having trouble signing in?{" "}
             <a
               href="#"
-              className="hover:text-primary underline underline-offset-4 transition-colors"
+              className="underline underline-offset-4 transition-colors hover:text-primary"
             >
               Contact support
             </a>
diff --git a/apps/v4/examples/base/item-avatar.tsx b/apps/v4/examples/base/item-avatar.tsx
index 4a22e4f628..e014b78c77 100644
--- a/apps/v4/examples/base/item-avatar.tsx
+++ b/apps/v4/examples/base/item-avatar.tsx
@@ -37,7 +37,7 @@ export function ItemAvatar() {
       </Item>
       <Item variant="outline">
         <ItemMedia>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
             <Avatar className="hidden sm:flex">
               <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/examples/base/kbd-group.tsx b/apps/v4/examples/base/kbd-group.tsx
index 02a02dd661..f521ca2628 100644
--- a/apps/v4/examples/base/kbd-group.tsx
+++ b/apps/v4/examples/base/kbd-group.tsx
@@ -3,7 +3,7 @@ import { Kbd, KbdGroup } from "@/examples/base/ui/kbd"
 export default function KbdGroupExample() {
   return (
     <div className="flex flex-col items-center gap-4">
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         Use{" "}
         <KbdGroup>
           <Kbd>Ctrl + B</Kbd>
diff --git a/apps/v4/examples/base/kbd-tooltip.tsx b/apps/v4/examples/base/kbd-tooltip.tsx
index 61ed77ea9b..89e708325f 100644
--- a/apps/v4/examples/base/kbd-tooltip.tsx
+++ b/apps/v4/examples/base/kbd-tooltip.tsx
@@ -15,24 +15,20 @@ export default function KbdTooltip() {
           <TooltipTrigger render={<Button variant="outline" />}>
             Save
           </TooltipTrigger>
-          <TooltipContent className="pr-1.5">
-            <div className="flex items-center gap-2">
-              Save Changes <Kbd>S</Kbd>
-            </div>
+          <TooltipContent>
+            Save Changes <Kbd>S</Kbd>
           </TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger render={<Button variant="outline" />}>
             Print
           </TooltipTrigger>
-          <TooltipContent className="pr-1.5">
-            <div className="flex items-center gap-2">
-              Print Document{" "}
-              <KbdGroup>
-                <Kbd>Ctrl</Kbd>
-                <Kbd>P</Kbd>
-              </KbdGroup>
-            </div>
+          <TooltipContent>
+            Print Document{" "}
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>P</Kbd>
+            </KbdGroup>
           </TooltipContent>
         </Tooltip>
       </ButtonGroup>
diff --git a/apps/v4/examples/base/navigation-menu-demo.tsx b/apps/v4/examples/base/navigation-menu-demo.tsx
index 103aaa7547..8d70d28012 100644
--- a/apps/v4/examples/base/navigation-menu-demo.tsx
+++ b/apps/v4/examples/base/navigation-menu-demo.tsx
@@ -148,7 +148,7 @@ function ListItem({
       <NavigationMenuLink render={<Link href={href} />}>
         <div className="flex flex-col gap-1 text-sm">
           <div className="leading-none font-medium">{title}</div>
-          <div className="text-muted-foreground line-clamp-2">{children}</div>
+          <div className="line-clamp-2 text-muted-foreground">{children}</div>
         </div>
       </NavigationMenuLink>
     </li>
diff --git a/apps/v4/examples/base/navigation-menu-rtl.tsx b/apps/v4/examples/base/navigation-menu-rtl.tsx
index 3ca88c8939..2a4a55c450 100644
--- a/apps/v4/examples/base/navigation-menu-rtl.tsx
+++ b/apps/v4/examples/base/navigation-menu-rtl.tsx
@@ -266,7 +266,7 @@ function ListItem({
       <NavigationMenuLink render={<Link href={href} />}>
         <div className="flex flex-col gap-1 text-sm">
           <div className="leading-none font-medium">{title}</div>
-          <div className="text-muted-foreground line-clamp-2">{children}</div>
+          <div className="line-clamp-2 text-muted-foreground">{children}</div>
         </div>
       </NavigationMenuLink>
     </li>
diff --git a/apps/v4/examples/base/popover-demo.tsx b/apps/v4/examples/base/popover-demo.tsx
index 9a67fdc302..6902a7b1bb 100644
--- a/apps/v4/examples/base/popover-demo.tsx
+++ b/apps/v4/examples/base/popover-demo.tsx
@@ -17,7 +17,7 @@ export default function PopoverDemo() {
         <div className="grid gap-4">
           <div className="space-y-2">
             <h4 className="leading-none font-medium">Dimensions</h4>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               Set the dimensions for the layer.
             </p>
           </div>
diff --git a/apps/v4/examples/base/scroll-area-horizontal-demo.tsx b/apps/v4/examples/base/scroll-area-horizontal-demo.tsx
index af6e765d8f..7bed43b3ea 100644
--- a/apps/v4/examples/base/scroll-area-horizontal-demo.tsx
+++ b/apps/v4/examples/base/scroll-area-horizontal-demo.tsx
@@ -37,9 +37,9 @@ export function ScrollAreaHorizontalDemo() {
                 height={400}
               />
             </div>
-            <figcaption className="text-muted-foreground pt-2 text-xs">
+            <figcaption className="pt-2 text-xs text-muted-foreground">
               Photo by{" "}
-              <span className="text-foreground font-semibold">
+              <span className="font-semibold text-foreground">
                 {artwork.artist}
               </span>
             </figcaption>
diff --git a/apps/v4/examples/base/separator-menu.tsx b/apps/v4/examples/base/separator-menu.tsx
index 0d34da6daf..eb3e6a3a3e 100644
--- a/apps/v4/examples/base/separator-menu.tsx
+++ b/apps/v4/examples/base/separator-menu.tsx
@@ -5,21 +5,21 @@ export function SeparatorMenu() {
     <div className="flex items-center gap-2 text-sm md:gap-4">
       <div className="flex flex-col gap-1">
         <span className="font-medium">Settings</span>
-        <span className="text-muted-foreground text-xs">
+        <span className="text-xs text-muted-foreground">
           Manage preferences
         </span>
       </div>
       <Separator orientation="vertical" />
       <div className="flex flex-col gap-1">
         <span className="font-medium">Account</span>
-        <span className="text-muted-foreground text-xs">
+        <span className="text-xs text-muted-foreground">
           Profile & security
         </span>
       </div>
       <Separator orientation="vertical" className="hidden md:block" />
       <div className="hidden flex-col gap-1 md:flex">
         <span className="font-medium">Help</span>
-        <span className="text-muted-foreground text-xs">Support & docs</span>
+        <span className="text-xs text-muted-foreground">Support & docs</span>
       </div>
     </div>
   )
diff --git a/apps/v4/examples/base/sidebar-demo.tsx b/apps/v4/examples/base/sidebar-demo.tsx
index 954d927904..b4ff37e4b0 100644
--- a/apps/v4/examples/base/sidebar-demo.tsx
+++ b/apps/v4/examples/base/sidebar-demo.tsx
@@ -209,67 +209,65 @@ function TeamSwitcher({
   }
 
   return (
-    <SidebarGroup>
-      <SidebarMenu>
-        <SidebarMenuItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              render={
-                <SidebarMenuButton
-                  size="lg"
-                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                />
-              }
-            >
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
-                <activeTeam.logo className="size-4" />
-              </div>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{activeTeam.name}</span>
-                <span className="truncate text-xs">{activeTeam.plan}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-              align="start"
-              side={isMobile ? "bottom" : "right"}
-              sideOffset={4}
-            >
-              <DropdownMenuGroup>
-                <DropdownMenuLabel className="text-muted-foreground text-xs">
-                  Teams
-                </DropdownMenuLabel>
-                {teams.map((team, index) => (
-                  <DropdownMenuItem
-                    key={team.name}
-                    onClick={() => setActiveTeam(team)}
-                    className="gap-2 p-2"
-                  >
-                    <div className="flex size-6 items-center justify-center rounded-md border">
-                      <team.logo className="size-3.5 shrink-0" />
-                    </div>
-                    {team.name}
-                    <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem className="gap-2 p-2">
-                  <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
-                    <Plus className="size-4" />
-                  </div>
-                  <div className="text-muted-foreground font-medium">
-                    Add team
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              />
+            }
+          >
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <activeTeam.logo className="size-4" />
+            </div>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">{activeTeam.name}</span>
+              <span className="truncate text-xs">{activeTeam.plan}</span>
+            </div>
+            <ChevronsUpDown className="ml-auto" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            align="start"
+            side={isMobile ? "bottom" : "right"}
+            sideOffset={4}
+          >
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="text-xs text-muted-foreground">
+                Teams
+              </DropdownMenuLabel>
+              {teams.map((team, index) => (
+                <DropdownMenuItem
+                  key={team.name}
+                  onClick={() => setActiveTeam(team)}
+                  className="gap-2 p-2"
+                >
+                  <div className="flex size-6 items-center justify-center rounded-md border">
+                    <team.logo className="size-3.5 shrink-0" />
                   </div>
+                  {team.name}
+                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
                 </DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarGroup>
+              ))}
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem className="gap-2 p-2">
+                <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
+                  <Plus className="size-4" />
+                </div>
+                <div className="font-medium text-muted-foreground">
+                  Add team
+                </div>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
   )
 }
 
@@ -395,82 +393,80 @@ function NavUser({
   const { isMobile } = useSidebar()
 
   return (
-    <SidebarGroup>
-      <SidebarMenu>
-        <SidebarMenuItem>
-          <DropdownMenu>
-            <DropdownMenuTrigger
-              render={
-                <SidebarMenuButton
-                  size="lg"
-                  className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                />
-              }
-            >
-              <Avatar className="h-8 w-8 rounded-lg">
-                <AvatarImage src={user.avatar} alt={user.name} />
-                <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-              </Avatar>
-              <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-medium">{user.name}</span>
-                <span className="truncate text-xs">{user.email}</span>
-              </div>
-              <ChevronsUpDown className="ml-auto size-4" />
-            </DropdownMenuTrigger>
-            <DropdownMenuContent
-              className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
-              side={isMobile ? "bottom" : "right"}
-              align="end"
-              sideOffset={4}
-            >
-              <DropdownMenuGroup>
-                <DropdownMenuLabel className="p-0 font-normal">
-                  <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                    <Avatar className="h-8 w-8 rounded-lg">
-                      <AvatarImage src={user.avatar} alt={user.name} />
-                      <AvatarFallback className="rounded-lg">CN</AvatarFallback>
-                    </Avatar>
-                    <div className="grid flex-1 text-left text-sm leading-tight">
-                      <span className="truncate font-medium">{user.name}</span>
-                      <span className="truncate text-xs">{user.email}</span>
-                    </div>
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              />
+            }
+          >
+            <Avatar className="h-8 w-8 rounded-lg">
+              <AvatarImage src={user.avatar} alt={user.name} />
+              <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+              <span className="truncate font-medium">{user.name}</span>
+              <span className="truncate text-xs">{user.email}</span>
+            </div>
+            <ChevronsUpDown className="ml-auto size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+            side={isMobile ? "bottom" : "right"}
+            align="end"
+            sideOffset={4}
+          >
+            <DropdownMenuGroup>
+              <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                  <Avatar className="h-8 w-8 rounded-lg">
+                    <AvatarImage src={user.avatar} alt={user.name} />
+                    <AvatarFallback className="rounded-lg">CN</AvatarFallback>
+                  </Avatar>
+                  <div className="grid flex-1 text-left text-sm leading-tight">
+                    <span className="truncate font-medium">{user.name}</span>
+                    <span className="truncate text-xs">{user.email}</span>
                   </div>
-                </DropdownMenuLabel>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem>
-                  <Sparkles />
-                  Upgrade to Pro
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem>
-                  <BadgeCheck />
-                  Account
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <CreditCard />
-                  Billing
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <Bell />
-                  Notifications
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuItem>
-                  <LogOut />
-                  Log out
-                </DropdownMenuItem>
-              </DropdownMenuGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </SidebarMenuItem>
-      </SidebarMenu>
-    </SidebarGroup>
+                </div>
+              </DropdownMenuLabel>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Sparkles />
+                Upgrade to Pro
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <BadgeCheck />
+                Account
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard />
+                Billing
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Bell />
+                Notifications
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <LogOut />
+                Log out
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+    </SidebarMenu>
   )
 }
 
diff --git a/apps/v4/examples/base/sidebar-group-collapsible.tsx b/apps/v4/examples/base/sidebar-group-collapsible.tsx
index 5fe16ad205..d9d7dc2718 100644
--- a/apps/v4/examples/base/sidebar-group-collapsible.tsx
+++ b/apps/v4/examples/base/sidebar-group-collapsible.tsx
@@ -27,7 +27,7 @@ export default function AppSidebar() {
             <SidebarGroup>
               <SidebarGroupLabel
                 render={<CollapsibleTrigger />}
-                className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
+                className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 Help
                 <ChevronDownIcon className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
diff --git a/apps/v4/examples/base/sidebar-rtl.tsx b/apps/v4/examples/base/sidebar-rtl.tsx
index e28866710b..05140bae4c 100644
--- a/apps/v4/examples/base/sidebar-rtl.tsx
+++ b/apps/v4/examples/base/sidebar-rtl.tsx
@@ -324,7 +324,7 @@ function SidebarContentInner({
           <SidebarMenu>
             <SidebarMenuItem>
               <SidebarMenuButton size="lg" render={<a href="#" />}>
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <GalleryVerticalEnd className="size-4" />
                 </div>
                 <div className="flex flex-col gap-0.5 leading-none">
diff --git a/apps/v4/examples/base/slider-controlled.tsx b/apps/v4/examples/base/slider-controlled.tsx
index 51c99bbb84..c71c0751c6 100644
--- a/apps/v4/examples/base/slider-controlled.tsx
+++ b/apps/v4/examples/base/slider-controlled.tsx
@@ -11,7 +11,7 @@ export function SliderControlled() {
     <div className="mx-auto grid w-full max-w-xs gap-3">
       <div className="flex items-center justify-between gap-2">
         <Label htmlFor="slider-demo-temperature">Temperature</Label>
-        <span className="text-muted-foreground text-sm">
+        <span className="text-sm text-muted-foreground">
           {value.join(", ")}
         </span>
       </div>
diff --git a/apps/v4/examples/base/tabs-demo.tsx b/apps/v4/examples/base/tabs-demo.tsx
index cab10153c4..871fecad9b 100644
--- a/apps/v4/examples/base/tabs-demo.tsx
+++ b/apps/v4/examples/base/tabs-demo.tsx
@@ -30,7 +30,7 @@ export function TabsDemo() {
               across all your active projects.
             </CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             You have 12 active projects and 3 pending tasks.
           </CardContent>
         </Card>
@@ -44,7 +44,7 @@ export function TabsDemo() {
               identify growth opportunities.
             </CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             Page views are up 25% compared to last month.
           </CardContent>
         </Card>
@@ -58,7 +58,7 @@ export function TabsDemo() {
               multiple formats for analysis.
             </CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             You have 5 reports ready and available to export.
           </CardContent>
         </Card>
@@ -72,7 +72,7 @@ export function TabsDemo() {
               experience to fit your needs.
             </CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             Configure notifications, security, and themes.
           </CardContent>
         </Card>
diff --git a/apps/v4/examples/base/tabs-rtl.tsx b/apps/v4/examples/base/tabs-rtl.tsx
index 0720f521e5..9a8f0c2660 100644
--- a/apps/v4/examples/base/tabs-rtl.tsx
+++ b/apps/v4/examples/base/tabs-rtl.tsx
@@ -115,7 +115,7 @@ export function TabsRtl() {
             <CardTitle>{t.overviewTitle}</CardTitle>
             <CardDescription>{t.overviewDesc}</CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             {t.overviewContent}
           </CardContent>
         </Card>
@@ -126,7 +126,7 @@ export function TabsRtl() {
             <CardTitle>{t.analyticsTitle}</CardTitle>
             <CardDescription>{t.analyticsDesc}</CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             {t.analyticsContent}
           </CardContent>
         </Card>
@@ -137,7 +137,7 @@ export function TabsRtl() {
             <CardTitle>{t.reportsTitle}</CardTitle>
             <CardDescription>{t.reportsDesc}</CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             {t.reportsContent}
           </CardContent>
         </Card>
@@ -148,7 +148,7 @@ export function TabsRtl() {
             <CardTitle>{t.settingsTitle}</CardTitle>
             <CardDescription>{t.settingsDesc}</CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             {t.settingsContent}
           </CardContent>
         </Card>
diff --git a/apps/v4/examples/base/toggle-group-font-weight-selector.tsx b/apps/v4/examples/base/toggle-group-font-weight-selector.tsx
index 5c6e8dd4e3..ef66c3e722 100644
--- a/apps/v4/examples/base/toggle-group-font-weight-selector.tsx
+++ b/apps/v4/examples/base/toggle-group-font-weight-selector.tsx
@@ -22,7 +22,7 @@ export function ToggleGroupFontWeightSelector() {
           className="flex size-16 flex-col items-center justify-center rounded-xl"
         >
           <span className="text-2xl leading-none font-light">Aa</span>
-          <span className="text-muted-foreground text-xs">Light</span>
+          <span className="text-xs text-muted-foreground">Light</span>
         </ToggleGroupItem>
         <ToggleGroupItem
           value="normal"
@@ -30,7 +30,7 @@ export function ToggleGroupFontWeightSelector() {
           className="flex size-16 flex-col items-center justify-center rounded-xl"
         >
           <span className="text-2xl leading-none font-normal">Aa</span>
-          <span className="text-muted-foreground text-xs">Normal</span>
+          <span className="text-xs text-muted-foreground">Normal</span>
         </ToggleGroupItem>
         <ToggleGroupItem
           value="medium"
@@ -38,7 +38,7 @@ export function ToggleGroupFontWeightSelector() {
           className="flex size-16 flex-col items-center justify-center rounded-xl"
         >
           <span className="text-2xl leading-none font-medium">Aa</span>
-          <span className="text-muted-foreground text-xs">Medium</span>
+          <span className="text-xs text-muted-foreground">Medium</span>
         </ToggleGroupItem>
         <ToggleGroupItem
           value="bold"
@@ -46,12 +46,12 @@ export function ToggleGroupFontWeightSelector() {
           className="flex size-16 flex-col items-center justify-center rounded-xl"
         >
           <span className="text-2xl leading-none font-bold">Aa</span>
-          <span className="text-muted-foreground text-xs">Bold</span>
+          <span className="text-xs text-muted-foreground">Bold</span>
         </ToggleGroupItem>
       </ToggleGroup>
       <FieldDescription>
         Use{" "}
-        <code className="bg-muted rounded-md px-1 py-0.5 font-mono">
+        <code className="rounded-md bg-muted px-1 py-0.5 font-mono">
           font-{fontWeight}
         </code>{" "}
         to set the font weight.
diff --git a/apps/v4/examples/base/tooltip-keyboard.tsx b/apps/v4/examples/base/tooltip-keyboard.tsx
index 9c02fe5bb4..b1aebe8a5b 100644
--- a/apps/v4/examples/base/tooltip-keyboard.tsx
+++ b/apps/v4/examples/base/tooltip-keyboard.tsx
@@ -13,10 +13,8 @@ export function TooltipKeyboard() {
       <TooltipTrigger render={<Button variant="outline" size="icon-sm" />}>
         <SaveIcon />
       </TooltipTrigger>
-      <TooltipContent className="pr-1.5">
-        <div className="flex items-center gap-2">
-          Save Changes <Kbd>S</Kbd>
-        </div>
+      <TooltipContent>
+        Save Changes <Kbd>S</Kbd>
       </TooltipContent>
     </Tooltip>
   )
diff --git a/apps/v4/examples/base/typography-demo.tsx b/apps/v4/examples/base/typography-demo.tsx
index 055226cff5..effec043b5 100644
--- a/apps/v4/examples/base/typography-demo.tsx
+++ b/apps/v4/examples/base/typography-demo.tsx
@@ -4,7 +4,7 @@ export function TypographyDemo() {
       <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
         Taxing Laughter: The Joke Tax Chronicles
       </h1>
-      <p className="text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6">
+      <p className="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">
         Once upon a time, in a far-off land, there was a very lazy king who
         spent all day lounging on his throne. One day, his advisors came to him
         with a problem: the kingdom was running out of money.
@@ -16,7 +16,7 @@ export function TypographyDemo() {
         The king thought long and hard, and finally came up with{" "}
         <a
           href="#"
-          className="text-primary font-medium underline underline-offset-4"
+          className="font-medium text-primary underline underline-offset-4"
         >
           a brilliant plan
         </a>
@@ -68,7 +68,7 @@ export function TypographyDemo() {
       <div className="my-6 w-full overflow-y-auto">
         <table className="w-full">
           <thead>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
                 King&apos;s Treasury
               </th>
@@ -78,7 +78,7 @@ export function TypographyDemo() {
             </tr>
           </thead>
           <tbody>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                 Empty
               </td>
@@ -86,7 +86,7 @@ export function TypographyDemo() {
                 Overflowing
               </td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                 Modest
               </td>
@@ -94,7 +94,7 @@ export function TypographyDemo() {
                 Satisfied
               </td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                 Full
               </td>
diff --git a/apps/v4/examples/base/typography-inline-code.tsx b/apps/v4/examples/base/typography-inline-code.tsx
index c93892e6e5..7679b87d6d 100644
--- a/apps/v4/examples/base/typography-inline-code.tsx
+++ b/apps/v4/examples/base/typography-inline-code.tsx
@@ -1,6 +1,6 @@
 export function TypographyInlineCode() {
   return (
-    <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
       @radix-ui/react-alert-dialog
     </code>
   )
diff --git a/apps/v4/examples/base/typography-lead.tsx b/apps/v4/examples/base/typography-lead.tsx
index 26d618694f..b6609a5cad 100644
--- a/apps/v4/examples/base/typography-lead.tsx
+++ b/apps/v4/examples/base/typography-lead.tsx
@@ -1,6 +1,6 @@
 export function TypographyLead() {
   return (
-    <p className="text-muted-foreground text-xl">
+    <p className="text-xl text-muted-foreground">
       A modal dialog that interrupts the user with important content and expects
       a response.
     </p>
diff --git a/apps/v4/examples/base/typography-muted.tsx b/apps/v4/examples/base/typography-muted.tsx
index a576326b8d..f737f5664b 100644
--- a/apps/v4/examples/base/typography-muted.tsx
+++ b/apps/v4/examples/base/typography-muted.tsx
@@ -1,5 +1,5 @@
 export function TypographyMuted() {
   return (
-    <p className="text-muted-foreground text-sm">Enter your email address.</p>
+    <p className="text-sm text-muted-foreground">Enter your email address.</p>
   )
 }
diff --git a/apps/v4/examples/base/typography-rtl.tsx b/apps/v4/examples/base/typography-rtl.tsx
index 322c67f416..266e1918ab 100644
--- a/apps/v4/examples/base/typography-rtl.tsx
+++ b/apps/v4/examples/base/typography-rtl.tsx
@@ -144,7 +144,7 @@ export function TypographyRtl() {
       <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
         {t.title}
       </h1>
-      <p className="text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6">
+      <p className="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">
         {t.leadParagraph}
       </p>
       <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
@@ -154,7 +154,7 @@ export function TypographyRtl() {
         {t.kingThought}{" "}
         <a
           href="#"
-          className="text-primary font-medium underline underline-offset-4"
+          className="font-medium text-primary underline underline-offset-4"
         >
           {t.brilliantPlan}
         </a>
@@ -187,7 +187,7 @@ export function TypographyRtl() {
       <div className="my-6 w-full overflow-y-auto">
         <table className="w-full">
           <thead>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <th className="border px-4 py-2 text-start font-bold">
                 {t.kingsTreasury}
               </th>
@@ -197,15 +197,15 @@ export function TypographyRtl() {
             </tr>
           </thead>
           <tbody>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-start">{t.empty}</td>
               <td className="border px-4 py-2 text-start">{t.overflowing}</td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-start">{t.modest}</td>
               <td className="border px-4 py-2 text-start">{t.satisfied}</td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-start">{t.full}</td>
               <td className="border px-4 py-2 text-start">{t.ecstatic}</td>
             </tr>
diff --git a/apps/v4/examples/base/typography-table.tsx b/apps/v4/examples/base/typography-table.tsx
index ab3ae87697..5995a087ae 100644
--- a/apps/v4/examples/base/typography-table.tsx
+++ b/apps/v4/examples/base/typography-table.tsx
@@ -3,7 +3,7 @@ export function TypographyTable() {
     <div className="my-6 w-full overflow-y-auto">
       <table className="w-full">
         <thead>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
               King&apos;s Treasury
             </th>
@@ -13,7 +13,7 @@ export function TypographyTable() {
           </tr>
         </thead>
         <tbody>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
               Empty
             </td>
@@ -21,7 +21,7 @@ export function TypographyTable() {
               Overflowing
             </td>
           </tr>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
               Modest
             </td>
@@ -29,7 +29,7 @@ export function TypographyTable() {
               Satisfied
             </td>
           </tr>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
               Full
             </td>
diff --git a/apps/v4/examples/base/ui-rtl/accordion.tsx b/apps/v4/examples/base/ui-rtl/accordion.tsx
index ee1b6a6ce2..9c5d26b76f 100644
--- a/apps/v4/examples/base/ui-rtl/accordion.tsx
+++ b/apps/v4/examples/base/ui-rtl/accordion.tsx
@@ -34,7 +34,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className
         )}
         {...props}
@@ -61,12 +61,12 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Panel
       data-slot="accordion-content"
-      className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
       {...props}
     >
       <div
         className={cn(
-          "[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
           className
         )}
       >
diff --git a/apps/v4/examples/base/ui-rtl/alert-dialog.tsx b/apps/v4/examples/base/ui-rtl/alert-dialog.tsx
index 1c8a957529..413008306b 100644
--- a/apps/v4/examples/base/ui-rtl/alert-dialog.tsx
+++ b/apps/v4/examples/base/ui-rtl/alert-dialog.tsx
@@ -29,7 +29,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -51,7 +51,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed start-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm rtl:translate-x-1/2",
+          "group/alert-dialog-content fixed start-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm rtl:translate-x-1/2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -84,7 +84,7 @@ function AlertDialogFooter({
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -100,7 +100,7 @@ function AlertDialogMedia({
     <div
       data-slot="alert-dialog-media"
       className={cn(
-        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
         className
       )}
       {...props}
@@ -132,7 +132,7 @@ function AlertDialogDescription({
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
       className={cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/alert.tsx b/apps/v4/examples/base/ui-rtl/alert.tsx
index 0e7651a7fb..460b6454d5 100644
--- a/apps/v4/examples/base/ui-rtl/alert.tsx
+++ b/apps/v4/examples/base/ui-rtl/alert.tsx
@@ -3,13 +3,13 @@ import { cn } from "@/examples/base/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const alertVariants = cva(
-  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
       },
     },
     defaultVariants: {
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3",
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/avatar.tsx b/apps/v4/examples/base/ui-rtl/avatar.tsx
index 12b152b191..b82369f1ac 100644
--- a/apps/v4/examples/base/ui-rtl/avatar.tsx
+++ b/apps/v4/examples/base/ui-rtl/avatar.tsx
@@ -16,7 +16,7 @@ function Avatar({
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
         className
       )}
       {...props}
@@ -45,7 +45,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="avatar-badge"
       className={cn(
-        "bg-primary text-primary-foreground ring-background absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -74,7 +74,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="avatar-group"
       className={cn(
-        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
         className
       )}
       {...props}
@@ -90,7 +90,7 @@ function AvatarGroupCount({
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/badge.tsx b/apps/v4/examples/base/ui-rtl/badge.tsx
index 54d962cfed..0c48ea9b43 100644
--- a/apps/v4/examples/base/ui-rtl/badge.tsx
+++ b/apps/v4/examples/base/ui-rtl/badge.tsx
@@ -4,7 +4,7 @@ import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
@@ -12,7 +12,7 @@ const badgeVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
-          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
         outline:
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost:
diff --git a/apps/v4/examples/base/ui-rtl/breadcrumb.tsx b/apps/v4/examples/base/ui-rtl/breadcrumb.tsx
index 4ad954efb7..1770e76883 100644
--- a/apps/v4/examples/base/ui-rtl/breadcrumb.tsx
+++ b/apps/v4/examples/base/ui-rtl/breadcrumb.tsx
@@ -20,7 +20,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
         className
       )}
       {...props}
@@ -47,7 +47,7 @@ function BreadcrumbLink({
     defaultTagName: "a",
     props: mergeProps<"a">(
       {
-        className: cn("hover:text-foreground transition-colors", className),
+        className: cn("transition-colors hover:text-foreground", className),
       },
       props
     ),
@@ -65,7 +65,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn("font-normal text-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui-rtl/button-group.tsx b/apps/v4/examples/base/ui-rtl/button-group.tsx
index b5eab407a6..2e9a0587f4 100644
--- a/apps/v4/examples/base/ui-rtl/button-group.tsx
+++ b/apps/v4/examples/base/ui-rtl/button-group.tsx
@@ -5,14 +5,14 @@ import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonGroupVariants = cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0 *:data-slot:rounded-e-none",
+          "*:data-slot:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0",
         vertical:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none",
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
       },
     },
     defaultVariants: {
@@ -47,7 +47,7 @@ function ButtonGroupText({
     props: mergeProps<"div">(
       {
         className: cn(
-          "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
           className
         ),
       },
@@ -70,7 +70,7 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/button.tsx b/apps/v4/examples/base/ui-rtl/button.tsx
index 7348869c09..77f130292e 100644
--- a/apps/v4/examples/base/ui-rtl/button.tsx
+++ b/apps/v4/examples/base/ui-rtl/button.tsx
@@ -5,19 +5,19 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
-          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
         destructive:
-          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/apps/v4/examples/base/ui-rtl/calendar.tsx b/apps/v4/examples/base/ui-rtl/calendar.tsx
index feaf0817a7..bee69ed492 100644
--- a/apps/v4/examples/base/ui-rtl/calendar.tsx
+++ b/apps/v4/examples/base/ui-rtl/calendar.tsx
@@ -34,7 +34,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -49,80 +49,80 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
+          "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
+          "absolute inset-0 bg-popover opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)"
             : "[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)",
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-s-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 z-0 isolate",
+          "relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:end-0 after:w-4 after:bg-muted",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 z-0 isolate",
+          "relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:start-0 after:w-4 after:bg-muted",
           defaultClassNames.range_end
         ),
         today: cn(
-          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -218,7 +218,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/examples/base/ui-rtl/card.tsx b/apps/v4/examples/base/ui-rtl/card.tsx
index 9cd6893d62..dfce739d9e 100644
--- a/apps/v4/examples/base/ui-rtl/card.tsx
+++ b/apps/v4/examples/base/ui-rtl/card.tsx
@@ -11,7 +11,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       )}
       {...props}
@@ -49,7 +49,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
@@ -83,7 +83,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/chart.tsx b/apps/v4/examples/base/ui-rtl/chart.tsx
index bdb6daafe9..10c047c3bd 100644
--- a/apps/v4/examples/base/ui-rtl/chart.tsx
+++ b/apps/v4/examples/base/ui-rtl/chart.tsx
@@ -54,7 +54,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -172,7 +172,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
@@ -189,7 +189,7 @@ function ChartTooltipContent({
               <div
                 key={item.dataKey}
                 className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
                 )}
               >
@@ -234,7 +234,7 @@ function ChartTooltipContent({
                         </span>
                       </div>
                       {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
+                        <span className="font-mono font-medium text-foreground tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -286,7 +286,7 @@ function ChartLegendContent({
             <div
               key={item.value}
               className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
diff --git a/apps/v4/examples/base/ui-rtl/checkbox.tsx b/apps/v4/examples/base/ui-rtl/checkbox.tsx
index 06464fd654..bf9f33e4f9 100644
--- a/apps/v4/examples/base/ui-rtl/checkbox.tsx
+++ b/apps/v4/examples/base/ui-rtl/checkbox.tsx
@@ -9,7 +9,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/combobox.tsx b/apps/v4/examples/base/ui-rtl/combobox.tsx
index c84369fea0..2a9288fad2 100644
--- a/apps/v4/examples/base/ui-rtl/combobox.tsx
+++ b/apps/v4/examples/base/ui-rtl/combobox.tsx
@@ -30,7 +30,7 @@ function ComboboxTrigger({
       {...props}
     >
       {children}
-      <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -110,7 +110,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
+            "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg 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-start-2 data-[side=inline-start]:slide-in-from-end-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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -142,7 +142,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -176,7 +176,7 @@ function ComboboxLabel({
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
       {...props}
     />
   )
@@ -193,7 +193,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
       className={cn(
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
         className
       )}
       {...props}
@@ -208,7 +208,7 @@ function ComboboxSeparator({
   return (
     <ComboboxPrimitive.Separator
       data-slot="combobox-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -223,7 +223,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -243,7 +243,7 @@ function ComboboxChip({
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
       className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0",
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 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]:pe-0",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/command.tsx b/apps/v4/examples/base/ui-rtl/command.tsx
index 6f841444e6..c2d6ff15ea 100644
--- a/apps/v4/examples/base/ui-rtl/command.tsx
+++ b/apps/v4/examples/base/ui-rtl/command.tsx
@@ -21,7 +21,7 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1",
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
         className
       )}
       {...props}
@@ -68,7 +68,7 @@ function CommandInput({
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:ps-2!">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:ps-2!">
         <CommandPrimitive.Input
           data-slot="command-input"
           className={cn(
@@ -122,7 +122,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
         className
       )}
       {...props}
@@ -137,7 +137,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
+      className={cn("-mx-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -152,7 +152,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
         className
       )}
       {...props}
@@ -171,7 +171,7 @@ function CommandShortcut({
     <span
       data-slot="command-shortcut"
       className={cn(
-        "text-muted-foreground group-data-selected/command-item:text-foreground ms-auto text-xs tracking-widest",
+        "ms-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/context-menu.tsx b/apps/v4/examples/base/ui-rtl/context-menu.tsx
index cb5e590224..0d4b77ee20 100644
--- a/apps/v4/examples/base/ui-rtl/context-menu.tsx
+++ b/apps/v4/examples/base/ui-rtl/context-menu.tsx
@@ -52,7 +52,7 @@ function ContextMenuContent({
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none",
+            "cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -80,7 +80,7 @@ function ContextMenuLabel({
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7",
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:ps-7",
         className
       )}
       {...props}
@@ -103,7 +103,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -130,7 +130,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -168,7 +168,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -208,7 +208,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -230,7 +230,7 @@ function ContextMenuSeparator({
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -244,7 +244,7 @@ function ContextMenuShortcut({
     <span
       data-slot="context-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/context-menu-item:text-accent-foreground ms-auto text-xs tracking-widest",
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/dialog.tsx b/apps/v4/examples/base/ui-rtl/dialog.tsx
index 89e0371312..4f78b897c6 100644
--- a/apps/v4/examples/base/ui-rtl/dialog.tsx
+++ b/apps/v4/examples/base/ui-rtl/dialog.tsx
@@ -30,7 +30,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed start-1/2 top-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm rtl:translate-x-1/2",
+          "fixed start-1/2 top-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm rtl:translate-x-1/2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -100,7 +100,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -133,7 +133,7 @@ function DialogDescription({
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/drawer.tsx b/apps/v4/examples/base/ui-rtl/drawer.tsx
index b43af4ad62..390525ba1b 100644
--- a/apps/v4/examples/base/ui-rtl/drawer.tsx
+++ b/apps/v4/examples/base/ui-rtl/drawer.tsx
@@ -36,7 +36,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -55,12 +55,12 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className
         )}
         {...props}
       >
-        <div className="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -97,7 +97,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn("text-base font-medium text-foreground", className)}
       {...props}
     />
   )
@@ -110,7 +110,7 @@ function DrawerDescription({
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx b/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx
index 811dd46b9c..9808029ce8 100644
--- a/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx
+++ b/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx
@@ -41,7 +41,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden",
+            "cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -67,7 +67,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7",
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:ps-7",
         className
       )}
       {...props}
@@ -90,7 +90,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -115,7 +115,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -138,7 +138,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100",
+        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       align={align}
@@ -164,7 +164,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -205,7 +205,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSeparator({
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -244,7 +244,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ms-auto text-xs tracking-widest",
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/empty.tsx b/apps/v4/examples/base/ui-rtl/empty.tsx
index 54401dd818..840c84abd6 100644
--- a/apps/v4/examples/base/ui-rtl/empty.tsx
+++ b/apps/v4/examples/base/ui-rtl/empty.tsx
@@ -30,7 +30,7 @@ const emptyMediaVariants = cva(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
       },
     },
     defaultVariants: {
@@ -69,7 +69,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
     <div
       data-slot="empty-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/field.tsx b/apps/v4/examples/base/ui-rtl/field.tsx
index 3d4ed83c10..5db63ae2ac 100644
--- a/apps/v4/examples/base/ui-rtl/field.tsx
+++ b/apps/v4/examples/base/ui-rtl/field.tsx
@@ -51,15 +51,15 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const fieldVariants = cva(
-  "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
     variants: {
       orientation: {
         vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
         horizontal:
-          "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         responsive:
-          "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -105,7 +105,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
@@ -132,9 +132,9 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-start text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-start text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
@@ -162,7 +162,7 @@ function FieldSeparator({
       <Separator className="absolute inset-0 top-1/2" />
       {children && (
         <span
-          className="text-muted-foreground bg-background relative mx-auto block w-fit px-2"
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
           data-slot="field-separator-content"
         >
           {children}
@@ -215,7 +215,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn("text-sm font-normal text-destructive", className)}
       {...props}
     >
       {content}
diff --git a/apps/v4/examples/base/ui-rtl/hover-card.tsx b/apps/v4/examples/base/ui-rtl/hover-card.tsx
index 915ecd4bda..a924cdc592 100644
--- a/apps/v4/examples/base/ui-rtl/hover-card.tsx
+++ b/apps/v4/examples/base/ui-rtl/hover-card.tsx
@@ -37,7 +37,7 @@ function HoverCardContent({
         <PreviewCardPrimitive.Popup
           data-slot="hover-card-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
+            "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
diff --git a/apps/v4/examples/base/ui-rtl/input-group.tsx b/apps/v4/examples/base/ui-rtl/input-group.tsx
index 923ddece1e..19c304f33c 100644
--- a/apps/v4/examples/base/ui-rtl/input-group.tsx
+++ b/apps/v4/examples/base/ui-rtl/input-group.tsx
@@ -13,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
         className
       )}
       {...props}
@@ -22,18 +22,18 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
         "inline-start":
-          "ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem] order-first",
+          "order-first ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem]",
         "inline-end":
-          "pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem] order-last",
+          "order-last pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem]",
         "block-start":
-          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
         "block-end":
-          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
       },
     },
     defaultVariants: {
@@ -65,7 +65,7 @@ function InputGroupAddon({
 }
 
 const inputGroupButtonVariants = cva(
-  "gap-2 text-sm shadow-none flex items-center",
+  "flex items-center gap-2 text-sm shadow-none",
   {
     variants: {
       size: {
@@ -107,7 +107,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_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-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/input-otp.tsx b/apps/v4/examples/base/ui-rtl/input-otp.tsx
index b3d526ee3b..4eac8452bd 100644
--- a/apps/v4/examples/base/ui-rtl/input-otp.tsx
+++ b/apps/v4/examples/base/ui-rtl/input-otp.tsx
@@ -31,7 +31,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="input-otp-group"
       className={cn(
-        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3",
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg data-[active=true]:z-10 data-[active=true]:ring-3",
+        "relative flex size-8 items-center justify-center border-y border-e border-input text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>
diff --git a/apps/v4/examples/base/ui-rtl/input.tsx b/apps/v4/examples/base/ui-rtl/input.tsx
index b0bb6d3a71..a1dde9dfe0 100644
--- a/apps/v4/examples/base/ui-rtl/input.tsx
+++ b/apps/v4/examples/base/ui-rtl/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/item.tsx b/apps/v4/examples/base/ui-rtl/item.tsx
index 39a2da011e..9025563cc9 100644
--- a/apps/v4/examples/base/ui-rtl/item.tsx
+++ b/apps/v4/examples/base/ui-rtl/item.tsx
@@ -34,13 +34,13 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
   {
     variants: {
       variant: {
         default: "border-transparent",
         outline: "border-border",
-        muted: "bg-muted/50 border-transparent",
+        muted: "border-transparent bg-muted/50",
       },
       size: {
         default: "gap-2.5 px-3 py-2.5",
@@ -80,7 +80,7 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
@@ -142,7 +142,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="item-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-start text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4",
+        "line-clamp-2 text-start text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/kbd.tsx b/apps/v4/examples/base/ui-rtl/kbd.tsx
index 1d73b67985..cc5744b8b9 100644
--- a/apps/v4/examples/base/ui-rtl/kbd.tsx
+++ b/apps/v4/examples/base/ui-rtl/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn(
-        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/menubar.tsx b/apps/v4/examples/base/ui-rtl/menubar.tsx
index e2f9711c71..4b567263bd 100644
--- a/apps/v4/examples/base/ui-rtl/menubar.tsx
+++ b/apps/v4/examples/base/ui-rtl/menubar.tsx
@@ -26,7 +26,7 @@ function Menubar({ className, ...props }: MenubarPrimitive.Props) {
     <MenubarPrimitive
       data-slot="menubar"
       className={cn(
-        "bg-background flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
+        "flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ function MenubarTrigger({
     <DropdownMenuTrigger
       data-slot="menubar-trigger"
       className={cn(
-        "hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none",
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ function MenubarContent({
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 cn-menu-target min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100",
+        "cn-menu-target min-w-36 rounded-lg bg-popover p-1 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-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
         className
       )}
       {...props}
@@ -100,7 +100,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:ps-7 [&_svg:not([class*='size-'])]:size-4",
+        "group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -122,7 +122,7 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -157,7 +157,7 @@ function MenubarRadioItem({
       data-slot="menubar-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -199,7 +199,7 @@ function MenubarSeparator({
   return (
     <DropdownMenuSeparator
       data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -213,7 +213,7 @@ function MenubarShortcut({
     <DropdownMenuShortcut
       data-slot="menubar-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/menubar-item:text-accent-foreground ms-auto text-xs tracking-widest",
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
         className
       )}
       {...props}
@@ -239,7 +239,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:ps-7 [&_svg:not([class*='size-'])]:size-4",
+        "gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -255,7 +255,7 @@ function MenubarSubContent({
     <DropdownMenuSubContent
       data-slot="menubar-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100",
+        "min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/native-select.tsx b/apps/v4/examples/base/ui-rtl/native-select.tsx
index 1439feccf8..1518ed4516 100644
--- a/apps/v4/examples/base/ui-rtl/native-select.tsx
+++ b/apps/v4/examples/base/ui-rtl/native-select.tsx
@@ -23,11 +23,11 @@ function NativeSelect({
       <select
         data-slot="native-select"
         data-size={size}
-        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
         {...props}
       />
       <ChevronDownIcon
-        className="text-muted-foreground pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 select-none"
+        className="pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground select-none"
         aria-hidden="true"
         data-slot="native-select-icon"
       />
diff --git a/apps/v4/examples/base/ui-rtl/navigation-menu.tsx b/apps/v4/examples/base/ui-rtl/navigation-menu.tsx
index 46e9d6579e..a4d8c6a99b 100644
--- a/apps/v4/examples/base/ui-rtl/navigation-menu.tsx
+++ b/apps/v4/examples/base/ui-rtl/navigation-menu.tsx
@@ -55,7 +55,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
 )
 
 function NavigationMenuTrigger({
@@ -71,7 +71,7 @@ function NavigationMenuTrigger({
     >
       {children}{" "}
       <ChevronDownIcon
-        className="relative top-px ms-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        className="relative top-px ms-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -86,7 +86,7 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-ending-style:data-activation-direction=left:translate-x-[50%] rtl:data-ending-style:data-activation-direction=left:-translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] rtl:data-ending-style:data-activation-direction=right:-translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] rtl:data-starting-style:data-activation-direction=left:-translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] rtl:data-starting-style:data-activation-direction=right:-translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] rtl:data-ending-style:data-activation-direction=left:-translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] rtl:data-ending-style:data-activation-direction=right:-translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] rtl:data-starting-style:data-activation-direction=left:-translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] rtl:data-starting-style:data-activation-direction=right:-translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
         className
       )}
       {...props}
@@ -115,7 +115,7 @@ function NavigationMenuPositioner({
         )}
         {...props}
       >
-        <NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+        <NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
           <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
         </NavigationMenuPrimitive.Popup>
       </NavigationMenuPrimitive.Positioner>
@@ -131,7 +131,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -147,12 +147,12 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Icon
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
         className
       )}
       {...props}
     >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm shadow-md" />
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm bg-border shadow-md" />
     </NavigationMenuPrimitive.Icon>
   )
 }
diff --git a/apps/v4/examples/base/ui-rtl/popover.tsx b/apps/v4/examples/base/ui-rtl/popover.tsx
index b1b5ddec59..8d0084c621 100644
--- a/apps/v4/examples/base/ui-rtl/popover.tsx
+++ b/apps/v4/examples/base/ui-rtl/popover.tsx
@@ -36,7 +36,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
diff --git a/apps/v4/examples/base/ui-rtl/progress.tsx b/apps/v4/examples/base/ui-rtl/progress.tsx
index ca70a90752..9148de3f65 100644
--- a/apps/v4/examples/base/ui-rtl/progress.tsx
+++ b/apps/v4/examples/base/ui-rtl/progress.tsx
@@ -28,7 +28,7 @@ function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
   return (
     <ProgressPrimitive.Track
       className={cn(
-        "bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full",
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
         className
       )}
       data-slot="progress-track"
@@ -44,7 +44,7 @@ function ProgressIndicator({
   return (
     <ProgressPrimitive.Indicator
       data-slot="progress-indicator"
-      className={cn("bg-primary h-full transition-all", className)}
+      className={cn("h-full bg-primary transition-all", className)}
       {...props}
     />
   )
@@ -64,7 +64,7 @@ function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
   return (
     <ProgressPrimitive.Value
       className={cn(
-        "text-muted-foreground ms-auto text-sm tabular-nums",
+        "ms-auto text-sm text-muted-foreground tabular-nums",
         className
       )}
       data-slot="progress-value"
diff --git a/apps/v4/examples/base/ui-rtl/radio-group.tsx b/apps/v4/examples/base/ui-rtl/radio-group.tsx
index a73d879807..082476aa04 100644
--- a/apps/v4/examples/base/ui-rtl/radio-group.tsx
+++ b/apps/v4/examples/base/ui-rtl/radio-group.tsx
@@ -19,7 +19,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
     <RadioPrimitive.Root
       data-slot="radio-group-item"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       )}
       {...props}
@@ -28,7 +28,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
         data-slot="radio-group-indicator"
         className="flex size-4 items-center justify-center"
       >
-        <span className="bg-primary-foreground absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full rtl:translate-x-1/2" />
+        <span className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground rtl:translate-x-1/2" />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
   )
diff --git a/apps/v4/examples/base/ui-rtl/resizable.tsx b/apps/v4/examples/base/ui-rtl/resizable.tsx
index c93bf00c59..5305140905 100644
--- a/apps/v4/examples/base/ui-rtl/resizable.tsx
+++ b/apps/v4/examples/base/ui-rtl/resizable.tsx
@@ -34,13 +34,13 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
       )}
     </ResizablePrimitive.Separator>
   )
diff --git a/apps/v4/examples/base/ui-rtl/scroll-area.tsx b/apps/v4/examples/base/ui-rtl/scroll-area.tsx
index e3ea81cfa7..517d2e67f9 100644
--- a/apps/v4/examples/base/ui-rtl/scroll-area.tsx
+++ b/apps/v4/examples/base/ui-rtl/scroll-area.tsx
@@ -17,7 +17,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -45,7 +45,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.Thumb
         data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
+        className="relative flex-1 rounded-full bg-border"
       />
     </ScrollAreaPrimitive.Scrollbar>
   )
diff --git a/apps/v4/examples/base/ui-rtl/select.tsx b/apps/v4/examples/base/ui-rtl/select.tsx
index 4a8b4ea8b4..779b80a906 100644
--- a/apps/v4/examples/base/ui-rtl/select.tsx
+++ b/apps/v4/examples/base/ui-rtl/select.tsx
@@ -40,7 +40,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
         className
       )}
       {...props}
@@ -48,7 +48,7 @@ function SelectTrigger({
       {children}
       <SelectPrimitive.Icon
         render={
-          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
         }
       />
     </SelectPrimitive.Trigger>
@@ -83,7 +83,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none",
+            "cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg 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-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -104,7 +104,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
       {...props}
     />
   )
@@ -119,7 +119,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
@@ -145,7 +145,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -159,7 +159,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
       className={cn(
-        "bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center 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-4",
         className
       )}
       {...props}
@@ -177,7 +177,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
       className={cn(
-        "bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center 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-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/separator.tsx b/apps/v4/examples/base/ui-rtl/separator.tsx
index 6fd796cc06..0c73876b04 100644
--- a/apps/v4/examples/base/ui-rtl/separator.tsx
+++ b/apps/v4/examples/base/ui-rtl/separator.tsx
@@ -13,7 +13,7 @@ function Separator({
       data-slot="separator"
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/sheet.tsx b/apps/v4/examples/base/ui-rtl/sheet.tsx
index 74c6ce5dc5..16a3de0951 100644
--- a/apps/v4/examples/base/ui-rtl/sheet.tsx
+++ b/apps/v4/examples/base/ui-rtl/sheet.tsx
@@ -27,7 +27,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
           className
         )}
         {...props}
@@ -102,7 +102,7 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn("text-base font-medium text-foreground", className)}
       {...props}
     />
   )
@@ -115,7 +115,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui-rtl/sidebar.tsx b/apps/v4/examples/base/ui-rtl/sidebar.tsx
index b334a2efdc..503e06041c 100644
--- a/apps/v4/examples/base/ui-rtl/sidebar.tsx
+++ b/apps/v4/examples/base/ui-rtl/sidebar.tsx
@@ -137,7 +137,7 @@ function SidebarProvider({
           } as React.CSSProperties
         }
         className={cn(
-          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
           className
         )}
         {...props}
@@ -168,7 +168,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
           className
         )}
         {...props}
@@ -186,7 +186,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -206,7 +206,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer hidden text-sidebar-foreground md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -241,7 +241,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
         >
           {children}
         </div>
@@ -288,10 +288,10 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full rtl:group-data-[collapsible=offcanvas]:-translate-x-0",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full hover:group-data-[collapsible=offcanvas]:bg-sidebar rtl:group-data-[collapsible=offcanvas]:-translate-x-0",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
         className
@@ -306,7 +306,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2",
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2",
         className
       )}
       {...props}
@@ -322,7 +322,7 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
+      className={cn("h-8 w-full bg-background shadow-none", className)}
       {...props}
     />
   )
@@ -358,7 +358,7 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
   )
@@ -399,7 +399,7 @@ function SidebarGroupLabel({
     props: mergeProps<"div">(
       {
         className: cn(
-          "text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
           className
         ),
       },
@@ -423,7 +423,7 @@ function SidebarGroupAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 end-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden",
+          "absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
           className
         ),
       },
@@ -474,13 +474,13 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-start text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
         default: "h-8 text-sm",
@@ -517,7 +517,7 @@ function SidebarMenuButton({
       },
       props
     ),
-    render: !tooltip ? render : TooltipTrigger,
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
     state: {
       slot: "sidebar-menu-button",
       sidebar: "menu-button",
@@ -563,9 +563,9 @@ function SidebarMenuAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "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 end-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+          "absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md 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-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
           showOnHover &&
-            "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+            "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
         ),
       },
@@ -588,7 +588,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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",
+        "pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
         className
       )}
       {...props}
@@ -640,7 +640,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px",
         className
       )}
       {...props}
@@ -678,7 +678,7 @@ function SidebarMenuSubButton({
     props: mergeProps<"a">(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px rtl:translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 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 rtl:translate-x-px data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
           className
         ),
       },
diff --git a/apps/v4/examples/base/ui-rtl/skeleton.tsx b/apps/v4/examples/base/ui-rtl/skeleton.tsx
index 17e4ebd34f..bdc712d206 100644
--- a/apps/v4/examples/base/ui-rtl/skeleton.tsx
+++ b/apps/v4/examples/base/ui-rtl/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-muted animate-pulse rounded-md", className)}
+      className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui-rtl/slider.tsx b/apps/v4/examples/base/ui-rtl/slider.tsx
index 7525b902d6..6faf0b35d2 100644
--- a/apps/v4/examples/base/ui-rtl/slider.tsx
+++ b/apps/v4/examples/base/ui-rtl/slider.tsx
@@ -36,7 +36,7 @@ function Slider({
       <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
         <SliderPrimitive.Track
           data-slot="slider-track"
-          className="bg-muted relative grow overflow-hidden rounded-full select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
         >
           <SliderPrimitive.Indicator
             data-slot="slider-range"
@@ -47,7 +47,7 @@ function Slider({
           <SliderPrimitive.Thumb
             data-slot="slider-thumb"
             key={index}
-            className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+            className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
           />
         ))}
       </SliderPrimitive.Control>
diff --git a/apps/v4/examples/base/ui-rtl/switch.tsx b/apps/v4/examples/base/ui-rtl/switch.tsx
index 2dd753b1e6..a261986ee8 100644
--- a/apps/v4/examples/base/ui-rtl/switch.tsx
+++ b/apps/v4/examples/base/ui-rtl/switch.tsx
@@ -15,14 +15,14 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground"
       />
     </SwitchPrimitive.Root>
   )
diff --git a/apps/v4/examples/base/ui-rtl/table.tsx b/apps/v4/examples/base/ui-rtl/table.tsx
index cc784aec14..4b1d7b4caa 100644
--- a/apps/v4/examples/base/ui-rtl/table.tsx
+++ b/apps/v4/examples/base/ui-rtl/table.tsx
@@ -43,7 +43,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
         className
       )}
       {...props}
@@ -69,7 +69,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+        "h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0",
         className
       )}
       {...props}
@@ -97,7 +97,7 @@ function TableCaption({
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui-rtl/tabs.tsx b/apps/v4/examples/base/ui-rtl/tabs.tsx
index 12629da537..c045c03bb0 100644
--- a/apps/v4/examples/base/ui-rtl/tabs.tsx
+++ b/apps/v4/examples/base/ui-rtl/tabs.tsx
@@ -23,7 +23,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -57,10 +57,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "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:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/textarea.tsx b/apps/v4/examples/base/ui-rtl/textarea.tsx
index 8e9d74ac3d..7e382f57eb 100644
--- a/apps/v4/examples/base/ui-rtl/textarea.tsx
+++ b/apps/v4/examples/base/ui-rtl/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/toggle-group.tsx b/apps/v4/examples/base/ui-rtl/toggle-group.tsx
index f9753e5f37..5bdb9b4069 100644
--- a/apps/v4/examples/base/ui-rtl/toggle-group.tsx
+++ b/apps/v4/examples/base/ui-rtl/toggle-group.tsx
@@ -41,7 +41,7 @@ function ToggleGroup({
       data-orientation={orientation}
       style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/toggle.tsx b/apps/v4/examples/base/ui-rtl/toggle.tsx
index 41d5e9812c..723f5574d3 100644
--- a/apps/v4/examples/base/ui-rtl/toggle.tsx
+++ b/apps/v4/examples/base/ui-rtl/toggle.tsx
@@ -5,12 +5,12 @@ import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const toggleVariants = cva(
-  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border-input hover:bg-muted border bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
       },
       size: {
         default: "h-8 min-w-8 px-2",
diff --git a/apps/v4/examples/base/ui-rtl/tooltip.tsx b/apps/v4/examples/base/ui-rtl/tooltip.tsx
index 1e2a7a0502..fbef2683f5 100644
--- a/apps/v4/examples/base/ui-rtl/tooltip.tsx
+++ b/apps/v4/examples/base/ui-rtl/tooltip.tsx
@@ -49,13 +49,13 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs",
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:-start-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:-end-1 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:-start-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:-end-1 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
diff --git a/apps/v4/examples/base/ui/accordion.tsx b/apps/v4/examples/base/ui/accordion.tsx
index d8a2758094..d308970854 100644
--- a/apps/v4/examples/base/ui/accordion.tsx
+++ b/apps/v4/examples/base/ui/accordion.tsx
@@ -34,7 +34,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className
         )}
         {...props}
@@ -61,12 +61,12 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Panel
       data-slot="accordion-content"
-      className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
       {...props}
     >
       <div
         className={cn(
-          "[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
           className
         )}
       >
diff --git a/apps/v4/examples/base/ui/alert-dialog.tsx b/apps/v4/examples/base/ui/alert-dialog.tsx
index 209c4dbe0a..c02d5fcd7e 100644
--- a/apps/v4/examples/base/ui/alert-dialog.tsx
+++ b/apps/v4/examples/base/ui/alert-dialog.tsx
@@ -29,7 +29,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Backdrop
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -51,7 +51,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -84,7 +84,7 @@ function AlertDialogFooter({
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -100,7 +100,7 @@ function AlertDialogMedia({
     <div
       data-slot="alert-dialog-media"
       className={cn(
-        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
         className
       )}
       {...props}
@@ -132,7 +132,7 @@ function AlertDialogDescription({
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
       className={cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/alert.tsx b/apps/v4/examples/base/ui/alert.tsx
index 141eac8686..253cc67049 100644
--- a/apps/v4/examples/base/ui/alert.tsx
+++ b/apps/v4/examples/base/ui/alert.tsx
@@ -3,13 +3,13 @@ import { cn } from "@/examples/base/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const alertVariants = cva(
-  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
       },
     },
     defaultVariants: {
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3",
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/avatar.tsx b/apps/v4/examples/base/ui/avatar.tsx
index 08999e94a9..c2bd7b9f9c 100644
--- a/apps/v4/examples/base/ui/avatar.tsx
+++ b/apps/v4/examples/base/ui/avatar.tsx
@@ -16,7 +16,7 @@ function Avatar({
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
         className
       )}
       {...props}
@@ -45,7 +45,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="avatar-badge"
       className={cn(
-        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -74,7 +74,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="avatar-group"
       className={cn(
-        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
         className
       )}
       {...props}
@@ -90,7 +90,7 @@ function AvatarGroupCount({
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/badge.tsx b/apps/v4/examples/base/ui/badge.tsx
index e32f20c116..00893ab573 100644
--- a/apps/v4/examples/base/ui/badge.tsx
+++ b/apps/v4/examples/base/ui/badge.tsx
@@ -4,7 +4,7 @@ import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
@@ -12,7 +12,7 @@ const badgeVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
-          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
         outline:
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost:
diff --git a/apps/v4/examples/base/ui/breadcrumb.tsx b/apps/v4/examples/base/ui/breadcrumb.tsx
index 660ed5b1b4..af0a105486 100644
--- a/apps/v4/examples/base/ui/breadcrumb.tsx
+++ b/apps/v4/examples/base/ui/breadcrumb.tsx
@@ -20,7 +20,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
         className
       )}
       {...props}
@@ -47,7 +47,7 @@ function BreadcrumbLink({
     defaultTagName: "a",
     props: mergeProps<"a">(
       {
-        className: cn("hover:text-foreground transition-colors", className),
+        className: cn("transition-colors hover:text-foreground", className),
       },
       props
     ),
@@ -65,7 +65,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn("font-normal text-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui/button-group.tsx b/apps/v4/examples/base/ui/button-group.tsx
index d88f45f02c..9af516f60b 100644
--- a/apps/v4/examples/base/ui/button-group.tsx
+++ b/apps/v4/examples/base/ui/button-group.tsx
@@ -5,14 +5,14 @@ import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonGroupVariants = cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none",
+          "*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
         vertical:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none",
+          "flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
       },
     },
     defaultVariants: {
@@ -47,7 +47,7 @@ function ButtonGroupText({
     props: mergeProps<"div">(
       {
         className: cn(
-          "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
+          "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
           className
         ),
       },
@@ -70,7 +70,7 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/button.tsx b/apps/v4/examples/base/ui/button.tsx
index 199432ecb0..f8547d7a8e 100644
--- a/apps/v4/examples/base/ui/button.tsx
+++ b/apps/v4/examples/base/ui/button.tsx
@@ -5,19 +5,19 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
-          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
         destructive:
-          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/apps/v4/examples/base/ui/calendar.tsx b/apps/v4/examples/base/ui/calendar.tsx
index 71cb58f824..06b8d69940 100644
--- a/apps/v4/examples/base/ui/calendar.tsx
+++ b/apps/v4/examples/base/ui/calendar.tsx
@@ -34,7 +34,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -49,80 +49,80 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
+          "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
+          "absolute inset-0 bg-popover opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
             : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate",
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate",
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
           defaultClassNames.range_end
         ),
         today: cn(
-          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -218,7 +218,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/examples/base/ui/card.tsx b/apps/v4/examples/base/ui/card.tsx
index 9cd6893d62..dfce739d9e 100644
--- a/apps/v4/examples/base/ui/card.tsx
+++ b/apps/v4/examples/base/ui/card.tsx
@@ -11,7 +11,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       )}
       {...props}
@@ -49,7 +49,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
@@ -83,7 +83,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/chart.tsx b/apps/v4/examples/base/ui/chart.tsx
index bdb6daafe9..10c047c3bd 100644
--- a/apps/v4/examples/base/ui/chart.tsx
+++ b/apps/v4/examples/base/ui/chart.tsx
@@ -54,7 +54,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -172,7 +172,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
@@ -189,7 +189,7 @@ function ChartTooltipContent({
               <div
                 key={item.dataKey}
                 className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
                 )}
               >
@@ -234,7 +234,7 @@ function ChartTooltipContent({
                         </span>
                       </div>
                       {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
+                        <span className="font-mono font-medium text-foreground tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -286,7 +286,7 @@ function ChartLegendContent({
             <div
               key={item.value}
               className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
diff --git a/apps/v4/examples/base/ui/checkbox.tsx b/apps/v4/examples/base/ui/checkbox.tsx
index 06464fd654..bf9f33e4f9 100644
--- a/apps/v4/examples/base/ui/checkbox.tsx
+++ b/apps/v4/examples/base/ui/checkbox.tsx
@@ -9,7 +9,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/combobox.tsx b/apps/v4/examples/base/ui/combobox.tsx
index e0b0c95c44..4f58649ffa 100644
--- a/apps/v4/examples/base/ui/combobox.tsx
+++ b/apps/v4/examples/base/ui/combobox.tsx
@@ -30,7 +30,7 @@ function ComboboxTrigger({
       {...props}
     >
       {children}
-      <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -110,7 +110,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
+            "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -142,7 +142,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -176,7 +176,7 @@ function ComboboxLabel({
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
       {...props}
     />
   )
@@ -193,7 +193,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
       className={cn(
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
         className
       )}
       {...props}
@@ -208,7 +208,7 @@ function ComboboxSeparator({
   return (
     <ComboboxPrimitive.Separator
       data-slot="combobox-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -223,7 +223,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -243,7 +243,7 @@ function ComboboxChip({
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
       className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/command.tsx b/apps/v4/examples/base/ui/command.tsx
index bc501d95ee..dd5a18f9b7 100644
--- a/apps/v4/examples/base/ui/command.tsx
+++ b/apps/v4/examples/base/ui/command.tsx
@@ -21,7 +21,7 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1",
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
         className
       )}
       {...props}
@@ -68,7 +68,7 @@ function CommandInput({
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
         <CommandPrimitive.Input
           data-slot="command-input"
           className={cn(
@@ -122,7 +122,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
         className
       )}
       {...props}
@@ -137,7 +137,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
+      className={cn("-mx-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -152,7 +152,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
         className
       )}
       {...props}
@@ -171,7 +171,7 @@ function CommandShortcut({
     <span
       data-slot="command-shortcut"
       className={cn(
-        "text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/context-menu.tsx b/apps/v4/examples/base/ui/context-menu.tsx
index 2b164b92d7..108f0714fa 100644
--- a/apps/v4/examples/base/ui/context-menu.tsx
+++ b/apps/v4/examples/base/ui/context-menu.tsx
@@ -52,7 +52,7 @@ function ContextMenuContent({
         <ContextMenuPrimitive.Popup
           data-slot="context-menu-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none",
+            "cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -80,7 +80,7 @@ function ContextMenuLabel({
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
         className
       )}
       {...props}
@@ -103,7 +103,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -130,7 +130,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -168,7 +168,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -208,7 +208,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -230,7 +230,7 @@ function ContextMenuSeparator({
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -244,7 +244,7 @@ function ContextMenuShortcut({
     <span
       data-slot="context-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/dialog.tsx b/apps/v4/examples/base/ui/dialog.tsx
index bb9cb99a99..17241aad50 100644
--- a/apps/v4/examples/base/ui/dialog.tsx
+++ b/apps/v4/examples/base/ui/dialog.tsx
@@ -30,7 +30,7 @@ function DialogOverlay({
     <DialogPrimitive.Backdrop
       data-slot="dialog-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm",
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -100,7 +100,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -133,7 +133,7 @@ function DialogDescription({
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/drawer.tsx b/apps/v4/examples/base/ui/drawer.tsx
index 6f9bb336b8..129b0eeed2 100644
--- a/apps/v4/examples/base/ui/drawer.tsx
+++ b/apps/v4/examples/base/ui/drawer.tsx
@@ -36,7 +36,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -55,12 +55,12 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className
         )}
         {...props}
       >
-        <div className="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -97,7 +97,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn("text-base font-medium text-foreground", className)}
       {...props}
     />
   )
@@ -110,7 +110,7 @@ function DrawerDescription({
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui/dropdown-menu.tsx b/apps/v4/examples/base/ui/dropdown-menu.tsx
index 8c1e0110b4..8f77496a3b 100644
--- a/apps/v4/examples/base/ui/dropdown-menu.tsx
+++ b/apps/v4/examples/base/ui/dropdown-menu.tsx
@@ -41,7 +41,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden",
+            "cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -67,7 +67,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
         className
       )}
       {...props}
@@ -90,7 +90,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -115,7 +115,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -138,7 +138,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100",
+        "w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       align={align}
@@ -164,7 +164,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -205,7 +205,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSeparator({
   return (
     <MenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -244,7 +244,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/empty.tsx b/apps/v4/examples/base/ui/empty.tsx
index 54401dd818..840c84abd6 100644
--- a/apps/v4/examples/base/ui/empty.tsx
+++ b/apps/v4/examples/base/ui/empty.tsx
@@ -30,7 +30,7 @@ const emptyMediaVariants = cva(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
       },
     },
     defaultVariants: {
@@ -69,7 +69,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
     <div
       data-slot="empty-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/field.tsx b/apps/v4/examples/base/ui/field.tsx
index 7841a528ff..35864b1acb 100644
--- a/apps/v4/examples/base/ui/field.tsx
+++ b/apps/v4/examples/base/ui/field.tsx
@@ -51,15 +51,15 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const fieldVariants = cva(
-  "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
     variants: {
       orientation: {
         vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
         horizontal:
-          "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         responsive:
-          "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -105,7 +105,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
@@ -132,9 +132,9 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
@@ -162,7 +162,7 @@ function FieldSeparator({
       <Separator className="absolute inset-0 top-1/2" />
       {children && (
         <span
-          className="text-muted-foreground bg-background relative mx-auto block w-fit px-2"
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
           data-slot="field-separator-content"
         >
           {children}
@@ -215,7 +215,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn("text-sm font-normal text-destructive", className)}
       {...props}
     >
       {content}
diff --git a/apps/v4/examples/base/ui/hover-card.tsx b/apps/v4/examples/base/ui/hover-card.tsx
index 50a65085bc..9d1e3db214 100644
--- a/apps/v4/examples/base/ui/hover-card.tsx
+++ b/apps/v4/examples/base/ui/hover-card.tsx
@@ -37,7 +37,7 @@ function HoverCardContent({
         <PreviewCardPrimitive.Popup
           data-slot="hover-card-content"
           className={cn(
-            "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
+            "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
diff --git a/apps/v4/examples/base/ui/input-group.tsx b/apps/v4/examples/base/ui/input-group.tsx
index 5898dfc1eb..606d27669a 100644
--- a/apps/v4/examples/base/ui/input-group.tsx
+++ b/apps/v4/examples/base/ui/input-group.tsx
@@ -13,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className
       )}
       {...props}
@@ -22,18 +22,18 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
         "inline-start":
-          "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
         "inline-end":
-          "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
         "block-start":
-          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
         "block-end":
-          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
       },
     },
     defaultVariants: {
@@ -65,7 +65,7 @@ function InputGroupAddon({
 }
 
 const inputGroupButtonVariants = cva(
-  "gap-2 text-sm shadow-none flex items-center",
+  "flex items-center gap-2 text-sm shadow-none",
   {
     variants: {
       size: {
@@ -107,7 +107,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_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-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/input-otp.tsx b/apps/v4/examples/base/ui/input-otp.tsx
index e9e2d7a685..787c965955 100644
--- a/apps/v4/examples/base/ui/input-otp.tsx
+++ b/apps/v4/examples/base/ui/input-otp.tsx
@@ -31,7 +31,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="input-otp-group"
       className={cn(
-        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3",
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3",
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>
diff --git a/apps/v4/examples/base/ui/input.tsx b/apps/v4/examples/base/ui/input.tsx
index b0bb6d3a71..a1dde9dfe0 100644
--- a/apps/v4/examples/base/ui/input.tsx
+++ b/apps/v4/examples/base/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/item.tsx b/apps/v4/examples/base/ui/item.tsx
index b284ad6dd1..c20afdaf8f 100644
--- a/apps/v4/examples/base/ui/item.tsx
+++ b/apps/v4/examples/base/ui/item.tsx
@@ -34,13 +34,13 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
   {
     variants: {
       variant: {
         default: "border-transparent",
         outline: "border-border",
-        muted: "bg-muted/50 border-transparent",
+        muted: "border-transparent bg-muted/50",
       },
       size: {
         default: "gap-2.5 px-3 py-2.5",
@@ -80,7 +80,7 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
@@ -142,7 +142,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="item-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4",
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/kbd.tsx b/apps/v4/examples/base/ui/kbd.tsx
index 1d73b67985..cc5744b8b9 100644
--- a/apps/v4/examples/base/ui/kbd.tsx
+++ b/apps/v4/examples/base/ui/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn(
-        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/menubar.tsx b/apps/v4/examples/base/ui/menubar.tsx
index 2846a973b4..44b7171331 100644
--- a/apps/v4/examples/base/ui/menubar.tsx
+++ b/apps/v4/examples/base/ui/menubar.tsx
@@ -26,7 +26,7 @@ function Menubar({ className, ...props }: MenubarPrimitive.Props) {
     <MenubarPrimitive
       data-slot="menubar"
       className={cn(
-        "bg-background flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
+        "flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ function MenubarTrigger({
     <DropdownMenuTrigger
       data-slot="menubar-trigger"
       className={cn(
-        "hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none",
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
         className
       )}
       {...props}
@@ -80,7 +80,7 @@ function MenubarContent({
       alignOffset={alignOffset}
       sideOffset={sideOffset}
       className={cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100",
+        "cn-menu-target min-w-36 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
         className
       )}
       {...props}
@@ -100,7 +100,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
+        "group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -122,7 +122,7 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -157,7 +157,7 @@ function MenubarRadioItem({
       data-slot="menubar-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -199,7 +199,7 @@ function MenubarSeparator({
   return (
     <DropdownMenuSeparator
       data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -213,7 +213,7 @@ function MenubarShortcut({
     <DropdownMenuShortcut
       data-slot="menubar-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
         className
       )}
       {...props}
@@ -239,7 +239,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
+        "gap-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -255,7 +255,7 @@ function MenubarSubContent({
     <DropdownMenuSubContent
       data-slot="menubar-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100",
+        "min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/native-select.tsx b/apps/v4/examples/base/ui/native-select.tsx
index a5e1e1460c..e737cba414 100644
--- a/apps/v4/examples/base/ui/native-select.tsx
+++ b/apps/v4/examples/base/ui/native-select.tsx
@@ -23,11 +23,11 @@ function NativeSelect({
       <select
         data-slot="native-select"
         data-size={size}
-        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
         {...props}
       />
       <ChevronDownIcon
-        className="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
+        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
         aria-hidden="true"
         data-slot="native-select-icon"
       />
diff --git a/apps/v4/examples/base/ui/navigation-menu.tsx b/apps/v4/examples/base/ui/navigation-menu.tsx
index 3af1bab47a..50106eec04 100644
--- a/apps/v4/examples/base/ui/navigation-menu.tsx
+++ b/apps/v4/examples/base/ui/navigation-menu.tsx
@@ -55,7 +55,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
 )
 
 function NavigationMenuTrigger({
@@ -71,7 +71,7 @@ function NavigationMenuTrigger({
     >
       {children}{" "}
       <ChevronDownIcon
-        className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -86,7 +86,7 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        "data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
         className
       )}
       {...props}
@@ -115,7 +115,7 @@ function NavigationMenuPositioner({
         )}
         {...props}
       >
-        <NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
+        <NavigationMenuPrimitive.Popup className="data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg bg-popover text-popover-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0">
           <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
         </NavigationMenuPrimitive.Popup>
       </NavigationMenuPrimitive.Positioner>
@@ -131,7 +131,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -147,12 +147,12 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Icon
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
         className
       )}
       {...props}
     >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
     </NavigationMenuPrimitive.Icon>
   )
 }
diff --git a/apps/v4/examples/base/ui/popover.tsx b/apps/v4/examples/base/ui/popover.tsx
index 0e6cce6a9d..365277b995 100644
--- a/apps/v4/examples/base/ui/popover.tsx
+++ b/apps/v4/examples/base/ui/popover.tsx
@@ -36,7 +36,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
diff --git a/apps/v4/examples/base/ui/progress.tsx b/apps/v4/examples/base/ui/progress.tsx
index c5233479d9..fc2313a030 100644
--- a/apps/v4/examples/base/ui/progress.tsx
+++ b/apps/v4/examples/base/ui/progress.tsx
@@ -28,7 +28,7 @@ function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {
   return (
     <ProgressPrimitive.Track
       className={cn(
-        "bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full",
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
         className
       )}
       data-slot="progress-track"
@@ -44,7 +44,7 @@ function ProgressIndicator({
   return (
     <ProgressPrimitive.Indicator
       data-slot="progress-indicator"
-      className={cn("bg-primary h-full transition-all", className)}
+      className={cn("h-full bg-primary transition-all", className)}
       {...props}
     />
   )
@@ -64,7 +64,7 @@ function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {
   return (
     <ProgressPrimitive.Value
       className={cn(
-        "text-muted-foreground ml-auto text-sm tabular-nums",
+        "ml-auto text-sm text-muted-foreground tabular-nums",
         className
       )}
       data-slot="progress-value"
diff --git a/apps/v4/examples/base/ui/radio-group.tsx b/apps/v4/examples/base/ui/radio-group.tsx
index d1b1a16c91..6bbaaa3489 100644
--- a/apps/v4/examples/base/ui/radio-group.tsx
+++ b/apps/v4/examples/base/ui/radio-group.tsx
@@ -19,7 +19,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
     <RadioPrimitive.Root
       data-slot="radio-group-item"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       )}
       {...props}
@@ -28,7 +28,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
         data-slot="radio-group-indicator"
         className="flex size-4 items-center justify-center"
       >
-        <span className="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
       </RadioPrimitive.Indicator>
     </RadioPrimitive.Root>
   )
diff --git a/apps/v4/examples/base/ui/resizable.tsx b/apps/v4/examples/base/ui/resizable.tsx
index c93adbc639..578066f567 100644
--- a/apps/v4/examples/base/ui/resizable.tsx
+++ b/apps/v4/examples/base/ui/resizable.tsx
@@ -34,13 +34,13 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
       )}
     </ResizablePrimitive.Separator>
   )
diff --git a/apps/v4/examples/base/ui/scroll-area.tsx b/apps/v4/examples/base/ui/scroll-area.tsx
index 09d8c99c49..f8dd62ca08 100644
--- a/apps/v4/examples/base/ui/scroll-area.tsx
+++ b/apps/v4/examples/base/ui/scroll-area.tsx
@@ -17,7 +17,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -45,7 +45,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.Thumb
         data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
+        className="relative flex-1 rounded-full bg-border"
       />
     </ScrollAreaPrimitive.Scrollbar>
   )
diff --git a/apps/v4/examples/base/ui/select.tsx b/apps/v4/examples/base/ui/select.tsx
index 077f99caba..434035185d 100644
--- a/apps/v4/examples/base/ui/select.tsx
+++ b/apps/v4/examples/base/ui/select.tsx
@@ -40,7 +40,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
         className
       )}
       {...props}
@@ -48,7 +48,7 @@ function SelectTrigger({
       {children}
       <SelectPrimitive.Icon
         render={
-          <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
         }
       />
     </SelectPrimitive.Trigger>
@@ -83,7 +83,7 @@ function SelectContent({
           data-slot="select-content"
           data-align-trigger={alignItemWithTrigger}
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none",
+            "cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -104,7 +104,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
-      className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
       {...props}
     />
   )
@@ -119,7 +119,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
@@ -145,7 +145,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -159,7 +159,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
       className={cn(
-        "bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center 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-4",
         className
       )}
       {...props}
@@ -177,7 +177,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
       className={cn(
-        "bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center 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-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/separator.tsx b/apps/v4/examples/base/ui/separator.tsx
index 6fd796cc06..0c73876b04 100644
--- a/apps/v4/examples/base/ui/separator.tsx
+++ b/apps/v4/examples/base/ui/separator.tsx
@@ -13,7 +13,7 @@ function Separator({
       data-slot="separator"
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/sheet.tsx b/apps/v4/examples/base/ui/sheet.tsx
index ae64b04067..70c56a98bf 100644
--- a/apps/v4/examples/base/ui/sheet.tsx
+++ b/apps/v4/examples/base/ui/sheet.tsx
@@ -27,7 +27,7 @@ function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
     <SheetPrimitive.Backdrop
       data-slot="sheet-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
           className
         )}
         {...props}
@@ -102,7 +102,7 @@ function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn("text-base font-medium text-foreground", className)}
       {...props}
     />
   )
@@ -115,7 +115,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui/sidebar.tsx b/apps/v4/examples/base/ui/sidebar.tsx
index c7dac676ae..9a2236ef20 100644
--- a/apps/v4/examples/base/ui/sidebar.tsx
+++ b/apps/v4/examples/base/ui/sidebar.tsx
@@ -137,7 +137,7 @@ function SidebarProvider({
           } as React.CSSProperties
         }
         className={cn(
-          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
           className
         )}
         {...props}
@@ -168,7 +168,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
           className
         )}
         {...props}
@@ -186,7 +186,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -206,7 +206,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer hidden text-sidebar-foreground md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -241,7 +241,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
         >
           {children}
         </div>
@@ -288,10 +288,10 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
@@ -306,7 +306,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
       {...props}
@@ -322,7 +322,7 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
+      className={cn("h-8 w-full bg-background shadow-none", className)}
       {...props}
     />
   )
@@ -358,7 +358,7 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
   )
@@ -399,7 +399,7 @@ function SidebarGroupLabel({
     props: mergeProps<"div">(
       {
         className: cn(
-          "text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0",
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
           className
         ),
       },
@@ -423,7 +423,7 @@ function SidebarGroupAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden",
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
           className
         ),
       },
@@ -474,13 +474,13 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
         default: "h-8 text-sm",
@@ -517,7 +517,7 @@ function SidebarMenuButton({
       },
       props
     ),
-    render: !tooltip ? render : TooltipTrigger,
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
     state: {
       slot: "sidebar-menu-button",
       sidebar: "menu-button",
@@ -563,9 +563,9 @@ function SidebarMenuAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md 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-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
           showOnHover &&
-            "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+            "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
         ),
       },
@@ -588,7 +588,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
         className
       )}
       {...props}
@@ -640,7 +640,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
         className
       )}
       {...props}
@@ -678,7 +678,7 @@ function SidebarMenuSubButton({
     props: mergeProps<"a">(
       {
         className: cn(
-          "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0",
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
           className
         ),
       },
diff --git a/apps/v4/examples/base/ui/skeleton.tsx b/apps/v4/examples/base/ui/skeleton.tsx
index 17e4ebd34f..bdc712d206 100644
--- a/apps/v4/examples/base/ui/skeleton.tsx
+++ b/apps/v4/examples/base/ui/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-muted animate-pulse rounded-md", className)}
+      className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui/slider.tsx b/apps/v4/examples/base/ui/slider.tsx
index 7525b902d6..6faf0b35d2 100644
--- a/apps/v4/examples/base/ui/slider.tsx
+++ b/apps/v4/examples/base/ui/slider.tsx
@@ -36,7 +36,7 @@ function Slider({
       <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
         <SliderPrimitive.Track
           data-slot="slider-track"
-          className="bg-muted relative grow overflow-hidden rounded-full select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+          className="relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
         >
           <SliderPrimitive.Indicator
             data-slot="slider-range"
@@ -47,7 +47,7 @@ function Slider({
           <SliderPrimitive.Thumb
             data-slot="slider-thumb"
             key={index}
-            className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+            className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
           />
         ))}
       </SliderPrimitive.Control>
diff --git a/apps/v4/examples/base/ui/switch.tsx b/apps/v4/examples/base/ui/switch.tsx
index b4ec84706e..3e29af6b1e 100644
--- a/apps/v4/examples/base/ui/switch.tsx
+++ b/apps/v4/examples/base/ui/switch.tsx
@@ -15,14 +15,14 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
       />
     </SwitchPrimitive.Root>
   )
diff --git a/apps/v4/examples/base/ui/table.tsx b/apps/v4/examples/base/ui/table.tsx
index a6facd70c8..ec0175d345 100644
--- a/apps/v4/examples/base/ui/table.tsx
+++ b/apps/v4/examples/base/ui/table.tsx
@@ -43,7 +43,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
         className
       )}
       {...props}
@@ -69,7 +69,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
@@ -97,7 +97,7 @@ function TableCaption({
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/base/ui/tabs.tsx b/apps/v4/examples/base/ui/tabs.tsx
index 69b615dcec..c356cb7d29 100644
--- a/apps/v4/examples/base/ui/tabs.tsx
+++ b/apps/v4/examples/base/ui/tabs.tsx
@@ -23,7 +23,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -57,10 +57,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-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",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/textarea.tsx b/apps/v4/examples/base/ui/textarea.tsx
index 8e9d74ac3d..7e382f57eb 100644
--- a/apps/v4/examples/base/ui/textarea.tsx
+++ b/apps/v4/examples/base/ui/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/toggle-group.tsx b/apps/v4/examples/base/ui/toggle-group.tsx
index 754fe9f0f1..55c14b6967 100644
--- a/apps/v4/examples/base/ui/toggle-group.tsx
+++ b/apps/v4/examples/base/ui/toggle-group.tsx
@@ -41,7 +41,7 @@ function ToggleGroup({
       data-orientation={orientation}
       style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/toggle.tsx b/apps/v4/examples/base/ui/toggle.tsx
index 41d5e9812c..723f5574d3 100644
--- a/apps/v4/examples/base/ui/toggle.tsx
+++ b/apps/v4/examples/base/ui/toggle.tsx
@@ -5,12 +5,12 @@ import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const toggleVariants = cva(
-  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border-input hover:bg-muted border bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
       },
       size: {
         default: "h-8 min-w-8 px-2",
diff --git a/apps/v4/examples/base/ui/tooltip.tsx b/apps/v4/examples/base/ui/tooltip.tsx
index c50a1a2349..911123ce93 100644
--- a/apps/v4/examples/base/ui/tooltip.tsx
+++ b/apps/v4/examples/base/ui/tooltip.tsx
@@ -49,13 +49,13 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs",
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
diff --git a/apps/v4/examples/radix/aspect-ratio-demo.tsx b/apps/v4/examples/radix/aspect-ratio-demo.tsx
index dd68dd151a..f971c0026a 100644
--- a/apps/v4/examples/radix/aspect-ratio-demo.tsx
+++ b/apps/v4/examples/radix/aspect-ratio-demo.tsx
@@ -4,7 +4,7 @@ import { AspectRatio } from "@/examples/radix/ui/aspect-ratio"
 export default function AspectRatioDemo() {
   return (
     <div className="w-full max-w-sm">
-      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
diff --git a/apps/v4/examples/radix/aspect-ratio-portrait.tsx b/apps/v4/examples/radix/aspect-ratio-portrait.tsx
index 6370ad34a1..c076bd51e8 100644
--- a/apps/v4/examples/radix/aspect-ratio-portrait.tsx
+++ b/apps/v4/examples/radix/aspect-ratio-portrait.tsx
@@ -4,7 +4,7 @@ import { AspectRatio } from "@/examples/radix/ui/aspect-ratio"
 export function AspectRatioPortrait() {
   return (
     <div className="w-full max-w-[10rem]">
-      <AspectRatio ratio={9 / 16} className="bg-muted rounded-lg">
+      <AspectRatio ratio={9 / 16} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
diff --git a/apps/v4/examples/radix/aspect-ratio-rtl.tsx b/apps/v4/examples/radix/aspect-ratio-rtl.tsx
index 7e4d7e9eaa..27f5c09384 100644
--- a/apps/v4/examples/radix/aspect-ratio-rtl.tsx
+++ b/apps/v4/examples/radix/aspect-ratio-rtl.tsx
@@ -35,7 +35,7 @@ export function AspectRatioRtl() {
 
   return (
     <figure className="w-full max-w-sm" dir={dir}>
-      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
@@ -43,7 +43,7 @@ export function AspectRatioRtl() {
           className="w-full rounded-lg object-cover grayscale dark:brightness-20"
         />
       </AspectRatio>
-      <figcaption className="text-muted-foreground mt-2 text-center text-sm">
+      <figcaption className="mt-2 text-center text-sm text-muted-foreground">
         {t.caption}
       </figcaption>
     </figure>
diff --git a/apps/v4/examples/radix/aspect-ratio-square.tsx b/apps/v4/examples/radix/aspect-ratio-square.tsx
index 766b6ef856..f11180a098 100644
--- a/apps/v4/examples/radix/aspect-ratio-square.tsx
+++ b/apps/v4/examples/radix/aspect-ratio-square.tsx
@@ -4,7 +4,7 @@ import { AspectRatio } from "@/examples/radix/ui/aspect-ratio"
 export function AspectRatioSquare() {
   return (
     <div className="w-full max-w-[12rem]">
-      <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
+      <AspectRatio ratio={1 / 1} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
diff --git a/apps/v4/examples/radix/button-group-dropdown.tsx b/apps/v4/examples/radix/button-group-dropdown.tsx
index ac9e25322b..17826a6229 100644
--- a/apps/v4/examples/radix/button-group-dropdown.tsx
+++ b/apps/v4/examples/radix/button-group-dropdown.tsx
@@ -27,7 +27,7 @@ export default function ButtonGroupDropdown() {
       <Button variant="outline">Follow</Button>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="outline" className="!pl-2">
+          <Button variant="outline" className="pl-2!">
             <ChevronDownIcon />
           </Button>
         </DropdownMenuTrigger>
diff --git a/apps/v4/examples/radix/calendar-hijri.tsx b/apps/v4/examples/radix/calendar-hijri.tsx
index 2dcaec3f32..0c00602a64 100644
--- a/apps/v4/examples/radix/calendar-hijri.tsx
+++ b/apps/v4/examples/radix/calendar-hijri.tsx
@@ -55,7 +55,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -69,61 +69,61 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
           defaultClassNames.day
         ),
         range_start: cn(
@@ -133,7 +133,7 @@ function Calendar({
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -224,7 +224,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/examples/radix/calendar-time.tsx b/apps/v4/examples/radix/calendar-time.tsx
index 4403048086..c0f714f27e 100644
--- a/apps/v4/examples/radix/calendar-time.tsx
+++ b/apps/v4/examples/radix/calendar-time.tsx
@@ -26,7 +26,7 @@ export function CalendarWithTime() {
           className="p-0"
         />
       </CardContent>
-      <CardFooter className="bg-card border-t">
+      <CardFooter className="border-t bg-card">
         <FieldGroup>
           <Field>
             <FieldLabel htmlFor="time-from">Start Time</FieldLabel>
diff --git a/apps/v4/examples/radix/carousel-api.tsx b/apps/v4/examples/radix/carousel-api.tsx
index c8ee7d3c19..b71d1475a6 100644
--- a/apps/v4/examples/radix/carousel-api.tsx
+++ b/apps/v4/examples/radix/carousel-api.tsx
@@ -46,7 +46,7 @@ export default function CarouselDApiDemo() {
         <CarouselPrevious />
         <CarouselNext />
       </Carousel>
-      <div className="text-muted-foreground py-2 text-center text-sm">
+      <div className="py-2 text-center text-sm text-muted-foreground">
         Slide {current} of {count}
       </div>
     </div>
diff --git a/apps/v4/examples/radix/chart-demo.tsx b/apps/v4/examples/radix/chart-demo.tsx
index a74be7d3ce..a61706b824 100644
--- a/apps/v4/examples/radix/chart-demo.tsx
+++ b/apps/v4/examples/radix/chart-demo.tsx
@@ -80,8 +80,8 @@ export function ChartDemo() {
 
   return (
     <Card className="py-0 pb-4">
-      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
-        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
+      <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
           <CardTitle>Bar Chart - Interactive</CardTitle>
           <CardDescription>
             Showing total visitors for the last 3 months
@@ -94,10 +94,10 @@ export function ChartDemo() {
               <button
                 key={chart}
                 data-active={activeChart === chart}
-                className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
                 onClick={() => setActiveChart(chart)}
               >
-                <span className="text-muted-foreground text-xs">
+                <span className="text-xs text-muted-foreground">
                   {chartConfig[chart].label}
                 </span>
                 <span className="text-lg leading-none font-bold sm:text-3xl">
diff --git a/apps/v4/examples/radix/chart-tooltip.tsx b/apps/v4/examples/radix/chart-tooltip.tsx
index ea524211ef..b4f2aee682 100644
--- a/apps/v4/examples/radix/chart-tooltip.tsx
+++ b/apps/v4/examples/radix/chart-tooltip.tsx
@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 
 export function ChartTooltipDemo() {
   return (
-    <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
+    <div className="grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
       <div>
         <div className="absolute top-[45px] left-[-35px] z-10 text-sm font-medium">
           Label
@@ -75,7 +75,7 @@ export function ChartTooltipDemo() {
           className="w-[8rem]"
         />
       </div>
-      <div className="!hidden md:!flex">
+      <div className="hidden! md:flex!">
         <TooltipDemo
           label="Page Views"
           payload={[{ name: "Desktop", value: 12486, fill: "var(--chart-3)" }]}
@@ -83,7 +83,7 @@ export function ChartTooltipDemo() {
           indicator="line"
         />
       </div>
-      <div className="!items-start !justify-start">
+      <div className="items-start! justify-start!">
         <div className="absolute top-[60px] left-[50px] z-10 text-sm font-medium">
           Indicator
         </div>
@@ -152,7 +152,7 @@ function TooltipDemo({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
         className
       )}
     >
@@ -165,7 +165,7 @@ function TooltipDemo({
             <div
               key={index}
               className={cn(
-                "[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                 indicator === "dot" && "items-center"
               )}
             >
@@ -200,7 +200,7 @@ function TooltipDemo({
                     {nestLabel ? tooltipLabel : null}
                     <span className="text-muted-foreground">{item.name}</span>
                   </div>
-                  <span className="text-foreground font-mono font-medium tabular-nums">
+                  <span className="font-mono font-medium text-foreground tabular-nums">
                     {item.value.toLocaleString()}
                   </span>
                 </div>
diff --git a/apps/v4/examples/radix/collapsible-basic.tsx b/apps/v4/examples/radix/collapsible-basic.tsx
index cf6988cf67..2ccbd0cd60 100644
--- a/apps/v4/examples/radix/collapsible-basic.tsx
+++ b/apps/v4/examples/radix/collapsible-basic.tsx
@@ -12,7 +12,7 @@ export function CollapsibleBasic() {
   return (
     <Card className="mx-auto w-full max-w-sm">
       <CardContent>
-        <Collapsible className="data-[state=open]:bg-muted rounded-md">
+        <Collapsible className="rounded-md data-[state=open]:bg-muted">
           <CollapsibleTrigger asChild>
             <Button variant="ghost" className="group w-full">
               Product details
diff --git a/apps/v4/examples/radix/collapsible-file-tree.tsx b/apps/v4/examples/radix/collapsible-file-tree.tsx
index 6ee6ac6cdb..7307cb36d0 100644
--- a/apps/v4/examples/radix/collapsible-file-tree.tsx
+++ b/apps/v4/examples/radix/collapsible-file-tree.tsx
@@ -71,14 +71,14 @@ export function CollapsibleFileTree() {
             <Button
               variant="ghost"
               size="sm"
-              className="group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none"
+              className="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground"
             >
               <ChevronRightIcon className="transition-transform group-data-[state=open]:rotate-90" />
               <FolderIcon />
               {fileItem.name}
             </Button>
           </CollapsibleTrigger>
-          <CollapsibleContent className="style-lyra:ml-4 mt-1 ml-5">
+          <CollapsibleContent className="mt-1 ml-5 style-lyra:ml-4">
             <div className="flex flex-col gap-1">
               {fileItem.items.map((child) => renderItem(child))}
             </div>
@@ -91,7 +91,7 @@ export function CollapsibleFileTree() {
         key={fileItem.name}
         variant="link"
         size="sm"
-        className="text-foreground w-full justify-start gap-2"
+        className="w-full justify-start gap-2 text-foreground"
       >
         <FileIcon />
         <span>{fileItem.name}</span>
diff --git a/apps/v4/examples/radix/command-dialog.tsx b/apps/v4/examples/radix/command-dialog.tsx
index 919855d808..89ab5f5a78 100644
--- a/apps/v4/examples/radix/command-dialog.tsx
+++ b/apps/v4/examples/radix/command-dialog.tsx
@@ -37,9 +37,9 @@ export function CommandDialogDemo() {
 
   return (
     <>
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         Press{" "}
-        <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+        <kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 select-none">
           <span className="text-xs">⌘</span>J
         </kbd>
       </p>
diff --git a/apps/v4/examples/radix/data-table-demo.tsx b/apps/v4/examples/radix/data-table-demo.tsx
index 23e5590302..4ef6b4e91f 100644
--- a/apps/v4/examples/radix/data-table-demo.tsx
+++ b/apps/v4/examples/radix/data-table-demo.tsx
@@ -288,7 +288,7 @@ export function DataTableDemo() {
         </Table>
       </div>
       <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="text-muted-foreground flex-1 text-sm">
+        <div className="flex-1 text-sm text-muted-foreground">
           {table.getFilteredSelectedRowModel().rows.length} of{" "}
           {table.getFilteredRowModel().rows.length} row(s) selected.
         </div>
diff --git a/apps/v4/examples/radix/data-table-rtl.tsx b/apps/v4/examples/radix/data-table-rtl.tsx
index ea9318b114..eaac7faa32 100644
--- a/apps/v4/examples/radix/data-table-rtl.tsx
+++ b/apps/v4/examples/radix/data-table-rtl.tsx
@@ -401,7 +401,7 @@ export function DataTableRtl() {
         </Table>
       </div>
       <div className="flex items-center justify-end gap-2 py-4">
-        <div className="text-muted-foreground flex-1 text-sm">
+        <div className="flex-1 text-sm text-muted-foreground">
           {table.getFilteredSelectedRowModel().rows.length} {t.rowsSelected}{" "}
           {table.getFilteredRowModel().rows.length} {t.rowsSelectedSuffix}
         </div>
diff --git a/apps/v4/examples/radix/date-picker-demo.tsx b/apps/v4/examples/radix/date-picker-demo.tsx
index eb092d149a..8bb9044515 100644
--- a/apps/v4/examples/radix/date-picker-demo.tsx
+++ b/apps/v4/examples/radix/date-picker-demo.tsx
@@ -20,7 +20,7 @@ export function DatePickerDemo() {
         <Button
           variant="outline"
           data-empty={!date}
-          className="data-[empty=true]:text-muted-foreground w-[212px] justify-between text-left font-normal"
+          className="w-[212px] justify-between text-left font-normal data-[empty=true]:text-muted-foreground"
         >
           {date ? format(date, "PPP") : <span>Pick a date</span>}
           <ChevronDownIcon />
diff --git a/apps/v4/examples/radix/date-picker-natural-language.tsx b/apps/v4/examples/radix/date-picker-natural-language.tsx
index 0d4fe49b70..f3b74f4e43 100644
--- a/apps/v4/examples/radix/date-picker-natural-language.tsx
+++ b/apps/v4/examples/radix/date-picker-natural-language.tsx
@@ -91,7 +91,7 @@ export function DatePickerNaturalLanguage() {
           </Popover>
         </InputGroupAddon>
       </InputGroup>
-      <div className="text-muted-foreground px-1 text-sm">
+      <div className="px-1 text-sm text-muted-foreground">
         Your post will be published on{" "}
         <span className="font-medium">{formatDate(date)}</span>.
       </div>
diff --git a/apps/v4/examples/radix/date-picker-rtl.tsx b/apps/v4/examples/radix/date-picker-rtl.tsx
index 55a22f880a..752834330e 100644
--- a/apps/v4/examples/radix/date-picker-rtl.tsx
+++ b/apps/v4/examples/radix/date-picker-rtl.tsx
@@ -71,7 +71,7 @@ export function DatePickerRtl() {
         <Button
           variant="outline"
           data-empty={!date}
-          className="data-[empty=true]:text-muted-foreground w-[212px] justify-between text-left font-normal"
+          className="w-[212px] justify-between text-left font-normal data-[empty=true]:text-muted-foreground"
           dir={dir}
         >
           {date ? (
diff --git a/apps/v4/examples/radix/date-picker-time.tsx b/apps/v4/examples/radix/date-picker-time.tsx
index bbe757e9ed..2041b73a40 100644
--- a/apps/v4/examples/radix/date-picker-time.tsx
+++ b/apps/v4/examples/radix/date-picker-time.tsx
@@ -53,7 +53,7 @@ export function DatePickerTime() {
           id="time-picker-optional"
           step="1"
           defaultValue="10:30:00"
-          className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+          className="appearance-none bg-background [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
         />
       </Field>
     </FieldGroup>
diff --git a/apps/v4/examples/radix/dialog-scrollable-content.tsx b/apps/v4/examples/radix/dialog-scrollable-content.tsx
index 6a680ea412..7f271262fe 100644
--- a/apps/v4/examples/radix/dialog-scrollable-content.tsx
+++ b/apps/v4/examples/radix/dialog-scrollable-content.tsx
@@ -21,7 +21,7 @@ export function DialogScrollableContent() {
             This is a dialog with scrollable content.
           </DialogDescription>
         </DialogHeader>
-        <div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
+        <div className="-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4">
           {Array.from({ length: 10 }).map((_, index) => (
             <p key={index} className="mb-4 leading-normal">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
diff --git a/apps/v4/examples/radix/dialog-sticky-footer.tsx b/apps/v4/examples/radix/dialog-sticky-footer.tsx
index 14e714bd11..6828895168 100644
--- a/apps/v4/examples/radix/dialog-sticky-footer.tsx
+++ b/apps/v4/examples/radix/dialog-sticky-footer.tsx
@@ -24,7 +24,7 @@ export function DialogStickyFooter() {
             scrolls.
           </DialogDescription>
         </DialogHeader>
-        <div className="no-scrollbar -mx-4 max-h-[50vh] overflow-y-auto px-4">
+        <div className="-mx-4 no-scrollbar max-h-[50vh] overflow-y-auto px-4">
           {Array.from({ length: 10 }).map((_, index) => (
             <p key={index} className="mb-4 leading-normal">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
diff --git a/apps/v4/examples/radix/drawer-demo.tsx b/apps/v4/examples/radix/drawer-demo.tsx
index 5e88517455..3e1533a8a2 100644
--- a/apps/v4/examples/radix/drawer-demo.tsx
+++ b/apps/v4/examples/radix/drawer-demo.tsx
@@ -91,7 +91,7 @@ export function DrawerDemo() {
                 <div className="text-7xl font-bold tracking-tighter">
                   {goal}
                 </div>
-                <div className="text-muted-foreground text-[0.70rem] uppercase">
+                <div className="text-[0.70rem] text-muted-foreground uppercase">
                   Calories/day
                 </div>
               </div>
diff --git a/apps/v4/examples/radix/drawer-rtl.tsx b/apps/v4/examples/radix/drawer-rtl.tsx
index 734c13929a..0e4c2fe5c2 100644
--- a/apps/v4/examples/radix/drawer-rtl.tsx
+++ b/apps/v4/examples/radix/drawer-rtl.tsx
@@ -142,7 +142,7 @@ export function DrawerRtl() {
                 <div className="text-7xl font-bold tracking-tighter">
                   {goal.toLocaleString(locale)}
                 </div>
-                <div className="text-muted-foreground text-[0.70rem] uppercase">
+                <div className="text-[0.70rem] text-muted-foreground uppercase">
                   {t.caloriesPerDay}
                 </div>
               </div>
diff --git a/apps/v4/examples/radix/drawer-scrollable-content.tsx b/apps/v4/examples/radix/drawer-scrollable-content.tsx
index c220f94a90..0d4cf43408 100644
--- a/apps/v4/examples/radix/drawer-scrollable-content.tsx
+++ b/apps/v4/examples/radix/drawer-scrollable-content.tsx
@@ -25,7 +25,7 @@ export function DrawerScrollableContent() {
           {Array.from({ length: 10 }).map((_, index) => (
             <p
               key={index}
-              className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+              className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
             >
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
               eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
diff --git a/apps/v4/examples/radix/drawer-sides.tsx b/apps/v4/examples/radix/drawer-sides.tsx
index 77575c6664..d260f95d01 100644
--- a/apps/v4/examples/radix/drawer-sides.tsx
+++ b/apps/v4/examples/radix/drawer-sides.tsx
@@ -38,7 +38,7 @@ export function DrawerWithSides() {
               {Array.from({ length: 10 }).map((_, index) => (
                 <p
                   key={index}
-                  className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                  className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
                 >
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                   do eiusmod tempor incididunt ut labore et dolore magna aliqua.
diff --git a/apps/v4/examples/radix/empty-avatar-group.tsx b/apps/v4/examples/radix/empty-avatar-group.tsx
index a7fcb7fa91..f025cc1d5c 100644
--- a/apps/v4/examples/radix/empty-avatar-group.tsx
+++ b/apps/v4/examples/radix/empty-avatar-group.tsx
@@ -15,7 +15,7 @@ export default function EmptyAvatarGroup() {
     <Empty>
       <EmptyHeader>
         <EmptyMedia>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
             <Avatar>
               <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/examples/radix/empty-background.tsx b/apps/v4/examples/radix/empty-background.tsx
index a7a97d4338..9b8b569241 100644
--- a/apps/v4/examples/radix/empty-background.tsx
+++ b/apps/v4/examples/radix/empty-background.tsx
@@ -12,7 +12,7 @@ import { RefreshCcwIcon } from "lucide-react"
 
 export function EmptyMuted() {
   return (
-    <Empty className="bg-muted/30 h-full">
+    <Empty className="h-full bg-muted/30">
       <EmptyHeader>
         <EmptyMedia variant="icon">
           <IconBell />
diff --git a/apps/v4/examples/radix/file-upload-list.tsx b/apps/v4/examples/radix/file-upload-list.tsx
index aaae3af21b..742a685238 100644
--- a/apps/v4/examples/radix/file-upload-list.tsx
+++ b/apps/v4/examples/radix/file-upload-list.tsx
@@ -57,7 +57,7 @@ export function FileUploadList() {
             <Progress value={file.progress} className="w-32" />
           </ItemContent>
           <ItemActions className="w-16 justify-end">
-            <span className="text-muted-foreground text-sm">
+            <span className="text-sm text-muted-foreground">
               {file.timeRemaining}
             </span>
           </ItemActions>
diff --git a/apps/v4/examples/radix/hover-card-demo.tsx b/apps/v4/examples/radix/hover-card-demo.tsx
index 7ba72c3051..a6644d739f 100644
--- a/apps/v4/examples/radix/hover-card-demo.tsx
+++ b/apps/v4/examples/radix/hover-card-demo.tsx
@@ -14,7 +14,7 @@ export default function HoverCardDemo() {
       <HoverCardContent className="flex w-64 flex-col gap-0.5">
         <div className="font-semibold">@nextjs</div>
         <div>The React Framework – created and maintained by @vercel.</div>
-        <div className="text-muted-foreground mt-1 text-xs">
+        <div className="mt-1 text-xs text-muted-foreground">
           Joined December 2021
         </div>
       </HoverCardContent>
diff --git a/apps/v4/examples/radix/hover-card-rtl.tsx b/apps/v4/examples/radix/hover-card-rtl.tsx
index 3bc6b7b13c..8c908b2eb6 100644
--- a/apps/v4/examples/radix/hover-card-rtl.tsx
+++ b/apps/v4/examples/radix/hover-card-rtl.tsx
@@ -74,7 +74,7 @@ export function HoverCardRtl() {
             dir={dir}
           >
             <div className="font-semibold">{t.name}</div>
-            <div className="text-muted-foreground text-sm">{t.price}</div>
+            <div className="text-sm text-muted-foreground">{t.price}</div>
           </HoverCardContent>
         </HoverCard>
       ))}
diff --git a/apps/v4/examples/radix/input-group-button.tsx b/apps/v4/examples/radix/input-group-button.tsx
index 546b9f507c..2469e25c59 100644
--- a/apps/v4/examples/radix/input-group-button.tsx
+++ b/apps/v4/examples/radix/input-group-button.tsx
@@ -59,7 +59,7 @@ export default function InputGroupButtonExample() {
             <p>You should not enter any sensitive information on this site.</p>
           </PopoverContent>
         </Popover>
-        <InputGroupAddon className="text-muted-foreground pl-1.5">
+        <InputGroupAddon className="pl-1.5 text-muted-foreground">
           https://
         </InputGroupAddon>
         <InputGroupInput id="input-secure-19" />
diff --git a/apps/v4/examples/radix/input-group-dropdown.tsx b/apps/v4/examples/radix/input-group-dropdown.tsx
index 590293bdc9..5d935539ca 100644
--- a/apps/v4/examples/radix/input-group-dropdown.tsx
+++ b/apps/v4/examples/radix/input-group-dropdown.tsx
@@ -44,7 +44,7 @@ export default function InputGroupDropdown() {
         <InputGroupAddon align="inline-end">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <InputGroupButton variant="ghost" className="!pr-1.5 text-xs">
+              <InputGroupButton variant="ghost" className="pr-1.5! text-xs">
                 Search In... <ChevronDownIcon className="size-3" />
               </InputGroupButton>
             </DropdownMenuTrigger>
diff --git a/apps/v4/examples/radix/input-group-text.tsx b/apps/v4/examples/radix/input-group-text.tsx
index 99e7803ddb..65cbb36fe1 100644
--- a/apps/v4/examples/radix/input-group-text.tsx
+++ b/apps/v4/examples/radix/input-group-text.tsx
@@ -22,7 +22,7 @@ export default function InputGroupTextExample() {
         <InputGroupAddon>
           <InputGroupText>https://</InputGroupText>
         </InputGroupAddon>
-        <InputGroupInput placeholder="example.com" className="!pl-0.5" />
+        <InputGroupInput placeholder="example.com" className="pl-0.5!" />
         <InputGroupAddon align="inline-end">
           <InputGroupText>.com</InputGroupText>
         </InputGroupAddon>
@@ -36,7 +36,7 @@ export default function InputGroupTextExample() {
       <InputGroup>
         <InputGroupTextarea placeholder="Enter your message" />
         <InputGroupAddon align="block-end">
-          <InputGroupText className="text-muted-foreground text-xs">
+          <InputGroupText className="text-xs text-muted-foreground">
             120 characters left
           </InputGroupText>
         </InputGroupAddon>
diff --git a/apps/v4/examples/radix/input-group-textarea-examples.tsx b/apps/v4/examples/radix/input-group-textarea-examples.tsx
index 6c06cea28d..f5cd19d3f6 100644
--- a/apps/v4/examples/radix/input-group-textarea-examples.tsx
+++ b/apps/v4/examples/radix/input-group-textarea-examples.tsx
@@ -77,7 +77,7 @@ export function InputGroupTextareaExamples() {
           <InputGroupTextarea id="prompt-31" />
           <InputGroupAddon align="block-start">
             <InputGroupText>Ask, Search or Chat...</InputGroupText>
-            <InfoIcon className="text-muted-foreground ml-auto" />
+            <InfoIcon className="ml-auto text-muted-foreground" />
           </InputGroupAddon>
         </InputGroup>
         <FieldDescription>
diff --git a/apps/v4/examples/radix/input-group-with-addons.tsx b/apps/v4/examples/radix/input-group-with-addons.tsx
index be08bdb8ed..df27bc7504 100644
--- a/apps/v4/examples/radix/input-group-with-addons.tsx
+++ b/apps/v4/examples/radix/input-group-with-addons.tsx
@@ -69,7 +69,7 @@ export function InputGroupWithAddons() {
           <InputGroupInput id="input-addon-20" />
           <InputGroupAddon align="block-start">
             <InputGroupText>First Name</InputGroupText>
-            <InfoIcon className="text-muted-foreground ml-auto" />
+            <InfoIcon className="ml-auto text-muted-foreground" />
           </InputGroupAddon>
         </InputGroup>
       </Field>
@@ -79,7 +79,7 @@ export function InputGroupWithAddons() {
           <InputGroupInput id="input-addon-21" />
           <InputGroupAddon align="block-end">
             <InputGroupText>20/240 characters</InputGroupText>
-            <InfoIcon className="text-muted-foreground ml-auto" />
+            <InfoIcon className="ml-auto text-muted-foreground" />
           </InputGroupAddon>
         </InputGroup>
       </Field>
diff --git a/apps/v4/examples/radix/input-group-with-tooltip.tsx b/apps/v4/examples/radix/input-group-with-tooltip.tsx
index b799a85651..34ae130a57 100644
--- a/apps/v4/examples/radix/input-group-with-tooltip.tsx
+++ b/apps/v4/examples/radix/input-group-with-tooltip.tsx
@@ -119,7 +119,7 @@ export function InputGroupWithTooltip({
               </PopoverHeader>
             </PopoverContent>
           </Popover>
-          <InputGroupAddon className="text-muted-foreground pl-1">
+          <InputGroupAddon className="pl-1 text-muted-foreground">
             https://
           </InputGroupAddon>
           <InputGroupInput id="input-secure-19" />
diff --git a/apps/v4/examples/radix/input-otp-form.tsx b/apps/v4/examples/radix/input-otp-form.tsx
index 5eee5fc34e..f14f6db1dd 100644
--- a/apps/v4/examples/radix/input-otp-form.tsx
+++ b/apps/v4/examples/radix/input-otp-form.tsx
@@ -60,11 +60,11 @@ export function InputOTPForm() {
           <Button type="submit" className="w-full">
             Verify
           </Button>
-          <div className="text-muted-foreground text-sm">
+          <div className="text-sm text-muted-foreground">
             Having trouble signing in?{" "}
             <a
               href="#"
-              className="hover:text-primary underline underline-offset-4 transition-colors"
+              className="underline underline-offset-4 transition-colors hover:text-primary"
             >
               Contact support
             </a>
diff --git a/apps/v4/examples/radix/item-avatar.tsx b/apps/v4/examples/radix/item-avatar.tsx
index 4b44dd5ddf..63ae469344 100644
--- a/apps/v4/examples/radix/item-avatar.tsx
+++ b/apps/v4/examples/radix/item-avatar.tsx
@@ -37,7 +37,7 @@ export function ItemAvatar() {
       </Item>
       <Item variant="outline">
         <ItemMedia>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
             <Avatar className="hidden sm:flex">
               <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/examples/radix/kbd-group.tsx b/apps/v4/examples/radix/kbd-group.tsx
index 55f587ba03..8bef9450bf 100644
--- a/apps/v4/examples/radix/kbd-group.tsx
+++ b/apps/v4/examples/radix/kbd-group.tsx
@@ -3,7 +3,7 @@ import { Kbd, KbdGroup } from "@/examples/radix/ui/kbd"
 export default function KbdGroupExample() {
   return (
     <div className="flex flex-col items-center gap-4">
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         Use{" "}
         <KbdGroup>
           <Kbd>Ctrl + B</Kbd>
diff --git a/apps/v4/examples/radix/kbd-tooltip.tsx b/apps/v4/examples/radix/kbd-tooltip.tsx
index 2ecd902c46..0cad933633 100644
--- a/apps/v4/examples/radix/kbd-tooltip.tsx
+++ b/apps/v4/examples/radix/kbd-tooltip.tsx
@@ -15,24 +15,20 @@ export default function KbdTooltip() {
           <TooltipTrigger asChild>
             <Button variant="outline">Save</Button>
           </TooltipTrigger>
-          <TooltipContent className="pr-1.5">
-            <div className="flex items-center gap-2">
-              Save Changes <Kbd>S</Kbd>
-            </div>
+          <TooltipContent>
+            Save Changes <Kbd>S</Kbd>
           </TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger asChild>
             <Button variant="outline">Print</Button>
           </TooltipTrigger>
-          <TooltipContent className="pr-1.5">
-            <div className="flex items-center gap-2">
-              Print Document{" "}
-              <KbdGroup>
-                <Kbd>Ctrl</Kbd>
-                <Kbd>P</Kbd>
-              </KbdGroup>
-            </div>
+          <TooltipContent>
+            Print Document{" "}
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>P</Kbd>
+            </KbdGroup>
           </TooltipContent>
         </Tooltip>
       </ButtonGroup>
diff --git a/apps/v4/examples/radix/navigation-menu-demo.tsx b/apps/v4/examples/radix/navigation-menu-demo.tsx
index 16cfb6370c..27b936b044 100644
--- a/apps/v4/examples/radix/navigation-menu-demo.tsx
+++ b/apps/v4/examples/radix/navigation-menu-demo.tsx
@@ -108,7 +108,7 @@ function ListItem({
         <Link href={href}>
           <div className="flex flex-col gap-1 text-sm">
             <div className="leading-none font-medium">{title}</div>
-            <div className="text-muted-foreground line-clamp-2">{children}</div>
+            <div className="line-clamp-2 text-muted-foreground">{children}</div>
           </div>
         </Link>
       </NavigationMenuLink>
diff --git a/apps/v4/examples/radix/navigation-menu-rtl.tsx b/apps/v4/examples/radix/navigation-menu-rtl.tsx
index a45476b68d..86a4aec29c 100644
--- a/apps/v4/examples/radix/navigation-menu-rtl.tsx
+++ b/apps/v4/examples/radix/navigation-menu-rtl.tsx
@@ -226,7 +226,7 @@ function ListItem({
         <Link href={href}>
           <div className="flex flex-col gap-1 text-sm">
             <div className="leading-none font-medium">{title}</div>
-            <div className="text-muted-foreground line-clamp-2">{children}</div>
+            <div className="line-clamp-2 text-muted-foreground">{children}</div>
           </div>
         </Link>
       </NavigationMenuLink>
diff --git a/apps/v4/examples/radix/popover-demo.tsx b/apps/v4/examples/radix/popover-demo.tsx
index 7738d5610e..365b73fc7d 100644
--- a/apps/v4/examples/radix/popover-demo.tsx
+++ b/apps/v4/examples/radix/popover-demo.tsx
@@ -17,7 +17,7 @@ export default function PopoverDemo() {
         <div className="grid gap-4">
           <div className="space-y-2">
             <h4 className="leading-none font-medium">Dimensions</h4>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               Set the dimensions for the layer.
             </p>
           </div>
diff --git a/apps/v4/examples/radix/scroll-area-horizontal-demo.tsx b/apps/v4/examples/radix/scroll-area-horizontal-demo.tsx
index e322c72dba..61727b623e 100644
--- a/apps/v4/examples/radix/scroll-area-horizontal-demo.tsx
+++ b/apps/v4/examples/radix/scroll-area-horizontal-demo.tsx
@@ -37,9 +37,9 @@ export function ScrollAreaHorizontalDemo() {
                 height={400}
               />
             </div>
-            <figcaption className="text-muted-foreground pt-2 text-xs">
+            <figcaption className="pt-2 text-xs text-muted-foreground">
               Photo by{" "}
-              <span className="text-foreground font-semibold">
+              <span className="font-semibold text-foreground">
                 {artwork.artist}
               </span>
             </figcaption>
diff --git a/apps/v4/examples/radix/separator-menu.tsx b/apps/v4/examples/radix/separator-menu.tsx
index 238b07e980..2e0f608a84 100644
--- a/apps/v4/examples/radix/separator-menu.tsx
+++ b/apps/v4/examples/radix/separator-menu.tsx
@@ -5,21 +5,21 @@ export function SeparatorMenu() {
     <div className="flex items-center gap-2 text-sm md:gap-4">
       <div className="flex flex-col gap-1">
         <span className="font-medium">Settings</span>
-        <span className="text-muted-foreground text-xs">
+        <span className="text-xs text-muted-foreground">
           Manage preferences
         </span>
       </div>
       <Separator orientation="vertical" />
       <div className="flex flex-col gap-1">
         <span className="font-medium">Account</span>
-        <span className="text-muted-foreground text-xs">
+        <span className="text-xs text-muted-foreground">
           Profile & security
         </span>
       </div>
       <Separator orientation="vertical" className="hidden md:block" />
       <div className="hidden flex-col gap-1 md:flex">
         <span className="font-medium">Help</span>
-        <span className="text-muted-foreground text-xs">Support & docs</span>
+        <span className="text-xs text-muted-foreground">Support & docs</span>
       </div>
     </div>
   )
diff --git a/apps/v4/examples/radix/sidebar-demo.tsx b/apps/v4/examples/radix/sidebar-demo.tsx
index f4aa5b9dae..d05d4530e5 100644
--- a/apps/v4/examples/radix/sidebar-demo.tsx
+++ b/apps/v4/examples/radix/sidebar-demo.tsx
@@ -217,7 +217,7 @@ function TeamSwitcher({
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <activeTeam.logo className="size-4" />
               </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
@@ -234,7 +234,7 @@ function TeamSwitcher({
             sideOffset={4}
           >
             <DropdownMenuGroup>
-              <DropdownMenuLabel className="text-muted-foreground text-xs">
+              <DropdownMenuLabel className="text-xs text-muted-foreground">
                 Teams
               </DropdownMenuLabel>
               {teams.map((team, index) => (
@@ -257,7 +257,7 @@ function TeamSwitcher({
                 <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
                   <Plus className="size-4" />
                 </div>
-                <div className="text-muted-foreground font-medium">
+                <div className="font-medium text-muted-foreground">
                   Add team
                 </div>
               </DropdownMenuItem>
diff --git a/apps/v4/examples/radix/sidebar-group-collapsible.tsx b/apps/v4/examples/radix/sidebar-group-collapsible.tsx
index 419d19c64a..171267c601 100644
--- a/apps/v4/examples/radix/sidebar-group-collapsible.tsx
+++ b/apps/v4/examples/radix/sidebar-group-collapsible.tsx
@@ -27,7 +27,7 @@ export default function AppSidebar() {
             <SidebarGroup>
               <SidebarGroupLabel
                 asChild
-                className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
+                className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 <CollapsibleTrigger>
                   Help
diff --git a/apps/v4/examples/radix/sidebar-rtl.tsx b/apps/v4/examples/radix/sidebar-rtl.tsx
index 2476d9dd79..02da4fa07d 100644
--- a/apps/v4/examples/radix/sidebar-rtl.tsx
+++ b/apps/v4/examples/radix/sidebar-rtl.tsx
@@ -324,7 +324,7 @@ function SidebarContentInner({
             <SidebarMenuItem>
               <SidebarMenuButton size="lg" asChild>
                 <a href="#">
-                  <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                     <GalleryVerticalEnd className="size-4" />
                   </div>
                   <div className="flex flex-col gap-0.5 leading-none">
diff --git a/apps/v4/examples/radix/slider-controlled.tsx b/apps/v4/examples/radix/slider-controlled.tsx
index bf6bf14afb..f21f6b78e2 100644
--- a/apps/v4/examples/radix/slider-controlled.tsx
+++ b/apps/v4/examples/radix/slider-controlled.tsx
@@ -11,7 +11,7 @@ export function SliderControlled() {
     <div className="mx-auto grid w-full max-w-xs gap-3">
       <div className="flex items-center justify-between gap-2">
         <Label htmlFor="slider-demo-temperature">Temperature</Label>
-        <span className="text-muted-foreground text-sm">
+        <span className="text-sm text-muted-foreground">
           {value.join(", ")}
         </span>
       </div>
diff --git a/apps/v4/examples/radix/tabs-demo.tsx b/apps/v4/examples/radix/tabs-demo.tsx
index b9c87fda0f..f542fc129b 100644
--- a/apps/v4/examples/radix/tabs-demo.tsx
+++ b/apps/v4/examples/radix/tabs-demo.tsx
@@ -30,7 +30,7 @@ export function TabsDemo() {
               across all your active projects.
             </CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             You have 12 active projects and 3 pending tasks.
           </CardContent>
         </Card>
@@ -44,7 +44,7 @@ export function TabsDemo() {
               identify growth opportunities.
             </CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             Page views are up 25% compared to last month.
           </CardContent>
         </Card>
@@ -58,7 +58,7 @@ export function TabsDemo() {
               multiple formats for analysis.
             </CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             You have 5 reports ready and available to export.
           </CardContent>
         </Card>
@@ -72,7 +72,7 @@ export function TabsDemo() {
               experience to fit your needs.
             </CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             Configure notifications, security, and themes.
           </CardContent>
         </Card>
diff --git a/apps/v4/examples/radix/tabs-rtl.tsx b/apps/v4/examples/radix/tabs-rtl.tsx
index d7c409e123..bbb0b6ee21 100644
--- a/apps/v4/examples/radix/tabs-rtl.tsx
+++ b/apps/v4/examples/radix/tabs-rtl.tsx
@@ -115,7 +115,7 @@ export function TabsRtl() {
             <CardTitle>{t.overviewTitle}</CardTitle>
             <CardDescription>{t.overviewDesc}</CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             {t.overviewContent}
           </CardContent>
         </Card>
@@ -126,7 +126,7 @@ export function TabsRtl() {
             <CardTitle>{t.analyticsTitle}</CardTitle>
             <CardDescription>{t.analyticsDesc}</CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             {t.analyticsContent}
           </CardContent>
         </Card>
@@ -137,7 +137,7 @@ export function TabsRtl() {
             <CardTitle>{t.reportsTitle}</CardTitle>
             <CardDescription>{t.reportsDesc}</CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             {t.reportsContent}
           </CardContent>
         </Card>
@@ -148,7 +148,7 @@ export function TabsRtl() {
             <CardTitle>{t.settingsTitle}</CardTitle>
             <CardDescription>{t.settingsDesc}</CardDescription>
           </CardHeader>
-          <CardContent className="text-muted-foreground text-sm">
+          <CardContent className="text-sm text-muted-foreground">
             {t.settingsContent}
           </CardContent>
         </Card>
diff --git a/apps/v4/examples/radix/toggle-group-font-weight-selector.tsx b/apps/v4/examples/radix/toggle-group-font-weight-selector.tsx
index a2bcad8780..a3694ae8af 100644
--- a/apps/v4/examples/radix/toggle-group-font-weight-selector.tsx
+++ b/apps/v4/examples/radix/toggle-group-font-weight-selector.tsx
@@ -23,7 +23,7 @@ export function ToggleGroupFontWeightSelector() {
           className="flex size-16 flex-col items-center justify-center rounded-xl"
         >
           <span className="text-2xl leading-none font-light">Aa</span>
-          <span className="text-muted-foreground text-xs">Light</span>
+          <span className="text-xs text-muted-foreground">Light</span>
         </ToggleGroupItem>
         <ToggleGroupItem
           value="normal"
@@ -31,7 +31,7 @@ export function ToggleGroupFontWeightSelector() {
           className="flex size-16 flex-col items-center justify-center rounded-xl"
         >
           <span className="text-2xl leading-none font-normal">Aa</span>
-          <span className="text-muted-foreground text-xs">Normal</span>
+          <span className="text-xs text-muted-foreground">Normal</span>
         </ToggleGroupItem>
         <ToggleGroupItem
           value="medium"
@@ -39,7 +39,7 @@ export function ToggleGroupFontWeightSelector() {
           className="flex size-16 flex-col items-center justify-center rounded-xl"
         >
           <span className="text-2xl leading-none font-medium">Aa</span>
-          <span className="text-muted-foreground text-xs">Medium</span>
+          <span className="text-xs text-muted-foreground">Medium</span>
         </ToggleGroupItem>
         <ToggleGroupItem
           value="bold"
@@ -47,12 +47,12 @@ export function ToggleGroupFontWeightSelector() {
           className="flex size-16 flex-col items-center justify-center rounded-xl"
         >
           <span className="text-2xl leading-none font-bold">Aa</span>
-          <span className="text-muted-foreground text-xs">Bold</span>
+          <span className="text-xs text-muted-foreground">Bold</span>
         </ToggleGroupItem>
       </ToggleGroup>
       <FieldDescription>
         Use{" "}
-        <code className="bg-muted rounded-md px-1 py-0.5 font-mono">
+        <code className="rounded-md bg-muted px-1 py-0.5 font-mono">
           font-{fontWeight}
         </code>{" "}
         to set the font weight.
diff --git a/apps/v4/examples/radix/tooltip-keyboard.tsx b/apps/v4/examples/radix/tooltip-keyboard.tsx
index 214b2b99ce..dae82600ba 100644
--- a/apps/v4/examples/radix/tooltip-keyboard.tsx
+++ b/apps/v4/examples/radix/tooltip-keyboard.tsx
@@ -15,10 +15,8 @@ export function TooltipKeyboard() {
           <SaveIcon />
         </Button>
       </TooltipTrigger>
-      <TooltipContent className="pr-1.5">
-        <div className="flex items-center gap-2">
-          Save Changes <Kbd>S</Kbd>
-        </div>
+      <TooltipContent>
+        Save Changes <Kbd>S</Kbd>
       </TooltipContent>
     </Tooltip>
   )
diff --git a/apps/v4/examples/radix/typography-demo.tsx b/apps/v4/examples/radix/typography-demo.tsx
index 055226cff5..effec043b5 100644
--- a/apps/v4/examples/radix/typography-demo.tsx
+++ b/apps/v4/examples/radix/typography-demo.tsx
@@ -4,7 +4,7 @@ export function TypographyDemo() {
       <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
         Taxing Laughter: The Joke Tax Chronicles
       </h1>
-      <p className="text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6">
+      <p className="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">
         Once upon a time, in a far-off land, there was a very lazy king who
         spent all day lounging on his throne. One day, his advisors came to him
         with a problem: the kingdom was running out of money.
@@ -16,7 +16,7 @@ export function TypographyDemo() {
         The king thought long and hard, and finally came up with{" "}
         <a
           href="#"
-          className="text-primary font-medium underline underline-offset-4"
+          className="font-medium text-primary underline underline-offset-4"
         >
           a brilliant plan
         </a>
@@ -68,7 +68,7 @@ export function TypographyDemo() {
       <div className="my-6 w-full overflow-y-auto">
         <table className="w-full">
           <thead>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
                 King&apos;s Treasury
               </th>
@@ -78,7 +78,7 @@ export function TypographyDemo() {
             </tr>
           </thead>
           <tbody>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                 Empty
               </td>
@@ -86,7 +86,7 @@ export function TypographyDemo() {
                 Overflowing
               </td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                 Modest
               </td>
@@ -94,7 +94,7 @@ export function TypographyDemo() {
                 Satisfied
               </td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                 Full
               </td>
diff --git a/apps/v4/examples/radix/typography-inline-code.tsx b/apps/v4/examples/radix/typography-inline-code.tsx
index c93892e6e5..7679b87d6d 100644
--- a/apps/v4/examples/radix/typography-inline-code.tsx
+++ b/apps/v4/examples/radix/typography-inline-code.tsx
@@ -1,6 +1,6 @@
 export function TypographyInlineCode() {
   return (
-    <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
       @radix-ui/react-alert-dialog
     </code>
   )
diff --git a/apps/v4/examples/radix/typography-lead.tsx b/apps/v4/examples/radix/typography-lead.tsx
index 26d618694f..b6609a5cad 100644
--- a/apps/v4/examples/radix/typography-lead.tsx
+++ b/apps/v4/examples/radix/typography-lead.tsx
@@ -1,6 +1,6 @@
 export function TypographyLead() {
   return (
-    <p className="text-muted-foreground text-xl">
+    <p className="text-xl text-muted-foreground">
       A modal dialog that interrupts the user with important content and expects
       a response.
     </p>
diff --git a/apps/v4/examples/radix/typography-muted.tsx b/apps/v4/examples/radix/typography-muted.tsx
index a576326b8d..f737f5664b 100644
--- a/apps/v4/examples/radix/typography-muted.tsx
+++ b/apps/v4/examples/radix/typography-muted.tsx
@@ -1,5 +1,5 @@
 export function TypographyMuted() {
   return (
-    <p className="text-muted-foreground text-sm">Enter your email address.</p>
+    <p className="text-sm text-muted-foreground">Enter your email address.</p>
   )
 }
diff --git a/apps/v4/examples/radix/typography-rtl.tsx b/apps/v4/examples/radix/typography-rtl.tsx
index 322c67f416..266e1918ab 100644
--- a/apps/v4/examples/radix/typography-rtl.tsx
+++ b/apps/v4/examples/radix/typography-rtl.tsx
@@ -144,7 +144,7 @@ export function TypographyRtl() {
       <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
         {t.title}
       </h1>
-      <p className="text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6">
+      <p className="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">
         {t.leadParagraph}
       </p>
       <h2 className="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
@@ -154,7 +154,7 @@ export function TypographyRtl() {
         {t.kingThought}{" "}
         <a
           href="#"
-          className="text-primary font-medium underline underline-offset-4"
+          className="font-medium text-primary underline underline-offset-4"
         >
           {t.brilliantPlan}
         </a>
@@ -187,7 +187,7 @@ export function TypographyRtl() {
       <div className="my-6 w-full overflow-y-auto">
         <table className="w-full">
           <thead>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <th className="border px-4 py-2 text-start font-bold">
                 {t.kingsTreasury}
               </th>
@@ -197,15 +197,15 @@ export function TypographyRtl() {
             </tr>
           </thead>
           <tbody>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-start">{t.empty}</td>
               <td className="border px-4 py-2 text-start">{t.overflowing}</td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-start">{t.modest}</td>
               <td className="border px-4 py-2 text-start">{t.satisfied}</td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-start">{t.full}</td>
               <td className="border px-4 py-2 text-start">{t.ecstatic}</td>
             </tr>
diff --git a/apps/v4/examples/radix/typography-table.tsx b/apps/v4/examples/radix/typography-table.tsx
index ab3ae87697..5995a087ae 100644
--- a/apps/v4/examples/radix/typography-table.tsx
+++ b/apps/v4/examples/radix/typography-table.tsx
@@ -3,7 +3,7 @@ export function TypographyTable() {
     <div className="my-6 w-full overflow-y-auto">
       <table className="w-full">
         <thead>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
               King&apos;s Treasury
             </th>
@@ -13,7 +13,7 @@ export function TypographyTable() {
           </tr>
         </thead>
         <tbody>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
               Empty
             </td>
@@ -21,7 +21,7 @@ export function TypographyTable() {
               Overflowing
             </td>
           </tr>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
               Modest
             </td>
@@ -29,7 +29,7 @@ export function TypographyTable() {
               Satisfied
             </td>
           </tr>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
               Full
             </td>
diff --git a/apps/v4/examples/radix/ui-rtl/accordion.tsx b/apps/v4/examples/radix/ui-rtl/accordion.tsx
index d79392dbfb..6c4f75be4e 100644
--- a/apps/v4/examples/radix/ui-rtl/accordion.tsx
+++ b/apps/v4/examples/radix/ui-rtl/accordion.tsx
@@ -41,7 +41,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className
         )}
         {...props}
@@ -68,12 +68,12 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
       {...props}
     >
       <div
         className={cn(
-          "[&_a]:hover:text-foreground h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
           className
         )}
       >
diff --git a/apps/v4/examples/radix/ui-rtl/alert-dialog.tsx b/apps/v4/examples/radix/ui-rtl/alert-dialog.tsx
index e0934253e3..e76d66afdf 100644
--- a/apps/v4/examples/radix/ui-rtl/alert-dialog.tsx
+++ b/apps/v4/examples/radix/ui-rtl/alert-dialog.tsx
@@ -35,7 +35,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -57,7 +57,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed start-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm rtl:translate-x-1/2",
+          "group/alert-dialog-content fixed start-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm rtl:translate-x-1/2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -90,7 +90,7 @@ function AlertDialogFooter({
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -106,7 +106,7 @@ function AlertDialogMedia({
     <div
       data-slot="alert-dialog-media"
       className={cn(
-        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
         className
       )}
       {...props}
@@ -138,7 +138,7 @@ function AlertDialogDescription({
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
       className={cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/alert.tsx b/apps/v4/examples/radix/ui-rtl/alert.tsx
index 22144f5500..c75f25164c 100644
--- a/apps/v4/examples/radix/ui-rtl/alert.tsx
+++ b/apps/v4/examples/radix/ui-rtl/alert.tsx
@@ -3,13 +3,13 @@ import { cn } from "@/examples/radix/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const alertVariants = cva(
-  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-start text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pe-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
       },
     },
     defaultVariants: {
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3",
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/avatar.tsx b/apps/v4/examples/radix/ui-rtl/avatar.tsx
index 1af18d995a..29c1b88837 100644
--- a/apps/v4/examples/radix/ui-rtl/avatar.tsx
+++ b/apps/v4/examples/radix/ui-rtl/avatar.tsx
@@ -16,7 +16,7 @@ function Avatar({
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
         className
       )}
       {...props}
@@ -48,7 +48,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
         className
       )}
       {...props}
@@ -61,7 +61,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="avatar-badge"
       className={cn(
-        "bg-primary text-primary-foreground ring-background absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "absolute end-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -77,7 +77,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="avatar-group"
       className={cn(
-        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
         className
       )}
       {...props}
@@ -93,7 +93,7 @@ function AvatarGroupCount({
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/badge.tsx b/apps/v4/examples/radix/ui-rtl/badge.tsx
index 8f82daa703..cceb6437f9 100644
--- a/apps/v4/examples/radix/ui-rtl/badge.tsx
+++ b/apps/v4/examples/radix/ui-rtl/badge.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
@@ -12,7 +12,7 @@ const badgeVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
-          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
         outline:
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost:
diff --git a/apps/v4/examples/radix/ui-rtl/breadcrumb.tsx b/apps/v4/examples/radix/ui-rtl/breadcrumb.tsx
index 257aaa2ecf..dbc447136e 100644
--- a/apps/v4/examples/radix/ui-rtl/breadcrumb.tsx
+++ b/apps/v4/examples/radix/ui-rtl/breadcrumb.tsx
@@ -19,7 +19,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
         className
       )}
       {...props}
@@ -49,7 +49,7 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
   )
@@ -62,7 +62,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn("font-normal text-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui-rtl/button-group.tsx b/apps/v4/examples/radix/ui-rtl/button-group.tsx
index d3a201edf8..4196797ff6 100644
--- a/apps/v4/examples/radix/ui-rtl/button-group.tsx
+++ b/apps/v4/examples/radix/ui-rtl/button-group.tsx
@@ -4,14 +4,14 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonGroupVariants = cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none",
+          "[&>*:not(:first-child)]:rounded-s-none [&>*:not(:first-child)]:border-s-0 [&>*:not(:last-child)]:rounded-e-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg!",
         vertical:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!",
       },
     },
     defaultVariants: {
@@ -48,7 +48,7 @@ function ButtonGroupText({
   return (
     <Comp
       className={cn(
-        "bg-muted flex items-center gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -66,7 +66,7 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/button.tsx b/apps/v4/examples/radix/ui-rtl/button.tsx
index 13c9247c91..c12334d13b 100644
--- a/apps/v4/examples/radix/ui-rtl/button.tsx
+++ b/apps/v4/examples/radix/ui-rtl/button.tsx
@@ -4,19 +4,19 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
-          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
         destructive:
-          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/apps/v4/examples/radix/ui-rtl/calendar.tsx b/apps/v4/examples/radix/ui-rtl/calendar.tsx
index 4daefe65c4..775d41cf53 100644
--- a/apps/v4/examples/radix/ui-rtl/calendar.tsx
+++ b/apps/v4/examples/radix/ui-rtl/calendar.tsx
@@ -34,7 +34,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -49,80 +49,80 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
+          "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
+          "absolute inset-0 bg-popover opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius) group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-e-(--cell-radius)",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-s-(--cell-radius)"
             : "[&:first-child[data-selected=true]_button]:rounded-s-(--cell-radius)",
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-s-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 z-0 isolate",
+          "relative isolate z-0 rounded-s-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:end-0 after:w-4 after:bg-muted",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 z-0 isolate",
+          "relative isolate z-0 rounded-e-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:start-0 after:w-4 after:bg-muted",
           defaultClassNames.range_end
         ),
         today: cn(
-          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -219,7 +219,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-e-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-s-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/examples/radix/ui-rtl/card.tsx b/apps/v4/examples/radix/ui-rtl/card.tsx
index fcd8fed0cd..673d3abfb3 100644
--- a/apps/v4/examples/radix/ui-rtl/card.tsx
+++ b/apps/v4/examples/radix/ui-rtl/card.tsx
@@ -11,7 +11,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       )}
       {...props}
@@ -49,7 +49,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
@@ -83,7 +83,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/chart.tsx b/apps/v4/examples/radix/ui-rtl/chart.tsx
index 352d5a7ace..d287bdae6d 100644
--- a/apps/v4/examples/radix/ui-rtl/chart.tsx
+++ b/apps/v4/examples/radix/ui-rtl/chart.tsx
@@ -54,7 +54,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -172,7 +172,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
@@ -189,7 +189,7 @@ function ChartTooltipContent({
               <div
                 key={item.dataKey}
                 className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
                 )}
               >
@@ -234,7 +234,7 @@ function ChartTooltipContent({
                         </span>
                       </div>
                       {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
+                        <span className="font-mono font-medium text-foreground tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -286,7 +286,7 @@ function ChartLegendContent({
             <div
               key={item.value}
               className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
diff --git a/apps/v4/examples/radix/ui-rtl/checkbox.tsx b/apps/v4/examples/radix/ui-rtl/checkbox.tsx
index 43b061ec6c..d671ea1858 100644
--- a/apps/v4/examples/radix/ui-rtl/checkbox.tsx
+++ b/apps/v4/examples/radix/ui-rtl/checkbox.tsx
@@ -13,7 +13,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/combobox.tsx b/apps/v4/examples/radix/ui-rtl/combobox.tsx
index 22bb13c0d3..4142ea4bbb 100644
--- a/apps/v4/examples/radix/ui-rtl/combobox.tsx
+++ b/apps/v4/examples/radix/ui-rtl/combobox.tsx
@@ -30,7 +30,7 @@ function ComboboxTrigger({
       {...props}
     >
       {children}
-      <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -112,7 +112,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-end-2 data-[side=inline-end]:slide-in-from-start-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
+            "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg 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-start-2 data-[side=inline-start]:slide-in-from-end-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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -144,7 +144,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -178,7 +178,7 @@ function ComboboxLabel({
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
       {...props}
     />
   )
@@ -195,7 +195,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
       className={cn(
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
         className
       )}
       {...props}
@@ -210,7 +210,7 @@ function ComboboxSeparator({
   return (
     <ComboboxPrimitive.Separator
       data-slot="combobox-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -225,7 +225,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -245,7 +245,7 @@ function ComboboxChip({
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
       className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pe-0",
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 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]:pe-0",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/command.tsx b/apps/v4/examples/radix/ui-rtl/command.tsx
index c967318298..3f4e026b01 100644
--- a/apps/v4/examples/radix/ui-rtl/command.tsx
+++ b/apps/v4/examples/radix/ui-rtl/command.tsx
@@ -24,7 +24,7 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1",
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
         className
       )}
       {...props}
@@ -70,7 +70,7 @@ function CommandInput({
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:ps-2!">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:ps-2!">
         <CommandPrimitive.Input
           data-slot="command-input"
           className={cn(
@@ -124,7 +124,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
         className
       )}
       {...props}
@@ -139,7 +139,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
+      className={cn("-mx-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -154,7 +154,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
         className
       )}
       {...props}
@@ -173,7 +173,7 @@ function CommandShortcut({
     <span
       data-slot="command-shortcut"
       className={cn(
-        "text-muted-foreground group-data-selected/command-item:text-foreground ms-auto text-xs tracking-widest",
+        "ms-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/context-menu.tsx b/apps/v4/examples/radix/ui-rtl/context-menu.tsx
index ad29bb227d..ec2e87db56 100644
--- a/apps/v4/examples/radix/ui-rtl/context-menu.tsx
+++ b/apps/v4/examples/radix/ui-rtl/context-menu.tsx
@@ -68,7 +68,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100",
+          "cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -92,7 +92,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -113,7 +113,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -132,7 +132,7 @@ function ContextMenuSubContent({
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border p-1 shadow-lg duration-100",
+        "cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}
@@ -154,7 +154,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -183,7 +183,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -210,7 +210,7 @@ function ContextMenuLabel({
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7",
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:ps-7",
         className
       )}
       {...props}
@@ -225,7 +225,7 @@ function ContextMenuSeparator({
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -239,7 +239,7 @@ function ContextMenuShortcut({
     <span
       data-slot="context-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/context-menu-item:text-accent-foreground ms-auto text-xs tracking-widest",
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/dialog.tsx b/apps/v4/examples/radix/ui-rtl/dialog.tsx
index 0c75c3a1d7..fd438cd8cc 100644
--- a/apps/v4/examples/radix/ui-rtl/dialog.tsx
+++ b/apps/v4/examples/radix/ui-rtl/dialog.tsx
@@ -38,7 +38,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -60,7 +60,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed start-1/2 top-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm rtl:translate-x-1/2",
+          "fixed start-1/2 top-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm rtl:translate-x-1/2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -105,7 +105,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -141,7 +141,7 @@ function DialogDescription({
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/drawer.tsx b/apps/v4/examples/radix/ui-rtl/drawer.tsx
index 5628ffc0e0..43dbdcdf6c 100644
--- a/apps/v4/examples/radix/ui-rtl/drawer.tsx
+++ b/apps/v4/examples/radix/ui-rtl/drawer.tsx
@@ -36,7 +36,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -55,12 +55,12 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-e-xl data-[vaul-drawer-direction=left]:border-e data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-s-xl data-[vaul-drawer-direction=right]:border-s data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className
         )}
         {...props}
       >
-        <div className="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -97,7 +97,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn("text-base font-medium text-foreground", className)}
       {...props}
     />
   )
@@ -110,7 +110,7 @@ function DrawerDescription({
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx b/apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx
index 96cbd22376..c1fd2565b2 100644
--- a/apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx
+++ b/apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx
@@ -43,7 +43,7 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         align={align}
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 data-[state=closed]:overflow-hidden",
+          "cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -75,7 +75,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -97,7 +97,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -170,7 +170,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7",
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:ps-7",
         className
       )}
       {...props}
@@ -185,7 +185,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -199,7 +199,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ms-auto text-xs tracking-widest",
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
         className
       )}
       {...props}
@@ -226,7 +226,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -245,7 +245,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100",
+        "cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/empty.tsx b/apps/v4/examples/radix/ui-rtl/empty.tsx
index 4180e11965..59d889229d 100644
--- a/apps/v4/examples/radix/ui-rtl/empty.tsx
+++ b/apps/v4/examples/radix/ui-rtl/empty.tsx
@@ -30,7 +30,7 @@ const emptyMediaVariants = cva(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
       },
     },
     defaultVariants: {
@@ -69,7 +69,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
     <div
       data-slot="empty-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/field.tsx b/apps/v4/examples/radix/ui-rtl/field.tsx
index 1942b55420..34640ab278 100644
--- a/apps/v4/examples/radix/ui-rtl/field.tsx
+++ b/apps/v4/examples/radix/ui-rtl/field.tsx
@@ -51,15 +51,15 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const fieldVariants = cva(
-  "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
     variants: {
       orientation: {
         vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
         horizontal:
-          "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         responsive:
-          "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -105,7 +105,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
@@ -132,9 +132,9 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-start text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-start text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
@@ -162,7 +162,7 @@ function FieldSeparator({
       <Separator className="absolute inset-0 top-1/2" />
       {children && (
         <span
-          className="text-muted-foreground bg-background relative mx-auto block w-fit px-2"
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
           data-slot="field-separator-content"
         >
           {children}
@@ -215,7 +215,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn("text-sm font-normal text-destructive", className)}
       {...props}
     >
       {content}
diff --git a/apps/v4/examples/radix/ui-rtl/hover-card.tsx b/apps/v4/examples/radix/ui-rtl/hover-card.tsx
index 85b64ee5a6..0101b19763 100644
--- a/apps/v4/examples/radix/ui-rtl/hover-card.tsx
+++ b/apps/v4/examples/radix/ui-rtl/hover-card.tsx
@@ -31,7 +31,7 @@ function HoverCardContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/input-group.tsx b/apps/v4/examples/radix/ui-rtl/input-group.tsx
index 33c63b86e8..96265af311 100644
--- a/apps/v4/examples/radix/ui-rtl/input-group.tsx
+++ b/apps/v4/examples/radix/ui-rtl/input-group.tsx
@@ -13,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
         className
       )}
       {...props}
@@ -22,18 +22,18 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
         "inline-start":
-          "ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem] order-first",
+          "order-first ps-2 has-[>button]:ms-[-0.3rem] has-[>kbd]:ms-[-0.15rem]",
         "inline-end":
-          "pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem] order-last",
+          "order-last pe-2 has-[>button]:me-[-0.3rem] has-[>kbd]:me-[-0.15rem]",
         "block-start":
-          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
         "block-end":
-          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
       },
     },
     defaultVariants: {
@@ -65,7 +65,7 @@ function InputGroupAddon({
 }
 
 const inputGroupButtonVariants = cva(
-  "gap-2 text-sm shadow-none flex items-center",
+  "flex items-center gap-2 text-sm shadow-none",
   {
     variants: {
       size: {
@@ -105,7 +105,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_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-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/input-otp.tsx b/apps/v4/examples/radix/ui-rtl/input-otp.tsx
index 0a961b1890..dd66b39e95 100644
--- a/apps/v4/examples/radix/ui-rtl/input-otp.tsx
+++ b/apps/v4/examples/radix/ui-rtl/input-otp.tsx
@@ -31,7 +31,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="input-otp-group"
       className={cn(
-        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3",
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg data-[active=true]:z-10 data-[active=true]:ring-3",
+        "relative flex size-8 items-center justify-center border-y border-e border-input text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>
diff --git a/apps/v4/examples/radix/ui-rtl/input.tsx b/apps/v4/examples/radix/ui-rtl/input.tsx
index 952f743a92..a56772944c 100644
--- a/apps/v4/examples/radix/ui-rtl/input.tsx
+++ b/apps/v4/examples/radix/ui-rtl/input.tsx
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/item.tsx b/apps/v4/examples/radix/ui-rtl/item.tsx
index 9d94035a31..58276c6641 100644
--- a/apps/v4/examples/radix/ui-rtl/item.tsx
+++ b/apps/v4/examples/radix/ui-rtl/item.tsx
@@ -33,13 +33,13 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
   {
     variants: {
       variant: {
         default: "border-transparent",
         outline: "border-border",
-        muted: "bg-muted/50 border-transparent",
+        muted: "border-transparent bg-muted/50",
       },
       size: {
         default: "gap-2.5 px-3 py-2.5",
@@ -75,7 +75,7 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
@@ -137,7 +137,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="item-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-start text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4",
+        "line-clamp-2 text-start text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/kbd.tsx b/apps/v4/examples/radix/ui-rtl/kbd.tsx
index d99543b959..d3b91dfd67 100644
--- a/apps/v4/examples/radix/ui-rtl/kbd.tsx
+++ b/apps/v4/examples/radix/ui-rtl/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn(
-        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/menubar.tsx b/apps/v4/examples/radix/ui-rtl/menubar.tsx
index 542e8be16d..db9127600a 100644
--- a/apps/v4/examples/radix/ui-rtl/menubar.tsx
+++ b/apps/v4/examples/radix/ui-rtl/menubar.tsx
@@ -13,7 +13,7 @@ function Menubar({
     <MenubarPrimitive.Root
       data-slot="menubar"
       className={cn(
-        "bg-background flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
+        "flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
         className
       )}
       {...props}
@@ -55,7 +55,7 @@ function MenubarTrigger({
     <MenubarPrimitive.Trigger
       data-slot="menubar-trigger"
       className={cn(
-        "hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none",
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
         className
       )}
       {...props}
@@ -78,7 +78,7 @@ function MenubarContent({
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100",
+          "cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
           className
         )}
         {...props}
@@ -102,7 +102,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -124,7 +124,7 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -153,7 +153,7 @@ function MenubarRadioItem({
       data-slot="menubar-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -195,7 +195,7 @@ function MenubarSeparator({
   return (
     <MenubarPrimitive.Separator
       data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -209,7 +209,7 @@ function MenubarShortcut({
     <span
       data-slot="menubar-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/menubar-item:text-accent-foreground ms-auto text-xs tracking-widest",
+        "ms-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
         className
       )}
       {...props}
@@ -236,7 +236,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none data-inset:ps-7 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:ps-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -255,7 +255,7 @@ function MenubarSubContent({
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100",
+        "cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/native-select.tsx b/apps/v4/examples/radix/ui-rtl/native-select.tsx
index 72e7fefa2f..c6d5610b15 100644
--- a/apps/v4/examples/radix/ui-rtl/native-select.tsx
+++ b/apps/v4/examples/radix/ui-rtl/native-select.tsx
@@ -23,11 +23,11 @@ function NativeSelect({
       <select
         data-slot="native-select"
         data-size={size}
-        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
         {...props}
       />
       <ChevronDownIcon
-        className="text-muted-foreground pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 select-none"
+        className="pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground select-none"
         aria-hidden="true"
         data-slot="native-select-icon"
       />
diff --git a/apps/v4/examples/radix/ui-rtl/navigation-menu.tsx b/apps/v4/examples/radix/ui-rtl/navigation-menu.tsx
index e1cc483ef2..5a6cfdaf57 100644
--- a/apps/v4/examples/radix/ui-rtl/navigation-menu.tsx
+++ b/apps/v4/examples/radix/ui-rtl/navigation-menu.tsx
@@ -58,7 +58,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
 )
 
 function NavigationMenuTrigger({
@@ -74,7 +74,7 @@ function NavigationMenuTrigger({
     >
       {children}{" "}
       <ChevronDownIcon
-        className="relative top-px ms-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        className="relative top-px ms-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -89,7 +89,7 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 start-0 top-0 w-full p-1 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-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
+        "start-0 top-0 w-full p-1 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-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
         className
       )}
       {...props}
@@ -110,7 +110,7 @@ function NavigationMenuViewport({
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-(--radix-navigation-menu-viewport-width)",
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow 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-95",
           className
         )}
         {...props}
@@ -127,7 +127,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -143,12 +143,12 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Indicator
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
         className
       )}
       {...props}
     >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm shadow-md" />
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-ss-sm bg-border shadow-md" />
     </NavigationMenuPrimitive.Indicator>
   )
 }
diff --git a/apps/v4/examples/radix/ui-rtl/popover.tsx b/apps/v4/examples/radix/ui-rtl/popover.tsx
index 0c40782ca4..42f2290cdb 100644
--- a/apps/v4/examples/radix/ui-rtl/popover.tsx
+++ b/apps/v4/examples/radix/ui-rtl/popover.tsx
@@ -29,7 +29,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/progress.tsx b/apps/v4/examples/radix/ui-rtl/progress.tsx
index a785f3c046..f6ba431ad0 100644
--- a/apps/v4/examples/radix/ui-rtl/progress.tsx
+++ b/apps/v4/examples/radix/ui-rtl/progress.tsx
@@ -13,14 +13,14 @@ function Progress({
     <ProgressPrimitive.Root
       data-slot="progress"
       className={cn(
-        "bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full",
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
         className
       )}
       {...props}
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className="bg-primary size-full flex-1 transition-all"
+        className="size-full flex-1 bg-primary transition-all"
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
diff --git a/apps/v4/examples/radix/ui-rtl/radio-group.tsx b/apps/v4/examples/radix/ui-rtl/radio-group.tsx
index 4237fa8dbf..5a3c57a3f1 100644
--- a/apps/v4/examples/radix/ui-rtl/radio-group.tsx
+++ b/apps/v4/examples/radix/ui-rtl/radio-group.tsx
@@ -25,7 +25,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       )}
       {...props}
@@ -34,7 +34,7 @@ function RadioGroupItem({
         data-slot="radio-group-indicator"
         className="flex size-4 items-center justify-center"
       >
-        <span className="bg-primary-foreground absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full rtl:translate-x-1/2" />
+        <span className="absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground rtl:translate-x-1/2" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
diff --git a/apps/v4/examples/radix/ui-rtl/resizable.tsx b/apps/v4/examples/radix/ui-rtl/resizable.tsx
index 869f393be3..4a648f6dd2 100644
--- a/apps/v4/examples/radix/ui-rtl/resizable.tsx
+++ b/apps/v4/examples/radix/ui-rtl/resizable.tsx
@@ -34,13 +34,13 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:start-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:start-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 rtl:after:translate-x-1/2 rtl:aria-[orientation=horizontal]:after:-translate-x-0 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
       )}
     </ResizablePrimitive.Separator>
   )
diff --git a/apps/v4/examples/radix/ui-rtl/scroll-area.tsx b/apps/v4/examples/radix/ui-rtl/scroll-area.tsx
index 5515452364..7385f13515 100644
--- a/apps/v4/examples/radix/ui-rtl/scroll-area.tsx
+++ b/apps/v4/examples/radix/ui-rtl/scroll-area.tsx
@@ -17,7 +17,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -45,7 +45,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
+        className="relative flex-1 rounded-full bg-border"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   )
diff --git a/apps/v4/examples/radix/ui-rtl/select.tsx b/apps/v4/examples/radix/ui-rtl/select.tsx
index 8a7017d5fb..4df0ded236 100644
--- a/apps/v4/examples/radix/ui-rtl/select.tsx
+++ b/apps/v4/examples/radix/ui-rtl/select.tsx
@@ -43,14 +43,14 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
         className
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -69,7 +69,7 @@ function SelectContent({
         data-slot="select-content"
         data-align-trigger={position === "item-aligned"}
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target 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-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none",
+          "cn-menu-target 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-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 rtl:data-[side=left]:translate-x-1 rtl:data-[side=right]:-translate-x-1",
           className
@@ -101,7 +101,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
       {...props}
     />
   )
@@ -116,7 +116,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
@@ -138,7 +138,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -152,7 +152,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
       className={cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center 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-4",
         className
       )}
       {...props}
@@ -170,7 +170,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
       className={cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center 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-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/separator.tsx b/apps/v4/examples/radix/ui-rtl/separator.tsx
index 5d2038a84c..4c8bdb6966 100644
--- a/apps/v4/examples/radix/ui-rtl/separator.tsx
+++ b/apps/v4/examples/radix/ui-rtl/separator.tsx
@@ -16,7 +16,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/sheet.tsx b/apps/v4/examples/radix/ui-rtl/sheet.tsx
index fc3bd421d0..55d1cdf5d9 100644
--- a/apps/v4/examples/radix/ui-rtl/sheet.tsx
+++ b/apps/v4/examples/radix/ui-rtl/sheet.tsx
@@ -36,7 +36,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -61,7 +61,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-e data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-s data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
           className
         )}
         {...props}
@@ -111,7 +111,7 @@ function SheetTitle({
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn("text-base font-medium text-foreground", className)}
       {...props}
     />
   )
@@ -124,7 +124,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui-rtl/sidebar.tsx b/apps/v4/examples/radix/ui-rtl/sidebar.tsx
index 9c348b6886..9feeadb5e4 100644
--- a/apps/v4/examples/radix/ui-rtl/sidebar.tsx
+++ b/apps/v4/examples/radix/ui-rtl/sidebar.tsx
@@ -136,7 +136,7 @@ function SidebarProvider({
           } as React.CSSProperties
         }
         className={cn(
-          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
           className
         )}
         {...props}
@@ -167,7 +167,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
           className
         )}
         {...props}
@@ -185,7 +185,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -205,7 +205,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer hidden text-sidebar-foreground md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -240,7 +240,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
         >
           {children}
         </div>
@@ -287,10 +287,10 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize rtl:in-data-[side=left]:cursor-e-resize rtl:in-data-[side=right]:cursor-w-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize rtl:[[data-side=left][data-state=collapsed]_&]:cursor-w-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize rtl:[[data-side=right][data-state=collapsed]_&]:cursor-e-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full rtl:group-data-[collapsible=offcanvas]:-translate-x-0",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:start-full hover:group-data-[collapsible=offcanvas]:bg-sidebar rtl:group-data-[collapsible=offcanvas]:-translate-x-0",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-end-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-start-2",
         className
@@ -305,7 +305,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2",
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ms-2",
         className
       )}
       {...props}
@@ -321,7 +321,7 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
+      className={cn("h-8 w-full bg-background shadow-none", className)}
       {...props}
     />
   )
@@ -357,7 +357,7 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
   )
@@ -400,7 +400,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium 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-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         className
       )}
       {...props}
@@ -420,7 +420,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         className
       )}
       {...props}
@@ -465,13 +465,13 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-start text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pe-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
         default: "h-8 text-sm",
@@ -552,9 +552,9 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden 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 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md 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-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         showOnHover &&
-          "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
         className
       )}
       {...props}
@@ -571,7 +571,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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",
+        "pointer-events-none absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
         className
       )}
       {...props}
@@ -623,7 +623,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden rtl:-translate-x-px",
         className
       )}
       {...props}
@@ -665,7 +665,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 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 rtl:translate-x-px [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 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 rtl:translate-x-px data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/skeleton.tsx b/apps/v4/examples/radix/ui-rtl/skeleton.tsx
index 22c9c98b6f..96cd0e1499 100644
--- a/apps/v4/examples/radix/ui-rtl/skeleton.tsx
+++ b/apps/v4/examples/radix/ui-rtl/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-muted animate-pulse rounded-md", className)}
+      className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui-rtl/slider.tsx b/apps/v4/examples/radix/ui-rtl/slider.tsx
index c616651544..26b4a22f1b 100644
--- a/apps/v4/examples/radix/ui-rtl/slider.tsx
+++ b/apps/v4/examples/radix/ui-rtl/slider.tsx
@@ -37,18 +37,18 @@ function Slider({
     >
       <SliderPrimitive.Track
         data-slot="slider-track"
-        className="bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
       >
         <SliderPrimitive.Range
           data-slot="slider-range"
-          className="bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
         />
       </SliderPrimitive.Track>
       {Array.from({ length: _values.length }, (_, index) => (
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/apps/v4/examples/radix/ui-rtl/switch.tsx b/apps/v4/examples/radix/ui-rtl/switch.tsx
index fb844e4844..9d089f5d3f 100644
--- a/apps/v4/examples/radix/ui-rtl/switch.tsx
+++ b/apps/v4/examples/radix/ui-rtl/switch.tsx
@@ -16,14 +16,14 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] rtl:group-data-[size=default]/switch:data-checked:-translate-x-[calc(100%-2px)] rtl:group-data-[size=sm]/switch:data-checked:-translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 rtl:group-data-[size=default]/switch:data-unchecked:-translate-x-0 rtl:group-data-[size=sm]/switch:data-unchecked:-translate-x-0 dark:data-unchecked:bg-foreground"
       />
     </SwitchPrimitive.Root>
   )
diff --git a/apps/v4/examples/radix/ui-rtl/table.tsx b/apps/v4/examples/radix/ui-rtl/table.tsx
index a78be82cb6..c0469a1c5a 100644
--- a/apps/v4/examples/radix/ui-rtl/table.tsx
+++ b/apps/v4/examples/radix/ui-rtl/table.tsx
@@ -43,7 +43,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
         className
       )}
       {...props}
@@ -69,7 +69,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-start align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pe-0",
+        "h-10 px-2 text-start align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pe-0",
         className
       )}
       {...props}
@@ -97,7 +97,7 @@ function TableCaption({
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui-rtl/tabs.tsx b/apps/v4/examples/radix/ui-rtl/tabs.tsx
index 314725382c..de93c792e7 100644
--- a/apps/v4/examples/radix/ui-rtl/tabs.tsx
+++ b/apps/v4/examples/radix/ui-rtl/tabs.tsx
@@ -24,7 +24,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -62,10 +62,10 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "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:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/textarea.tsx b/apps/v4/examples/radix/ui-rtl/textarea.tsx
index 5b3cf28626..a10381fb0a 100644
--- a/apps/v4/examples/radix/ui-rtl/textarea.tsx
+++ b/apps/v4/examples/radix/ui-rtl/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/toggle-group.tsx b/apps/v4/examples/radix/ui-rtl/toggle-group.tsx
index 030063bdeb..478ac7f086 100644
--- a/apps/v4/examples/radix/ui-rtl/toggle-group.tsx
+++ b/apps/v4/examples/radix/ui-rtl/toggle-group.tsx
@@ -40,7 +40,7 @@ function ToggleGroup({
       data-orientation={orientation}
       style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/toggle.tsx b/apps/v4/examples/radix/ui-rtl/toggle.tsx
index edbc9c8c6f..7a519bcbf6 100644
--- a/apps/v4/examples/radix/ui-rtl/toggle.tsx
+++ b/apps/v4/examples/radix/ui-rtl/toggle.tsx
@@ -6,12 +6,12 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Toggle as TogglePrimitive } from "radix-ui"
 
 const toggleVariants = cva(
-  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border-input hover:bg-muted border bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
       },
       size: {
         default: "h-8 min-w-8 px-2",
diff --git a/apps/v4/examples/radix/ui-rtl/tooltip.tsx b/apps/v4/examples/radix/ui-rtl/tooltip.tsx
index 1f3586d1e7..cc15a7ccfd 100644
--- a/apps/v4/examples/radix/ui-rtl/tooltip.tsx
+++ b/apps/v4/examples/radix/ui-rtl/tooltip.tsx
@@ -41,13 +41,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs",
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pe-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
diff --git a/apps/v4/examples/radix/ui/accordion.tsx b/apps/v4/examples/radix/ui/accordion.tsx
index 70f3e5856c..8fb02d80e3 100644
--- a/apps/v4/examples/radix/ui/accordion.tsx
+++ b/apps/v4/examples/radix/ui/accordion.tsx
@@ -41,7 +41,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className
         )}
         {...props}
@@ -68,12 +68,12 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
       {...props}
     >
       <div
         className={cn(
-          "[&_a]:hover:text-foreground h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          "h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
           className
         )}
       >
diff --git a/apps/v4/examples/radix/ui/alert-dialog.tsx b/apps/v4/examples/radix/ui/alert-dialog.tsx
index 25edfba285..d38e7241ca 100644
--- a/apps/v4/examples/radix/ui/alert-dialog.tsx
+++ b/apps/v4/examples/radix/ui/alert-dialog.tsx
@@ -35,7 +35,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -57,7 +57,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm",
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -90,7 +90,7 @@ function AlertDialogFooter({
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -106,7 +106,7 @@ function AlertDialogMedia({
     <div
       data-slot="alert-dialog-media"
       className={cn(
-        "bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
         className
       )}
       {...props}
@@ -138,7 +138,7 @@ function AlertDialogDescription({
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
       className={cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3",
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/alert.tsx b/apps/v4/examples/radix/ui/alert.tsx
index cb60394e1a..77b458b09d 100644
--- a/apps/v4/examples/radix/ui/alert.tsx
+++ b/apps/v4/examples/radix/ui/alert.tsx
@@ -3,13 +3,13 @@ import { cn } from "@/examples/radix/lib/utils"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const alertVariants = cva(
-  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
       },
     },
     defaultVariants: {
@@ -38,7 +38,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3",
+        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/avatar.tsx b/apps/v4/examples/radix/ui/avatar.tsx
index 40422f9c2d..00c5b983aa 100644
--- a/apps/v4/examples/radix/ui/avatar.tsx
+++ b/apps/v4/examples/radix/ui/avatar.tsx
@@ -16,7 +16,7 @@ function Avatar({
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
         className
       )}
       {...props}
@@ -48,7 +48,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
         className
       )}
       {...props}
@@ -61,7 +61,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="avatar-badge"
       className={cn(
-        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none",
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -77,7 +77,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="avatar-group"
       className={cn(
-        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
         className
       )}
       {...props}
@@ -93,7 +93,7 @@ function AvatarGroupCount({
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/badge.tsx b/apps/v4/examples/radix/ui/badge.tsx
index 2b057e0e99..0062669415 100644
--- a/apps/v4/examples/radix/ui/badge.tsx
+++ b/apps/v4/examples/radix/ui/badge.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const badgeVariants = cva(
-  "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {
@@ -12,7 +12,7 @@ const badgeVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
         destructive:
-          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
         outline:
           "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
         ghost:
diff --git a/apps/v4/examples/radix/ui/breadcrumb.tsx b/apps/v4/examples/radix/ui/breadcrumb.tsx
index 9a4edf73db..bf40174e91 100644
--- a/apps/v4/examples/radix/ui/breadcrumb.tsx
+++ b/apps/v4/examples/radix/ui/breadcrumb.tsx
@@ -19,7 +19,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word",
+        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground",
         className
       )}
       {...props}
@@ -49,7 +49,7 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
   )
@@ -62,7 +62,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn("font-normal text-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui/button-group.tsx b/apps/v4/examples/radix/ui/button-group.tsx
index 419258ab5f..441f242b39 100644
--- a/apps/v4/examples/radix/ui/button-group.tsx
+++ b/apps/v4/examples/radix/ui/button-group.tsx
@@ -4,14 +4,14 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonGroupVariants = cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!",
         vertical:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!",
       },
     },
     defaultVariants: {
@@ -48,7 +48,7 @@ function ButtonGroupText({
   return (
     <Comp
       className={cn(
-        "bg-muted flex items-center gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -66,7 +66,7 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+        "relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/button.tsx b/apps/v4/examples/radix/ui/button.tsx
index 59cc130dc9..ad7dca52bc 100644
--- a/apps/v4/examples/radix/ui/button.tsx
+++ b/apps/v4/examples/radix/ui/button.tsx
@@ -4,19 +4,19 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
         outline:
-          "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
         ghost:
-          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
         destructive:
-          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/apps/v4/examples/radix/ui/calendar.tsx b/apps/v4/examples/radix/ui/calendar.tsx
index 824a128700..4e5b9932d5 100644
--- a/apps/v4/examples/radix/ui/calendar.tsx
+++ b/apps/v4/examples/radix/ui/calendar.tsx
@@ -34,7 +34,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        "group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -49,80 +49,80 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
+          "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
+          "absolute inset-0 bg-popover opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
             : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate",
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate",
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
           defaultClassNames.range_end
         ),
         today: cn(
-          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -219,7 +219,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        "relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/examples/radix/ui/card.tsx b/apps/v4/examples/radix/ui/card.tsx
index fcd8fed0cd..673d3abfb3 100644
--- a/apps/v4/examples/radix/ui/card.tsx
+++ b/apps/v4/examples/radix/ui/card.tsx
@@ -11,7 +11,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        "ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
+        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
         className
       )}
       {...props}
@@ -49,7 +49,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
@@ -83,7 +83,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card-footer"
       className={cn(
-        "bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3",
+        "flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/chart.tsx b/apps/v4/examples/radix/ui/chart.tsx
index 352d5a7ace..d287bdae6d 100644
--- a/apps/v4/examples/radix/ui/chart.tsx
+++ b/apps/v4/examples/radix/ui/chart.tsx
@@ -54,7 +54,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -172,7 +172,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
@@ -189,7 +189,7 @@ function ChartTooltipContent({
               <div
                 key={item.dataKey}
                 className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
                 )}
               >
@@ -234,7 +234,7 @@ function ChartTooltipContent({
                         </span>
                       </div>
                       {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
+                        <span className="font-mono font-medium text-foreground tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -286,7 +286,7 @@ function ChartLegendContent({
             <div
               key={item.value}
               className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
diff --git a/apps/v4/examples/radix/ui/checkbox.tsx b/apps/v4/examples/radix/ui/checkbox.tsx
index 43b061ec6c..d671ea1858 100644
--- a/apps/v4/examples/radix/ui/checkbox.tsx
+++ b/apps/v4/examples/radix/ui/checkbox.tsx
@@ -13,7 +13,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/combobox.tsx b/apps/v4/examples/radix/ui/combobox.tsx
index 5bbd6a1e27..051af07d46 100644
--- a/apps/v4/examples/radix/ui/combobox.tsx
+++ b/apps/v4/examples/radix/ui/combobox.tsx
@@ -30,7 +30,7 @@ function ComboboxTrigger({
       {...props}
     >
       {children}
-      <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -112,7 +112,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
+            "cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -144,7 +144,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -178,7 +178,7 @@ function ComboboxLabel({
   return (
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
       {...props}
     />
   )
@@ -195,7 +195,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
       className={cn(
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
         className
       )}
       {...props}
@@ -210,7 +210,7 @@ function ComboboxSeparator({
   return (
     <ComboboxPrimitive.Separator
       data-slot="combobox-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -225,7 +225,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -245,7 +245,7 @@ function ComboboxChip({
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
       className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/command.tsx b/apps/v4/examples/radix/ui/command.tsx
index 1e680567e8..fa050e60e8 100644
--- a/apps/v4/examples/radix/ui/command.tsx
+++ b/apps/v4/examples/radix/ui/command.tsx
@@ -21,7 +21,7 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1",
+        "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground",
         className
       )}
       {...props}
@@ -67,7 +67,7 @@ function CommandInput({
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
     <div data-slot="command-input-wrapper" className="p-1 pb-0">
-      <InputGroup className="bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!">
+      <InputGroup className="h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!">
         <CommandPrimitive.Input
           data-slot="command-input"
           className={cn(
@@ -121,7 +121,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
+        "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
         className
       )}
       {...props}
@@ -136,7 +136,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
+      className={cn("-mx-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -151,7 +151,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
         className
       )}
       {...props}
@@ -170,7 +170,7 @@ function CommandShortcut({
     <span
       data-slot="command-shortcut"
       className={cn(
-        "text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/context-menu.tsx b/apps/v4/examples/radix/ui/context-menu.tsx
index 090131efe3..78c7ea774f 100644
--- a/apps/v4/examples/radix/ui/context-menu.tsx
+++ b/apps/v4/examples/radix/ui/context-menu.tsx
@@ -68,7 +68,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100",
+          "cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -92,7 +92,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -113,7 +113,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -132,7 +132,7 @@ function ContextMenuSubContent({
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border p-1 shadow-lg duration-100",
+        "cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}
@@ -154,7 +154,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -183,7 +183,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -210,7 +210,7 @@ function ContextMenuLabel({
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
         className
       )}
       {...props}
@@ -225,7 +225,7 @@ function ContextMenuSeparator({
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -239,7 +239,7 @@ function ContextMenuShortcut({
     <span
       data-slot="context-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/dialog.tsx b/apps/v4/examples/radix/ui/dialog.tsx
index 62efc9de62..5439d75c5a 100644
--- a/apps/v4/examples/radix/ui/dialog.tsx
+++ b/apps/v4/examples/radix/ui/dialog.tsx
@@ -38,7 +38,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -60,7 +60,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm",
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -105,7 +105,7 @@ function DialogFooter({
     <div
       data-slot="dialog-footer"
       className={cn(
-        "bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end",
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -141,7 +141,7 @@ function DialogDescription({
     <DialogPrimitive.Description
       data-slot="dialog-description"
       className={cn(
-        "text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3",
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/drawer.tsx b/apps/v4/examples/radix/ui/drawer.tsx
index 43420ade32..83d7474b8d 100644
--- a/apps/v4/examples/radix/ui/drawer.tsx
+++ b/apps/v4/examples/radix/ui/drawer.tsx
@@ -36,7 +36,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -55,12 +55,12 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
           className
         )}
         {...props}
       >
-        <div className="bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        <div className="mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -97,7 +97,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn("text-base font-medium text-foreground", className)}
       {...props}
     />
   )
@@ -110,7 +110,7 @@ function DrawerDescription({
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui/dropdown-menu.tsx b/apps/v4/examples/radix/ui/dropdown-menu.tsx
index cdc6ebee3f..3b61d7d1e6 100644
--- a/apps/v4/examples/radix/ui/dropdown-menu.tsx
+++ b/apps/v4/examples/radix/ui/dropdown-menu.tsx
@@ -43,7 +43,7 @@ function DropdownMenuContent({
         sideOffset={sideOffset}
         align={align}
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 data-[state=closed]:overflow-hidden",
+          "cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
@@ -75,7 +75,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -97,7 +97,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -170,7 +170,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
         className
       )}
       {...props}
@@ -185,7 +185,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -199,7 +199,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground",
         className
       )}
       {...props}
@@ -226,7 +226,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -245,7 +245,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100",
+        "cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/empty.tsx b/apps/v4/examples/radix/ui/empty.tsx
index 4180e11965..59d889229d 100644
--- a/apps/v4/examples/radix/ui/empty.tsx
+++ b/apps/v4/examples/radix/ui/empty.tsx
@@ -30,7 +30,7 @@ const emptyMediaVariants = cva(
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
       },
     },
     defaultVariants: {
@@ -69,7 +69,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
     <div
       data-slot="empty-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/field.tsx b/apps/v4/examples/radix/ui/field.tsx
index 20223af414..374ef5aa28 100644
--- a/apps/v4/examples/radix/ui/field.tsx
+++ b/apps/v4/examples/radix/ui/field.tsx
@@ -51,15 +51,15 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const fieldVariants = cva(
-  "data-[invalid=true]:text-destructive gap-2 group/field flex w-full",
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
   {
     variants: {
       orientation: {
         vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
         horizontal:
-          "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         responsive:
-          "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -105,7 +105,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
@@ -132,9 +132,9 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
@@ -162,7 +162,7 @@ function FieldSeparator({
       <Separator className="absolute inset-0 top-1/2" />
       {children && (
         <span
-          className="text-muted-foreground bg-background relative mx-auto block w-fit px-2"
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
           data-slot="field-separator-content"
         >
           {children}
@@ -215,7 +215,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn("text-sm font-normal text-destructive", className)}
       {...props}
     >
       {content}
diff --git a/apps/v4/examples/radix/ui/hover-card.tsx b/apps/v4/examples/radix/ui/hover-card.tsx
index 85b64ee5a6..0101b19763 100644
--- a/apps/v4/examples/radix/ui/hover-card.tsx
+++ b/apps/v4/examples/radix/ui/hover-card.tsx
@@ -31,7 +31,7 @@ function HoverCardContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
diff --git a/apps/v4/examples/radix/ui/input-group.tsx b/apps/v4/examples/radix/ui/input-group.tsx
index 126c3af8ba..2941e7093c 100644
--- a/apps/v4/examples/radix/ui/input-group.tsx
+++ b/apps/v4/examples/radix/ui/input-group.tsx
@@ -13,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className
       )}
       {...props}
@@ -22,18 +22,18 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
         "inline-start":
-          "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+          "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
         "inline-end":
-          "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+          "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
         "block-start":
-          "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+          "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
         "block-end":
-          "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start",
+          "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
       },
     },
     defaultVariants: {
@@ -65,7 +65,7 @@ function InputGroupAddon({
 }
 
 const inputGroupButtonVariants = cva(
-  "gap-2 text-sm shadow-none flex items-center",
+  "flex items-center gap-2 text-sm shadow-none",
   {
     variants: {
       size: {
@@ -105,7 +105,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_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-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/input-otp.tsx b/apps/v4/examples/radix/ui/input-otp.tsx
index a6a3828249..c836dc2c5b 100644
--- a/apps/v4/examples/radix/ui/input-otp.tsx
+++ b/apps/v4/examples/radix/ui/input-otp.tsx
@@ -31,7 +31,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="input-otp-group"
       className={cn(
-        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3",
+        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -54,7 +54,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3",
+        "relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>
diff --git a/apps/v4/examples/radix/ui/input.tsx b/apps/v4/examples/radix/ui/input.tsx
index 952f743a92..a56772944c 100644
--- a/apps/v4/examples/radix/ui/input.tsx
+++ b/apps/v4/examples/radix/ui/input.tsx
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/item.tsx b/apps/v4/examples/radix/ui/item.tsx
index dcc66913e5..5ae46467e6 100644
--- a/apps/v4/examples/radix/ui/item.tsx
+++ b/apps/v4/examples/radix/ui/item.tsx
@@ -33,13 +33,13 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
   {
     variants: {
       variant: {
         default: "border-transparent",
         outline: "border-border",
-        muted: "bg-muted/50 border-transparent",
+        muted: "border-transparent bg-muted/50",
       },
       size: {
         default: "gap-2.5 px-3 py-2.5",
@@ -75,7 +75,7 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
@@ -137,7 +137,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="item-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4",
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/kbd.tsx b/apps/v4/examples/radix/ui/kbd.tsx
index d99543b959..d3b91dfd67 100644
--- a/apps/v4/examples/radix/ui/kbd.tsx
+++ b/apps/v4/examples/radix/ui/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn(
-        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/menubar.tsx b/apps/v4/examples/radix/ui/menubar.tsx
index 9b9fabbdb3..fa7ac19a9e 100644
--- a/apps/v4/examples/radix/ui/menubar.tsx
+++ b/apps/v4/examples/radix/ui/menubar.tsx
@@ -13,7 +13,7 @@ function Menubar({
     <MenubarPrimitive.Root
       data-slot="menubar"
       className={cn(
-        "bg-background flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
+        "flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]",
         className
       )}
       {...props}
@@ -55,7 +55,7 @@ function MenubarTrigger({
     <MenubarPrimitive.Trigger
       data-slot="menubar-trigger"
       className={cn(
-        "hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none",
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
         className
       )}
       {...props}
@@ -78,7 +78,7 @@ function MenubarContent({
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100",
+          "cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
           className
         )}
         {...props}
@@ -102,7 +102,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -124,7 +124,7 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -153,7 +153,7 @@ function MenubarRadioItem({
       data-slot="menubar-radio-item"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -195,7 +195,7 @@ function MenubarSeparator({
   return (
     <MenubarPrimitive.Separator
       data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -209,7 +209,7 @@ function MenubarShortcut({
     <span
       data-slot="menubar-shortcut"
       className={cn(
-        "text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
         className
       )}
       {...props}
@@ -236,7 +236,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -255,7 +255,7 @@ function MenubarSubContent({
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100",
+        "cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/native-select.tsx b/apps/v4/examples/radix/ui/native-select.tsx
index 773a2a2ed1..4b10658bb7 100644
--- a/apps/v4/examples/radix/ui/native-select.tsx
+++ b/apps/v4/examples/radix/ui/native-select.tsx
@@ -23,11 +23,11 @@ function NativeSelect({
       <select
         data-slot="native-select"
         data-size={size}
-        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+        className="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40"
         {...props}
       />
       <ChevronDownIcon
-        className="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
+        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
         aria-hidden="true"
         data-slot="native-select-icon"
       />
diff --git a/apps/v4/examples/radix/ui/navigation-menu.tsx b/apps/v4/examples/radix/ui/navigation-menu.tsx
index 15c1ed5b95..a21bc6f90c 100644
--- a/apps/v4/examples/radix/ui/navigation-menu.tsx
+++ b/apps/v4/examples/radix/ui/navigation-menu.tsx
@@ -58,7 +58,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted"
 )
 
 function NavigationMenuTrigger({
@@ -74,7 +74,7 @@ function NavigationMenuTrigger({
     >
       {children}{" "}
       <ChevronDownIcon
-        className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -89,7 +89,7 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 top-0 left-0 w-full p-1 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-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto",
+        "top-0 left-0 w-full p-1 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-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95",
         className
       )}
       {...props}
@@ -110,7 +110,7 @@ function NavigationMenuViewport({
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-(--radix-navigation-menu-viewport-width)",
+          "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg bg-popover text-popover-foreground shadow 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-95",
           className
         )}
         {...props}
@@ -127,7 +127,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -143,12 +143,12 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Indicator
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+        "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
         className
       )}
       {...props}
     >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
     </NavigationMenuPrimitive.Indicator>
   )
 }
diff --git a/apps/v4/examples/radix/ui/popover.tsx b/apps/v4/examples/radix/ui/popover.tsx
index 0c40782ca4..42f2290cdb 100644
--- a/apps/v4/examples/radix/ui/popover.tsx
+++ b/apps/v4/examples/radix/ui/popover.tsx
@@ -29,7 +29,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100",
+          "z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
diff --git a/apps/v4/examples/radix/ui/progress.tsx b/apps/v4/examples/radix/ui/progress.tsx
index a785f3c046..f6ba431ad0 100644
--- a/apps/v4/examples/radix/ui/progress.tsx
+++ b/apps/v4/examples/radix/ui/progress.tsx
@@ -13,14 +13,14 @@ function Progress({
     <ProgressPrimitive.Root
       data-slot="progress"
       className={cn(
-        "bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full",
+        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",
         className
       )}
       {...props}
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className="bg-primary size-full flex-1 transition-all"
+        className="size-full flex-1 bg-primary transition-all"
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
diff --git a/apps/v4/examples/radix/ui/radio-group.tsx b/apps/v4/examples/radix/ui/radio-group.tsx
index 66a381ead9..2299d014e9 100644
--- a/apps/v4/examples/radix/ui/radio-group.tsx
+++ b/apps/v4/examples/radix/ui/radio-group.tsx
@@ -25,7 +25,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
         className
       )}
       {...props}
@@ -34,7 +34,7 @@ function RadioGroupItem({
         data-slot="radio-group-indicator"
         className="flex size-4 items-center justify-center"
       >
-        <span className="bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full" />
+        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
diff --git a/apps/v4/examples/radix/ui/resizable.tsx b/apps/v4/examples/radix/ui/resizable.tsx
index 0cf214b966..87dbd40246 100644
--- a/apps/v4/examples/radix/ui/resizable.tsx
+++ b/apps/v4/examples/radix/ui/resizable.tsx
@@ -34,13 +34,13 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg" />
+        <div className="z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" />
       )}
     </ResizablePrimitive.Separator>
   )
diff --git a/apps/v4/examples/radix/ui/scroll-area.tsx b/apps/v4/examples/radix/ui/scroll-area.tsx
index ba2ac960e7..675cccfe9b 100644
--- a/apps/v4/examples/radix/ui/scroll-area.tsx
+++ b/apps/v4/examples/radix/ui/scroll-area.tsx
@@ -17,7 +17,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -45,7 +45,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
+        className="relative flex-1 rounded-full bg-border"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   )
diff --git a/apps/v4/examples/radix/ui/select.tsx b/apps/v4/examples/radix/ui/select.tsx
index d205adae7c..a3fe72ae11 100644
--- a/apps/v4/examples/radix/ui/select.tsx
+++ b/apps/v4/examples/radix/ui/select.tsx
@@ -43,14 +43,14 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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",
         className
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4" />
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -69,7 +69,7 @@ function SelectContent({
         data-slot="select-content"
         data-align-trigger={position === "item-aligned"}
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target 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-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none",
+          "cn-menu-target 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-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -101,7 +101,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+      className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
       {...props}
     />
   )
@@ -116,7 +116,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
@@ -138,7 +138,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -152,7 +152,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
       className={cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center 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-4",
         className
       )}
       {...props}
@@ -170,7 +170,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
       className={cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center 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-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/separator.tsx b/apps/v4/examples/radix/ui/separator.tsx
index 5d2038a84c..4c8bdb6966 100644
--- a/apps/v4/examples/radix/ui/separator.tsx
+++ b/apps/v4/examples/radix/ui/separator.tsx
@@ -16,7 +16,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/sheet.tsx b/apps/v4/examples/radix/ui/sheet.tsx
index bc6ec4ff44..07efce0bee 100644
--- a/apps/v4/examples/radix/ui/sheet.tsx
+++ b/apps/v4/examples/radix/ui/sheet.tsx
@@ -36,7 +36,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        "fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       )}
       {...props}
@@ -61,7 +61,7 @@ function SheetContent({
         data-slot="sheet-content"
         data-side={side}
         className={cn(
-          "bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          "fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
           className
         )}
         {...props}
@@ -111,7 +111,7 @@ function SheetTitle({
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground text-base font-medium", className)}
+      className={cn("text-base font-medium text-foreground", className)}
       {...props}
     />
   )
@@ -124,7 +124,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui/sidebar.tsx b/apps/v4/examples/radix/ui/sidebar.tsx
index ccdd446755..f4d1efbcb2 100644
--- a/apps/v4/examples/radix/ui/sidebar.tsx
+++ b/apps/v4/examples/radix/ui/sidebar.tsx
@@ -136,7 +136,7 @@ function SidebarProvider({
           } as React.CSSProperties
         }
         className={cn(
-          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
           className
         )}
         {...props}
@@ -167,7 +167,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
           className
         )}
         {...props}
@@ -185,7 +185,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -205,7 +205,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer hidden text-sidebar-foreground md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -240,7 +240,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
+          className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
         >
           {children}
         </div>
@@ -287,10 +287,10 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        "absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
@@ -305,7 +305,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        "relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
       {...props}
@@ -321,7 +321,7 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
+      className={cn("h-8 w-full bg-background shadow-none", className)}
       {...props}
     />
   )
@@ -357,7 +357,7 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
   )
@@ -400,7 +400,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium 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-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         className
       )}
       {...props}
@@ -420,7 +420,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 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-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         className
       )}
       {...props}
@@ -465,13 +465,13 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
       },
       size: {
         default: "h-8 text-sm",
@@ -552,9 +552,9 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        "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 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden 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 after:absolute after:-inset-2 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-md 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-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
         showOnHover &&
-          "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
         className
       )}
       {...props}
@@ -571,7 +571,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground",
         className
       )}
       {...props}
@@ -623,7 +623,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden",
         className
       )}
       {...props}
@@ -665,7 +665,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/skeleton.tsx b/apps/v4/examples/radix/ui/skeleton.tsx
index 22c9c98b6f..96cd0e1499 100644
--- a/apps/v4/examples/radix/ui/skeleton.tsx
+++ b/apps/v4/examples/radix/ui/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-muted animate-pulse rounded-md", className)}
+      className={cn("animate-pulse rounded-md bg-muted", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui/slider.tsx b/apps/v4/examples/radix/ui/slider.tsx
index c616651544..26b4a22f1b 100644
--- a/apps/v4/examples/radix/ui/slider.tsx
+++ b/apps/v4/examples/radix/ui/slider.tsx
@@ -37,18 +37,18 @@ function Slider({
     >
       <SliderPrimitive.Track
         data-slot="slider-track"
-        className="bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
+        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"
       >
         <SliderPrimitive.Range
           data-slot="slider-range"
-          className="bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
+          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
         />
       </SliderPrimitive.Track>
       {Array.from({ length: _values.length }, (_, index) => (
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
+          className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/apps/v4/examples/radix/ui/switch.tsx b/apps/v4/examples/radix/ui/switch.tsx
index c5dba43f66..568ca52709 100644
--- a/apps/v4/examples/radix/ui/switch.tsx
+++ b/apps/v4/examples/radix/ui/switch.tsx
@@ -16,14 +16,14 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className
       )}
       {...props}
     >
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
-        className="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
       />
     </SwitchPrimitive.Root>
   )
diff --git a/apps/v4/examples/radix/ui/table.tsx b/apps/v4/examples/radix/ui/table.tsx
index b7d4d4e0ed..a7985e14fb 100644
--- a/apps/v4/examples/radix/ui/table.tsx
+++ b/apps/v4/examples/radix/ui/table.tsx
@@ -43,7 +43,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
         className
       )}
       {...props}
@@ -69,7 +69,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
@@ -97,7 +97,7 @@ function TableCaption({
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/examples/radix/ui/tabs.tsx b/apps/v4/examples/radix/ui/tabs.tsx
index e46a357802..24a57bbf0e 100644
--- a/apps/v4/examples/radix/ui/tabs.tsx
+++ b/apps/v4/examples/radix/ui/tabs.tsx
@@ -24,7 +24,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -62,10 +62,10 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-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",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/textarea.tsx b/apps/v4/examples/radix/ui/textarea.tsx
index 5b3cf28626..a10381fb0a 100644
--- a/apps/v4/examples/radix/ui/textarea.tsx
+++ b/apps/v4/examples/radix/ui/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/toggle-group.tsx b/apps/v4/examples/radix/ui/toggle-group.tsx
index c615cc42b3..230cab592e 100644
--- a/apps/v4/examples/radix/ui/toggle-group.tsx
+++ b/apps/v4/examples/radix/ui/toggle-group.tsx
@@ -40,7 +40,7 @@ function ToggleGroup({
       data-orientation={orientation}
       style={{ "--gap": spacing } as React.CSSProperties}
       className={cn(
-        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/toggle.tsx b/apps/v4/examples/radix/ui/toggle.tsx
index edbc9c8c6f..7a519bcbf6 100644
--- a/apps/v4/examples/radix/ui/toggle.tsx
+++ b/apps/v4/examples/radix/ui/toggle.tsx
@@ -6,12 +6,12 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Toggle as TogglePrimitive } from "radix-ui"
 
 const toggleVariants = cva(
-  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border-input hover:bg-muted border bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-muted",
       },
       size: {
         default: "h-8 min-w-8 px-2",
diff --git a/apps/v4/examples/radix/ui/tooltip.tsx b/apps/v4/examples/radix/ui/tooltip.tsx
index 1f3586d1e7..deea1e73ec 100644
--- a/apps/v4/examples/radix/ui/tooltip.tsx
+++ b/apps/v4/examples/radix/ui/tooltip.tsx
@@ -41,13 +41,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs",
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
diff --git a/apps/v4/hooks/use-copy-to-clipboard.ts b/apps/v4/hooks/use-copy-to-clipboard.ts
index 366942f063..b63dc4d27a 100644
--- a/apps/v4/hooks/use-copy-to-clipboard.ts
+++ b/apps/v4/hooks/use-copy-to-clipboard.ts
@@ -2,6 +2,30 @@
 
 import * as React from "react"
 
+function legacyCopyToClipboard(value: string) {
+  const textArea = document.createElement("textarea")
+  textArea.value = value
+  textArea.setAttribute("readonly", "")
+  textArea.style.position = "fixed"
+  textArea.style.opacity = "0"
+  textArea.style.pointerEvents = "none"
+
+  document.body.appendChild(textArea)
+  textArea.focus()
+  textArea.select()
+  textArea.setSelectionRange(0, value.length)
+
+  let hasCopied = false
+  try {
+    hasCopied = document.execCommand("copy")
+  } catch {
+    hasCopied = false
+  }
+
+  document.body.removeChild(textArea)
+  return hasCopied
+}
+
 export function useCopyToClipboard({
   timeout = 2000,
   onCopy,
@@ -11,26 +35,45 @@ export function useCopyToClipboard({
 } = {}) {
   const [isCopied, setIsCopied] = React.useState(false)
 
-  const copyToClipboard = (value: string) => {
-    if (typeof window === "undefined" || !navigator.clipboard.writeText) {
-      return
+  const copyToClipboard = async (value: string) => {
+    if (typeof window === "undefined") {
+      return false
     }
 
-    if (!value) return
+    if (!value) {
+      return false
+    }
 
-    navigator.clipboard.writeText(value).then(() => {
-      setIsCopied(true)
+    let hasCopied = false
 
-      if (onCopy) {
-        onCopy()
+    if (navigator.clipboard?.writeText) {
+      try {
+        await navigator.clipboard.writeText(value)
+        hasCopied = true
+      } catch {
+        hasCopied = legacyCopyToClipboard(value)
       }
+    } else {
+      hasCopied = legacyCopyToClipboard(value)
+    }
 
-      if (timeout !== 0) {
-        setTimeout(() => {
-          setIsCopied(false)
-        }, timeout)
-      }
-    }, console.error)
+    if (!hasCopied) {
+      return false
+    }
+
+    setIsCopied(true)
+
+    if (onCopy) {
+      onCopy()
+    }
+
+    if (timeout !== 0) {
+      setTimeout(() => {
+        setIsCopied(false)
+      }, timeout)
+    }
+
+    return true
   }
 
   return { isCopied, copyToClipboard }
diff --git a/apps/v4/lib/components.ts b/apps/v4/lib/components.ts
new file mode 100644
index 0000000000..7f87ddf2b5
--- /dev/null
+++ b/apps/v4/lib/components.ts
@@ -0,0 +1,65 @@
+// All available UI components.
+export const UI_COMPONENTS = [
+  "accordion",
+  "alert",
+  "alert-dialog",
+  "aspect-ratio",
+  "avatar",
+  "badge",
+  "breadcrumb",
+  "button",
+  "button-group",
+  "calendar",
+  "card",
+  "carousel",
+  "chart",
+  "checkbox",
+  "collapsible",
+  "combobox",
+  "command",
+  "context-menu",
+  "data-table",
+  "date-picker",
+  "dialog",
+  "direction",
+  "drawer",
+  "dropdown-menu",
+  "empty",
+  "field",
+  "form",
+  "hover-card",
+  "input",
+  "input-group",
+  "input-otp",
+  "item",
+  "kbd",
+  "label",
+  "menubar",
+  "native-select",
+  "navigation-menu",
+  "pagination",
+  "popover",
+  "progress",
+  "radio-group",
+  "resizable",
+  "scroll-area",
+  "select",
+  "separator",
+  "sheet",
+  "sidebar",
+  "skeleton",
+  "slider",
+  "sonner",
+  "spinner",
+  "switch",
+  "table",
+  "tabs",
+  "textarea",
+  "toast",
+  "toggle",
+  "toggle-group",
+  "tooltip",
+  "typography",
+] as const
+
+export type UIComponent = (typeof UI_COMPONENTS)[number]
diff --git a/apps/v4/lib/docs.ts b/apps/v4/lib/docs.ts
index e4d0868a1b..4225cc911f 100644
--- a/apps/v4/lib/docs.ts
+++ b/apps/v4/lib/docs.ts
@@ -1,9 +1,8 @@
 export const PAGES_NEW = [
   "/create",
-  "/docs/rtl",
+  "/docs/cli",
   "/docs/changelog",
-  "/docs/components/radix/direction",
-  "/docs/components/base/direction",
+  "/docs/skills",
 ]
 
 export const PAGES_UPDATED = ["/docs/components/button"]
diff --git a/apps/v4/lib/events.ts b/apps/v4/lib/events.ts
index ef37e9bb6e..8c823a9ccd 100644
--- a/apps/v4/lib/events.ts
+++ b/apps/v4/lib/events.ts
@@ -20,6 +20,7 @@ const eventSchema = z.object({
     "create_app",
     "copy_create_share_url",
     "copy_registry_add_command",
+    "copy_preset_command",
   ]),
   // declare type AllowedPropertyValues = string | number | boolean | null
   properties: z
diff --git a/apps/v4/lib/explore.ts b/apps/v4/lib/explore.ts
new file mode 100644
index 0000000000..0768962363
--- /dev/null
+++ b/apps/v4/lib/explore.ts
@@ -0,0 +1,11 @@
+export const EXPLORE_PRESETS: string[] = [
+  "auFzoPZ",
+  "a1zDJJ",
+  "a1DN5Lx2",
+  "abZIu0W",
+  "a2r6bw",
+  "a2He4G",
+  "a1DOCw6i",
+  "a1D5CKfo",
+  "abYAmrx",
+]
diff --git a/apps/v4/lib/format-code.ts b/apps/v4/lib/format-code.ts
new file mode 100644
index 0000000000..c812169de2
--- /dev/null
+++ b/apps/v4/lib/format-code.ts
@@ -0,0 +1,112 @@
+import { promises as fsPromises } from "fs"
+import path from "path"
+import {
+  createStyleMap,
+  transformIcons,
+  transformMenu,
+  transformRender,
+  transformStyle,
+} from "shadcn/utils"
+import { Project, ScriptKind } from "ts-morph"
+
+import { BASES } from "@/registry/bases"
+
+function getStyleFromStyleName(styleName: string) {
+  const parts = styleName.split("-")
+  return parts.length > 1 ? parts.slice(1).join("-") : styleName
+}
+
+function buildDisplayConfig(styleName: string) {
+  return {
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: styleName,
+    rsc: true,
+    tsx: true,
+    tailwind: {
+      config: "",
+      css: "",
+      baseColor: "neutral",
+      cssVariables: true,
+      prefix: "",
+    },
+    iconLibrary: "lucide",
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks",
+    },
+    resolvedPaths: {
+      cwd: "/",
+      tailwindConfig: "",
+      tailwindCss: "",
+      utils: "@/lib/utils",
+      components: "@/components",
+      lib: "@/lib",
+      hooks: "@/hooks",
+      ui: "@/components/ui",
+    },
+  }
+}
+
+const styleMapCache = new Map<string, Record<string, string>>()
+
+async function getStyleMap(styleName: string) {
+  const style = getStyleFromStyleName(styleName)
+
+  if (styleMapCache.has(style)) {
+    return styleMapCache.get(style)!
+  }
+
+  try {
+    const cssPath = path.join(
+      process.cwd(),
+      `registry/styles/style-${style}.css`
+    )
+    const css = await fsPromises.readFile(cssPath, "utf-8")
+    const styleMap = createStyleMap(css)
+    styleMapCache.set(style, styleMap)
+    return styleMap
+  } catch {
+    return {}
+  }
+}
+
+export async function formatCode(code: string, styleName: string) {
+  code = code.replaceAll(`@/registry/${styleName}/`, "@/components/")
+
+  for (const base of BASES) {
+    code = code.replaceAll(`@/registry/bases/${base.name}/`, "@/components/")
+    code = code.replaceAll(`@/examples/${base.name}/ui/`, "@/components/ui/")
+    code = code.replaceAll(`@/examples/${base.name}/lib/`, "@/lib/")
+    code = code.replaceAll(`@/examples/${base.name}/hooks/`, "@/hooks/")
+  }
+
+  code = code.replaceAll("export default", "export")
+
+  try {
+    const styleMap = await getStyleMap(styleName)
+    const transformed = await transformStyle(code, { styleMap })
+    const config = buildDisplayConfig(styleName)
+    const project = new Project({ compilerOptions: {} })
+    const sourceFile = project.createSourceFile("component.tsx", transformed, {
+      scriptKind: ScriptKind.TSX,
+    })
+
+    const transformers = [transformIcons, transformMenu, transformRender]
+    for (const transformer of transformers) {
+      await transformer({
+        filename: "component.tsx",
+        raw: transformed,
+        sourceFile,
+        config,
+      })
+    }
+
+    return sourceFile.getText()
+  } catch (error) {
+    console.error("Transform failed:", error)
+    return code
+  }
+}
diff --git a/apps/v4/lib/read-file.ts b/apps/v4/lib/read-file.ts
new file mode 100644
index 0000000000..aec4618c42
--- /dev/null
+++ b/apps/v4/lib/read-file.ts
@@ -0,0 +1,7 @@
+import { promises as fs } from "fs"
+import path from "path"
+
+export async function readFileFromRoot(relativePath: string) {
+  const absolutePath = path.join(process.cwd(), relativePath)
+  return fs.readFile(absolutePath, "utf-8")
+}
diff --git a/apps/v4/lib/registry.ts b/apps/v4/lib/registry.ts
index 0b5d323e05..39847b4d1f 100644
--- a/apps/v4/lib/registry.ts
+++ b/apps/v4/lib/registry.ts
@@ -5,6 +5,7 @@ import { LRUCache } from "lru-cache"
 import { registryItemSchema, type registryItemFileSchema } from "shadcn/schema"
 import { type z } from "zod"
 
+import { readFileFromRoot } from "@/lib/read-file"
 import { Index as StylesIndex } from "@/registry/__index__"
 import { BASES } from "@/registry/bases"
 import { Index as BasesIndex } from "@/registry/bases/__index__"
@@ -43,8 +44,7 @@ export async function getDemoItem(name: string, styleName: string) {
     return null
   }
 
-  const filePath = path.join(process.cwd(), demo.filePath)
-  const content = await fs.readFile(filePath, "utf-8")
+  const content = await readFileFromRoot(demo.filePath)
 
   return {
     name: demo.name,
diff --git a/apps/v4/lib/rehype.ts b/apps/v4/lib/rehype.ts
index 6690e1dc44..2db86066f6 100644
--- a/apps/v4/lib/rehype.ts
+++ b/apps/v4/lib/rehype.ts
@@ -1,22 +1,17 @@
-import fs, { promises as fsPromises } from "fs"
+import fs from "fs"
 import path from "path"
 import { ExamplesIndex } from "@/examples/__index__"
-import {
-  createStyleMap,
-  transformIcons,
-  transformMenu,
-  transformRender,
-  transformStyle,
-} from "shadcn/utils"
-import { Project, ScriptKind } from "ts-morph"
 import { u } from "unist-builder"
 import { visit } from "unist-util-visit"
 
+import { formatCode } from "@/lib/format-code"
 import { Index as StylesIndex } from "@/registry/__index__"
 import { getActiveStyle } from "@/registry/_legacy-styles"
 import { BASES } from "@/registry/bases"
 import { Index as BasesIndex } from "@/registry/bases/__index__"
 
+export { formatCode } from "@/lib/format-code"
+
 function getBaseForStyle(styleName: string) {
   for (const base of BASES) {
     if (styleName.startsWith(`${base.name}-`)) {
@@ -44,106 +39,6 @@ function getIndexForStyle(styleName: string) {
   return { index: StylesIndex, key: styleName }
 }
 
-function getStyleFromStyleName(styleName: string) {
-  const parts = styleName.split("-")
-  return parts.length > 1 ? parts.slice(1).join("-") : styleName
-}
-
-function buildDisplayConfig(styleName: string) {
-  return {
-    $schema: "https://ui.shadcn.com/schema.json",
-    style: styleName,
-    rsc: true,
-    tsx: true,
-    tailwind: {
-      config: "",
-      css: "",
-      baseColor: "neutral",
-      cssVariables: true,
-      prefix: "",
-    },
-    iconLibrary: "lucide",
-    aliases: {
-      components: "@/components",
-      utils: "@/lib/utils",
-      ui: "@/components/ui",
-      lib: "@/lib",
-      hooks: "@/hooks",
-    },
-    resolvedPaths: {
-      cwd: "/",
-      tailwindConfig: "",
-      tailwindCss: "",
-      utils: "@/lib/utils",
-      components: "@/components",
-      lib: "@/lib",
-      hooks: "@/hooks",
-      ui: "@/components/ui",
-    },
-  }
-}
-
-const styleMapCache = new Map<string, Record<string, string>>()
-
-async function getStyleMap(styleName: string) {
-  const style = getStyleFromStyleName(styleName)
-
-  if (styleMapCache.has(style)) {
-    return styleMapCache.get(style)!
-  }
-
-  try {
-    const cssPath = path.join(
-      process.cwd(),
-      `registry/styles/style-${style}.css`
-    )
-    const css = await fsPromises.readFile(cssPath, "utf-8")
-    const styleMap = createStyleMap(css)
-    styleMapCache.set(style, styleMap)
-    return styleMap
-  } catch {
-    return {}
-  }
-}
-
-export async function formatCode(code: string, styleName: string) {
-  code = code.replaceAll(`@/registry/${styleName}/`, "@/components/")
-
-  for (const base of BASES) {
-    code = code.replaceAll(`@/registry/bases/${base.name}/`, "@/components/")
-    code = code.replaceAll(`@/examples/${base.name}/ui/`, "@/components/ui/")
-    code = code.replaceAll(`@/examples/${base.name}/lib/`, "@/lib/")
-    code = code.replaceAll(`@/examples/${base.name}/hooks/`, "@/hooks/")
-  }
-
-  code = code.replaceAll("export default", "export")
-
-  try {
-    const styleMap = await getStyleMap(styleName)
-    const transformed = await transformStyle(code, { styleMap })
-    const config = buildDisplayConfig(styleName)
-    const project = new Project({ compilerOptions: {} })
-    const sourceFile = project.createSourceFile("component.tsx", transformed, {
-      scriptKind: ScriptKind.TSX,
-    })
-
-    const transformers = [transformIcons, transformMenu, transformRender]
-    for (const transformer of transformers) {
-      await transformer({
-        filename: "component.tsx",
-        raw: transformed,
-        sourceFile,
-        config,
-      })
-    }
-
-    return sourceFile.getText()
-  } catch (error) {
-    console.error("Transform failed:", error)
-    return code
-  }
-}
-
 interface UnistNode {
   type: string
   name?: string
diff --git a/apps/v4/mdx-components.tsx b/apps/v4/mdx-components.tsx
index 16a6410c12..0dfc477c4a 100644
--- a/apps/v4/mdx-components.tsx
+++ b/apps/v4/mdx-components.tsx
@@ -75,7 +75,7 @@ export const mdxComponents = {
           .replace(/\?/g, "")
           .toLowerCase()}
         className={cn(
-          "font-heading [&+]*:[code]:text-xl mt-10 scroll-m-28 text-xl font-medium tracking-tight first:mt-0 lg:mt-12 [&+.steps]:!mt-0 [&+.steps>h3]:!mt-4 [&+h3]:!mt-6 [&+p]:!mt-4",
+          "font-heading [&+]*:[code]:text-xl mt-10 scroll-m-28 text-xl font-medium tracking-tight first:mt-0 lg:mt-12 [&+.steps]:mt-0! [&+.steps>h3]:mt-4! [&+h3]:mt-6! [&+p]:mt-4!",
           className
         )}
         {...props}
@@ -85,7 +85,7 @@ export const mdxComponents = {
   h3: ({ className, ...props }: React.ComponentProps<"h3">) => (
     <h3
       className={cn(
-        "font-heading mt-12 scroll-m-28 text-lg font-medium tracking-tight [&+p]:!mt-4 *:[code]:text-xl",
+        "font-heading mt-12 scroll-m-28 text-lg font-medium tracking-tight [&+p]:mt-4! *:[code]:text-xl",
         className
       )}
       {...props}
@@ -155,7 +155,7 @@ export const mdxComponents = {
     <hr className="my-4 md:my-8" {...props} />
   ),
   table: ({ className, ...props }: React.ComponentProps<"table">) => (
-    <div className="no-scrollbar my-6 w-full overflow-y-auto rounded-xl border">
+    <div className="my-6 no-scrollbar w-full overflow-y-auto rounded-xl border">
       <table
         className={cn(
           "relative w-full overflow-hidden border-none text-sm [&_tbody_tr:last-child]:border-b-0",
@@ -215,7 +215,7 @@ export const mdxComponents = {
     return (
       <figcaption
         className={cn(
-          "text-code-foreground [&_svg]:text-code-foreground flex items-center gap-2 [&_svg]:size-4 [&_svg]:opacity-70",
+          "flex items-center gap-2 text-code-foreground [&_svg]:size-4 [&_svg]:text-code-foreground [&_svg]:opacity-70",
           className
         )}
         {...props}
@@ -247,7 +247,7 @@ export const mdxComponents = {
       return (
         <code
           className={cn(
-            "bg-muted relative rounded-md px-[0.3rem] py-[0.2rem] font-mono text-[0.8rem] break-words outline-none",
+            "relative rounded-md bg-muted px-[0.3rem] py-[0.2rem] font-mono text-[0.8rem] break-words outline-none",
             className
           )}
           {...props}
@@ -288,7 +288,7 @@ export const mdxComponents = {
   Steps: ({ className, ...props }: React.ComponentProps<"div">) => (
     <div
       className={cn(
-        "[&>h3]:step steps mb-12 [counter-reset:step] md:ml-4 md:border-l md:pl-8",
+        "steps mb-12 [counter-reset:step] md:ml-4 md:border-l md:pl-8 [&>h3]:step",
         className
       )}
       {...props}
@@ -332,7 +332,7 @@ export const mdxComponents = {
   }: React.ComponentProps<typeof TabsTrigger>) => (
     <TabsTrigger
       className={cn(
-        "text-muted-foreground data-[state=active]:text-foreground data-[state=active]:border-primary dark:data-[state=active]:border-primary hover:text-primary rounded-none border-0 border-b-2 border-transparent bg-transparent px-0 pb-3 text-base data-[state=active]:bg-transparent data-[state=active]:shadow-none! dark:data-[state=active]:bg-transparent",
+        "rounded-none border-0 border-b-2 border-transparent bg-transparent px-0 pb-3 text-base text-muted-foreground hover:text-primary data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-foreground data-[state=active]:shadow-none! dark:data-[state=active]:border-primary dark:data-[state=active]:bg-transparent",
         className
       )}
       {...props}
@@ -378,7 +378,7 @@ export const mdxComponents = {
   LinkedCard: ({ className, ...props }: React.ComponentProps<typeof Link>) => (
     <Link
       className={cn(
-        "bg-surface text-surface-foreground hover:bg-surface/80 flex w-full flex-col items-center rounded-xl p-6 transition-colors sm:p-10",
+        "flex w-full flex-col items-center rounded-xl bg-surface p-6 text-surface-foreground transition-colors hover:bg-surface/80 sm:p-10",
         className
       )}
       {...props}
diff --git a/apps/v4/next.config.mjs b/apps/v4/next.config.mjs
index 91e3047f8a..b40450abd4 100644
--- a/apps/v4/next.config.mjs
+++ b/apps/v4/next.config.mjs
@@ -108,6 +108,21 @@ const nextConfig = {
         destination: "/docs/directory",
         permanent: false,
       },
+      {
+        source: "/new",
+        destination: "/docs/new",
+        permanent: false,
+      },
+      {
+        source: "/skills",
+        destination: "/docs/skills",
+        permanent: true,
+      },
+      {
+        source: "/cli",
+        destination: "/docs/cli",
+        permanent: true,
+      },
     ]
   },
   rewrites() {
@@ -116,6 +131,10 @@ const nextConfig = {
         source: "/docs/:path*.md",
         destination: "/llm/:path*",
       },
+      {
+        source: "/init.md",
+        destination: "/init/md",
+      },
     ]
   },
 }
diff --git a/apps/v4/package.json b/apps/v4/package.json
index bb23861584..e0109d38e2 100644
--- a/apps/v4/package.json
+++ b/apps/v4/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "pnpm icons:dev & next dev --turbopack --port 4000",
+    "dev": "pnpm --filter=shadcn build && pnpm icons:dev & next dev --turbopack --port 4000",
     "build": "pnpm --filter=shadcn build && next build",
     "start": "next start --port 4000",
     "preview": "pnpm --filter=shadcn build && next build && next start --port 4000",
@@ -18,6 +18,7 @@
     "registry": "bun run ./scripts/build-registry.mts",
     "examples:build": "bun run ./scripts/build-examples.ts && prettier --log-level silent --write \"examples/**/*.{ts,tsx}\" --cache",
     "registry:capture": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/capture-registry.mts",
+    "explore:capture": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/capture-explore.mts",
     "validate:registries": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/validate-registries.mts",
     "test:apps": "bun run ./scripts/build-test-app.mts",
     "postinstall": "fumadocs-mdx"
@@ -60,7 +61,7 @@
     "lru-cache": "^11.2.4",
     "lucide-react": "0.474.0",
     "motion": "^12.12.1",
-    "next": "16.1.4",
+    "next": "16.1.6",
     "next-themes": "0.4.6",
     "nuqs": "^2.7.2",
     "postcss": "^8.5.1",
@@ -75,7 +76,7 @@
     "rehype-pretty-code": "^0.14.1",
     "rimraf": "^6.0.1",
     "server-only": "^0.0.1",
-    "shadcn": "3.8.5",
+    "shadcn": "4.0.0",
     "shiki": "^1.10.1",
     "sonner": "^2.0.0",
     "swr": "^2.3.6",
@@ -93,10 +94,12 @@
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
     "@typescript-eslint/parser": "^8.31.0",
+    "agentation": "^2.2.1",
+    "baseline-browser-mapping": "^2.10.0",
     "eslint": "^9",
     "eslint-config-next": "16.0.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.11",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwindcss": "^4",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5",
@@ -135,6 +138,11 @@
       "jsx",
       "decorators-legacy"
     ],
+    "tailwindStylesheet": "./styles/globals.css",
+    "tailwindFunctions": [
+      "cn",
+      "cva"
+    ],
     "plugins": [
       "@ianvs/prettier-plugin-sort-imports",
       "prettier-plugin-tailwindcss"
diff --git a/apps/v4/public/r/colors/mauve.json b/apps/v4/public/r/colors/mauve.json
new file mode 100644
index 0000000000..85c500df27
--- /dev/null
+++ b/apps/v4/public/r/colors/mauve.json
@@ -0,0 +1,211 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.145 0.008 326)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0.008 326)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0.008 326)",
+      "primary": "oklch(0.212 0.019 322.12)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.96 0.003 325.6)",
+      "secondary-foreground": "oklch(0.212 0.019 322.12)",
+      "muted": "oklch(0.96 0.003 325.6)",
+      "muted-foreground": "oklch(0.542 0.034 322.5)",
+      "accent": "oklch(0.96 0.003 325.6)",
+      "accent-foreground": "oklch(0.212 0.019 322.12)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0.005 325.62)",
+      "input": "oklch(0.922 0.005 325.62)",
+      "ring": "oklch(0.711 0.019 323.02)",
+      "chart-1": "oklch(0.845 0.143 164.978)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.596 0.145 163.225)",
+      "chart-4": "oklch(0.508 0.118 165.612)",
+      "chart-5": "oklch(0.432 0.095 166.913)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.145 0.008 326)",
+      "sidebar-primary": "oklch(0.212 0.019 322.12)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.96 0.003 325.6)",
+      "sidebar-accent-foreground": "oklch(0.212 0.019 322.12)",
+      "sidebar-border": "oklch(0.922 0.005 325.62)",
+      "sidebar-ring": "oklch(0.711 0.019 323.02)"
+    },
+    "dark": {
+      "background": "oklch(0.145 0.008 326)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.212 0.019 322.12)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.212 0.019 322.12)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.922 0.005 325.62)",
+      "primary-foreground": "oklch(0.212 0.019 322.12)",
+      "secondary": "oklch(0.263 0.024 320.12)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.263 0.024 320.12)",
+      "muted-foreground": "oklch(0.711 0.019 323.02)",
+      "accent": "oklch(0.263 0.024 320.12)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.542 0.034 322.5)",
+      "chart-1": "oklch(0.845 0.143 164.978)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.596 0.145 163.225)",
+      "chart-4": "oklch(0.508 0.118 165.612)",
+      "chart-5": "oklch(0.432 0.095 166.913)",
+      "sidebar": "oklch(0.212 0.019 322.12)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.263 0.024 320.12)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.542 0.034 322.5)"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.145 0.008 326)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0.008 326)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0.008 326)",
+      "primary": "oklch(0.212 0.019 322.12)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.96 0.003 325.6)",
+      "secondary-foreground": "oklch(0.212 0.019 322.12)",
+      "muted": "oklch(0.96 0.003 325.6)",
+      "muted-foreground": "oklch(0.542 0.034 322.5)",
+      "accent": "oklch(0.96 0.003 325.6)",
+      "accent-foreground": "oklch(0.212 0.019 322.12)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0.005 325.62)",
+      "input": "oklch(0.922 0.005 325.62)",
+      "ring": "oklch(0.711 0.019 323.02)",
+      "chart-1": "oklch(0.845 0.143 164.978)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.596 0.145 163.225)",
+      "chart-4": "oklch(0.508 0.118 165.612)",
+      "chart-5": "oklch(0.432 0.095 166.913)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.145 0.008 326)",
+      "sidebar-primary": "oklch(0.212 0.019 322.12)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.96 0.003 325.6)",
+      "sidebar-accent-foreground": "oklch(0.212 0.019 322.12)",
+      "sidebar-border": "oklch(0.922 0.005 325.62)",
+      "sidebar-ring": "oklch(0.711 0.019 323.02)"
+    },
+    "dark": {
+      "background": "oklch(0.145 0.008 326)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.212 0.019 322.12)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.212 0.019 322.12)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.922 0.005 325.62)",
+      "primary-foreground": "oklch(0.212 0.019 322.12)",
+      "secondary": "oklch(0.263 0.024 320.12)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.263 0.024 320.12)",
+      "muted-foreground": "oklch(0.711 0.019 323.02)",
+      "accent": "oklch(0.263 0.024 320.12)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.542 0.034 322.5)",
+      "chart-1": "oklch(0.845 0.143 164.978)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.596 0.145 163.225)",
+      "chart-4": "oklch(0.508 0.118 165.612)",
+      "chart-5": "oklch(0.432 0.095 166.913)",
+      "sidebar": "oklch(0.212 0.019 322.12)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.263 0.024 320.12)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.542 0.034 322.5)"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.145 0.008 326)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0.008 326)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0.008 326)",
+      "primary": "oklch(0.212 0.019 322.12)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.96 0.003 325.6)",
+      "secondary-foreground": "oklch(0.212 0.019 322.12)",
+      "muted": "oklch(0.96 0.003 325.6)",
+      "muted-foreground": "oklch(0.542 0.034 322.5)",
+      "accent": "oklch(0.96 0.003 325.6)",
+      "accent-foreground": "oklch(0.212 0.019 322.12)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0.005 325.62)",
+      "input": "oklch(0.922 0.005 325.62)",
+      "ring": "oklch(0.711 0.019 323.02)",
+      "chart-1": "oklch(0.845 0.143 164.978)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.596 0.145 163.225)",
+      "chart-4": "oklch(0.508 0.118 165.612)",
+      "chart-5": "oklch(0.432 0.095 166.913)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.145 0.008 326)",
+      "sidebar-primary": "oklch(0.212 0.019 322.12)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.96 0.003 325.6)",
+      "sidebar-accent-foreground": "oklch(0.212 0.019 322.12)",
+      "sidebar-border": "oklch(0.922 0.005 325.62)",
+      "sidebar-ring": "oklch(0.711 0.019 323.02)"
+    },
+    "dark": {
+      "background": "oklch(0.145 0.008 326)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.212 0.019 322.12)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.212 0.019 322.12)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.922 0.005 325.62)",
+      "primary-foreground": "oklch(0.212 0.019 322.12)",
+      "secondary": "oklch(0.263 0.024 320.12)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.263 0.024 320.12)",
+      "muted-foreground": "oklch(0.711 0.019 323.02)",
+      "accent": "oklch(0.263 0.024 320.12)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.542 0.034 322.5)",
+      "chart-1": "oklch(0.845 0.143 164.978)",
+      "chart-2": "oklch(0.696 0.17 162.48)",
+      "chart-3": "oklch(0.596 0.145 163.225)",
+      "chart-4": "oklch(0.508 0.118 165.612)",
+      "chart-5": "oklch(0.432 0.095 166.913)",
+      "sidebar": "oklch(0.212 0.019 322.12)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.263 0.024 320.12)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.542 0.034 322.5)"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0.008 326);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0.008 326);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0.008 326);\n    --primary: oklch(0.212 0.019 322.12);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.96 0.003 325.6);\n    --secondary-foreground: oklch(0.212 0.019 322.12);\n    --muted: oklch(0.96 0.003 325.6);\n    --muted-foreground: oklch(0.542 0.034 322.5);\n    --accent: oklch(0.96 0.003 325.6);\n    --accent-foreground: oklch(0.212 0.019 322.12);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0.005 325.62);\n    --input: oklch(0.922 0.005 325.62);\n    --ring: oklch(0.711 0.019 323.02);\n    --chart-1: oklch(0.845 0.143 164.978);\n    --chart-2: oklch(0.696 0.17 162.48);\n    --chart-3: oklch(0.596 0.145 163.225);\n    --chart-4: oklch(0.508 0.118 165.612);\n    --chart-5: oklch(0.432 0.095 166.913);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.145 0.008 326);\n    --foreground: oklch(0.985 0 0);\n    --card: oklch(0.212 0.019 322.12);\n    --card-foreground: oklch(0.985 0 0);\n    --popover: oklch(0.212 0.019 322.12);\n    --popover-foreground: oklch(0.985 0 0);\n    --primary: oklch(0.922 0.005 325.62);\n    --primary-foreground: oklch(0.212 0.019 322.12);\n    --secondary: oklch(0.263 0.024 320.12);\n    --secondary-foreground: oklch(0.985 0 0);\n    --muted: oklch(0.263 0.024 320.12);\n    --muted-foreground: oklch(0.711 0.019 323.02);\n    --accent: oklch(0.263 0.024 320.12);\n    --accent-foreground: oklch(0.985 0 0);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.542 0.034 322.5);\n    --chart-1: oklch(0.845 0.143 164.978);\n    --chart-2: oklch(0.696 0.17 162.48);\n    --chart-3: oklch(0.596 0.145 163.225);\n    --chart-4: oklch(0.508 0.118 165.612);\n    --chart-5: oklch(0.432 0.095 166.913);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/v4/public/r/colors/mist.json b/apps/v4/public/r/colors/mist.json
new file mode 100644
index 0000000000..66222590a4
--- /dev/null
+++ b/apps/v4/public/r/colors/mist.json
@@ -0,0 +1,211 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.148 0.004 228.8)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.148 0.004 228.8)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.148 0.004 228.8)",
+      "primary": "oklch(0.218 0.008 223.9)",
+      "primary-foreground": "oklch(0.987 0.002 197.1)",
+      "secondary": "oklch(0.963 0.002 197.1)",
+      "secondary-foreground": "oklch(0.218 0.008 223.9)",
+      "muted": "oklch(0.963 0.002 197.1)",
+      "muted-foreground": "oklch(0.56 0.021 213.5)",
+      "accent": "oklch(0.963 0.002 197.1)",
+      "accent-foreground": "oklch(0.218 0.008 223.9)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.925 0.005 214.3)",
+      "input": "oklch(0.925 0.005 214.3)",
+      "ring": "oklch(0.723 0.014 214.4)",
+      "chart-1": "oklch(0.81 0.117 11.638)",
+      "chart-2": "oklch(0.645 0.246 16.439)",
+      "chart-3": "oklch(0.586 0.253 17.585)",
+      "chart-4": "oklch(0.514 0.222 16.935)",
+      "chart-5": "oklch(0.455 0.188 13.697)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.987 0.002 197.1)",
+      "sidebar-foreground": "oklch(0.148 0.004 228.8)",
+      "sidebar-primary": "oklch(0.218 0.008 223.9)",
+      "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-accent": "oklch(0.963 0.002 197.1)",
+      "sidebar-accent-foreground": "oklch(0.218 0.008 223.9)",
+      "sidebar-border": "oklch(0.925 0.005 214.3)",
+      "sidebar-ring": "oklch(0.723 0.014 214.4)"
+    },
+    "dark": {
+      "background": "oklch(0.148 0.004 228.8)",
+      "foreground": "oklch(0.987 0.002 197.1)",
+      "card": "oklch(0.218 0.008 223.9)",
+      "card-foreground": "oklch(0.987 0.002 197.1)",
+      "popover": "oklch(0.218 0.008 223.9)",
+      "popover-foreground": "oklch(0.987 0.002 197.1)",
+      "primary": "oklch(0.925 0.005 214.3)",
+      "primary-foreground": "oklch(0.218 0.008 223.9)",
+      "secondary": "oklch(0.275 0.011 216.9)",
+      "secondary-foreground": "oklch(0.987 0.002 197.1)",
+      "muted": "oklch(0.275 0.011 216.9)",
+      "muted-foreground": "oklch(0.723 0.014 214.4)",
+      "accent": "oklch(0.275 0.011 216.9)",
+      "accent-foreground": "oklch(0.987 0.002 197.1)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.56 0.021 213.5)",
+      "chart-1": "oklch(0.81 0.117 11.638)",
+      "chart-2": "oklch(0.645 0.246 16.439)",
+      "chart-3": "oklch(0.586 0.253 17.585)",
+      "chart-4": "oklch(0.514 0.222 16.935)",
+      "chart-5": "oklch(0.455 0.188 13.697)",
+      "sidebar": "oklch(0.218 0.008 223.9)",
+      "sidebar-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-accent": "oklch(0.275 0.011 216.9)",
+      "sidebar-accent-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.56 0.021 213.5)"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.148 0.004 228.8)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.148 0.004 228.8)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.148 0.004 228.8)",
+      "primary": "oklch(0.218 0.008 223.9)",
+      "primary-foreground": "oklch(0.987 0.002 197.1)",
+      "secondary": "oklch(0.963 0.002 197.1)",
+      "secondary-foreground": "oklch(0.218 0.008 223.9)",
+      "muted": "oklch(0.963 0.002 197.1)",
+      "muted-foreground": "oklch(0.56 0.021 213.5)",
+      "accent": "oklch(0.963 0.002 197.1)",
+      "accent-foreground": "oklch(0.218 0.008 223.9)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.925 0.005 214.3)",
+      "input": "oklch(0.925 0.005 214.3)",
+      "ring": "oklch(0.723 0.014 214.4)",
+      "chart-1": "oklch(0.81 0.117 11.638)",
+      "chart-2": "oklch(0.645 0.246 16.439)",
+      "chart-3": "oklch(0.586 0.253 17.585)",
+      "chart-4": "oklch(0.514 0.222 16.935)",
+      "chart-5": "oklch(0.455 0.188 13.697)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.987 0.002 197.1)",
+      "sidebar-foreground": "oklch(0.148 0.004 228.8)",
+      "sidebar-primary": "oklch(0.218 0.008 223.9)",
+      "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-accent": "oklch(0.963 0.002 197.1)",
+      "sidebar-accent-foreground": "oklch(0.218 0.008 223.9)",
+      "sidebar-border": "oklch(0.925 0.005 214.3)",
+      "sidebar-ring": "oklch(0.723 0.014 214.4)"
+    },
+    "dark": {
+      "background": "oklch(0.148 0.004 228.8)",
+      "foreground": "oklch(0.987 0.002 197.1)",
+      "card": "oklch(0.218 0.008 223.9)",
+      "card-foreground": "oklch(0.987 0.002 197.1)",
+      "popover": "oklch(0.218 0.008 223.9)",
+      "popover-foreground": "oklch(0.987 0.002 197.1)",
+      "primary": "oklch(0.925 0.005 214.3)",
+      "primary-foreground": "oklch(0.218 0.008 223.9)",
+      "secondary": "oklch(0.275 0.011 216.9)",
+      "secondary-foreground": "oklch(0.987 0.002 197.1)",
+      "muted": "oklch(0.275 0.011 216.9)",
+      "muted-foreground": "oklch(0.723 0.014 214.4)",
+      "accent": "oklch(0.275 0.011 216.9)",
+      "accent-foreground": "oklch(0.987 0.002 197.1)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.56 0.021 213.5)",
+      "chart-1": "oklch(0.81 0.117 11.638)",
+      "chart-2": "oklch(0.645 0.246 16.439)",
+      "chart-3": "oklch(0.586 0.253 17.585)",
+      "chart-4": "oklch(0.514 0.222 16.935)",
+      "chart-5": "oklch(0.455 0.188 13.697)",
+      "sidebar": "oklch(0.218 0.008 223.9)",
+      "sidebar-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-accent": "oklch(0.275 0.011 216.9)",
+      "sidebar-accent-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.56 0.021 213.5)"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.148 0.004 228.8)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.148 0.004 228.8)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.148 0.004 228.8)",
+      "primary": "oklch(0.218 0.008 223.9)",
+      "primary-foreground": "oklch(0.987 0.002 197.1)",
+      "secondary": "oklch(0.963 0.002 197.1)",
+      "secondary-foreground": "oklch(0.218 0.008 223.9)",
+      "muted": "oklch(0.963 0.002 197.1)",
+      "muted-foreground": "oklch(0.56 0.021 213.5)",
+      "accent": "oklch(0.963 0.002 197.1)",
+      "accent-foreground": "oklch(0.218 0.008 223.9)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.925 0.005 214.3)",
+      "input": "oklch(0.925 0.005 214.3)",
+      "ring": "oklch(0.723 0.014 214.4)",
+      "chart-1": "oklch(0.81 0.117 11.638)",
+      "chart-2": "oklch(0.645 0.246 16.439)",
+      "chart-3": "oklch(0.586 0.253 17.585)",
+      "chart-4": "oklch(0.514 0.222 16.935)",
+      "chart-5": "oklch(0.455 0.188 13.697)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.987 0.002 197.1)",
+      "sidebar-foreground": "oklch(0.148 0.004 228.8)",
+      "sidebar-primary": "oklch(0.218 0.008 223.9)",
+      "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-accent": "oklch(0.963 0.002 197.1)",
+      "sidebar-accent-foreground": "oklch(0.218 0.008 223.9)",
+      "sidebar-border": "oklch(0.925 0.005 214.3)",
+      "sidebar-ring": "oklch(0.723 0.014 214.4)"
+    },
+    "dark": {
+      "background": "oklch(0.148 0.004 228.8)",
+      "foreground": "oklch(0.987 0.002 197.1)",
+      "card": "oklch(0.218 0.008 223.9)",
+      "card-foreground": "oklch(0.987 0.002 197.1)",
+      "popover": "oklch(0.218 0.008 223.9)",
+      "popover-foreground": "oklch(0.987 0.002 197.1)",
+      "primary": "oklch(0.925 0.005 214.3)",
+      "primary-foreground": "oklch(0.218 0.008 223.9)",
+      "secondary": "oklch(0.275 0.011 216.9)",
+      "secondary-foreground": "oklch(0.987 0.002 197.1)",
+      "muted": "oklch(0.275 0.011 216.9)",
+      "muted-foreground": "oklch(0.723 0.014 214.4)",
+      "accent": "oklch(0.275 0.011 216.9)",
+      "accent-foreground": "oklch(0.987 0.002 197.1)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.56 0.021 213.5)",
+      "chart-1": "oklch(0.81 0.117 11.638)",
+      "chart-2": "oklch(0.645 0.246 16.439)",
+      "chart-3": "oklch(0.586 0.253 17.585)",
+      "chart-4": "oklch(0.514 0.222 16.935)",
+      "chart-5": "oklch(0.455 0.188 13.697)",
+      "sidebar": "oklch(0.218 0.008 223.9)",
+      "sidebar-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-accent": "oklch(0.275 0.011 216.9)",
+      "sidebar-accent-foreground": "oklch(0.987 0.002 197.1)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.56 0.021 213.5)"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.148 0.004 228.8);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.148 0.004 228.8);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.148 0.004 228.8);\n    --primary: oklch(0.218 0.008 223.9);\n    --primary-foreground: oklch(0.987 0.002 197.1);\n    --secondary: oklch(0.963 0.002 197.1);\n    --secondary-foreground: oklch(0.218 0.008 223.9);\n    --muted: oklch(0.963 0.002 197.1);\n    --muted-foreground: oklch(0.56 0.021 213.5);\n    --accent: oklch(0.963 0.002 197.1);\n    --accent-foreground: oklch(0.218 0.008 223.9);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.925 0.005 214.3);\n    --input: oklch(0.925 0.005 214.3);\n    --ring: oklch(0.723 0.014 214.4);\n    --chart-1: oklch(0.81 0.117 11.638);\n    --chart-2: oklch(0.645 0.246 16.439);\n    --chart-3: oklch(0.586 0.253 17.585);\n    --chart-4: oklch(0.514 0.222 16.935);\n    --chart-5: oklch(0.455 0.188 13.697);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.148 0.004 228.8);\n    --foreground: oklch(0.987 0.002 197.1);\n    --card: oklch(0.218 0.008 223.9);\n    --card-foreground: oklch(0.987 0.002 197.1);\n    --popover: oklch(0.218 0.008 223.9);\n    --popover-foreground: oklch(0.987 0.002 197.1);\n    --primary: oklch(0.925 0.005 214.3);\n    --primary-foreground: oklch(0.218 0.008 223.9);\n    --secondary: oklch(0.275 0.011 216.9);\n    --secondary-foreground: oklch(0.987 0.002 197.1);\n    --muted: oklch(0.275 0.011 216.9);\n    --muted-foreground: oklch(0.723 0.014 214.4);\n    --accent: oklch(0.275 0.011 216.9);\n    --accent-foreground: oklch(0.987 0.002 197.1);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.56 0.021 213.5);\n    --chart-1: oklch(0.81 0.117 11.638);\n    --chart-2: oklch(0.645 0.246 16.439);\n    --chart-3: oklch(0.586 0.253 17.585);\n    --chart-4: oklch(0.514 0.222 16.935);\n    --chart-5: oklch(0.455 0.188 13.697);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/v4/public/r/colors/neutral.json b/apps/v4/public/r/colors/neutral.json
index 56267dfb4a..fb7f454b16 100644
--- a/apps/v4/public/r/colors/neutral.json
+++ b/apps/v4/public/r/colors/neutral.json
@@ -1,100 +1,140 @@
 {
   "inlineColors": {
     "light": {
-      "background": "white",
-      "foreground": "neutral-950",
-      "card": "white",
-      "card-foreground": "neutral-950",
-      "popover": "white",
-      "popover-foreground": "neutral-950",
-      "primary": "neutral-900",
-      "primary-foreground": "neutral-50",
-      "secondary": "neutral-100",
-      "secondary-foreground": "neutral-900",
-      "muted": "neutral-100",
-      "muted-foreground": "neutral-500",
-      "accent": "neutral-100",
-      "accent-foreground": "neutral-900",
-      "destructive": "red-500",
-      "destructive-foreground": "neutral-50",
-      "border": "neutral-200",
-      "input": "neutral-200",
-      "ring": "neutral-950"
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.145 0 0)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0 0)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0 0)",
+      "primary": "oklch(0.205 0 0)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.97 0 0)",
+      "secondary-foreground": "oklch(0.205 0 0)",
+      "muted": "oklch(0.97 0 0)",
+      "muted-foreground": "oklch(0.556 0 0)",
+      "accent": "oklch(0.97 0 0)",
+      "accent-foreground": "oklch(0.205 0 0)",
+      "destructive": "oklch(0.58 0.22 27)",
+      "border": "oklch(0.922 0 0)",
+      "input": "oklch(0.922 0 0)",
+      "ring": "oklch(0.708 0 0)",
+      "chart-1": "oklch(0.809 0.105 251.813)",
+      "chart-2": "oklch(0.623 0.214 259.815)",
+      "chart-3": "oklch(0.546 0.245 262.881)",
+      "chart-4": "oklch(0.488 0.243 264.376)",
+      "chart-5": "oklch(0.424 0.199 265.638)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.145 0 0)",
+      "sidebar-primary": "oklch(0.205 0 0)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.97 0 0)",
+      "sidebar-accent-foreground": "oklch(0.205 0 0)",
+      "sidebar-border": "oklch(0.922 0 0)",
+      "sidebar-ring": "oklch(0.708 0 0)"
     },
     "dark": {
-      "background": "neutral-950",
-      "foreground": "neutral-50",
-      "card": "neutral-950",
-      "card-foreground": "neutral-50",
-      "popover": "neutral-950",
-      "popover-foreground": "neutral-50",
-      "primary": "neutral-50",
-      "primary-foreground": "neutral-900",
-      "secondary": "neutral-800",
-      "secondary-foreground": "neutral-50",
-      "muted": "neutral-800",
-      "muted-foreground": "neutral-400",
-      "accent": "neutral-800",
-      "accent-foreground": "neutral-50",
-      "destructive": "red-900",
-      "destructive-foreground": "neutral-50",
-      "border": "neutral-800",
-      "input": "neutral-800",
-      "ring": "neutral-300"
+      "background": "oklch(0.145 0 0)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.205 0 0)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.205 0 0)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.87 0.00 0)",
+      "primary-foreground": "oklch(0.205 0 0)",
+      "secondary": "oklch(0.269 0 0)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.269 0 0)",
+      "muted-foreground": "oklch(0.708 0 0)",
+      "accent": "oklch(0.371 0 0)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.556 0 0)",
+      "chart-1": "oklch(0.809 0.105 251.813)",
+      "chart-2": "oklch(0.623 0.214 259.815)",
+      "chart-3": "oklch(0.546 0.245 262.881)",
+      "chart-4": "oklch(0.488 0.243 264.376)",
+      "chart-5": "oklch(0.424 0.199 265.638)",
+      "sidebar": "oklch(0.205 0 0)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.269 0 0)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.556 0 0)"
     }
   },
   "cssVars": {
     "light": {
-      "background": "0 0% 100%",
-      "foreground": "0 0% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "0 0% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "0 0% 3.9%",
-      "primary": "0 0% 9%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "0 0% 96.1%",
-      "secondary-foreground": "0 0% 9%",
-      "muted": "0 0% 96.1%",
-      "muted-foreground": "0 0% 45.1%",
-      "accent": "0 0% 96.1%",
-      "accent-foreground": "0 0% 9%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 89.8%",
-      "input": "0 0% 89.8%",
-      "ring": "0 0% 3.9%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.145 0 0)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.145 0 0)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.145 0 0)",
+      "primary": "oklch(0.205 0 0)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.97 0 0)",
+      "secondary-foreground": "oklch(0.205 0 0)",
+      "muted": "oklch(0.97 0 0)",
+      "muted-foreground": "oklch(0.556 0 0)",
+      "accent": "oklch(0.97 0 0)",
+      "accent-foreground": "oklch(0.205 0 0)",
+      "destructive": "oklch(0.58 0.22 27)",
+      "border": "oklch(0.922 0 0)",
+      "input": "oklch(0.922 0 0)",
+      "ring": "oklch(0.708 0 0)",
+      "chart-1": "oklch(0.809 0.105 251.813)",
+      "chart-2": "oklch(0.623 0.214 259.815)",
+      "chart-3": "oklch(0.546 0.245 262.881)",
+      "chart-4": "oklch(0.488 0.243 264.376)",
+      "chart-5": "oklch(0.424 0.199 265.638)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.145 0 0)",
+      "sidebar-primary": "oklch(0.205 0 0)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.97 0 0)",
+      "sidebar-accent-foreground": "oklch(0.205 0 0)",
+      "sidebar-border": "oklch(0.922 0 0)",
+      "sidebar-ring": "oklch(0.708 0 0)"
     },
     "dark": {
-      "background": "0 0% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "0 0% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "0 0% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "0 0% 9%",
-      "secondary": "0 0% 14.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "0 0% 14.9%",
-      "muted-foreground": "0 0% 63.9%",
-      "accent": "0 0% 14.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "0 0% 14.9%",
-      "input": "0 0% 14.9%",
-      "ring": "0 0% 83.1%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
+      "background": "oklch(0.145 0 0)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.205 0 0)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.205 0 0)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.87 0.00 0)",
+      "primary-foreground": "oklch(0.205 0 0)",
+      "secondary": "oklch(0.269 0 0)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.269 0 0)",
+      "muted-foreground": "oklch(0.708 0 0)",
+      "accent": "oklch(0.371 0 0)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.556 0 0)",
+      "chart-1": "oklch(0.809 0.105 251.813)",
+      "chart-2": "oklch(0.623 0.214 259.815)",
+      "chart-3": "oklch(0.546 0.245 262.881)",
+      "chart-4": "oklch(0.488 0.243 264.376)",
+      "chart-5": "oklch(0.424 0.199 265.638)",
+      "sidebar": "oklch(0.205 0 0)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.269 0 0)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.556 0 0)"
     }
   },
   "cssVarsV4": {
@@ -113,15 +153,15 @@
       "muted-foreground": "oklch(0.556 0 0)",
       "accent": "oklch(0.97 0 0)",
       "accent-foreground": "oklch(0.205 0 0)",
-      "destructive": "oklch(0.577 0.245 27.325)",
+      "destructive": "oklch(0.58 0.22 27)",
       "border": "oklch(0.922 0 0)",
       "input": "oklch(0.922 0 0)",
       "ring": "oklch(0.708 0 0)",
-      "chart-1": "oklch(0.646 0.222 41.116)",
-      "chart-2": "oklch(0.6 0.118 184.704)",
-      "chart-3": "oklch(0.398 0.07 227.392)",
-      "chart-4": "oklch(0.828 0.189 84.429)",
-      "chart-5": "oklch(0.769 0.188 70.08)",
+      "chart-1": "oklch(0.809 0.105 251.813)",
+      "chart-2": "oklch(0.623 0.214 259.815)",
+      "chart-3": "oklch(0.546 0.245 262.881)",
+      "chart-4": "oklch(0.488 0.243 264.376)",
+      "chart-5": "oklch(0.424 0.199 265.638)",
       "radius": "0.625rem",
       "sidebar": "oklch(0.985 0 0)",
       "sidebar-foreground": "oklch(0.145 0 0)",
@@ -139,23 +179,23 @@
       "card-foreground": "oklch(0.985 0 0)",
       "popover": "oklch(0.205 0 0)",
       "popover-foreground": "oklch(0.985 0 0)",
-      "primary": "oklch(0.922 0 0)",
+      "primary": "oklch(0.87 0.00 0)",
       "primary-foreground": "oklch(0.205 0 0)",
       "secondary": "oklch(0.269 0 0)",
       "secondary-foreground": "oklch(0.985 0 0)",
       "muted": "oklch(0.269 0 0)",
       "muted-foreground": "oklch(0.708 0 0)",
-      "accent": "oklch(0.269 0 0)",
+      "accent": "oklch(0.371 0 0)",
       "accent-foreground": "oklch(0.985 0 0)",
       "destructive": "oklch(0.704 0.191 22.216)",
       "border": "oklch(1 0 0 / 10%)",
       "input": "oklch(1 0 0 / 15%)",
       "ring": "oklch(0.556 0 0)",
-      "chart-1": "oklch(0.488 0.243 264.376)",
-      "chart-2": "oklch(0.696 0.17 162.48)",
-      "chart-3": "oklch(0.769 0.188 70.08)",
-      "chart-4": "oklch(0.627 0.265 303.9)",
-      "chart-5": "oklch(0.645 0.246 16.439)",
+      "chart-1": "oklch(0.809 0.105 251.813)",
+      "chart-2": "oklch(0.623 0.214 259.815)",
+      "chart-3": "oklch(0.546 0.245 262.881)",
+      "chart-4": "oklch(0.488 0.243 264.376)",
+      "chart-5": "oklch(0.424 0.199 265.638)",
       "sidebar": "oklch(0.205 0 0)",
       "sidebar-foreground": "oklch(0.985 0 0)",
       "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -167,5 +207,5 @@
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 0 0% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 0 0% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 0 0% 3.9%;\n    --primary: 0 0% 9%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 0 0% 96.1%;\n    --secondary-foreground: 0 0% 9%;\n    --muted: 0 0% 96.1%;\n    --muted-foreground: 0 0% 45.1%;\n    --accent: 0 0% 96.1%;\n    --accent-foreground: 0 0% 9%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 89.8%;\n    --input: 0 0% 89.8%;\n    --ring: 0 0% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 0 0% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 0 0% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 0 0% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 0 0% 9%;\n    --secondary: 0 0% 14.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 0 0% 14.9%;\n    --muted-foreground: 0 0% 63.9%;\n    --accent: 0 0% 14.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 0 0% 14.9%;\n    --input: 0 0% 14.9%;\n    --ring: 0 0% 83.1%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.145 0 0);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.145 0 0);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.145 0 0);\n    --primary: oklch(0.205 0 0);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.97 0 0);\n    --secondary-foreground: oklch(0.205 0 0);\n    --muted: oklch(0.97 0 0);\n    --muted-foreground: oklch(0.556 0 0);\n    --accent: oklch(0.97 0 0);\n    --accent-foreground: oklch(0.205 0 0);\n    --destructive: oklch(0.58 0.22 27);\n    --border: oklch(0.922 0 0);\n    --input: oklch(0.922 0 0);\n    --ring: oklch(0.708 0 0);\n    --chart-1: oklch(0.809 0.105 251.813);\n    --chart-2: oklch(0.623 0.214 259.815);\n    --chart-3: oklch(0.546 0.245 262.881);\n    --chart-4: oklch(0.488 0.243 264.376);\n    --chart-5: oklch(0.424 0.199 265.638);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.145 0 0);\n    --foreground: oklch(0.985 0 0);\n    --card: oklch(0.205 0 0);\n    --card-foreground: oklch(0.985 0 0);\n    --popover: oklch(0.205 0 0);\n    --popover-foreground: oklch(0.985 0 0);\n    --primary: oklch(0.87 0.00 0);\n    --primary-foreground: oklch(0.205 0 0);\n    --secondary: oklch(0.269 0 0);\n    --secondary-foreground: oklch(0.985 0 0);\n    --muted: oklch(0.269 0 0);\n    --muted-foreground: oklch(0.708 0 0);\n    --accent: oklch(0.371 0 0);\n    --accent-foreground: oklch(0.985 0 0);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.556 0 0);\n    --chart-1: oklch(0.809 0.105 251.813);\n    --chart-2: oklch(0.623 0.214 259.815);\n    --chart-3: oklch(0.546 0.245 262.881);\n    --chart-4: oklch(0.488 0.243 264.376);\n    --chart-5: oklch(0.424 0.199 265.638);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/v4/public/r/colors/olive.json b/apps/v4/public/r/colors/olive.json
new file mode 100644
index 0000000000..0ec0dfb9e5
--- /dev/null
+++ b/apps/v4/public/r/colors/olive.json
@@ -0,0 +1,211 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.153 0.006 107.1)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.153 0.006 107.1)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.153 0.006 107.1)",
+      "primary": "oklch(0.228 0.013 107.4)",
+      "primary-foreground": "oklch(0.988 0.003 106.5)",
+      "secondary": "oklch(0.966 0.005 106.5)",
+      "secondary-foreground": "oklch(0.228 0.013 107.4)",
+      "muted": "oklch(0.966 0.005 106.5)",
+      "muted-foreground": "oklch(0.58 0.031 107.3)",
+      "accent": "oklch(0.966 0.005 106.5)",
+      "accent-foreground": "oklch(0.228 0.013 107.4)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.93 0.007 106.5)",
+      "input": "oklch(0.93 0.007 106.5)",
+      "ring": "oklch(0.737 0.021 106.9)",
+      "chart-1": "oklch(0.811 0.111 293.571)",
+      "chart-2": "oklch(0.606 0.25 292.717)",
+      "chart-3": "oklch(0.541 0.281 293.009)",
+      "chart-4": "oklch(0.491 0.27 292.581)",
+      "chart-5": "oklch(0.432 0.232 292.759)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.988 0.003 106.5)",
+      "sidebar-foreground": "oklch(0.153 0.006 107.1)",
+      "sidebar-primary": "oklch(0.228 0.013 107.4)",
+      "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-accent": "oklch(0.966 0.005 106.5)",
+      "sidebar-accent-foreground": "oklch(0.228 0.013 107.4)",
+      "sidebar-border": "oklch(0.93 0.007 106.5)",
+      "sidebar-ring": "oklch(0.737 0.021 106.9)"
+    },
+    "dark": {
+      "background": "oklch(0.153 0.006 107.1)",
+      "foreground": "oklch(0.988 0.003 106.5)",
+      "card": "oklch(0.228 0.013 107.4)",
+      "card-foreground": "oklch(0.988 0.003 106.5)",
+      "popover": "oklch(0.228 0.013 107.4)",
+      "popover-foreground": "oklch(0.988 0.003 106.5)",
+      "primary": "oklch(0.93 0.007 106.5)",
+      "primary-foreground": "oklch(0.228 0.013 107.4)",
+      "secondary": "oklch(0.286 0.016 107.4)",
+      "secondary-foreground": "oklch(0.988 0.003 106.5)",
+      "muted": "oklch(0.286 0.016 107.4)",
+      "muted-foreground": "oklch(0.737 0.021 106.9)",
+      "accent": "oklch(0.286 0.016 107.4)",
+      "accent-foreground": "oklch(0.988 0.003 106.5)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.58 0.031 107.3)",
+      "chart-1": "oklch(0.811 0.111 293.571)",
+      "chart-2": "oklch(0.606 0.25 292.717)",
+      "chart-3": "oklch(0.541 0.281 293.009)",
+      "chart-4": "oklch(0.491 0.27 292.581)",
+      "chart-5": "oklch(0.432 0.232 292.759)",
+      "sidebar": "oklch(0.228 0.013 107.4)",
+      "sidebar-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-accent": "oklch(0.286 0.016 107.4)",
+      "sidebar-accent-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.58 0.031 107.3)"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.153 0.006 107.1)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.153 0.006 107.1)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.153 0.006 107.1)",
+      "primary": "oklch(0.228 0.013 107.4)",
+      "primary-foreground": "oklch(0.988 0.003 106.5)",
+      "secondary": "oklch(0.966 0.005 106.5)",
+      "secondary-foreground": "oklch(0.228 0.013 107.4)",
+      "muted": "oklch(0.966 0.005 106.5)",
+      "muted-foreground": "oklch(0.58 0.031 107.3)",
+      "accent": "oklch(0.966 0.005 106.5)",
+      "accent-foreground": "oklch(0.228 0.013 107.4)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.93 0.007 106.5)",
+      "input": "oklch(0.93 0.007 106.5)",
+      "ring": "oklch(0.737 0.021 106.9)",
+      "chart-1": "oklch(0.811 0.111 293.571)",
+      "chart-2": "oklch(0.606 0.25 292.717)",
+      "chart-3": "oklch(0.541 0.281 293.009)",
+      "chart-4": "oklch(0.491 0.27 292.581)",
+      "chart-5": "oklch(0.432 0.232 292.759)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.988 0.003 106.5)",
+      "sidebar-foreground": "oklch(0.153 0.006 107.1)",
+      "sidebar-primary": "oklch(0.228 0.013 107.4)",
+      "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-accent": "oklch(0.966 0.005 106.5)",
+      "sidebar-accent-foreground": "oklch(0.228 0.013 107.4)",
+      "sidebar-border": "oklch(0.93 0.007 106.5)",
+      "sidebar-ring": "oklch(0.737 0.021 106.9)"
+    },
+    "dark": {
+      "background": "oklch(0.153 0.006 107.1)",
+      "foreground": "oklch(0.988 0.003 106.5)",
+      "card": "oklch(0.228 0.013 107.4)",
+      "card-foreground": "oklch(0.988 0.003 106.5)",
+      "popover": "oklch(0.228 0.013 107.4)",
+      "popover-foreground": "oklch(0.988 0.003 106.5)",
+      "primary": "oklch(0.93 0.007 106.5)",
+      "primary-foreground": "oklch(0.228 0.013 107.4)",
+      "secondary": "oklch(0.286 0.016 107.4)",
+      "secondary-foreground": "oklch(0.988 0.003 106.5)",
+      "muted": "oklch(0.286 0.016 107.4)",
+      "muted-foreground": "oklch(0.737 0.021 106.9)",
+      "accent": "oklch(0.286 0.016 107.4)",
+      "accent-foreground": "oklch(0.988 0.003 106.5)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.58 0.031 107.3)",
+      "chart-1": "oklch(0.811 0.111 293.571)",
+      "chart-2": "oklch(0.606 0.25 292.717)",
+      "chart-3": "oklch(0.541 0.281 293.009)",
+      "chart-4": "oklch(0.491 0.27 292.581)",
+      "chart-5": "oklch(0.432 0.232 292.759)",
+      "sidebar": "oklch(0.228 0.013 107.4)",
+      "sidebar-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-accent": "oklch(0.286 0.016 107.4)",
+      "sidebar-accent-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.58 0.031 107.3)"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.153 0.006 107.1)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.153 0.006 107.1)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.153 0.006 107.1)",
+      "primary": "oklch(0.228 0.013 107.4)",
+      "primary-foreground": "oklch(0.988 0.003 106.5)",
+      "secondary": "oklch(0.966 0.005 106.5)",
+      "secondary-foreground": "oklch(0.228 0.013 107.4)",
+      "muted": "oklch(0.966 0.005 106.5)",
+      "muted-foreground": "oklch(0.58 0.031 107.3)",
+      "accent": "oklch(0.966 0.005 106.5)",
+      "accent-foreground": "oklch(0.228 0.013 107.4)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.93 0.007 106.5)",
+      "input": "oklch(0.93 0.007 106.5)",
+      "ring": "oklch(0.737 0.021 106.9)",
+      "chart-1": "oklch(0.811 0.111 293.571)",
+      "chart-2": "oklch(0.606 0.25 292.717)",
+      "chart-3": "oklch(0.541 0.281 293.009)",
+      "chart-4": "oklch(0.491 0.27 292.581)",
+      "chart-5": "oklch(0.432 0.232 292.759)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.988 0.003 106.5)",
+      "sidebar-foreground": "oklch(0.153 0.006 107.1)",
+      "sidebar-primary": "oklch(0.228 0.013 107.4)",
+      "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-accent": "oklch(0.966 0.005 106.5)",
+      "sidebar-accent-foreground": "oklch(0.228 0.013 107.4)",
+      "sidebar-border": "oklch(0.93 0.007 106.5)",
+      "sidebar-ring": "oklch(0.737 0.021 106.9)"
+    },
+    "dark": {
+      "background": "oklch(0.153 0.006 107.1)",
+      "foreground": "oklch(0.988 0.003 106.5)",
+      "card": "oklch(0.228 0.013 107.4)",
+      "card-foreground": "oklch(0.988 0.003 106.5)",
+      "popover": "oklch(0.228 0.013 107.4)",
+      "popover-foreground": "oklch(0.988 0.003 106.5)",
+      "primary": "oklch(0.93 0.007 106.5)",
+      "primary-foreground": "oklch(0.228 0.013 107.4)",
+      "secondary": "oklch(0.286 0.016 107.4)",
+      "secondary-foreground": "oklch(0.988 0.003 106.5)",
+      "muted": "oklch(0.286 0.016 107.4)",
+      "muted-foreground": "oklch(0.737 0.021 106.9)",
+      "accent": "oklch(0.286 0.016 107.4)",
+      "accent-foreground": "oklch(0.988 0.003 106.5)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.58 0.031 107.3)",
+      "chart-1": "oklch(0.811 0.111 293.571)",
+      "chart-2": "oklch(0.606 0.25 292.717)",
+      "chart-3": "oklch(0.541 0.281 293.009)",
+      "chart-4": "oklch(0.491 0.27 292.581)",
+      "chart-5": "oklch(0.432 0.232 292.759)",
+      "sidebar": "oklch(0.228 0.013 107.4)",
+      "sidebar-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-accent": "oklch(0.286 0.016 107.4)",
+      "sidebar-accent-foreground": "oklch(0.988 0.003 106.5)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.58 0.031 107.3)"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.153 0.006 107.1);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.153 0.006 107.1);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.153 0.006 107.1);\n    --primary: oklch(0.228 0.013 107.4);\n    --primary-foreground: oklch(0.988 0.003 106.5);\n    --secondary: oklch(0.966 0.005 106.5);\n    --secondary-foreground: oklch(0.228 0.013 107.4);\n    --muted: oklch(0.966 0.005 106.5);\n    --muted-foreground: oklch(0.58 0.031 107.3);\n    --accent: oklch(0.966 0.005 106.5);\n    --accent-foreground: oklch(0.228 0.013 107.4);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.93 0.007 106.5);\n    --input: oklch(0.93 0.007 106.5);\n    --ring: oklch(0.737 0.021 106.9);\n    --chart-1: oklch(0.811 0.111 293.571);\n    --chart-2: oklch(0.606 0.25 292.717);\n    --chart-3: oklch(0.541 0.281 293.009);\n    --chart-4: oklch(0.491 0.27 292.581);\n    --chart-5: oklch(0.432 0.232 292.759);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.153 0.006 107.1);\n    --foreground: oklch(0.988 0.003 106.5);\n    --card: oklch(0.228 0.013 107.4);\n    --card-foreground: oklch(0.988 0.003 106.5);\n    --popover: oklch(0.228 0.013 107.4);\n    --popover-foreground: oklch(0.988 0.003 106.5);\n    --primary: oklch(0.93 0.007 106.5);\n    --primary-foreground: oklch(0.228 0.013 107.4);\n    --secondary: oklch(0.286 0.016 107.4);\n    --secondary-foreground: oklch(0.988 0.003 106.5);\n    --muted: oklch(0.286 0.016 107.4);\n    --muted-foreground: oklch(0.737 0.021 106.9);\n    --accent: oklch(0.286 0.016 107.4);\n    --accent-foreground: oklch(0.988 0.003 106.5);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.58 0.031 107.3);\n    --chart-1: oklch(0.811 0.111 293.571);\n    --chart-2: oklch(0.606 0.25 292.717);\n    --chart-3: oklch(0.541 0.281 293.009);\n    --chart-4: oklch(0.491 0.27 292.581);\n    --chart-5: oklch(0.432 0.232 292.759);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/v4/public/r/colors/stone.json b/apps/v4/public/r/colors/stone.json
index 2648208dce..f8af754d31 100644
--- a/apps/v4/public/r/colors/stone.json
+++ b/apps/v4/public/r/colors/stone.json
@@ -1,103 +1,5 @@
 {
   "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "stone-950",
-      "card": "white",
-      "card-foreground": "stone-950",
-      "popover": "white",
-      "popover-foreground": "stone-950",
-      "primary": "stone-900",
-      "primary-foreground": "stone-50",
-      "secondary": "stone-100",
-      "secondary-foreground": "stone-900",
-      "muted": "stone-100",
-      "muted-foreground": "stone-500",
-      "accent": "stone-100",
-      "accent-foreground": "stone-900",
-      "destructive": "red-500",
-      "destructive-foreground": "stone-50",
-      "border": "stone-200",
-      "input": "stone-200",
-      "ring": "stone-950"
-    },
-    "dark": {
-      "background": "stone-950",
-      "foreground": "stone-50",
-      "card": "stone-950",
-      "card-foreground": "stone-50",
-      "popover": "stone-950",
-      "popover-foreground": "stone-50",
-      "primary": "stone-50",
-      "primary-foreground": "stone-900",
-      "secondary": "stone-800",
-      "secondary-foreground": "stone-50",
-      "muted": "stone-800",
-      "muted-foreground": "stone-400",
-      "accent": "stone-800",
-      "accent-foreground": "stone-50",
-      "destructive": "red-900",
-      "destructive-foreground": "stone-50",
-      "border": "stone-800",
-      "input": "stone-800",
-      "ring": "stone-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "20 14.3% 4.1%",
-      "card": "0 0% 100%",
-      "card-foreground": "20 14.3% 4.1%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "20 14.3% 4.1%",
-      "primary": "24 9.8% 10%",
-      "primary-foreground": "60 9.1% 97.8%",
-      "secondary": "60 4.8% 95.9%",
-      "secondary-foreground": "24 9.8% 10%",
-      "muted": "60 4.8% 95.9%",
-      "muted-foreground": "25 5.3% 44.7%",
-      "accent": "60 4.8% 95.9%",
-      "accent-foreground": "24 9.8% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "20 5.9% 90%",
-      "input": "20 5.9% 90%",
-      "ring": "20 14.3% 4.1%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "20 14.3% 4.1%",
-      "foreground": "60 9.1% 97.8%",
-      "card": "20 14.3% 4.1%",
-      "card-foreground": "60 9.1% 97.8%",
-      "popover": "20 14.3% 4.1%",
-      "popover-foreground": "60 9.1% 97.8%",
-      "primary": "60 9.1% 97.8%",
-      "primary-foreground": "24 9.8% 10%",
-      "secondary": "12 6.5% 15.1%",
-      "secondary-foreground": "60 9.1% 97.8%",
-      "muted": "12 6.5% 15.1%",
-      "muted-foreground": "24 5.4% 63.9%",
-      "accent": "12 6.5% 15.1%",
-      "accent-foreground": "60 9.1% 97.8%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "60 9.1% 97.8%",
-      "border": "12 6.5% 15.1%",
-      "input": "12 6.5% 15.1%",
-      "ring": "24 5.7% 82.9%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  },
-  "cssVarsV4": {
     "light": {
       "background": "oklch(1 0 0)",
       "foreground": "oklch(0.147 0.004 49.25)",
@@ -117,11 +19,11 @@
       "border": "oklch(0.923 0.003 48.717)",
       "input": "oklch(0.923 0.003 48.717)",
       "ring": "oklch(0.709 0.01 56.259)",
-      "chart-1": "oklch(0.646 0.222 41.116)",
-      "chart-2": "oklch(0.6 0.118 184.704)",
-      "chart-3": "oklch(0.398 0.07 227.392)",
-      "chart-4": "oklch(0.828 0.189 84.429)",
-      "chart-5": "oklch(0.769 0.188 70.08)",
+      "chart-1": "oklch(0.897 0.196 126.665)",
+      "chart-2": "oklch(0.768 0.233 130.85)",
+      "chart-3": "oklch(0.648 0.2 131.684)",
+      "chart-4": "oklch(0.532 0.157 131.589)",
+      "chart-5": "oklch(0.453 0.124 130.933)",
       "radius": "0.625rem",
       "sidebar": "oklch(0.985 0.001 106.423)",
       "sidebar-foreground": "oklch(0.147 0.004 49.25)",
@@ -151,11 +53,149 @@
       "border": "oklch(1 0 0 / 10%)",
       "input": "oklch(1 0 0 / 15%)",
       "ring": "oklch(0.553 0.013 58.071)",
-      "chart-1": "oklch(0.488 0.243 264.376)",
-      "chart-2": "oklch(0.696 0.17 162.48)",
-      "chart-3": "oklch(0.769 0.188 70.08)",
-      "chart-4": "oklch(0.627 0.265 303.9)",
-      "chart-5": "oklch(0.645 0.246 16.439)",
+      "chart-1": "oklch(0.897 0.196 126.665)",
+      "chart-2": "oklch(0.768 0.233 130.85)",
+      "chart-3": "oklch(0.648 0.2 131.684)",
+      "chart-4": "oklch(0.532 0.157 131.589)",
+      "chart-5": "oklch(0.453 0.124 130.933)",
+      "sidebar": "oklch(0.216 0.006 56.043)",
+      "sidebar-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.268 0.007 34.298)",
+      "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.553 0.013 58.071)"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 49.25)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 49.25)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 49.25)",
+      "primary": "oklch(0.216 0.006 56.043)",
+      "primary-foreground": "oklch(0.985 0.001 106.423)",
+      "secondary": "oklch(0.97 0.001 106.424)",
+      "secondary-foreground": "oklch(0.216 0.006 56.043)",
+      "muted": "oklch(0.97 0.001 106.424)",
+      "muted-foreground": "oklch(0.553 0.013 58.071)",
+      "accent": "oklch(0.97 0.001 106.424)",
+      "accent-foreground": "oklch(0.216 0.006 56.043)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.923 0.003 48.717)",
+      "input": "oklch(0.923 0.003 48.717)",
+      "ring": "oklch(0.709 0.01 56.259)",
+      "chart-1": "oklch(0.897 0.196 126.665)",
+      "chart-2": "oklch(0.768 0.233 130.85)",
+      "chart-3": "oklch(0.648 0.2 131.684)",
+      "chart-4": "oklch(0.532 0.157 131.589)",
+      "chart-5": "oklch(0.453 0.124 130.933)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.001 106.423)",
+      "sidebar-foreground": "oklch(0.147 0.004 49.25)",
+      "sidebar-primary": "oklch(0.216 0.006 56.043)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.97 0.001 106.424)",
+      "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+      "sidebar-border": "oklch(0.923 0.003 48.717)",
+      "sidebar-ring": "oklch(0.709 0.01 56.259)"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 49.25)",
+      "foreground": "oklch(0.985 0.001 106.423)",
+      "card": "oklch(0.216 0.006 56.043)",
+      "card-foreground": "oklch(0.985 0.001 106.423)",
+      "popover": "oklch(0.216 0.006 56.043)",
+      "popover-foreground": "oklch(0.985 0.001 106.423)",
+      "primary": "oklch(0.923 0.003 48.717)",
+      "primary-foreground": "oklch(0.216 0.006 56.043)",
+      "secondary": "oklch(0.268 0.007 34.298)",
+      "secondary-foreground": "oklch(0.985 0.001 106.423)",
+      "muted": "oklch(0.268 0.007 34.298)",
+      "muted-foreground": "oklch(0.709 0.01 56.259)",
+      "accent": "oklch(0.268 0.007 34.298)",
+      "accent-foreground": "oklch(0.985 0.001 106.423)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.553 0.013 58.071)",
+      "chart-1": "oklch(0.897 0.196 126.665)",
+      "chart-2": "oklch(0.768 0.233 130.85)",
+      "chart-3": "oklch(0.648 0.2 131.684)",
+      "chart-4": "oklch(0.532 0.157 131.589)",
+      "chart-5": "oklch(0.453 0.124 130.933)",
+      "sidebar": "oklch(0.216 0.006 56.043)",
+      "sidebar-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.268 0.007 34.298)",
+      "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.553 0.013 58.071)"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 49.25)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 49.25)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 49.25)",
+      "primary": "oklch(0.216 0.006 56.043)",
+      "primary-foreground": "oklch(0.985 0.001 106.423)",
+      "secondary": "oklch(0.97 0.001 106.424)",
+      "secondary-foreground": "oklch(0.216 0.006 56.043)",
+      "muted": "oklch(0.97 0.001 106.424)",
+      "muted-foreground": "oklch(0.553 0.013 58.071)",
+      "accent": "oklch(0.97 0.001 106.424)",
+      "accent-foreground": "oklch(0.216 0.006 56.043)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.923 0.003 48.717)",
+      "input": "oklch(0.923 0.003 48.717)",
+      "ring": "oklch(0.709 0.01 56.259)",
+      "chart-1": "oklch(0.897 0.196 126.665)",
+      "chart-2": "oklch(0.768 0.233 130.85)",
+      "chart-3": "oklch(0.648 0.2 131.684)",
+      "chart-4": "oklch(0.532 0.157 131.589)",
+      "chart-5": "oklch(0.453 0.124 130.933)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0.001 106.423)",
+      "sidebar-foreground": "oklch(0.147 0.004 49.25)",
+      "sidebar-primary": "oklch(0.216 0.006 56.043)",
+      "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
+      "sidebar-accent": "oklch(0.97 0.001 106.424)",
+      "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+      "sidebar-border": "oklch(0.923 0.003 48.717)",
+      "sidebar-ring": "oklch(0.709 0.01 56.259)"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 49.25)",
+      "foreground": "oklch(0.985 0.001 106.423)",
+      "card": "oklch(0.216 0.006 56.043)",
+      "card-foreground": "oklch(0.985 0.001 106.423)",
+      "popover": "oklch(0.216 0.006 56.043)",
+      "popover-foreground": "oklch(0.985 0.001 106.423)",
+      "primary": "oklch(0.923 0.003 48.717)",
+      "primary-foreground": "oklch(0.216 0.006 56.043)",
+      "secondary": "oklch(0.268 0.007 34.298)",
+      "secondary-foreground": "oklch(0.985 0.001 106.423)",
+      "muted": "oklch(0.268 0.007 34.298)",
+      "muted-foreground": "oklch(0.709 0.01 56.259)",
+      "accent": "oklch(0.268 0.007 34.298)",
+      "accent-foreground": "oklch(0.985 0.001 106.423)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.553 0.013 58.071)",
+      "chart-1": "oklch(0.897 0.196 126.665)",
+      "chart-2": "oklch(0.768 0.233 130.85)",
+      "chart-3": "oklch(0.648 0.2 131.684)",
+      "chart-4": "oklch(0.532 0.157 131.589)",
+      "chart-5": "oklch(0.453 0.124 130.933)",
       "sidebar": "oklch(0.216 0.006 56.043)",
       "sidebar-foreground": "oklch(0.985 0.001 106.423)",
       "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -167,5 +207,5 @@
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 20 14.3% 4.1%;\n    --card: 0 0% 100%;\n    --card-foreground: 20 14.3% 4.1%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 20 14.3% 4.1%;\n    --primary: 24 9.8% 10%;\n    --primary-foreground: 60 9.1% 97.8%;\n    --secondary: 60 4.8% 95.9%;\n    --secondary-foreground: 24 9.8% 10%;\n    --muted: 60 4.8% 95.9%;\n    --muted-foreground: 25 5.3% 44.7%;\n    --accent: 60 4.8% 95.9%;\n    --accent-foreground: 24 9.8% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 20 5.9% 90%;\n    --input: 20 5.9% 90%;\n    --ring: 20 14.3% 4.1%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 20 14.3% 4.1%;\n    --foreground: 60 9.1% 97.8%;\n    --card: 20 14.3% 4.1%;\n    --card-foreground: 60 9.1% 97.8%;\n    --popover: 20 14.3% 4.1%;\n    --popover-foreground: 60 9.1% 97.8%;\n    --primary: 60 9.1% 97.8%;\n    --primary-foreground: 24 9.8% 10%;\n    --secondary: 12 6.5% 15.1%;\n    --secondary-foreground: 60 9.1% 97.8%;\n    --muted: 12 6.5% 15.1%;\n    --muted-foreground: 24 5.4% 63.9%;\n    --accent: 12 6.5% 15.1%;\n    --accent-foreground: 60 9.1% 97.8%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 60 9.1% 97.8%;\n    --border: 12 6.5% 15.1%;\n    --input: 12 6.5% 15.1%;\n    --ring: 24 5.7% 82.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.147 0.004 49.25);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.147 0.004 49.25);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.147 0.004 49.25);\n    --primary: oklch(0.216 0.006 56.043);\n    --primary-foreground: oklch(0.985 0.001 106.423);\n    --secondary: oklch(0.97 0.001 106.424);\n    --secondary-foreground: oklch(0.216 0.006 56.043);\n    --muted: oklch(0.97 0.001 106.424);\n    --muted-foreground: oklch(0.553 0.013 58.071);\n    --accent: oklch(0.97 0.001 106.424);\n    --accent-foreground: oklch(0.216 0.006 56.043);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.923 0.003 48.717);\n    --input: oklch(0.923 0.003 48.717);\n    --ring: oklch(0.709 0.01 56.259);\n    --chart-1: oklch(0.897 0.196 126.665);\n    --chart-2: oklch(0.768 0.233 130.85);\n    --chart-3: oklch(0.648 0.2 131.684);\n    --chart-4: oklch(0.532 0.157 131.589);\n    --chart-5: oklch(0.453 0.124 130.933);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.147 0.004 49.25);\n    --foreground: oklch(0.985 0.001 106.423);\n    --card: oklch(0.216 0.006 56.043);\n    --card-foreground: oklch(0.985 0.001 106.423);\n    --popover: oklch(0.216 0.006 56.043);\n    --popover-foreground: oklch(0.985 0.001 106.423);\n    --primary: oklch(0.923 0.003 48.717);\n    --primary-foreground: oklch(0.216 0.006 56.043);\n    --secondary: oklch(0.268 0.007 34.298);\n    --secondary-foreground: oklch(0.985 0.001 106.423);\n    --muted: oklch(0.268 0.007 34.298);\n    --muted-foreground: oklch(0.709 0.01 56.259);\n    --accent: oklch(0.268 0.007 34.298);\n    --accent-foreground: oklch(0.985 0.001 106.423);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.553 0.013 58.071);\n    --chart-1: oklch(0.897 0.196 126.665);\n    --chart-2: oklch(0.768 0.233 130.85);\n    --chart-3: oklch(0.648 0.2 131.684);\n    --chart-4: oklch(0.532 0.157 131.589);\n    --chart-5: oklch(0.453 0.124 130.933);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/v4/public/r/colors/taupe.json b/apps/v4/public/r/colors/taupe.json
new file mode 100644
index 0000000000..74d1b75a56
--- /dev/null
+++ b/apps/v4/public/r/colors/taupe.json
@@ -0,0 +1,211 @@
+{
+  "inlineColors": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 49.3)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 49.3)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 49.3)",
+      "primary": "oklch(0.214 0.009 43.1)",
+      "primary-foreground": "oklch(0.986 0.002 67.8)",
+      "secondary": "oklch(0.96 0.002 17.2)",
+      "secondary-foreground": "oklch(0.214 0.009 43.1)",
+      "muted": "oklch(0.96 0.002 17.2)",
+      "muted-foreground": "oklch(0.547 0.021 43.1)",
+      "accent": "oklch(0.96 0.002 17.2)",
+      "accent-foreground": "oklch(0.214 0.009 43.1)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0.005 34.3)",
+      "input": "oklch(0.922 0.005 34.3)",
+      "ring": "oklch(0.714 0.014 41.2)",
+      "chart-1": "oklch(0.865 0.127 207.078)",
+      "chart-2": "oklch(0.715 0.143 215.221)",
+      "chart-3": "oklch(0.609 0.126 221.723)",
+      "chart-4": "oklch(0.52 0.105 223.128)",
+      "chart-5": "oklch(0.45 0.085 224.283)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.986 0.002 67.8)",
+      "sidebar-foreground": "oklch(0.147 0.004 49.3)",
+      "sidebar-primary": "oklch(0.214 0.009 43.1)",
+      "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-accent": "oklch(0.96 0.002 17.2)",
+      "sidebar-accent-foreground": "oklch(0.214 0.009 43.1)",
+      "sidebar-border": "oklch(0.922 0.005 34.3)",
+      "sidebar-ring": "oklch(0.714 0.014 41.2)"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 49.3)",
+      "foreground": "oklch(0.986 0.002 67.8)",
+      "card": "oklch(0.214 0.009 43.1)",
+      "card-foreground": "oklch(0.986 0.002 67.8)",
+      "popover": "oklch(0.214 0.009 43.1)",
+      "popover-foreground": "oklch(0.986 0.002 67.8)",
+      "primary": "oklch(0.922 0.005 34.3)",
+      "primary-foreground": "oklch(0.214 0.009 43.1)",
+      "secondary": "oklch(0.268 0.011 36.5)",
+      "secondary-foreground": "oklch(0.986 0.002 67.8)",
+      "muted": "oklch(0.268 0.011 36.5)",
+      "muted-foreground": "oklch(0.714 0.014 41.2)",
+      "accent": "oklch(0.268 0.011 36.5)",
+      "accent-foreground": "oklch(0.986 0.002 67.8)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.547 0.021 43.1)",
+      "chart-1": "oklch(0.865 0.127 207.078)",
+      "chart-2": "oklch(0.715 0.143 215.221)",
+      "chart-3": "oklch(0.609 0.126 221.723)",
+      "chart-4": "oklch(0.52 0.105 223.128)",
+      "chart-5": "oklch(0.45 0.085 224.283)",
+      "sidebar": "oklch(0.214 0.009 43.1)",
+      "sidebar-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-accent": "oklch(0.268 0.011 36.5)",
+      "sidebar-accent-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.547 0.021 43.1)"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 49.3)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 49.3)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 49.3)",
+      "primary": "oklch(0.214 0.009 43.1)",
+      "primary-foreground": "oklch(0.986 0.002 67.8)",
+      "secondary": "oklch(0.96 0.002 17.2)",
+      "secondary-foreground": "oklch(0.214 0.009 43.1)",
+      "muted": "oklch(0.96 0.002 17.2)",
+      "muted-foreground": "oklch(0.547 0.021 43.1)",
+      "accent": "oklch(0.96 0.002 17.2)",
+      "accent-foreground": "oklch(0.214 0.009 43.1)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0.005 34.3)",
+      "input": "oklch(0.922 0.005 34.3)",
+      "ring": "oklch(0.714 0.014 41.2)",
+      "chart-1": "oklch(0.865 0.127 207.078)",
+      "chart-2": "oklch(0.715 0.143 215.221)",
+      "chart-3": "oklch(0.609 0.126 221.723)",
+      "chart-4": "oklch(0.52 0.105 223.128)",
+      "chart-5": "oklch(0.45 0.085 224.283)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.986 0.002 67.8)",
+      "sidebar-foreground": "oklch(0.147 0.004 49.3)",
+      "sidebar-primary": "oklch(0.214 0.009 43.1)",
+      "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-accent": "oklch(0.96 0.002 17.2)",
+      "sidebar-accent-foreground": "oklch(0.214 0.009 43.1)",
+      "sidebar-border": "oklch(0.922 0.005 34.3)",
+      "sidebar-ring": "oklch(0.714 0.014 41.2)"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 49.3)",
+      "foreground": "oklch(0.986 0.002 67.8)",
+      "card": "oklch(0.214 0.009 43.1)",
+      "card-foreground": "oklch(0.986 0.002 67.8)",
+      "popover": "oklch(0.214 0.009 43.1)",
+      "popover-foreground": "oklch(0.986 0.002 67.8)",
+      "primary": "oklch(0.922 0.005 34.3)",
+      "primary-foreground": "oklch(0.214 0.009 43.1)",
+      "secondary": "oklch(0.268 0.011 36.5)",
+      "secondary-foreground": "oklch(0.986 0.002 67.8)",
+      "muted": "oklch(0.268 0.011 36.5)",
+      "muted-foreground": "oklch(0.714 0.014 41.2)",
+      "accent": "oklch(0.268 0.011 36.5)",
+      "accent-foreground": "oklch(0.986 0.002 67.8)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.547 0.021 43.1)",
+      "chart-1": "oklch(0.865 0.127 207.078)",
+      "chart-2": "oklch(0.715 0.143 215.221)",
+      "chart-3": "oklch(0.609 0.126 221.723)",
+      "chart-4": "oklch(0.52 0.105 223.128)",
+      "chart-5": "oklch(0.45 0.085 224.283)",
+      "sidebar": "oklch(0.214 0.009 43.1)",
+      "sidebar-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-accent": "oklch(0.268 0.011 36.5)",
+      "sidebar-accent-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.547 0.021 43.1)"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.147 0.004 49.3)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.147 0.004 49.3)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.147 0.004 49.3)",
+      "primary": "oklch(0.214 0.009 43.1)",
+      "primary-foreground": "oklch(0.986 0.002 67.8)",
+      "secondary": "oklch(0.96 0.002 17.2)",
+      "secondary-foreground": "oklch(0.214 0.009 43.1)",
+      "muted": "oklch(0.96 0.002 17.2)",
+      "muted-foreground": "oklch(0.547 0.021 43.1)",
+      "accent": "oklch(0.96 0.002 17.2)",
+      "accent-foreground": "oklch(0.214 0.009 43.1)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.922 0.005 34.3)",
+      "input": "oklch(0.922 0.005 34.3)",
+      "ring": "oklch(0.714 0.014 41.2)",
+      "chart-1": "oklch(0.865 0.127 207.078)",
+      "chart-2": "oklch(0.715 0.143 215.221)",
+      "chart-3": "oklch(0.609 0.126 221.723)",
+      "chart-4": "oklch(0.52 0.105 223.128)",
+      "chart-5": "oklch(0.45 0.085 224.283)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.986 0.002 67.8)",
+      "sidebar-foreground": "oklch(0.147 0.004 49.3)",
+      "sidebar-primary": "oklch(0.214 0.009 43.1)",
+      "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-accent": "oklch(0.96 0.002 17.2)",
+      "sidebar-accent-foreground": "oklch(0.214 0.009 43.1)",
+      "sidebar-border": "oklch(0.922 0.005 34.3)",
+      "sidebar-ring": "oklch(0.714 0.014 41.2)"
+    },
+    "dark": {
+      "background": "oklch(0.147 0.004 49.3)",
+      "foreground": "oklch(0.986 0.002 67.8)",
+      "card": "oklch(0.214 0.009 43.1)",
+      "card-foreground": "oklch(0.986 0.002 67.8)",
+      "popover": "oklch(0.214 0.009 43.1)",
+      "popover-foreground": "oklch(0.986 0.002 67.8)",
+      "primary": "oklch(0.922 0.005 34.3)",
+      "primary-foreground": "oklch(0.214 0.009 43.1)",
+      "secondary": "oklch(0.268 0.011 36.5)",
+      "secondary-foreground": "oklch(0.986 0.002 67.8)",
+      "muted": "oklch(0.268 0.011 36.5)",
+      "muted-foreground": "oklch(0.714 0.014 41.2)",
+      "accent": "oklch(0.268 0.011 36.5)",
+      "accent-foreground": "oklch(0.986 0.002 67.8)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.547 0.021 43.1)",
+      "chart-1": "oklch(0.865 0.127 207.078)",
+      "chart-2": "oklch(0.715 0.143 215.221)",
+      "chart-3": "oklch(0.609 0.126 221.723)",
+      "chart-4": "oklch(0.52 0.105 223.128)",
+      "chart-5": "oklch(0.45 0.085 224.283)",
+      "sidebar": "oklch(0.214 0.009 43.1)",
+      "sidebar-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-accent": "oklch(0.268 0.011 36.5)",
+      "sidebar-accent-foreground": "oklch(0.986 0.002 67.8)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.547 0.021 43.1)"
+    }
+  },
+  "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.147 0.004 49.3);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.147 0.004 49.3);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.147 0.004 49.3);\n    --primary: oklch(0.214 0.009 43.1);\n    --primary-foreground: oklch(0.986 0.002 67.8);\n    --secondary: oklch(0.96 0.002 17.2);\n    --secondary-foreground: oklch(0.214 0.009 43.1);\n    --muted: oklch(0.96 0.002 17.2);\n    --muted-foreground: oklch(0.547 0.021 43.1);\n    --accent: oklch(0.96 0.002 17.2);\n    --accent-foreground: oklch(0.214 0.009 43.1);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.922 0.005 34.3);\n    --input: oklch(0.922 0.005 34.3);\n    --ring: oklch(0.714 0.014 41.2);\n    --chart-1: oklch(0.865 0.127 207.078);\n    --chart-2: oklch(0.715 0.143 215.221);\n    --chart-3: oklch(0.609 0.126 221.723);\n    --chart-4: oklch(0.52 0.105 223.128);\n    --chart-5: oklch(0.45 0.085 224.283);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.147 0.004 49.3);\n    --foreground: oklch(0.986 0.002 67.8);\n    --card: oklch(0.214 0.009 43.1);\n    --card-foreground: oklch(0.986 0.002 67.8);\n    --popover: oklch(0.214 0.009 43.1);\n    --popover-foreground: oklch(0.986 0.002 67.8);\n    --primary: oklch(0.922 0.005 34.3);\n    --primary-foreground: oklch(0.214 0.009 43.1);\n    --secondary: oklch(0.268 0.011 36.5);\n    --secondary-foreground: oklch(0.986 0.002 67.8);\n    --muted: oklch(0.268 0.011 36.5);\n    --muted-foreground: oklch(0.714 0.014 41.2);\n    --accent: oklch(0.268 0.011 36.5);\n    --accent-foreground: oklch(0.986 0.002 67.8);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.547 0.021 43.1);\n    --chart-1: oklch(0.865 0.127 207.078);\n    --chart-2: oklch(0.715 0.143 215.221);\n    --chart-3: oklch(0.609 0.126 221.723);\n    --chart-4: oklch(0.52 0.105 223.128);\n    --chart-5: oklch(0.45 0.085 224.283);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/v4/public/r/colors/zinc.json b/apps/v4/public/r/colors/zinc.json
index 89321e847c..035b04fb49 100644
--- a/apps/v4/public/r/colors/zinc.json
+++ b/apps/v4/public/r/colors/zinc.json
@@ -1,103 +1,5 @@
 {
   "inlineColors": {
-    "light": {
-      "background": "white",
-      "foreground": "zinc-950",
-      "card": "white",
-      "card-foreground": "zinc-950",
-      "popover": "white",
-      "popover-foreground": "zinc-950",
-      "primary": "zinc-900",
-      "primary-foreground": "zinc-50",
-      "secondary": "zinc-100",
-      "secondary-foreground": "zinc-900",
-      "muted": "zinc-100",
-      "muted-foreground": "zinc-500",
-      "accent": "zinc-100",
-      "accent-foreground": "zinc-900",
-      "destructive": "red-500",
-      "destructive-foreground": "zinc-50",
-      "border": "zinc-200",
-      "input": "zinc-200",
-      "ring": "zinc-950"
-    },
-    "dark": {
-      "background": "zinc-950",
-      "foreground": "zinc-50",
-      "card": "zinc-950",
-      "card-foreground": "zinc-50",
-      "popover": "zinc-950",
-      "popover-foreground": "zinc-50",
-      "primary": "zinc-50",
-      "primary-foreground": "zinc-900",
-      "secondary": "zinc-800",
-      "secondary-foreground": "zinc-50",
-      "muted": "zinc-800",
-      "muted-foreground": "zinc-400",
-      "accent": "zinc-800",
-      "accent-foreground": "zinc-50",
-      "destructive": "red-900",
-      "destructive-foreground": "zinc-50",
-      "border": "zinc-800",
-      "input": "zinc-800",
-      "ring": "zinc-300"
-    }
-  },
-  "cssVars": {
-    "light": {
-      "background": "0 0% 100%",
-      "foreground": "240 10% 3.9%",
-      "card": "0 0% 100%",
-      "card-foreground": "240 10% 3.9%",
-      "popover": "0 0% 100%",
-      "popover-foreground": "240 10% 3.9%",
-      "primary": "240 5.9% 10%",
-      "primary-foreground": "0 0% 98%",
-      "secondary": "240 4.8% 95.9%",
-      "secondary-foreground": "240 5.9% 10%",
-      "muted": "240 4.8% 95.9%",
-      "muted-foreground": "240 3.8% 46.1%",
-      "accent": "240 4.8% 95.9%",
-      "accent-foreground": "240 5.9% 10%",
-      "destructive": "0 84.2% 60.2%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 5.9% 90%",
-      "input": "240 5.9% 90%",
-      "ring": "240 10% 3.9%",
-      "chart-1": "12 76% 61%",
-      "chart-2": "173 58% 39%",
-      "chart-3": "197 37% 24%",
-      "chart-4": "43 74% 66%",
-      "chart-5": "27 87% 67%"
-    },
-    "dark": {
-      "background": "240 10% 3.9%",
-      "foreground": "0 0% 98%",
-      "card": "240 10% 3.9%",
-      "card-foreground": "0 0% 98%",
-      "popover": "240 10% 3.9%",
-      "popover-foreground": "0 0% 98%",
-      "primary": "0 0% 98%",
-      "primary-foreground": "240 5.9% 10%",
-      "secondary": "240 3.7% 15.9%",
-      "secondary-foreground": "0 0% 98%",
-      "muted": "240 3.7% 15.9%",
-      "muted-foreground": "240 5% 64.9%",
-      "accent": "240 3.7% 15.9%",
-      "accent-foreground": "0 0% 98%",
-      "destructive": "0 62.8% 30.6%",
-      "destructive-foreground": "0 0% 98%",
-      "border": "240 3.7% 15.9%",
-      "input": "240 3.7% 15.9%",
-      "ring": "240 4.9% 83.9%",
-      "chart-1": "220 70% 50%",
-      "chart-2": "160 60% 45%",
-      "chart-3": "30 80% 55%",
-      "chart-4": "280 65% 60%",
-      "chart-5": "340 75% 55%"
-    }
-  },
-  "cssVarsV4": {
     "light": {
       "background": "oklch(1 0 0)",
       "foreground": "oklch(0.141 0.005 285.823)",
@@ -117,11 +19,11 @@
       "border": "oklch(0.92 0.004 286.32)",
       "input": "oklch(0.92 0.004 286.32)",
       "ring": "oklch(0.705 0.015 286.067)",
-      "chart-1": "oklch(0.646 0.222 41.116)",
-      "chart-2": "oklch(0.6 0.118 184.704)",
-      "chart-3": "oklch(0.398 0.07 227.392)",
-      "chart-4": "oklch(0.828 0.189 84.429)",
-      "chart-5": "oklch(0.769 0.188 70.08)",
+      "chart-1": "oklch(0.879 0.169 91.605)",
+      "chart-2": "oklch(0.769 0.188 70.08)",
+      "chart-3": "oklch(0.666 0.179 58.318)",
+      "chart-4": "oklch(0.555 0.163 48.998)",
+      "chart-5": "oklch(0.473 0.137 46.201)",
       "radius": "0.625rem",
       "sidebar": "oklch(0.985 0 0)",
       "sidebar-foreground": "oklch(0.141 0.005 285.823)",
@@ -151,11 +53,149 @@
       "border": "oklch(1 0 0 / 10%)",
       "input": "oklch(1 0 0 / 15%)",
       "ring": "oklch(0.552 0.016 285.938)",
-      "chart-1": "oklch(0.488 0.243 264.376)",
-      "chart-2": "oklch(0.696 0.17 162.48)",
-      "chart-3": "oklch(0.769 0.188 70.08)",
-      "chart-4": "oklch(0.627 0.265 303.9)",
-      "chart-5": "oklch(0.645 0.246 16.439)",
+      "chart-1": "oklch(0.879 0.169 91.605)",
+      "chart-2": "oklch(0.769 0.188 70.08)",
+      "chart-3": "oklch(0.666 0.179 58.318)",
+      "chart-4": "oklch(0.555 0.163 48.998)",
+      "chart-5": "oklch(0.473 0.137 46.201)",
+      "sidebar": "oklch(0.21 0.006 285.885)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.274 0.006 286.033)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.552 0.016 285.938)"
+    }
+  },
+  "cssVars": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.141 0.005 285.823)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.21 0.006 285.885)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.967 0.001 286.375)",
+      "secondary-foreground": "oklch(0.21 0.006 285.885)",
+      "muted": "oklch(0.967 0.001 286.375)",
+      "muted-foreground": "oklch(0.552 0.016 285.938)",
+      "accent": "oklch(0.967 0.001 286.375)",
+      "accent-foreground": "oklch(0.21 0.006 285.885)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.92 0.004 286.32)",
+      "input": "oklch(0.92 0.004 286.32)",
+      "ring": "oklch(0.705 0.015 286.067)",
+      "chart-1": "oklch(0.879 0.169 91.605)",
+      "chart-2": "oklch(0.769 0.188 70.08)",
+      "chart-3": "oklch(0.666 0.179 58.318)",
+      "chart-4": "oklch(0.555 0.163 48.998)",
+      "chart-5": "oklch(0.473 0.137 46.201)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+      "sidebar-primary": "oklch(0.21 0.006 285.885)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.967 0.001 286.375)",
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+      "sidebar-border": "oklch(0.92 0.004 286.32)",
+      "sidebar-ring": "oklch(0.705 0.015 286.067)"
+    },
+    "dark": {
+      "background": "oklch(0.141 0.005 285.823)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.21 0.006 285.885)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.21 0.006 285.885)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.92 0.004 286.32)",
+      "primary-foreground": "oklch(0.21 0.006 285.885)",
+      "secondary": "oklch(0.274 0.006 286.033)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.274 0.006 286.033)",
+      "muted-foreground": "oklch(0.705 0.015 286.067)",
+      "accent": "oklch(0.274 0.006 286.033)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.552 0.016 285.938)",
+      "chart-1": "oklch(0.879 0.169 91.605)",
+      "chart-2": "oklch(0.769 0.188 70.08)",
+      "chart-3": "oklch(0.666 0.179 58.318)",
+      "chart-4": "oklch(0.555 0.163 48.998)",
+      "chart-5": "oklch(0.473 0.137 46.201)",
+      "sidebar": "oklch(0.21 0.006 285.885)",
+      "sidebar-foreground": "oklch(0.985 0 0)",
+      "sidebar-primary": "oklch(0.488 0.243 264.376)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.274 0.006 286.033)",
+      "sidebar-accent-foreground": "oklch(0.985 0 0)",
+      "sidebar-border": "oklch(1 0 0 / 10%)",
+      "sidebar-ring": "oklch(0.552 0.016 285.938)"
+    }
+  },
+  "cssVarsV4": {
+    "light": {
+      "background": "oklch(1 0 0)",
+      "foreground": "oklch(0.141 0.005 285.823)",
+      "card": "oklch(1 0 0)",
+      "card-foreground": "oklch(0.141 0.005 285.823)",
+      "popover": "oklch(1 0 0)",
+      "popover-foreground": "oklch(0.141 0.005 285.823)",
+      "primary": "oklch(0.21 0.006 285.885)",
+      "primary-foreground": "oklch(0.985 0 0)",
+      "secondary": "oklch(0.967 0.001 286.375)",
+      "secondary-foreground": "oklch(0.21 0.006 285.885)",
+      "muted": "oklch(0.967 0.001 286.375)",
+      "muted-foreground": "oklch(0.552 0.016 285.938)",
+      "accent": "oklch(0.967 0.001 286.375)",
+      "accent-foreground": "oklch(0.21 0.006 285.885)",
+      "destructive": "oklch(0.577 0.245 27.325)",
+      "border": "oklch(0.92 0.004 286.32)",
+      "input": "oklch(0.92 0.004 286.32)",
+      "ring": "oklch(0.705 0.015 286.067)",
+      "chart-1": "oklch(0.879 0.169 91.605)",
+      "chart-2": "oklch(0.769 0.188 70.08)",
+      "chart-3": "oklch(0.666 0.179 58.318)",
+      "chart-4": "oklch(0.555 0.163 48.998)",
+      "chart-5": "oklch(0.473 0.137 46.201)",
+      "radius": "0.625rem",
+      "sidebar": "oklch(0.985 0 0)",
+      "sidebar-foreground": "oklch(0.141 0.005 285.823)",
+      "sidebar-primary": "oklch(0.21 0.006 285.885)",
+      "sidebar-primary-foreground": "oklch(0.985 0 0)",
+      "sidebar-accent": "oklch(0.967 0.001 286.375)",
+      "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+      "sidebar-border": "oklch(0.92 0.004 286.32)",
+      "sidebar-ring": "oklch(0.705 0.015 286.067)"
+    },
+    "dark": {
+      "background": "oklch(0.141 0.005 285.823)",
+      "foreground": "oklch(0.985 0 0)",
+      "card": "oklch(0.21 0.006 285.885)",
+      "card-foreground": "oklch(0.985 0 0)",
+      "popover": "oklch(0.21 0.006 285.885)",
+      "popover-foreground": "oklch(0.985 0 0)",
+      "primary": "oklch(0.92 0.004 286.32)",
+      "primary-foreground": "oklch(0.21 0.006 285.885)",
+      "secondary": "oklch(0.274 0.006 286.033)",
+      "secondary-foreground": "oklch(0.985 0 0)",
+      "muted": "oklch(0.274 0.006 286.033)",
+      "muted-foreground": "oklch(0.705 0.015 286.067)",
+      "accent": "oklch(0.274 0.006 286.033)",
+      "accent-foreground": "oklch(0.985 0 0)",
+      "destructive": "oklch(0.704 0.191 22.216)",
+      "border": "oklch(1 0 0 / 10%)",
+      "input": "oklch(1 0 0 / 15%)",
+      "ring": "oklch(0.552 0.016 285.938)",
+      "chart-1": "oklch(0.879 0.169 91.605)",
+      "chart-2": "oklch(0.769 0.188 70.08)",
+      "chart-3": "oklch(0.666 0.179 58.318)",
+      "chart-4": "oklch(0.555 0.163 48.998)",
+      "chart-5": "oklch(0.473 0.137 46.201)",
       "sidebar": "oklch(0.21 0.006 285.885)",
       "sidebar-foreground": "oklch(0.985 0 0)",
       "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -167,5 +207,5 @@
     }
   },
   "inlineColorsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
-  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: 0 0% 100%;\n    --foreground: 240 10% 3.9%;\n    --card: 0 0% 100%;\n    --card-foreground: 240 10% 3.9%;\n    --popover: 0 0% 100%;\n    --popover-foreground: 240 10% 3.9%;\n    --primary: 240 5.9% 10%;\n    --primary-foreground: 0 0% 98%;\n    --secondary: 240 4.8% 95.9%;\n    --secondary-foreground: 240 5.9% 10%;\n    --muted: 240 4.8% 95.9%;\n    --muted-foreground: 240 3.8% 46.1%;\n    --accent: 240 4.8% 95.9%;\n    --accent-foreground: 240 5.9% 10%;\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 5.9% 90%;\n    --input: 240 5.9% 90%;\n    --ring: 240 10% 3.9%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n\n  .dark {\n    --background: 240 10% 3.9%;\n    --foreground: 0 0% 98%;\n    --card: 240 10% 3.9%;\n    --card-foreground: 0 0% 98%;\n    --popover: 240 10% 3.9%;\n    --popover-foreground: 0 0% 98%;\n    --primary: 0 0% 98%;\n    --primary-foreground: 240 5.9% 10%;\n    --secondary: 240 3.7% 15.9%;\n    --secondary-foreground: 0 0% 98%;\n    --muted: 240 3.7% 15.9%;\n    --muted-foreground: 240 5% 64.9%;\n    --accent: 240 3.7% 15.9%;\n    --accent-foreground: 0 0% 98%;\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 0 0% 98%;\n    --border: 240 3.7% 15.9%;\n    --input: 240 3.7% 15.9%;\n    --ring: 240 4.9% 83.9%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
-}
\ No newline at end of file
+  "cssVarsTemplate": "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n    --background: oklch(1 0 0);\n    --foreground: oklch(0.141 0.005 285.823);\n    --card: oklch(1 0 0);\n    --card-foreground: oklch(0.141 0.005 285.823);\n    --popover: oklch(1 0 0);\n    --popover-foreground: oklch(0.141 0.005 285.823);\n    --primary: oklch(0.21 0.006 285.885);\n    --primary-foreground: oklch(0.985 0 0);\n    --secondary: oklch(0.967 0.001 286.375);\n    --secondary-foreground: oklch(0.21 0.006 285.885);\n    --muted: oklch(0.967 0.001 286.375);\n    --muted-foreground: oklch(0.552 0.016 285.938);\n    --accent: oklch(0.967 0.001 286.375);\n    --accent-foreground: oklch(0.21 0.006 285.885);\n    --destructive: oklch(0.577 0.245 27.325);\n    --border: oklch(0.92 0.004 286.32);\n    --input: oklch(0.92 0.004 286.32);\n    --ring: oklch(0.705 0.015 286.067);\n    --chart-1: oklch(0.879 0.169 91.605);\n    --chart-2: oklch(0.769 0.188 70.08);\n    --chart-3: oklch(0.666 0.179 58.318);\n    --chart-4: oklch(0.555 0.163 48.998);\n    --chart-5: oklch(0.473 0.137 46.201);\n    --radius: 0.625rem;\n  }\n\n  .dark {\n    --background: oklch(0.141 0.005 285.823);\n    --foreground: oklch(0.985 0 0);\n    --card: oklch(0.21 0.006 285.885);\n    --card-foreground: oklch(0.985 0 0);\n    --popover: oklch(0.21 0.006 285.885);\n    --popover-foreground: oklch(0.985 0 0);\n    --primary: oklch(0.92 0.004 286.32);\n    --primary-foreground: oklch(0.21 0.006 285.885);\n    --secondary: oklch(0.274 0.006 286.033);\n    --secondary-foreground: oklch(0.985 0 0);\n    --muted: oklch(0.274 0.006 286.033);\n    --muted-foreground: oklch(0.705 0.015 286.067);\n    --accent: oklch(0.274 0.006 286.033);\n    --accent-foreground: oklch(0.985 0 0);\n    --destructive: oklch(0.704 0.191 22.216);\n    --border: oklch(1 0 0 / 10%);\n    --input: oklch(1 0 0 / 15%);\n    --ring: oklch(0.552 0.016 285.938);\n    --chart-1: oklch(0.879 0.169 91.605);\n    --chart-2: oklch(0.769 0.188 70.08);\n    --chart-3: oklch(0.666 0.179 58.318);\n    --chart-4: oklch(0.555 0.163 48.998);\n    --chart-5: oklch(0.473 0.137 46.201);\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}"
+}
diff --git a/apps/v4/public/r/config.json b/apps/v4/public/r/config.json
index d419a6b207..16914745dc 100644
--- a/apps/v4/public/r/config.json
+++ b/apps/v4/public/r/config.json
@@ -19,12 +19,12 @@
     {
       "name": "radix-nova",
       "title": "Nova (Radix)",
-      "description": "Nova / Hugeicons / Geist",
+      "description": "Nova / Lucide / Geist",
       "base": "radix",
       "style": "nova",
       "baseColor": "neutral",
       "theme": "neutral",
-      "iconLibrary": "hugeicons",
+      "iconLibrary": "lucide",
       "font": "geist",
       "item": "Item",
       "rtl": false,
@@ -56,7 +56,7 @@
       "style": "lyra",
       "baseColor": "neutral",
       "theme": "neutral",
-      "iconLibrary": "hugeicons",
+      "iconLibrary": "phosphor",
       "font": "jetbrains-mono",
       "item": "Item",
       "rtl": false,
@@ -83,12 +83,12 @@
     {
       "name": "base-nova",
       "title": "Nova (Base)",
-      "description": "Nova / Hugeicons / Geist",
+      "description": "Nova / Lucide / Geist",
       "base": "base",
       "style": "nova",
       "baseColor": "neutral",
       "theme": "neutral",
-      "iconLibrary": "hugeicons",
+      "iconLibrary": "lucide",
       "font": "geist",
       "item": "Item",
       "rtl": false,
@@ -120,7 +120,7 @@
       "style": "lyra",
       "baseColor": "neutral",
       "theme": "neutral",
-      "iconLibrary": "hugeicons",
+      "iconLibrary": "phosphor",
       "font": "jetbrains-mono",
       "item": "Item",
       "rtl": false,
diff --git a/apps/v4/public/r/index.json b/apps/v4/public/r/index.json
index 72b13d31c3..25d6009c92 100644
--- a/apps/v4/public/r/index.json
+++ b/apps/v4/public/r/index.json
@@ -2,42 +2,23 @@
   {
     "name": "accordion",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-accordion"
-    ],
     "files": [
       {
         "path": "ui/accordion.tsx",
         "type": "registry:ui"
       }
     ],
-    "tailwind": {
-      "config": {
-        "theme": {
-          "extend": {
-            "keyframes": {
-              "accordion-down": {
-                "from": {
-                  "height": "0"
-                },
-                "to": {
-                  "height": "var(--radix-accordion-content-height)"
-                }
-              },
-              "accordion-up": {
-                "from": {
-                  "height": "var(--radix-accordion-content-height)"
-                },
-                "to": {
-                  "height": "0"
-                }
-              }
-            },
-            "animation": {
-              "accordion-down": "accordion-down 0.2s ease-out",
-              "accordion-up": "accordion-up 0.2s ease-out"
-            }
-          }
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+          "api": "https://base-ui.com/react/components/accordion.md"
         }
       }
     }
@@ -50,119 +31,206 @@
         "path": "ui/alert.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "alert-dialog",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-alert-dialog"
-    ],
-    "registryDependencies": [
-      "button"
-    ],
+    "registryDependencies": ["button"],
     "files": [
       {
         "path": "ui/alert-dialog.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/alert-dialog.md"
+        }
+      }
+    }
   },
   {
     "name": "aspect-ratio",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-aspect-ratio"
-    ],
     "files": [
       {
         "path": "ui/aspect-ratio.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "avatar",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-avatar"
-    ],
     "files": [
       {
         "path": "ui/avatar.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+          "api": "https://base-ui.com/react/components/avatar.md"
+        }
+      }
+    }
   },
   {
     "name": "badge",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-slot"
-    ],
     "files": [
       {
         "path": "ui/badge.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "breadcrumb",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-slot"
-    ],
     "files": [
       {
         "path": "ui/breadcrumb.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "button",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-slot"
-    ],
     "files": [
       {
         "path": "ui/button.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "button-group",
     "type": "registry:ui",
-    "registryDependencies": [
-      "button",
-      "separator"
-    ],
+    "registryDependencies": ["separator"],
     "files": [
       {
         "path": "ui/button-group.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "calendar",
     "type": "registry:ui",
-    "dependencies": [
-      "react-day-picker@latest",
-      "date-fns"
-    ],
-    "registryDependencies": [
-      "button"
-    ],
+    "dependencies": ["react-day-picker@latest", "date-fns"],
+    "registryDependencies": ["button"],
     "files": [
       {
         "path": "ui/calendar.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      }
+    }
   },
   {
     "name": "card",
@@ -172,165 +240,288 @@
         "path": "ui/card.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "carousel",
     "type": "registry:ui",
-    "dependencies": [
-      "embla-carousel-react"
-    ],
-    "registryDependencies": [
-      "button"
-    ],
     "files": [
       {
         "path": "ui/carousel.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "registryDependencies": ["button"],
+    "dependencies": ["embla-carousel-react"],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      }
+    }
   },
   {
     "name": "chart",
     "type": "registry:ui",
-    "dependencies": [
-      "recharts@2.15.4",
-      "lucide-react"
-    ],
-    "registryDependencies": [
-      "card"
-    ],
     "files": [
       {
         "path": "ui/chart.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "dependencies": ["recharts@2.15.4"],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "checkbox",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-checkbox"
-    ],
     "files": [
       {
         "path": "ui/checkbox.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+          "api": "https://base-ui.com/react/components/checkbox.md"
+        }
+      }
+    }
   },
   {
     "name": "collapsible",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-collapsible"
-    ],
     "files": [
       {
         "path": "ui/collapsible.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+          "api": "https://base-ui.com/react/components/collapsible.md"
+        }
+      }
+    }
   },
   {
     "name": "combobox",
     "type": "registry:ui",
-    "dependencies": [
-      "@base-ui/react"
-    ],
-    "registryDependencies": [
-      "button",
-      "input-group"
-    ],
+    "registryDependencies": ["button", "input-group"],
+    "dependencies": ["@base-ui/react"],
     "files": [
       {
         "path": "ui/combobox.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox.md"
+        }
+      }
+    }
   },
   {
     "name": "command",
     "type": "registry:ui",
-    "dependencies": [
-      "cmdk"
-    ],
-    "registryDependencies": [
-      "dialog"
-    ],
+    "dependencies": ["cmdk"],
+    "registryDependencies": ["dialog", "input-group"],
     "files": [
       {
         "path": "ui/command.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      }
+    }
   },
   {
     "name": "context-menu",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-context-menu"
-    ],
     "files": [
       {
         "path": "ui/context-menu.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/context-menu.md"
+        }
+      }
+    }
   },
   {
     "name": "dialog",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-dialog"
-    ],
+    "registryDependencies": ["button"],
     "files": [
       {
         "path": "ui/dialog.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      }
+    }
   },
   {
     "name": "direction",
     "type": "registry:ui",
-    "dependencies": [
-      "radix-ui"
-    ],
     "files": [
       {
         "path": "ui/direction.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+          "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/direction",
+          "api": "https://base-ui.com/react/utils/direction-provider.md"
+        }
+      }
+    }
   },
   {
     "name": "drawer",
     "type": "registry:ui",
-    "dependencies": [
-      "vaul",
-      "@radix-ui/react-dialog"
-    ],
+    "dependencies": ["vaul"],
     "files": [
       {
         "path": "ui/drawer.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      }
+    }
   },
   {
     "name": "dropdown-menu",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-dropdown-menu"
-    ],
     "files": [
       {
         "path": "ui/dropdown-menu.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/menu.md"
+        }
+      }
+    }
   },
   {
     "name": "empty",
@@ -340,55 +531,70 @@
         "path": "ui/empty.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "field",
     "type": "registry:ui",
-    "registryDependencies": [
-      "label",
-      "separator"
-    ],
+    "registryDependencies": ["label", "separator"],
     "files": [
       {
         "path": "ui/field.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "form",
-    "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-label",
-      "@radix-ui/react-slot",
-      "@hookform/resolvers",
-      "zod",
-      "react-hook-form"
-    ],
-    "registryDependencies": [
-      "button",
-      "label"
-    ],
-    "files": [
-      {
-        "path": "ui/form.tsx",
-        "type": "registry:ui"
-      }
-    ]
+    "type": "registry:ui"
   },
   {
     "name": "hover-card",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-hover-card"
-    ],
     "files": [
       {
         "path": "ui/hover-card.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+          "api": "https://base-ui.com/react/components/hover-card.md"
+        }
+      }
+    }
   },
   {
     "name": "input",
@@ -398,48 +604,90 @@
         "path": "ui/input.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "input-group",
     "type": "registry:ui",
-    "registryDependencies": [
-      "button",
-      "input",
-      "textarea"
-    ],
+    "registryDependencies": ["button", "input", "textarea"],
     "files": [
       {
         "path": "ui/input-group.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "input-otp",
     "type": "registry:ui",
-    "dependencies": [
-      "input-otp"
-    ],
+    "dependencies": ["input-otp"],
     "files": [
       {
         "path": "ui/input-otp.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      }
+    }
   },
   {
     "name": "item",
     "type": "registry:ui",
-    "registryDependencies": [
-      "separator"
-    ],
+    "registryDependencies": ["separator"],
     "files": [
       {
         "path": "ui/item.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "kbd",
@@ -449,46 +697,67 @@
         "path": "ui/kbd.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "label",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-label"
-    ],
     "files": [
       {
         "path": "ui/label.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+          "api": "https://base-ui.com/react/components/label.md"
+        }
+      }
+    }
   },
   {
     "name": "menubar",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-menubar"
-    ],
     "files": [
       {
         "path": "ui/menubar.tsx",
         "type": "registry:ui"
       }
-    ]
-  },
-  {
-    "name": "navigation-menu",
-    "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-navigation-menu"
     ],
-    "files": [
-      {
-        "path": "ui/navigation-menu.tsx",
-        "type": "registry:ui"
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+          "api": "https://base-ui.com/react/components/menubar.md"
+        }
       }
-    ]
+    }
   },
   {
     "name": "native-select",
@@ -498,133 +767,264 @@
         "path": "ui/native-select.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+        }
+      }
+    }
+  },
+  {
+    "name": "navigation-menu",
+    "type": "registry:ui",
+    "files": [
+      {
+        "path": "ui/navigation-menu.tsx",
+        "type": "registry:ui"
+      }
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/navigation-menu.md"
+        }
+      }
+    }
   },
   {
     "name": "pagination",
     "type": "registry:ui",
-    "registryDependencies": [
-      "button"
-    ],
+    "registryDependencies": ["button"],
     "files": [
       {
         "path": "ui/pagination.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "popover",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-popover"
-    ],
     "files": [
       {
         "path": "ui/popover.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+          "api": "https://base-ui.com/react/components/popover.md"
+        }
+      }
+    }
   },
   {
     "name": "progress",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-progress"
-    ],
     "files": [
       {
         "path": "ui/progress.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+          "api": "https://base-ui.com/react/components/progress.md"
+        }
+      }
+    }
   },
   {
     "name": "radio-group",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-radio-group"
-    ],
     "files": [
       {
         "path": "ui/radio-group.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+          "api": "https://base-ui.com/react/components/radio-group.md"
+        }
+      }
+    }
   },
   {
     "name": "resizable",
     "type": "registry:ui",
-    "dependencies": [
-      "react-resizable-panels"
-    ],
+    "dependencies": ["react-resizable-panels"],
     "files": [
       {
         "path": "ui/resizable.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      }
+    }
   },
   {
     "name": "scroll-area",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-scroll-area"
-    ],
     "files": [
       {
         "path": "ui/scroll-area.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+          "api": "https://base-ui.com/react/components/scroll-area.md"
+        }
+      }
+    }
   },
   {
     "name": "select",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-select"
-    ],
     "files": [
       {
         "path": "ui/select.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+          "api": "https://base-ui.com/react/components/select.md"
+        }
+      }
+    }
   },
   {
     "name": "separator",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-separator"
-    ],
     "files": [
       {
         "path": "ui/separator.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+          "api": "https://base-ui.com/react/components/separator.md"
+        }
+      }
+    }
   },
   {
     "name": "sheet",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-dialog"
-    ],
+    "registryDependencies": ["button"],
     "files": [
       {
         "path": "ui/sheet.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      }
+    }
   },
   {
     "name": "sidebar",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-slot",
-      "class-variance-authority",
-      "lucide-react"
-    ],
     "registryDependencies": [
       "button",
       "separator",
@@ -640,47 +1040,17 @@
         "type": "registry:ui"
       }
     ],
-    "tailwind": {
-      "config": {
-        "theme": {
-          "extend": {
-            "colors": {
-              "sidebar": {
-                "DEFAULT": "hsl(var(--sidebar-background))",
-                "foreground": "hsl(var(--sidebar-foreground))",
-                "primary": "hsl(var(--sidebar-primary))",
-                "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-                "accent": "hsl(var(--sidebar-accent))",
-                "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-                "border": "hsl(var(--sidebar-border))",
-                "ring": "hsl(var(--sidebar-ring))"
-              }
-            }
-          }
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
         }
       }
-    },
-    "cssVars": {
-      "light": {
-        "sidebar-background": "0 0% 98%",
-        "sidebar-foreground": "240 5.3% 26.1%",
-        "sidebar-primary": "240 5.9% 10%",
-        "sidebar-primary-foreground": "0 0% 98%",
-        "sidebar-accent": "240 4.8% 95.9%",
-        "sidebar-accent-foreground": "240 5.9% 10%",
-        "sidebar-border": "220 13% 91%",
-        "sidebar-ring": "217.2 91.2% 59.8%"
-      },
-      "dark": {
-        "sidebar-background": "240 5.9% 10%",
-        "sidebar-foreground": "240 4.8% 95.9%",
-        "sidebar-primary": "224.3 76.3% 48%",
-        "sidebar-primary-foreground": "0 0% 100%",
-        "sidebar-accent": "240 3.7% 15.9%",
-        "sidebar-accent-foreground": "240 4.8% 95.9%",
-        "sidebar-border": "240 3.7% 15.9%",
-        "sidebar-ring": "217.2 91.2% 59.8%"
-      }
     }
   },
   {
@@ -691,60 +1061,114 @@
         "path": "ui/skeleton.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "slider",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-slider"
-    ],
     "files": [
       {
         "path": "ui/slider.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+          "api": "https://base-ui.com/react/components/slider.md"
+        }
+      }
+    }
   },
   {
     "name": "sonner",
     "type": "registry:ui",
-    "dependencies": [
-      "sonner",
-      "next-themes"
-    ],
+    "dependencies": ["sonner", "next-themes"],
     "files": [
       {
         "path": "ui/sonner.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      }
+    }
   },
   {
     "name": "spinner",
     "type": "registry:ui",
-    "dependencies": [
-      "class-variance-authority"
-    ],
     "files": [
       {
         "path": "ui/spinner.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "switch",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-switch"
-    ],
     "files": [
       {
         "path": "ui/switch.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+          "api": "https://base-ui.com/react/components/switch.md"
+        }
+      }
+    }
   },
   {
     "name": "table",
@@ -754,20 +1178,43 @@
         "path": "ui/table.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+        }
+      }
+    }
   },
   {
     "name": "tabs",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-tabs"
-    ],
     "files": [
       {
         "path": "ui/tabs.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+          "api": "https://base-ui.com/react/components/tabs.md"
+        }
+      }
+    }
   },
   {
     "name": "textarea",
@@ -777,69 +1224,92 @@
         "path": "ui/textarea.tsx",
         "type": "registry:ui"
       }
-    ]
-  },
-  {
-    "name": "toast",
-    "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-toast"
     ],
-    "files": [
-      {
-        "path": "ui/toast.tsx",
-        "type": "registry:ui"
-      },
-      {
-        "path": "hooks/use-toast.ts",
-        "type": "registry:hook"
-      },
-      {
-        "path": "ui/toaster.tsx",
-        "type": "registry:ui"
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+        }
       }
-    ]
+    }
   },
   {
     "name": "toggle",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-toggle"
-    ],
     "files": [
       {
         "path": "ui/toggle.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle.md"
+        }
+      }
+    }
   },
   {
     "name": "toggle-group",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-toggle-group"
-    ],
-    "registryDependencies": [
-      "toggle"
-    ],
+    "registryDependencies": ["toggle"],
     "files": [
       {
         "path": "ui/toggle-group.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle-group.md"
+        }
+      }
+    }
   },
   {
     "name": "tooltip",
     "type": "registry:ui",
-    "dependencies": [
-      "@radix-ui/react-tooltip"
-    ],
+    "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
     "files": [
       {
         "path": "ui/tooltip.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "meta": {
+      "links": {
+        "radix": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+        },
+        "base": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+          "api": "https://base-ui.com/react/components/tooltip.md"
+        }
+      }
+    }
   }
-]
\ No newline at end of file
+]
diff --git a/apps/v4/public/r/registries-legacy.json b/apps/v4/public/r/registries-legacy.json
index 3708dd6c6d..9b36bc6255 100644
--- a/apps/v4/public/r/registries-legacy.json
+++ b/apps/v4/public/r/registries-legacy.json
@@ -41,7 +41,7 @@
   "@gaia": "https://ui.heygaia.io/r/{name}.json",
   "@glass-ui": "https://glass-ui.crenspire.com/r/{name}.json",
   "@heseui": "https://www.heseui.com/r/{name}.json",
-  "@hooks": "https://shadcn-hooks.vercel.app/r/{name}.json",
+  "@hooks": "https://shadcn-hooks.com/r/{name}.json",
   "@intentui": "https://intentui.com/r/{name}",
   "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
   "@kanpeki": "https://kanpeki.vercel.app/r/{name}.json",
diff --git a/apps/v4/public/r/registries.json b/apps/v4/public/r/registries.json
index 6c7589508c..5bfcd4a283 100644
--- a/apps/v4/public/r/registries.json
+++ b/apps/v4/public/r/registries.json
@@ -1,4 +1,10 @@
 [
+  {
+    "name": "@lmscn",
+    "homepage": "https://lmscn.vercel.app",
+    "url": "https://lmscn.vercel.app/r/{name}.json",
+    "description": "LMS components for building interactive learning experiences — quiz, flashcards, matching, fill-in-the-blank, word scramble, sequencing, reading comprehension, spaced repetition and more."
+  },
   {
     "name": "@8bitcn",
     "homepage": "https://www.8bitcn.com",
@@ -227,6 +233,12 @@
     "url": "https://ui.heygaia.io/r/{name}.json",
     "description": "Production-ready UI components designed for building beautiful AI assistants and conversational interfaces, from the team behind GAIA."
   },
+  {
+    "name": "@gc-solid",
+    "homepage": "https://binnodon.github.io/gc-solid-ui",
+    "url": "https://binnodon.github.io/gc-solid-ui/r/{name}.json",
+    "description": "SolidJS port of shadcn-ui components built with Kobalte primitives. 57+ components with full TypeScript support and Vega theme."
+  },
   {
     "name": "@glass-ui",
     "homepage": "https://glass-ui.crenspire.com",
@@ -247,8 +259,8 @@
   },
   {
     "name": "@hooks",
-    "homepage": "https://shadcn-hooks.vercel.app",
-    "url": "https://shadcn-hooks.vercel.app/r/{name}.json",
+    "homepage": "https://shadcn-hooks.com",
+    "url": "https://shadcn-hooks.com/r/{name}.json",
     "description": "A comprehensive React Hooks Collection built with Shadcn."
   },
   {
@@ -461,6 +473,12 @@
     "url": "https://www.scrollxui.dev/registry/{name}.json",
     "description": "ScrollX UI is an open-source React and shadcn-compatible component library for animated, interactive, and customizable user interfaces. It offers motion-driven components that blend seamlessly with modern ShadCN setups."
   },
+  {
+    "name": "@spell",
+    "homepage": "https://spell.sh",
+    "url": "https://spell.sh/r/{name}.json",
+    "description": "Beautiful, sophisticated UI components designed for modern React and Tailwind CSS applications."
+  },
   {
     "name": "@square-ui",
     "homepage": "https://square.lndev.me",
@@ -804,9 +822,21 @@
     "description": "Playful pixel art style components library built on top of shadcn. Perfect for retro style projects and games."
   },
   {
-    "name": "@componentry",
-    "homepage": "https://componentry.fun",
-    "url": "https://componentry.fun/r/{name}.json",
-    "description": "Beautiful, interactive React + Tailwind components for modern product UIs."
+    "name": "@emerald-ui",
+    "homepage": "https://emerald-ui.com",
+    "url": "https://emerald-ui.com/r/{name}.json",
+    "description": "Emerald UI - collection of components built with Motion, GSAP, Tailwind CSS and shadcn/ui."
+  },
+  {
+    "name": "@iconiq",
+    "homepage": "https://iconiqs.vercel.app",
+    "url": "https://iconiqs.vercel.app/r/{name}.json",
+    "description": "Iconiq is a collection of icons designed for web applications. It is a modern, clean, and minimalistic icon set that is perfect for web applications."
+  },
+  {
+  "name": "componentry",
+  "homepage": "https://componentry.fun",
+  "url": "https://componentry.fun/r/{name}.json",
+  "description": "Beautiful, interactive React + Tailwind components for modern product UIs."
   }
 ]
diff --git a/apps/v4/public/r/styles/base-lyra/accordion-example.json b/apps/v4/public/r/styles/base-lyra/accordion-example.json
index 3022fa6dd5..38d0b2104c 100644
--- a/apps/v4/public/r/styles/base-lyra/accordion-example.json
+++ b/apps/v4/public/r/styles/base-lyra/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-lyra/ui/accordion\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-lyra/ui/accordion\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/accordion.json b/apps/v4/public/r/styles/base-lyra/accordion.json
index d50b5d8776..0d25592266 100644
--- a/apps/v4/public/r/styles/base-lyra/accordion.json
+++ b/apps/v4/public/r/styles/base-lyra/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-none border border-transparent py-2.5 text-left text-xs font-medium transition-all outline-none hover:underline focus-visible:ring-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-xs\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-lyra/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 rounded-none border border-transparent py-2.5 text-left text-xs font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:after:border-ring 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-xs 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-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+      "api": "https://base-ui.com/react/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/alert-dialog.json b/apps/v4/public/r/styles/base-lyra/alert-dialog.json
index 6676d8c4a9..47cb6f0099 100644
--- a/apps/v4/public/r/styles/base-lyra/alert-dialog.json
+++ b/apps/v4/public/r/styles/base-lyra/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-10 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/alert.json b/apps/v4/public/r/styles/base-lyra/alert.json
index 42db6e7f4e..08c185c066 100644
--- a/apps/v4/public/r/styles/base-lyra/alert.json
+++ b/apps/v4/public/r/styles/base-lyra/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\n        \"absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\n        \"absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/aspect-ratio-example.json b/apps/v4/public/r/styles/base-lyra/aspect-ratio-example.json
index 444c8c3573..42bde993d7 100644
--- a/apps/v4/public/r/styles/base-lyra/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/base-lyra/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { AspectRatio } from \"@/registry/base-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { AspectRatio } from \"@/registry/base-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/aspect-ratio.json b/apps/v4/public/r/styles/base-lyra/aspect-ratio.json
index af630760ea..e983c588ae 100644
--- a/apps/v4/public/r/styles/base-lyra/aspect-ratio.json
+++ b/apps/v4/public/r/styles/base-lyra/aspect-ratio.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/avatar.json b/apps/v4/public/r/styles/base-lyra/avatar.json
index 6826990c85..0ca47f1c8b 100644
--- a/apps/v4/public/r/styles/base-lyra/avatar.json
+++ b/apps/v4/public/r/styles/base-lyra/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-xs ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+      "api": "https://base-ui.com/react/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/badge.json b/apps/v4/public/r/styles/base-lyra/badge.json
index caa40e6e2b..278f62c145 100644
--- a/apps/v4/public/r/styles/base-lyra/badge.json
+++ b/apps/v4/public/r/styles/base-lyra/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb.json b/apps/v4/public/r/styles/base-lyra/breadcrumb.json
index c2e640f915..ed34938c90 100644
--- a/apps/v4/public/r/styles/base-lyra/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-lyra/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs wrap-break-word\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-xs wrap-break-word text-muted-foreground\",\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\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/button-group.json b/apps/v4/public/r/styles/base-lyra/button-group.json
index 9384b0f709..43c0e4fc4c 100644
--- a/apps/v4/public/r/styles/base-lyra/button-group.json
+++ b/apps/v4/public/r/styles/base-lyra/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/button-group.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-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-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch rounded-none *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-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]~[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 rounded-none border bg-muted px-2.5 text-xs font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/button.json b/apps/v4/public/r/styles/base-lyra/button.json
index c33439126b..d651c036d6 100644
--- a/apps/v4/public/r/styles/base-lyra/button.json
+++ b/apps/v4/public/r/styles/base-lyra/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/button.tsx",
-      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary:\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-none\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/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-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 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 [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\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-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-none\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/calendar-example.json b/apps/v4/public/r/styles/base-lyra/calendar-example.json
index 602a5fb429..a795f448c2 100644
--- a/apps/v4/public/r/styles/base-lyra/calendar-example.json
+++ b/apps/v4/public/r/styles/base-lyra/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-lyra/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-lyra/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/calendar.json b/apps/v4/public/r/styles/base-lyra/calendar.json
index 0088f75290..d768452fc1 100644
--- a/apps/v4/public/r/styles/base-lyra/calendar.json
+++ b/apps/v4/public/r/styles/base-lyra/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-2 [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-2 [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/card-example.json b/apps/v4/public/r/styles/base-lyra/card-example.json
index 471c38274d..3195413f9c 100644
--- a/apps/v4/public/r/styles/base-lyra/card-example.json
+++ b/apps/v4/public/r/styles/base-lyra/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/card.json b/apps/v4/public/r/styles/base-lyra/card.json
index 186a5f446e..61e4e03522 100644
--- a/apps/v4/public/r/styles/base-lyra/card.json
+++ b/apps/v4/public/r/styles/base-lyra/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-sm font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-none border-t p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-4 overflow-hidden rounded-none bg-card py-4 text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-sm font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-none border-t p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/carousel.json b/apps/v4/public/r/styles/base-lyra/carousel.json
index 22b05478dd..96bd3bd548 100644
--- a/apps/v4/public/r/styles/base-lyra/carousel.json
+++ b/apps/v4/public/r/styles/base-lyra/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/chart-example.json b/apps/v4/public/r/styles/base-lyra/chart-example.json
index 85af1596f9..1c19989d29 100644
--- a/apps/v4/public/r/styles/base-lyra/chart-example.json
+++ b/apps/v4/public/r/styles/base-lyra/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/chart.json b/apps/v4/public/r/styles/base-lyra/chart.json
index d963cc7265..4944655e6d 100644
--- a/apps/v4/public/r/styles/base-lyra/chart.json
+++ b/apps/v4/public/r/styles/base-lyra/chart.json
@@ -10,9 +10,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-none border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/chatgpt.json b/apps/v4/public/r/styles/base-lyra/chatgpt.json
deleted file mode 100644
index cb031377ff..0000000000
--- a/apps/v4/public/r/styles/base-lyra/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-lyra/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-lyra/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                      remixicon=\"RiAttachmentLine\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                      remixicon=\"RiMagicLine\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                            remixicon=\"RiHand\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                            remixicon=\"RiBookOpenLine\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                            remixicon=\"RiGlobeLine\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                            remixicon=\"RiPencilLine\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                  remixicon=\"RiMicLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        remixicon=\"RiFolderLine\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/checkbox.json b/apps/v4/public/r/styles/base-lyra/checkbox.json
index e23830869d..78fabce030 100644
--- a/apps/v4/public/r/styles/base-lyra/checkbox.json
+++ b/apps/v4/public/r/styles/base-lyra/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-none border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-none border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+      "api": "https://base-ui.com/react/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/collapsible-example.json b/apps/v4/public/r/styles/base-lyra/collapsible-example.json
index 79620abdbf..71998bc305 100644
--- a/apps/v4/public/r/styles/base-lyra/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-lyra/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/collapsible.json b/apps/v4/public/r/styles/base-lyra/collapsible.json
index 22fa66385c..7e9c785d4d 100644
--- a/apps/v4/public/r/styles/base-lyra/collapsible.json
+++ b/apps/v4/public/r/styles/base-lyra/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+      "api": "https://base-ui.com/react/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/combobox-example.json b/apps/v4/public/r/styles/base-lyra/combobox-example.json
index 055c8114c7..6e78fee695 100644
--- a/apps/v4/public/r/styles/base-lyra/combobox-example.json
+++ b/apps/v4/public/r/styles/base-lyra/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-lyra/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-lyra/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/combobox.json b/apps/v4/public/r/styles/base-lyra/combobox.json
index 511cb6c3d0..f627725074 100644
--- a/apps/v4/public/r/styles/base-lyra/combobox.json
+++ b/apps/v4/public/r/styles/base-lyra/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-4\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs 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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\",\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-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-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 overflow-y-auto overscroll-contain 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 rounded-none py-2 pr-8 pl-2 text-xs 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(\"px-2 py-2 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-xs 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 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-8 flex-wrap items-center gap-1 rounded-none border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-1 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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.25))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/command.json b/apps/v4/public/r/styles/base-lyra/command.json
index 9871518a1c..1838c1c52c 100644
--- a/apps/v4/public/r/styles/base-lyra/command.json
+++ b/apps/v4/public/r/styles/base-lyra/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-none p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-0 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-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs\",\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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_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=\"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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\",\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-lyra/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-none 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-none p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"border-b pb-0\">\n      <InputGroup className=\"h-8 border-none border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-0 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-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:text-muted-foreground\",\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(\"-mx-1 h-px bg-border\", 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-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/component-example.json b/apps/v4/public/r/styles/base-lyra/component-example.json
index e95067acd1..3659456894 100644
--- a/apps/v4/public/r/styles/base-lyra/component-example.json
+++ b/apps/v4/public/r/styles/base-lyra/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-lyra/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-lyra/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/context-menu.json b/apps/v4/public/r/styles/base-lyra/context-menu.json
index 8d4205fde5..586dad85e3 100644
--- a/apps/v4/public/r/styles/base-lyra/context-menu.json
+++ b/apps/v4/public/r/styles/base-lyra/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none shadow-md ring-1 duration-100 outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none data-inset:pl-7 [&_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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) 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 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-2 py-2 text-xs text-muted-foreground data-inset:pl-7\",\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 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/dashboard-01.json b/apps/v4/public/r/styles/base-lyra/dashboard-01.json
index e93b29956b..4873235289 100644
--- a/apps/v4/public/r/styles/base-lyra/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-lyra/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-lyra/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-lyra/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"data-open:bg-muted text-muted-foreground flex size-8\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-lyra/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-lyra/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -67,7 +67,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/base-lyra/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"text-foreground/70 truncate text-xs\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"text-muted-foreground truncate text-xs\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs text-foreground/70\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs text-muted-foreground\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-lyra/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-lyra/demo.json b/apps/v4/public/r/styles/base-lyra/demo.json
new file mode 100644
index 0000000000..cf5cc5928d
--- /dev/null
+++ b/apps/v4/public/r/styles/base-lyra/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/base-lyra/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/dialog-example.json b/apps/v4/public/r/styles/base-lyra/dialog-example.json
index e249e450dd..4f3dcb6659 100644
--- a/apps/v4/public/r/styles/base-lyra/dialog-example.json
+++ b/apps/v4/public/r/styles/base-lyra/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dialog.json b/apps/v4/public/r/styles/base-lyra/dialog.json
index 010c6e3af9..2ddf80f8ff 100644
--- a/apps/v4/public/r/styles/base-lyra/dialog.json
+++ b/apps/v4/public/r/styles/base-lyra/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-background p-4 text-xs/relaxed ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/direction.json b/apps/v4/public/r/styles/base-lyra/direction.json
index 2b4ca26f39..954f7451cb 100644
--- a/apps/v4/public/r/styles/base-lyra/direction.json
+++ b/apps/v4/public/r/styles/base-lyra/direction.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/direction",
+      "api": "https://base-ui.com/react/utils/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/drawer-example.json b/apps/v4/public/r/styles/base-lyra/drawer-example.json
index 676af7f80a..0045f90e43 100644
--- a/apps/v4/public/r/styles/base-lyra/drawer-example.json
+++ b/apps/v4/public/r/styles/base-lyra/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/drawer-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  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/drawer.json b/apps/v4/public/r/styles/base-lyra/drawer.json
index cf67e112a0..1d32e9d69b 100644
--- a/apps/v4/public/r/styles/base-lyra/drawer.json
+++ b/apps/v4/public/r/styles/base-lyra/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json b/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json
index 53efd3caca..4b55703c86 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=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dropdown-menu.json b/apps/v4/public/r/styles/base-lyra/dropdown-menu.json
index d7d6727950..a17bb93b30 100644
--- a/apps/v4/public/r/styles/base-lyra/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-lyra/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none data-inset:pl-7 [&_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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-none shadow-lg ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 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 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-2 py-2 text-xs text-muted-foreground data-inset:pl-7\",\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 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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        \"w-auto min-w-[96px] rounded-none bg-popover text-popover-foreground shadow-lg 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 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/elevenlabs.json b/apps/v4/public/r/styles/base-lyra/elevenlabs.json
deleted file mode 100644
index 8f3dc53572..0000000000
--- a/apps/v4/public/r/styles/base-lyra/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/base-lyra/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/empty.json b/apps/v4/public/r/styles/base-lyra/empty.json
index 6420e68fe9..13a18d27ec 100644
--- a/apps/v4/public/r/styles/base-lyra/empty.json
+++ b/apps/v4/public/r/styles/base-lyra/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-none border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-none [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-xs text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-none border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-xs text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/example.json b/apps/v4/public/r/styles/base-lyra/example.json
index 6e37db54a9..82b9af35b0 100644
--- a/apps/v4/public/r/styles/base-lyra/example.json
+++ b/apps/v4/public/r/styles/base-lyra/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-lyra/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/field.json b/apps/v4/public/r/styles/base-lyra/field.json
index 1244b167c8..9e540adbd9 100644
--- a/apps/v4/public/r/styles/base-lyra/field.json
+++ b/apps/v4/public/r/styles/base-lyra/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-xs/relaxed leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-xs font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/font-dm-sans.json b/apps/v4/public/r/styles/base-lyra/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/base-lyra/font-dm-sans.json
+++ b/apps/v4/public/r/styles/base-lyra/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-lyra/font-jetbrains-mono.json b/apps/v4/public/r/styles/base-lyra/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/base-lyra/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/base-lyra/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/base-lyra/font-geist-sans.json b/apps/v4/public/r/styles/base-lyra/font-lora.json
similarity index 52%
rename from apps/v4/public/r/styles/base-lyra/font-geist-sans.json
rename to apps/v4/public/r/styles/base-lyra/font-lora.json
index a60a347fd3..cacd01a3f0 100644
--- a/apps/v4/public/r/styles/base-lyra/font-geist-sans.json
+++ b/apps/v4/public/r/styles/base-lyra/font-lora.json
@@ -1,13 +1,13 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
+  "name": "font-lora",
+  "title": "Lora",
   "type": "registry:font",
   "font": {
-    "family": "'Geist Variable', sans-serif",
+    "family": "'Lora Variable', serif",
     "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
+    "import": "Lora",
+    "variable": "--font-serif",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/base-lyra/font-merriweather.json b/apps/v4/public/r/styles/base-lyra/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-lyra/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/font-noto-serif.json b/apps/v4/public/r/styles/base-lyra/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-lyra/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/font-outfit.json b/apps/v4/public/r/styles/base-lyra/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/base-lyra/font-outfit.json
+++ b/apps/v4/public/r/styles/base-lyra/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-lyra/font-playfair-display.json b/apps/v4/public/r/styles/base-lyra/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/base-lyra/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/font-public-sans.json b/apps/v4/public/r/styles/base-lyra/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/base-lyra/font-public-sans.json
+++ b/apps/v4/public/r/styles/base-lyra/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-lyra/font-raleway.json b/apps/v4/public/r/styles/base-lyra/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/base-lyra/font-raleway.json
+++ b/apps/v4/public/r/styles/base-lyra/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-lyra/font-roboto-slab.json b/apps/v4/public/r/styles/base-lyra/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-lyra/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/font-roboto.json b/apps/v4/public/r/styles/base-lyra/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/base-lyra/font-roboto.json
+++ b/apps/v4/public/r/styles/base-lyra/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-lyra/github.json b/apps/v4/public/r/styles/base-lyra/github.json
deleted file mode 100644
index e4be7a788a..0000000000
--- a/apps/v4/public/r/styles/base-lyra/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-lyra/blocks/github.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 { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-lyra/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-lyra/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { Spinner } from \"@/registry/base-lyra/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/hover-card-example.json b/apps/v4/public/r/styles/base-lyra/hover-card-example.json
index b97e8ce84c..1e8510df74 100644
--- a/apps/v4/public/r/styles/base-lyra/hover-card-example.json
+++ b/apps/v4/public/r/styles/base-lyra/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-lyra/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/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  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-lyra/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/hover-card.json b/apps/v4/public/r/styles/base-lyra/hover-card.json
index ff9cd776ff..d245904808 100644
--- a/apps/v4/public/r/styles/base-lyra/hover-card.json
+++ b/apps/v4/public/r/styles/base-lyra/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-64 origin-(--transform-origin) rounded-none p-2.5 text-xs/relaxed shadow-md ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"z-50 w-64 origin-(--transform-origin) rounded-none bg-popover p-2.5 text-xs/relaxed text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+      "api": "https://base-ui.com/react/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/index.json b/apps/v4/public/r/styles/base-lyra/index.json
new file mode 100644
index 0000000000..94f1c90de2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-lyra/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/input-group-example.json b/apps/v4/public/r/styles/base-lyra/input-group-example.json
index 5580b25f50..9263e1da15 100644
--- a/apps/v4/public/r/styles/base-lyra/input-group-example.json
+++ b/apps/v4/public/r/styles/base-lyra/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Spinner } from \"@/registry/base-lyra/ui/spinner\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Spinner } from \"@/registry/base-lyra/ui/spinner\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/input-group.json b/apps/v4/public/r/styles/base-lyra/input-group.json
index 8702d19f1c..4b610488cf 100644
--- a/apps/v4/public/r/styles/base-lyra/input-group.json
+++ b/apps/v4/public/r/styles/base-lyra/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-none border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-none p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-xs [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-none border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\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-1.5 text-xs font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\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 text-xs shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"gap-1\",\n        \"icon-xs\": \"size-6 rounded-none p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-7 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-xs 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 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/input-otp-example.json b/apps/v4/public/r/styles/base-lyra/input-otp-example.json
index eff330691e..fa44f08645 100644
--- a/apps/v4/public/r/styles/base-lyra/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-lyra/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/input-otp.json b/apps/v4/public/r/styles/base-lyra/input-otp.json
index 61291ce305..bdafbd7e5a 100644
--- a/apps/v4/public/r/styles/base-lyra/input-otp.json
+++ b/apps/v4/public/r/styles/base-lyra/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-none has-aria-invalid:ring-1\",\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:z-10 data-[active=true]:ring-1\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-lyra/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 rounded-none has-aria-invalid:border-destructive has-aria-invalid:ring-1 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-8 items-center justify-center border-y border-r border-input text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-1 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/input.json b/apps/v4/public/r/styles/base-lyra/input.json
index 2cb1f49e8b..a931276e50 100644
--- a/apps/v4/public/r/styles/base-lyra/input.json
+++ b/apps/v4/public/r/styles/base-lyra/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/input.tsx",
-      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-none border bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 md:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/item-example.json b/apps/v4/public/r/styles/base-lyra/item-example.json
index 9eddf5f7e9..090aeeb368 100644
--- a/apps/v4/public/r/styles/base-lyra/item-example.json
+++ b/apps/v4/public/r/styles/base-lyra/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/item.json b/apps/v4/public/r/styles/base-lyra/item.json
index 6e0ccda62e..c499dd5a8f 100644
--- a/apps/v4/public/r/styles/base-lyra/item.json
+++ b/apps/v4/public/r/styles/base-lyra/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-xs w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-xs font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-xs/relaxed font-normal group-data-[size=xs]/item:text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-none border text-xs transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-xs font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-xs/relaxed font-normal text-muted-foreground group-data-[size=xs]/item:text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/kbd.json b/apps/v4/public/r/styles/base-lyra/kbd.json
index bfa974824e..6e7ae41672 100644
--- a/apps/v4/public/r/styles/base-lyra/kbd.json
+++ b/apps/v4/public/r/styles/base-lyra/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-none px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-none bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/label.json b/apps/v4/public/r/styles/base-lyra/label.json
index 04cbb915c4..7e277700b0 100644
--- a/apps/v4/public/r/styles/base-lyra/label.json
+++ b/apps/v4/public/r/styles/base-lyra/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+      "api": "https://base-ui.com/react/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/login-02.json b/apps/v4/public/r/styles/base-lyra/login-02.json
index ebd33002c2..8d962a836a 100644
--- a/apps/v4/public/r/styles/base-lyra/login-02.json
+++ b/apps/v4/public/r/styles/base-lyra/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-lyra/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-lyra/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/login-03.json b/apps/v4/public/r/styles/base-lyra/login-03.json
index 04ffe972aa..a67d50616e 100644
--- a/apps/v4/public/r/styles/base-lyra/login-03.json
+++ b/apps/v4/public/r/styles/base-lyra/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-lyra/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-lyra/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-lyra/login-04.json b/apps/v4/public/r/styles/base-lyra/login-04.json
index 2ca5ff1f95..da04fcc767 100644
--- a/apps/v4/public/r/styles/base-lyra/login-04.json
+++ b/apps/v4/public/r/styles/base-lyra/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-lyra/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-lyra/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/login-05.json b/apps/v4/public/r/styles/base-lyra/login-05.json
index eb3b441c3e..c5ec5dd4f8 100644
--- a/apps/v4/public/r/styles/base-lyra/login-05.json
+++ b/apps/v4/public/r/styles/base-lyra/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-lyra/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-lyra/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-lyra/menubar.json b/apps/v4/public/r/styles/base-lyra/menubar.json
index 6820922cb6..9af1db279f 100644
--- a/apps/v4/public/r/styles/base-lyra/menubar.json
+++ b/apps/v4/public/r/styles/base-lyra/menubar.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-8 items-center gap-0.5 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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target min-w-36 rounded-none shadow-md ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-2 rounded-none px-2 py-2 text-xs data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-28 pl-8 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-2 pl-8 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 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(\"px-2 py-2 text-xs data-inset:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100\",\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-lyra/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-8 items-center gap-0.5 rounded-none border bg-background 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-1.5 py-[calc(--spacing(0.8))] text-xs 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 min-w-36 rounded-none bg-popover 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 rounded-none px-2 py-2 text-xs focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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 rounded-none py-2 pr-28 pl-8 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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-1.5 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 rounded-none py-2 pr-2 pl-8 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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-1.5 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(\"px-2 py-2 text-xs data-inset:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", 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-2 py-2 text-xs focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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        \"min-w-32 rounded-none bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+      "api": "https://base-ui.com/react/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/native-select.json b/apps/v4/public/r/styles/base-lyra/native-select.json
index 0fa3c8107e..5a40b62b5b 100644
--- a/apps/v4/public/r/styles/base-lyra/native-select.json
+++ b/apps/v4/public/r/styles/base-lyra/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors outline-none select-none focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/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-8 w-full min-w-0 appearance-none rounded-none border border-input bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-2.5 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({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/navigation-menu-example.json b/apps/v4/public/r/styles/base-lyra/navigation-menu-example.json
index d1d139ebdc..a96d55e84e 100644
--- a/apps/v4/public/r/styles/base-lyra/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-lyra/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-lyra/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-lyra/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/navigation-menu.json b/apps/v4/public/r/styles/base-lyra/navigation-menu.json
index 6c52624286..6f2be14423 100644
--- a/apps/v4/public/r/styles/base-lyra/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-lyra/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\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=\"bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-none shadow ring-1 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        \"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-none 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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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 bg-background px-2.5 py-1.5 text-xs font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 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-1 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 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 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-2 rounded-none p-2 text-xs transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/otp-01.json b/apps/v4/public/r/styles/base-lyra/otp-01.json
deleted file mode 100644
index 2eb57babd3..0000000000
--- a/apps/v4/public/r/styles/base-lyra/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-lyra/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-lyra/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-lyra/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/otp-02.json b/apps/v4/public/r/styles/base-lyra/otp-02.json
deleted file mode 100644
index 75bac277e0..0000000000
--- a/apps/v4/public/r/styles/base-lyra/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-lyra/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-lyra/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-lyra/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/otp-03.json b/apps/v4/public/r/styles/base-lyra/otp-03.json
deleted file mode 100644
index 97cb53b2bc..0000000000
--- a/apps/v4/public/r/styles/base-lyra/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-lyra/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/base-lyra/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-lyra/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/otp-04.json b/apps/v4/public/r/styles/base-lyra/otp-04.json
deleted file mode 100644
index af1b7f6e9d..0000000000
--- a/apps/v4/public/r/styles/base-lyra/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-lyra/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-lyra/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-lyra/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/otp-05.json b/apps/v4/public/r/styles/base-lyra/otp-05.json
deleted file mode 100644
index b6b45d3529..0000000000
--- a/apps/v4/public/r/styles/base-lyra/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-lyra/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-lyra/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-lyra/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/pagination.json b/apps/v4/public/r/styles/base-lyra/pagination.json
index 99734c8b63..10c693f6bd 100644
--- a/apps/v4/public/r/styles/base-lyra/pagination.json
+++ b/apps/v4/public/r/styles/base-lyra/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/popover.json b/apps/v4/public/r/styles/base-lyra/popover.json
index d477316ad7..279b882ddc 100644
--- a/apps/v4/public/r/styles/base-lyra/popover.json
+++ b/apps/v4/public/r/styles/base-lyra/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-none p-2.5 text-xs shadow-md ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-none bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+      "api": "https://base-ui.com/react/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/preview.json b/apps/v4/public/r/styles/base-lyra/preview.json
index e3a665238e..9cb1ba55e3 100644
--- a/apps/v4/public/r/styles/base-lyra/preview.json
+++ b/apps/v4/public/r/styles/base-lyra/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -9,6 +9,7 @@
     "button",
     "button-group",
     "card",
+    "chart",
     "checkbox",
     "combobox",
     "dropdown-menu",
@@ -32,8 +33,8 @@
   ],
   "files": [
     {
-      "path": "registry/base-lyra/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-lyra/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-lyra/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-lyra/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-lyra/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\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 { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-lyra/ui/sheet\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Spinner } from \"@/registry/base-lyra/ui/spinner\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                      remixicon=\"RiMicLine\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.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=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n              remixicon=\"RiShoppingBagLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/base-lyra/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-lyra/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-lyra/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-lyra/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-lyra/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-lyra/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-lyra/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-lyra/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-lyra/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-lyra/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-lyra/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-lyra/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-lyra/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-lyra/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-lyra/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-lyra/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-lyra/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-lyra/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-lyra/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-lyra/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-lyra/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-lyra/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-lyra/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-lyra/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-lyra/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-lyra/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-lyra/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-lyra/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-lyra/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-lyra/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-lyra/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-lyra/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-lyra/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/progress-example.json b/apps/v4/public/r/styles/base-lyra/progress-example.json
index 0bc1419760..c839b0751a 100644
--- a/apps/v4/public/r/styles/base-lyra/progress-example.json
+++ b/apps/v4/public/r/styles/base-lyra/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/progress-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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-lyra/ui/progress\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-lyra/ui/progress\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/progress.json b/apps/v4/public/r/styles/base-lyra/progress.json
index 7790bfe22a..1bf1a821ba 100644
--- a/apps/v4/public/r/styles/base-lyra/progress.json
+++ b/apps/v4/public/r/styles/base-lyra/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-none\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"bg-primary h-full transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-xs\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
+      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"relative flex h-1 w-full items-center overflow-x-hidden rounded-none bg-muted\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"h-full bg-primary transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-xs\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"ml-auto text-xs text-muted-foreground tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+      "api": "https://base-ui.com/react/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/radio-group.json b/apps/v4/public/r/styles/base-lyra/radio-group.json
index 7955daf843..aeb45c228e 100644
--- a/apps/v4/public/r/styles/base-lyra/radio-group.json
+++ b/apps/v4/public/r/styles/base-lyra/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+      "api": "https://base-ui.com/react/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/registry.json b/apps/v4/public/r/styles/base-lyra/registry.json
index 62c974b540..17b319e872 100644
--- a/apps/v4/public/r/styles/base-lyra/registry.json
+++ b/apps/v4/public/r/styles/base-lyra/registry.json
@@ -2,6 +2,56 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +60,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+          "api": "https://base-ui.com/react/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +77,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +94,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +111,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +127,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+          "api": "https://base-ui.com/react/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +144,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +160,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +176,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +193,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +211,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +228,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +246,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -138,6 +265,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -148,6 +281,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+          "api": "https://base-ui.com/react/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -158,6 +298,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+          "api": "https://base-ui.com/react/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -170,6 +317,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -182,6 +336,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -192,6 +353,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -203,6 +371,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -214,6 +389,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -224,6 +406,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -234,6 +423,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -245,6 +440,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -259,6 +460,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+          "api": "https://base-ui.com/react/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -269,6 +477,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -280,6 +494,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -291,6 +511,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -302,6 +529,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -312,6 +545,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+          "api": "https://base-ui.com/react/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -323,6 +563,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+          "api": "https://base-ui.com/react/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -333,6 +580,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -344,6 +598,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -354,6 +614,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+          "api": "https://base-ui.com/react/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -364,6 +631,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+          "api": "https://base-ui.com/react/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -374,6 +648,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+          "api": "https://base-ui.com/react/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -385,6 +666,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -395,6 +683,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+          "api": "https://base-ui.com/react/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -405,6 +700,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+          "api": "https://base-ui.com/react/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -415,6 +717,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+          "api": "https://base-ui.com/react/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -426,6 +735,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -445,6 +761,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -455,6 +777,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -465,6 +793,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+          "api": "https://base-ui.com/react/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -476,6 +811,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -486,6 +828,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -496,6 +844,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+          "api": "https://base-ui.com/react/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -506,6 +861,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -516,6 +877,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+          "api": "https://base-ui.com/react/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -526,6 +894,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -536,6 +910,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -547,6 +928,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -557,6 +945,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+          "api": "https://base-ui.com/react/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -568,6 +963,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -578,6 +979,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -589,6 +996,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/direction",
+          "api": "https://base-ui.com/react/utils/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1467,6 +1880,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/base-lyra/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1515,7 +1955,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1523,6 +1963,7 @@
         "button",
         "button-group",
         "card",
+        "chart",
         "checkbox",
         "combobox",
         "dropdown-menu",
@@ -1546,110 +1987,7 @@
       ],
       "files": [
         {
-          "path": "registry/base-lyra/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/base-lyra/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-lyra/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-lyra/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-lyra/blocks/chatgpt.tsx",
+          "path": "registry/base-lyra/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2554,7 +2892,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2566,7 +2904,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2578,7 +2916,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2590,7 +2928,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2602,7 +2940,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2617,7 +2955,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2632,6 +2970,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-lyra/resizable.json b/apps/v4/public/r/styles/base-lyra/resizable.json
index 51a2e99a40..ae2b4c136b 100644
--- a/apps/v4/public/r/styles/base-lyra/resizable.json
+++ b/apps/v4/public/r/styles/base-lyra/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-none\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-none bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/scroll-area-example.json b/apps/v4/public/r/styles/base-lyra/scroll-area-example.json
index d3bbafa973..1d7bd51a6d 100644
--- a/apps/v4/public/r/styles/base-lyra/scroll-area-example.json
+++ b/apps/v4/public/r/styles/base-lyra/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-lyra/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-lyra/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/scroll-area.json b/apps/v4/public/r/styles/base-lyra/scroll-area.json
index 13705a076c..e2186ef8d0 100644
--- a/apps/v4/public/r/styles/base-lyra/scroll-area.json
+++ b/apps/v4/public/r/styles/base-lyra/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-none\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-none bg-border\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+      "api": "https://base-ui.com/react/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/select.json b/apps/v4/public/r/styles/base-lyra/select.json
index 32b5f5c339..046255c55a 100644
--- a/apps/v4/public/r/styles/base-lyra/select.json
+++ b/apps/v4/public/r/styles/base-lyra/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"text-muted-foreground pointer-events-none size-4\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\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(\"bg-border pointer-events-none -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center 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        \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center 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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-none border border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *: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:bg-input/30 dark:hover:bg-input/50 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        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 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(\"px-2 py-2 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs 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(\"pointer-events-none -mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+      "api": "https://base-ui.com/react/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/separator-example.json b/apps/v4/public/r/styles/base-lyra/separator-example.json
index 49847e60fc..ccab5eb004 100644
--- a/apps/v4/public/r/styles/base-lyra/separator-example.json
+++ b/apps/v4/public/r/styles/base-lyra/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/separator.json b/apps/v4/public/r/styles/base-lyra/separator.json
index 040d9f7af1..62153d6b18 100644
--- a/apps/v4/public/r/styles/base-lyra/separator.json
+++ b/apps/v4/public/r/styles/base-lyra/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+      "api": "https://base-ui.com/react/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/sheet-example.json b/apps/v4/public/r/styles/base-lyra/sheet-example.json
index f27b73ff13..bae87e43a4 100644
--- a/apps/v4/public/r/styles/base-lyra/sheet-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-lyra/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-lyra/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sheet.json b/apps/v4/public/r/styles/base-lyra/sheet.json
index 493482e716..fee80b0020 100644
--- a/apps/v4/public/r/styles/base-lyra/sheet.json
+++ b/apps/v4/public/r/styles/base-lyra/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col bg-background bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-01.json b/apps/v4/public/r/styles/base-lyra/sidebar-01.json
index c62d4141fa..b8de90f2df 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-01.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-02.json b/apps/v4/public/r/styles/base-lyra/sidebar-02.json
index 7f8c66d6b6..c6f5dfcbd2 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-02.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-lyra/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-lyra/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-lyra/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-lyra/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-03.json b/apps/v4/public/r/styles/base-lyra/sidebar-03.json
index ad390703e8..b874357f56 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-03.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-04.json b/apps/v4/public/r/styles/base-lyra/sidebar-04.json
index db48a5f413..38b61b30b0 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-04.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-05.json b/apps/v4/public/r/styles/base-lyra/sidebar-05.json
index 2a058e55a0..4ef449e7ef 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-05.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-lyra/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-lyra/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-06.json b/apps/v4/public/r/styles/base-lyra/sidebar-06.json
index 72bec21f32..698cd10291 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-06.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-lyra/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-lyra/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-lyra/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-lyra/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { SidebarInput } from \"@/registry/base-lyra/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { SidebarInput } from \"@/registry/base-lyra/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-07.json b/apps/v4/public/r/styles/base-lyra/sidebar-07.json
index 480f46bcc9..4884a3e6fd 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-07.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-08.json b/apps/v4/public/r/styles/base-lyra/sidebar-08.json
index 486b233aaa..b62a8fb143 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-08.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-lyra/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-lyra/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-lyra/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-lyra/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-lyra/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-lyra/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-09.json b/apps/v4/public/r/styles/base-lyra/sidebar-09.json
index 9892de60e5..1586b638ce 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-09.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-09.json
@@ -16,18 +16,18 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-09/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground md:h-8 md:p-0\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0 data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-10.json b/apps/v4/public/r/styles/base-lyra/sidebar-10.json
index 680f0a7d85..21d6fe4322 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-10.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-lyra/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-lyra/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"data-open:bg-accent h-7 w-7\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"h-7 w-7 data-open:bg-accent\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-11.json b/apps/v4/public/r/styles/base-lyra/sidebar-11.json
index 9896d3135b..d893e71e5b 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-11.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-12.json b/apps/v4/public/r/styles/base-lyra/sidebar-12.json
index ab1089a214..3cd645e65a 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-12.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-lyra/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-lyra/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-lyra/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-lyra/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-13.json b/apps/v4/public/r/styles/base-lyra/sidebar-13.json
index 5ea605a7fc..ab19c4e79e 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-13.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-14.json b/apps/v4/public/r/styles/base-lyra/sidebar-14.json
index 041adf04ac..4ce9435835 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-14.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-15.json b/apps/v4/public/r/styles/base-lyra/sidebar-15.json
index 1b2e9f205c..b573679317 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-15.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/base-lyra/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-lyra/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/base-lyra/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-lyra/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-lyra/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-lyra/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-lyra/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-lyra/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"aria-expanded:bg-muted aria-expanded:text-foreground w-fit px-1.5\" />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"w-fit px-1.5 aria-expanded:bg-muted aria-expanded:text-foreground\" />\n            }\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-16.json b/apps/v4/public/r/styles/base-lyra/sidebar-16.json
index 5789a81ed8..35f477f3fd 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-16.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-lyra/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-lyra/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-lyra/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-lyra/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-lyra/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-lyra/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-lyra/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-lyra/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-lyra/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-lyra/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-lyra/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-lyra/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-lyra/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-lyra/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { useSidebar } from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-lyra/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { useSidebar } from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-example.json b/apps/v4/public/r/styles/base-lyra/sidebar-example.json
index 99de60a4d7..4f039d5bc0 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-floating-example.json b/apps/v4/public/r/styles/base-lyra/sidebar-floating-example.json
index 35c8d3df07..fde002ec47 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-lyra/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-lyra/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json b/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json
index ced4fa48e6..ac4eba0383 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-inset-example.json b/apps/v4/public/r/styles/base-lyra/sidebar-inset-example.json
index bdc74a1ede..bc659837b2 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/sidebar.json b/apps/v4/public/r/styles/base-lyra/sidebar.json
index 48266be81f..ccfc128bc0 100644
--- a/apps/v4/public/r/styles/base-lyra/sidebar.json
+++ b/apps/v4/public/r/styles/base-lyra/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-lyra/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-lyra/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-lyra/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col 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(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-xs\", 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\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-lyra/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-lyra/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-lyra/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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-2 text-xs 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-xs\", 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\", 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 p-2 text-left text-xs 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-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : <TooltipTrigger 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-1.5 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-2 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-xs data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/signup-02.json b/apps/v4/public/r/styles/base-lyra/signup-02.json
index c6ffeae1e6..425d2f3182 100644
--- a/apps/v4/public/r/styles/base-lyra/signup-02.json
+++ b/apps/v4/public/r/styles/base-lyra/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-lyra/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-lyra/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/signup-03.json b/apps/v4/public/r/styles/base-lyra/signup-03.json
index 401591edb7..fc6b186724 100644
--- a/apps/v4/public/r/styles/base-lyra/signup-03.json
+++ b/apps/v4/public/r/styles/base-lyra/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-lyra/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-lyra/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-lyra/signup-04.json b/apps/v4/public/r/styles/base-lyra/signup-04.json
index d669fa5cef..857549ee05 100644
--- a/apps/v4/public/r/styles/base-lyra/signup-04.json
+++ b/apps/v4/public/r/styles/base-lyra/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-lyra/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-lyra/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-lyra/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/signup-05.json b/apps/v4/public/r/styles/base-lyra/signup-05.json
index 2a0296875b..9d9410dc42 100644
--- a/apps/v4/public/r/styles/base-lyra/signup-05.json
+++ b/apps/v4/public/r/styles/base-lyra/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-lyra/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-lyra/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-lyra/skeleton.json b/apps/v4/public/r/styles/base-lyra/skeleton.json
index aea092d58d..80e9f11afa 100644
--- a/apps/v4/public/r/styles/base-lyra/skeleton.json
+++ b/apps/v4/public/r/styles/base-lyra/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-none bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/slider-example.json b/apps/v4/public/r/styles/base-lyra/slider-example.json
index 73f9c1512b..cdb753534a 100644
--- a/apps/v4/public/r/styles/base-lyra/slider-example.json
+++ b/apps/v4/public/r/styles/base-lyra/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/slider-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 { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/slider.json b/apps/v4/public/r/styles/base-lyra/slider.json
index d6b157ee7a..e5427c98ab 100644
--- a/apps/v4/public/r/styles/base-lyra/slider.json
+++ b/apps/v4/public/r/styles/base-lyra/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"bg-muted relative grow overflow-hidden rounded-none select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"border-ring ring-ring/50 relative block size-3 shrink-0 rounded-none border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-1 focus-visible:ring-1 focus-visible:outline-hidden active:ring-1 disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"relative grow overflow-hidden rounded-none bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"relative block size-3 shrink-0 rounded-none border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-1 focus-visible:ring-1 focus-visible:outline-hidden active:ring-1 disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+      "api": "https://base-ui.com/react/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/sonner.json b/apps/v4/public/r/styles/base-lyra/sonner.json
index c9cd23b7c6..79d75d79f3 100644
--- a/apps/v4/public/r/styles/base-lyra/sonner.json
+++ b/apps/v4/public/r/styles/base-lyra/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/spinner.json b/apps/v4/public/r/styles/base-lyra/spinner.json
index db2972a32e..cf6748a112 100644
--- a/apps/v4/public/r/styles/base-lyra/spinner.json
+++ b/apps/v4/public/r/styles/base-lyra/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/style.json b/apps/v4/public/r/styles/base-lyra/style.json
new file mode 100644
index 0000000000..a58f5ba309
--- /dev/null
+++ b/apps/v4/public/r/styles/base-lyra/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/switch.json b/apps/v4/public/r/styles/base-lyra/switch.json
index 416b26676a..fbb40f3e7a 100644
--- a/apps/v4/public/r/styles/base-lyra/switch.json
+++ b/apps/v4/public/r/styles/base-lyra/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-1 aria-invalid:ring-1 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+      "api": "https://base-ui.com/react/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/table.json b/apps/v4/public/r/styles/base-lyra/table.json
index c7d094847a..b6a8b4daaf 100644
--- a/apps/v4/public/r/styles/base-lyra/table.json
+++ b/apps/v4/public/r/styles/base-lyra/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-xs\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-xs\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/tabs-example.json b/apps/v4/public/r/styles/base-lyra/tabs-example.json
index 00086b1bf2..19d05f2149 100644
--- a/apps/v4/public/r/styles/base-lyra/tabs-example.json
+++ b/apps/v4/public/r/styles/base-lyra/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/tabs.json b/apps/v4/public/r/styles/base-lyra/tabs.json
index d4d1ef34ea..eedbccaff7 100644
--- a/apps/v4/public/r/styles/base-lyra/tabs.json
+++ b/apps/v4/public/r/styles/base-lyra/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-none p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-xs/relaxed outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-none p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\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-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] 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 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-xs/relaxed outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+      "api": "https://base-ui.com/react/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/textarea.json b/apps/v4/public/r/styles/base-lyra/textarea.json
index 25dd76c83c..7375ecfd7c 100644
--- a/apps/v4/public/r/styles/base-lyra/textarea.json
+++ b/apps/v4/public/r/styles/base-lyra/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-none border bg-transparent px-2.5 py-2 text-xs transition-colors outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 md:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-none border border-input bg-transparent px-2.5 py-2 text-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/toggle-group-example.json b/apps/v4/public/r/styles/base-lyra/toggle-group-example.json
index 20af966016..1eb3006290 100644
--- a/apps/v4/public/r/styles/base-lyra/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-lyra/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-lyra/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-lyra/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/toggle-group.json b/apps/v4/public/r/styles/base-lyra/toggle-group.json
index a5e6d32252..2bf6edcf8a 100644
--- a/apps/v4/public/r/styles/base-lyra/toggle-group.json
+++ b/apps/v4/public/r/styles/base-lyra/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-lyra/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-none data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-none\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-lyra/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-none data-[size=sm]:rounded-none data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/toggle.json b/apps/v4/public/r/styles/base-lyra/toggle.json
index f0536e236f..be9a9c9fb3 100644
--- a/apps/v4/public/r/styles/base-lyra/toggle.json
+++ b/apps/v4/public/r/styles/base-lyra/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-none text-xs font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent\",\n      },\n      size: {\n        default: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-none px-1.5\",\n        lg: \"h-9 min-w-9 px-2.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-lyra/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-none text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]: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: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-none px-1.5\",\n        lg: \"h-9 min-w-9 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/tooltip-example.json b/apps/v4/public/r/styles/base-lyra/tooltip-example.json
index f17aaf6821..961be9b5af 100644
--- a/apps/v4/public/r/styles/base-lyra/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-lyra/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/tooltip-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 { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "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 { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/tooltip.json b/apps/v4/public/r/styles/base-lyra/tooltip.json
index 8102640deb..68f32bb56a 100644
--- a/apps/v4/public/r/styles/base-lyra/tooltip.json
+++ b/apps/v4/public/r/styles/base-lyra/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-none px-3 py-1.5 text-xs\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+      "api": "https://base-ui.com/react/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-lyra/vercel.json b/apps/v4/public/r/styles/base-lyra/vercel.json
deleted file mode 100644
index 7fc3d9f432..0000000000
--- a/apps/v4/public/r/styles/base-lyra/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-lyra/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-lyra/ui/alert\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Calendar } from \"@/registry/base-lyra/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/base-lyra/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/accordion-example.json b/apps/v4/public/r/styles/base-maia/accordion-example.json
index c317061e35..cef6ceb195 100644
--- a/apps/v4/public/r/styles/base-maia/accordion-example.json
+++ b/apps/v4/public/r/styles/base-maia/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-maia/ui/accordion\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-maia/ui/accordion\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/accordion.json b/apps/v4/public/r/styles/base-maia/accordion.json
index 4b794fe0a5..9d2951e374 100644
--- a/apps/v4/public/r/styles/base-maia/accordion.json
+++ b/apps/v4/public/r/styles/base-maia/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-maia/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(\n        \"flex w-full flex-col overflow-hidden rounded-2xl border\",\n        className\n      )}\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(\"data-open:bg-muted/50 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          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden px-4 text-sm\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-maia/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(\n        \"flex w-full flex-col overflow-hidden rounded-2xl border\",\n        className\n      )}\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 data-open:bg-muted/50\", 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 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline 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 px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+      "api": "https://base-ui.com/react/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/alert-dialog.json b/apps/v4/public/r/styles/base-maia/alert-dialog.json
index 58645cb013..71115afbfc 100644
--- a/apps/v4/public/r/styles/base-maia/alert-dialog.json
+++ b/apps/v4/public/r/styles/base-maia/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/5 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-background p-6 ring-1 ring-foreground/5 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-16 items-center justify-center rounded-full bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/alert.json b/apps/v4/public/r/styles/base-maia/alert.json
index 2f20e7fd17..4ca9653afe 100644
--- a/apps/v4/public/r/styles/base-maia/alert.json
+++ b/apps/v4/public/r/styles/base-maia/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/aspect-ratio-example.json b/apps/v4/public/r/styles/base-maia/aspect-ratio-example.json
index 78e8f6567e..9b14e43c76 100644
--- a/apps/v4/public/r/styles/base-maia/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/base-maia/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { AspectRatio } from \"@/registry/base-maia/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { AspectRatio } from \"@/registry/base-maia/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/aspect-ratio.json b/apps/v4/public/r/styles/base-maia/aspect-ratio.json
index 5a86af3bd4..7f010234ee 100644
--- a/apps/v4/public/r/styles/base-maia/aspect-ratio.json
+++ b/apps/v4/public/r/styles/base-maia/aspect-ratio.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/avatar.json b/apps/v4/public/r/styles/base-maia/avatar.json
index 8a58c86a43..562e8a7f70 100644
--- a/apps/v4/public/r/styles/base-maia/avatar.json
+++ b/apps/v4/public/r/styles/base-maia/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+      "api": "https://base-ui.com/react/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/badge.json b/apps/v4/public/r/styles/base-maia/badge.json
index a06f84fc5f..a17a2c2fc6 100644
--- a/apps/v4/public/r/styles/base-maia/badge.json
+++ b/apps/v4/public/r/styles/base-maia/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border bg-input/30 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/breadcrumb.json b/apps/v4/public/r/styles/base-maia/breadcrumb.json
index 35e322b6e0..7e9c5f3603 100644
--- a/apps/v4/public/r/styles/base-maia/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-maia/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word 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(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"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-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/button-group.json b/apps/v4/public/r/styles/base-maia/button-group.json
index 2f4b9ee12b..a6e4534cf1 100644
--- a/apps/v4/public/r/styles/base-maia/button-group.json
+++ b/apps/v4/public/r/styles/base-maia/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/button-group.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-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-maia/lib/utils\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[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-b-4xl! [&>[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 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/button.json b/apps/v4/public/r/styles/base-maia/button.json
index 6c5bfbd47d..425aea8043 100644
--- a/apps/v4/public/r/styles/base-maia/button.json
+++ b/apps/v4/public/r/styles/base-maia/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/button.tsx",
-      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n        xs: \"h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] 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-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\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-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n        xs: \"h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/calendar-example.json b/apps/v4/public/r/styles/base-maia/calendar-example.json
index 90d2545af4..edd3c65658 100644
--- a/apps/v4/public/r/styles/base-maia/calendar-example.json
+++ b/apps/v4/public/r/styles/base-maia/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-maia/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-maia/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/calendar.json b/apps/v4/public/r/styles/base-maia/calendar.json
index df8f72c4c8..dbc331249e 100644
--- a/apps/v4/public/r/styles/base-maia/calendar.json
+++ b/apps/v4/public/r/styles/base-maia/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/card-example.json b/apps/v4/public/r/styles/base-maia/card-example.json
index 57927596f1..da3ef04a5a 100644
--- a/apps/v4/public/r/styles/base-maia/card-example.json
+++ b/apps/v4/public/r/styles/base-maia/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/card.json b/apps/v4/public/r/styles/base-maia/card.json
index 29c584767a..02597e63e8 100644
--- a/apps/v4/public/r/styles/base-maia/card.json
+++ b/apps/v4/public/r/styles/base-maia/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-2xl py-6 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-2xl bg-card py-6 text-sm text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/carousel.json b/apps/v4/public/r/styles/base-maia/carousel.json
index 512d681837..6abcfffb37 100644
--- a/apps/v4/public/r/styles/base-maia/carousel.json
+++ b/apps/v4/public/r/styles/base-maia/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/chart-example.json b/apps/v4/public/r/styles/base-maia/chart-example.json
index 2b342f2a55..8231d6f349 100644
--- a/apps/v4/public/r/styles/base-maia/chart-example.json
+++ b/apps/v4/public/r/styles/base-maia/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/chart.json b/apps/v4/public/r/styles/base-maia/chart.json
index df5d1c7560..8e416620d9 100644
--- a/apps/v4/public/r/styles/base-maia/chart.json
+++ b/apps/v4/public/r/styles/base-maia/chart.json
@@ -10,9 +10,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/chatgpt.json b/apps/v4/public/r/styles/base-maia/chatgpt.json
deleted file mode 100644
index 7fb90b9a20..0000000000
--- a/apps/v4/public/r/styles/base-maia/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-maia/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-maia/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { Kbd } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                      remixicon=\"RiAttachmentLine\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                      remixicon=\"RiMagicLine\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                            remixicon=\"RiHand\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                            remixicon=\"RiBookOpenLine\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                            remixicon=\"RiGlobeLine\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                            remixicon=\"RiPencilLine\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                  remixicon=\"RiMicLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        remixicon=\"RiFolderLine\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/checkbox.json b/apps/v4/public/r/styles/base-maia/checkbox.json
index d10e7ea55b..afaebdd67c 100644
--- a/apps/v4/public/r/styles/base-maia/checkbox.json
+++ b/apps/v4/public/r/styles/base-maia/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[6px] border transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[6px] border border-input transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+      "api": "https://base-ui.com/react/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/collapsible-example.json b/apps/v4/public/r/styles/base-maia/collapsible-example.json
index 16982abd41..c3d7f32801 100644
--- a/apps/v4/public/r/styles/base-maia/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-maia/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/collapsible.json b/apps/v4/public/r/styles/base-maia/collapsible.json
index 30bb57d14e..c3948023b9 100644
--- a/apps/v4/public/r/styles/base-maia/collapsible.json
+++ b/apps/v4/public/r/styles/base-maia/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+      "api": "https://base-ui.com/react/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/combobox-example.json b/apps/v4/public/r/styles/base-maia/combobox-example.json
index ac37334d1b..35f9c55ce9 100644
--- a/apps/v4/public/r/styles/base-maia/combobox-example.json
+++ b/apps/v4/public/r/styles/base-maia/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/combobox.json b/apps/v4/public/r/styles/base-maia/combobox.json
index 7dc34fc6a4..d2dd24d533 100644
--- a/apps/v4/public/r/styles/base-maia/combobox.json
+++ b/apps/v4/public/r/styles/base-maia/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-4\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm 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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\",\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-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-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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-2xl bg-popover text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 overflow-y-auto overscroll-contain p-1 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-xl 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(\"px-3.5 py-2.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\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 my-1 h-px bg-border/50\", 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-9 flex-wrap items-center gap-1.5 rounded-4xl border border-input bg-input/30 bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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-4xl bg-muted-foreground/10 px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/command.json b/apps/v4/public/r/styles/base-maia/command.json
index 1ea55f6d72..94a3ac749e 100644
--- a/apps/v4/public/r/styles/base-maia/command.json
+++ b/apps/v4/public/r/styles/base-maia/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-4xl p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\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(\"bg-border/50 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_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=\"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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\",\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-maia/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-4xl bg-popover p-1 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-9 bg-input/30\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\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-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/component-example.json b/apps/v4/public/r/styles/base-maia/component-example.json
index 24925adbb2..395bb46adb 100644
--- a/apps/v4/public/r/styles/base-maia/component-example.json
+++ b/apps/v4/public/r/styles/base-maia/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/context-menu.json b/apps/v4/public/r/styles/base-maia/context-menu.json
index f3207bf916..7d495ca1fe 100644
--- a/apps/v4/public/r/styles/base-maia/context-menu.json
+++ b/apps/v4/public/r/styles/base-maia/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 duration-100 outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-3 py-2.5 text-xs 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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center rounded-xl px-3 py-2 text-sm outline-hidden select-none data-inset:pl-9.5 [&_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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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.5 text-xs text-muted-foreground 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-xl 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-xl 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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-xl 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 rounded-sm py-1.5 pr-8 pl-2 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 my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/dashboard-01.json b/apps/v4/public/r/styles/base-maia/dashboard-01.json
index 82efb6edd4..28ddea88f3 100644
--- a/apps/v4/public/r/styles/base-maia/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-maia/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-maia/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-maia/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-maia/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"data-open:bg-muted text-muted-foreground flex size-8\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-maia/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-maia/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -67,7 +67,7 @@
     },
     {
       "path": "registry/base-maia/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/base-maia/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"text-foreground/70 truncate text-xs\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"text-muted-foreground truncate text-xs\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs text-foreground/70\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs text-muted-foreground\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-maia/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-maia/demo.json b/apps/v4/public/r/styles/base-maia/demo.json
new file mode 100644
index 0000000000..8d7fcf6de1
--- /dev/null
+++ b/apps/v4/public/r/styles/base-maia/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/base-maia/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/dialog-example.json b/apps/v4/public/r/styles/base-maia/dialog-example.json
index 00a2858909..05827ee1e2 100644
--- a/apps/v4/public/r/styles/base-maia/dialog-example.json
+++ b/apps/v4/public/r/styles/base-maia/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { Kbd } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { Kbd } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dialog.json b/apps/v4/public/r/styles/base-maia/dialog.json
index 9ab5387fde..8f875b7eee 100644
--- a/apps/v4/public/r/styles/base-maia/dialog.json
+++ b/apps/v4/public/r/styles/base-maia/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-background p-6 text-sm ring-1 ring-foreground/5 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/direction.json b/apps/v4/public/r/styles/base-maia/direction.json
index 7892103f7e..a01c1b163a 100644
--- a/apps/v4/public/r/styles/base-maia/direction.json
+++ b/apps/v4/public/r/styles/base-maia/direction.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/direction",
+      "api": "https://base-ui.com/react/utils/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/drawer-example.json b/apps/v4/public/r/styles/base-maia/drawer-example.json
index 7f34f44836..b2e3ae9f66 100644
--- a/apps/v4/public/r/styles/base-maia/drawer-example.json
+++ b/apps/v4/public/r/styles/base-maia/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/drawer-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  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/drawer.json b/apps/v4/public/r/styles/base-maia/drawer.json
index c888fab3e1..b22cf92bba 100644
--- a/apps/v4/public/r/styles/base-maia/drawer.json
+++ b/apps/v4/public/r/styles/base-maia/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background before:border-border group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-background data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json b/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json
index afb763ff58..f3eef7c305 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=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dropdown-menu.json b/apps/v4/public/r/styles/base-maia/dropdown-menu.json
index 116123e9ad..eb556b5287 100644
--- a/apps/v4/public/r/styles/base-maia/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-maia/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl p-1 shadow-2xl ring-1 duration-100 outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-3 py-2.5 text-xs 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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-inset:pl-9.5 [&_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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground w-auto min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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.5 text-xs text-muted-foreground 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-xl 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-xl 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        \"w-auto min-w-36 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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-xl 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-xl 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 my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/elevenlabs.json b/apps/v4/public/r/styles/base-maia/elevenlabs.json
deleted file mode 100644
index b80c211db7..0000000000
--- a/apps/v4/public/r/styles/base-maia/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/base-maia/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/empty.json b/apps/v4/public/r/styles/base-maia/empty.json
index 74bebf8518..d275843e6f 100644
--- a/apps/v4/public/r/styles/base-maia/empty.json
+++ b/apps/v4/public/r/styles/base-maia/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/example.json b/apps/v4/public/r/styles/base-maia/example.json
index 45f4770ced..b931f5494c 100644
--- a/apps/v4/public/r/styles/base-maia/example.json
+++ b/apps/v4/public/r/styles/base-maia/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-maia/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/field.json b/apps/v4/public/r/styles/base-maia/field.json
index 5ea3cdc4af..66cd202c21 100644
--- a/apps/v4/public/r/styles/base-maia/field.json
+++ b/apps/v4/public/r/styles/base-maia/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\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=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/font-dm-sans.json b/apps/v4/public/r/styles/base-maia/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/base-maia/font-dm-sans.json
+++ b/apps/v4/public/r/styles/base-maia/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-maia/font-jetbrains-mono.json b/apps/v4/public/r/styles/base-maia/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/base-maia/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/base-maia/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/base-maia/font-geist-sans.json b/apps/v4/public/r/styles/base-maia/font-lora.json
similarity index 52%
rename from apps/v4/public/r/styles/base-maia/font-geist-sans.json
rename to apps/v4/public/r/styles/base-maia/font-lora.json
index a60a347fd3..cacd01a3f0 100644
--- a/apps/v4/public/r/styles/base-maia/font-geist-sans.json
+++ b/apps/v4/public/r/styles/base-maia/font-lora.json
@@ -1,13 +1,13 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
+  "name": "font-lora",
+  "title": "Lora",
   "type": "registry:font",
   "font": {
-    "family": "'Geist Variable', sans-serif",
+    "family": "'Lora Variable', serif",
     "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
+    "import": "Lora",
+    "variable": "--font-serif",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/base-maia/font-merriweather.json b/apps/v4/public/r/styles/base-maia/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-maia/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/font-noto-serif.json b/apps/v4/public/r/styles/base-maia/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-maia/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/font-outfit.json b/apps/v4/public/r/styles/base-maia/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/base-maia/font-outfit.json
+++ b/apps/v4/public/r/styles/base-maia/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-maia/font-playfair-display.json b/apps/v4/public/r/styles/base-maia/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/base-maia/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/font-public-sans.json b/apps/v4/public/r/styles/base-maia/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/base-maia/font-public-sans.json
+++ b/apps/v4/public/r/styles/base-maia/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-maia/font-raleway.json b/apps/v4/public/r/styles/base-maia/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/base-maia/font-raleway.json
+++ b/apps/v4/public/r/styles/base-maia/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-maia/font-roboto-slab.json b/apps/v4/public/r/styles/base-maia/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-maia/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/font-roboto.json b/apps/v4/public/r/styles/base-maia/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/base-maia/font-roboto.json
+++ b/apps/v4/public/r/styles/base-maia/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-maia/github.json b/apps/v4/public/r/styles/base-maia/github.json
deleted file mode 100644
index 87aa5433f8..0000000000
--- a/apps/v4/public/r/styles/base-maia/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-maia/blocks/github.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 { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-maia/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-maia/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { Kbd } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { Spinner } from \"@/registry/base-maia/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/hover-card-example.json b/apps/v4/public/r/styles/base-maia/hover-card-example.json
index cc7eed81d9..4d59f29b89 100644
--- a/apps/v4/public/r/styles/base-maia/hover-card-example.json
+++ b/apps/v4/public/r/styles/base-maia/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-maia/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/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  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-maia/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/hover-card.json b/apps/v4/public/r/styles/base-maia/hover-card.json
index f38f0741d3..08c4763a68 100644
--- a/apps/v4/public/r/styles/base-maia/hover-card.json
+++ b/apps/v4/public/r/styles/base-maia/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) rounded-2xl p-4 text-sm shadow-2xl ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"z-50 w-72 origin-(--transform-origin) rounded-2xl bg-popover p-4 text-sm text-popover-foreground shadow-2xl ring-1 ring-foreground/5 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+      "api": "https://base-ui.com/react/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/index.json b/apps/v4/public/r/styles/base-maia/index.json
new file mode 100644
index 0000000000..94f1c90de2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-maia/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/input-group-example.json b/apps/v4/public/r/styles/base-maia/input-group-example.json
index 781ea57a72..dc098fa752 100644
--- a/apps/v4/public/r/styles/base-maia/input-group-example.json
+++ b/apps/v4/public/r/styles/base-maia/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-maia/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Spinner } from \"@/registry/base-maia/ui/spinner\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-maia/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Spinner } from \"@/registry/base-maia/ui/spinner\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/input-group.json b/apps/v4/public/r/styles/base-maia/input-group.json
index 02047633d2..76d31c5a94 100644
--- a/apps/v4/public/r/styles/base-maia/input-group.json
+++ b/apps/v4/public/r/styles/base-maia/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border transition-colors 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-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 rounded-4xl text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none 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-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-input bg-input/30 transition-colors 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-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\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-4xl **: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\":\n          \"order-first pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3\",\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-4xl text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/input-otp-example.json b/apps/v4/public/r/styles/base-maia/input-otp-example.json
index 3758a54a98..fc0d6add0f 100644
--- a/apps/v4/public/r/styles/base-maia/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-maia/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/input-otp.json b/apps/v4/public/r/styles/base-maia/input-otp.json
index 4c03dbcd8b..d49c1cad48 100644
--- a/apps/v4/public/r/styles/base-maia/input-otp.json
+++ b/apps/v4/public/r/styles/base-maia/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-4xl has-aria-invalid:ring-[3px]\",\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        \"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-9 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-maia/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 rounded-4xl has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-9 items-center justify-center border-y border-r border-input bg-input/30 text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/input.json b/apps/v4/public/r/styles/base-maia/input.json
index 9860cc2d52..7439b92b87 100644
--- a/apps/v4/public/r/styles/base-maia/input.json
+++ b/apps/v4/public/r/styles/base-maia/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/input.tsx",
-      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-4xl border px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-4xl border border-input bg-input/30 px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/item-example.json b/apps/v4/public/r/styles/base-maia/item-example.json
index dd1c70263b..fdfc54b6bc 100644
--- a/apps/v4/public/r/styles/base-maia/item-example.json
+++ b/apps/v4/public/r/styles/base-maia/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/item.json b/apps/v4/public/r/styles/base-maia/item.json
index 9a56d95672..fe2943140f 100644
--- a/apps/v4/public/r/styles/base-maia/item.json
+++ b/apps/v4/public/r/styles/base-maia/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm font-normal [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-2xl border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/kbd.json b/apps/v4/public/r/styles/base-maia/kbd.json
index 67293df990..63b57ceb47 100644
--- a/apps/v4/public/r/styles/base-maia/kbd.json
+++ b/apps/v4/public/r/styles/base-maia/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/label.json b/apps/v4/public/r/styles/base-maia/label.json
index 3ce607d501..083b54af63 100644
--- a/apps/v4/public/r/styles/base-maia/label.json
+++ b/apps/v4/public/r/styles/base-maia/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+      "api": "https://base-ui.com/react/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/login-02.json b/apps/v4/public/r/styles/base-maia/login-02.json
index b579a2cce9..c6e76969d1 100644
--- a/apps/v4/public/r/styles/base-maia/login-02.json
+++ b/apps/v4/public/r/styles/base-maia/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-maia/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-maia/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/login-03.json b/apps/v4/public/r/styles/base-maia/login-03.json
index a7d393aaff..359347aa0e 100644
--- a/apps/v4/public/r/styles/base-maia/login-03.json
+++ b/apps/v4/public/r/styles/base-maia/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-maia/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-maia/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-maia/login-04.json b/apps/v4/public/r/styles/base-maia/login-04.json
index aa2044fce6..d692adf75a 100644
--- a/apps/v4/public/r/styles/base-maia/login-04.json
+++ b/apps/v4/public/r/styles/base-maia/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-maia/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-maia/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/login-05.json b/apps/v4/public/r/styles/base-maia/login-05.json
index f32e816edd..574815447a 100644
--- a/apps/v4/public/r/styles/base-maia/login-05.json
+++ b/apps/v4/public/r/styles/base-maia/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-maia/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-maia/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-maia/menubar.json b/apps/v4/public/r/styles/base-maia/menubar.json
index 6431254a8a..a27284a34c 100644
--- a/apps/v4/public/r/styles/base-maia/menubar.json
+++ b/apps/v4/public/r/styles/base-maia/menubar.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-9 items-center rounded-2xl 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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-xl px-2.5 py-1 text-sm font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-2.5 rounded-xl px-3 py-2 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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        \"text-muted-foreground px-3.5 py-2.5 text-xs 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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-32 rounded-2xl p-1 shadow-2xl ring-1 duration-100\",\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-maia/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center rounded-2xl border bg-background 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-xl px-2.5 py-1 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 min-w-48 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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-xl 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-xl 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-xl 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.5 text-xs text-muted-foreground 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-xl 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        \"min-w-32 rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+      "api": "https://base-ui.com/react/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/native-select.json b/apps/v4/public/r/styles/base-maia/native-select.json
index 3f9bd27233..4af7bc8dd1 100644
--- a/apps/v4/public/r/styles/base-maia/native-select.json
+++ b/apps/v4/public/r/styles/base-maia/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-4xl border py-1 pr-8 pl-3 text-sm transition-colors outline-none select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-[3px] data-[size=sm]:h-8\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-maia/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-9 w-full min-w-0 appearance-none rounded-4xl border border-input bg-input/30 py-1 pr-8 pl-3 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-3.5 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({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/navigation-menu-example.json b/apps/v4/public/r/styles/base-maia/navigation-menu-example.json
index 418968144c..6754822fc7 100644
--- a/apps/v4/public/r/styles/base-maia/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-maia/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-maia/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-maia/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/navigation-menu.json b/apps/v4/public/r/styles/base-maia/navigation-menu.json
index 964334b660..b05ee7dc7b 100644
--- a/apps/v4/public/r/styles/base-maia/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-maia/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 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-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\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=\"bg-popover text-popover-foreground ring-foreground/5 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-2xl shadow ring-1 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        \"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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-2xl bg-background px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 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-2xl group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/5 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-2xl bg-popover text-popover-foreground shadow ring-1 ring-foreground/5 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-xl p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 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-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/otp-01.json b/apps/v4/public/r/styles/base-maia/otp-01.json
deleted file mode 100644
index d3cd7e37ac..0000000000
--- a/apps/v4/public/r/styles/base-maia/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-maia/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-maia/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-maia/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/otp-02.json b/apps/v4/public/r/styles/base-maia/otp-02.json
deleted file mode 100644
index 932fb919c6..0000000000
--- a/apps/v4/public/r/styles/base-maia/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-maia/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-maia/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-maia/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/otp-03.json b/apps/v4/public/r/styles/base-maia/otp-03.json
deleted file mode 100644
index 77233cf05b..0000000000
--- a/apps/v4/public/r/styles/base-maia/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-maia/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/base-maia/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-maia/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/otp-04.json b/apps/v4/public/r/styles/base-maia/otp-04.json
deleted file mode 100644
index 41ef17ade2..0000000000
--- a/apps/v4/public/r/styles/base-maia/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-maia/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-maia/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-maia/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/otp-05.json b/apps/v4/public/r/styles/base-maia/otp-05.json
deleted file mode 100644
index bebceece10..0000000000
--- a/apps/v4/public/r/styles/base-maia/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-maia/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-maia/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-maia/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/pagination.json b/apps/v4/public/r/styles/base-maia/pagination.json
index b12c09feda..38fc23d92e 100644
--- a/apps/v4/public/r/styles/base-maia/pagination.json
+++ b/apps/v4/public/r/styles/base-maia/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/popover.json b/apps/v4/public/r/styles/base-maia/popover.json
index b55843e203..adb0dc030a 100644
--- a/apps/v4/public/r/styles/base-maia/popover.json
+++ b/apps/v4/public/r/styles/base-maia/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-2xl p-4 text-sm shadow-2xl ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-2xl bg-popover p-4 text-sm text-popover-foreground shadow-2xl ring-1 ring-foreground/5 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+      "api": "https://base-ui.com/react/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/preview.json b/apps/v4/public/r/styles/base-maia/preview.json
index e81ddab6e4..ed83da9092 100644
--- a/apps/v4/public/r/styles/base-maia/preview.json
+++ b/apps/v4/public/r/styles/base-maia/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -9,6 +9,7 @@
     "button",
     "button-group",
     "card",
+    "chart",
     "checkbox",
     "combobox",
     "dropdown-menu",
@@ -32,8 +33,8 @@
   ],
   "files": [
     {
-      "path": "registry/base-maia/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-maia/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-maia/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-maia/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\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 { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-maia/ui/sheet\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Spinner } from \"@/registry/base-maia/ui/spinner\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                      remixicon=\"RiMicLine\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.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=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n              remixicon=\"RiShoppingBagLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/base-maia/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-maia/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-maia/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-maia/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-maia/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-maia/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-maia/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-maia/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-maia/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-maia/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-maia/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-maia/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-maia/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-maia/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-maia/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-maia/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-maia/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-maia/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-maia/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-maia/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-maia/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-maia/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-maia/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-maia/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-maia/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-maia/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-maia/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-maia/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-maia/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-maia/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-maia/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-maia/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-maia/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/progress-example.json b/apps/v4/public/r/styles/base-maia/progress-example.json
index 786a2d8e61..6a8e319ca5 100644
--- a/apps/v4/public/r/styles/base-maia/progress-example.json
+++ b/apps/v4/public/r/styles/base-maia/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/progress-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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-maia/ui/progress\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-maia/ui/progress\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/progress.json b/apps/v4/public/r/styles/base-maia/progress.json
index f48d7968ba..2cfe255bab 100644
--- a/apps/v4/public/r/styles/base-maia/progress.json
+++ b/apps/v4/public/r/styles/base-maia/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"bg-muted relative flex h-3 w-full items-center overflow-x-hidden rounded-4xl\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"bg-primary h-full transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"text-muted-foreground ml-auto text-sm tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
+      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"relative flex h-3 w-full items-center overflow-x-hidden rounded-4xl bg-muted\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"h-full bg-primary transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"ml-auto text-sm text-muted-foreground tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+      "api": "https://base-ui.com/react/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/radio-group.json b/apps/v4/public/r/styles/base-maia/radio-group.json
index c689533739..16ffa5535f 100644
--- a/apps/v4/public/r/styles/base-maia/radio-group.json
+++ b/apps/v4/public/r/styles/base-maia/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+      "api": "https://base-ui.com/react/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/registry.json b/apps/v4/public/r/styles/base-maia/registry.json
index fdce5d20ea..50189ece5f 100644
--- a/apps/v4/public/r/styles/base-maia/registry.json
+++ b/apps/v4/public/r/styles/base-maia/registry.json
@@ -2,6 +2,56 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +60,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+          "api": "https://base-ui.com/react/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +77,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +94,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +111,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +127,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+          "api": "https://base-ui.com/react/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +144,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +160,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +176,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +193,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +211,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +228,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +246,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -138,6 +265,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -148,6 +281,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+          "api": "https://base-ui.com/react/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -158,6 +298,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+          "api": "https://base-ui.com/react/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -170,6 +317,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -182,6 +336,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -192,6 +353,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -203,6 +371,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -214,6 +389,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -224,6 +406,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -234,6 +423,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -245,6 +440,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -259,6 +460,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+          "api": "https://base-ui.com/react/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -269,6 +477,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -280,6 +494,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -291,6 +511,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -302,6 +529,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -312,6 +545,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+          "api": "https://base-ui.com/react/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -323,6 +563,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+          "api": "https://base-ui.com/react/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -333,6 +580,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -344,6 +598,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -354,6 +614,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+          "api": "https://base-ui.com/react/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -364,6 +631,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+          "api": "https://base-ui.com/react/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -374,6 +648,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+          "api": "https://base-ui.com/react/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -385,6 +666,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -395,6 +683,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+          "api": "https://base-ui.com/react/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -405,6 +700,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+          "api": "https://base-ui.com/react/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -415,6 +717,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+          "api": "https://base-ui.com/react/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -426,6 +735,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -445,6 +761,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -455,6 +777,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -465,6 +793,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+          "api": "https://base-ui.com/react/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -476,6 +811,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -486,6 +828,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -496,6 +844,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+          "api": "https://base-ui.com/react/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -506,6 +861,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -516,6 +877,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+          "api": "https://base-ui.com/react/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -526,6 +894,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -536,6 +910,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -547,6 +928,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -557,6 +945,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+          "api": "https://base-ui.com/react/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -568,6 +963,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -578,6 +979,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -589,6 +996,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/direction",
+          "api": "https://base-ui.com/react/utils/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1467,6 +1880,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/base-maia/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1515,7 +1955,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1523,6 +1963,7 @@
         "button",
         "button-group",
         "card",
+        "chart",
         "checkbox",
         "combobox",
         "dropdown-menu",
@@ -1546,110 +1987,7 @@
       ],
       "files": [
         {
-          "path": "registry/base-maia/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/base-maia/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-maia/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-maia/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-maia/blocks/chatgpt.tsx",
+          "path": "registry/base-maia/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2554,7 +2892,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2566,7 +2904,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2578,7 +2916,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2590,7 +2928,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2602,7 +2940,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2617,7 +2955,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2632,6 +2970,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-maia/resizable.json b/apps/v4/public/r/styles/base-maia/resizable.json
index d117aaaac1..1523cf2f01 100644
--- a/apps/v4/public/r/styles/base-maia/resizable.json
+++ b/apps/v4/public/r/styles/base-maia/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/scroll-area-example.json b/apps/v4/public/r/styles/base-maia/scroll-area-example.json
index f4c2d829c7..a571a1575d 100644
--- a/apps/v4/public/r/styles/base-maia/scroll-area-example.json
+++ b/apps/v4/public/r/styles/base-maia/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-maia/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-maia/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/scroll-area.json b/apps/v4/public/r/styles/base-maia/scroll-area.json
index 838f632429..1efdf0ef6c 100644
--- a/apps/v4/public/r/styles/base-maia/scroll-area.json
+++ b/apps/v4/public/r/styles/base-maia/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+      "api": "https://base-ui.com/react/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/select.json b/apps/v4/public/r/styles/base-maia/select.json
index 20c7bc0e0d..1b8c19f3ef 100644
--- a/apps/v4/public/r/styles/base-maia/select.json
+++ b/apps/v4/public/r/styles/base-maia/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-4xl border px-3 py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"text-muted-foreground pointer-events-none size-4\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl shadow-2xl ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\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        \"bg-border/50 pointer-events-none -mx-1 my-1 h-px\",\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        \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center 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        \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center 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-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-4xl border border-input bg-input/30 px-3 py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *: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:hover:bg-input/50 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        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 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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(\"px-3 py-2.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-xl 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 my-1 h-px bg-border/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+      "api": "https://base-ui.com/react/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/separator-example.json b/apps/v4/public/r/styles/base-maia/separator-example.json
index 112e85f2f7..bfd0a43d42 100644
--- a/apps/v4/public/r/styles/base-maia/separator-example.json
+++ b/apps/v4/public/r/styles/base-maia/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/separator.json b/apps/v4/public/r/styles/base-maia/separator.json
index 3bd613c48e..f5e78431de 100644
--- a/apps/v4/public/r/styles/base-maia/separator.json
+++ b/apps/v4/public/r/styles/base-maia/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+      "api": "https://base-ui.com/react/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/sheet-example.json b/apps/v4/public/r/styles/base-maia/sheet-example.json
index 2453890ea5..28200d7265 100644
--- a/apps/v4/public/r/styles/base-maia/sheet-example.json
+++ b/apps/v4/public/r/styles/base-maia/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-maia/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-maia/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sheet.json b/apps/v4/public/r/styles/base-maia/sheet.json
index cf31ad52a1..e430f1bb2b 100644
--- a/apps/v4/public/r/styles/base-maia/sheet.json
+++ b/apps/v4/public/r/styles/base-maia/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-01.json b/apps/v4/public/r/styles/base-maia/sidebar-01.json
index 6e4ebec87b..6bd8ccfeed 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-01.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-02.json b/apps/v4/public/r/styles/base-maia/sidebar-02.json
index d025ef89bf..df1c6e0774 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-02.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-maia/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-maia/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-maia/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-maia/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-03.json b/apps/v4/public/r/styles/base-maia/sidebar-03.json
index a8c4b8ab14..bdd9e5c25b 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-03.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-04.json b/apps/v4/public/r/styles/base-maia/sidebar-04.json
index a72de61c67..e0381e98be 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-04.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-05.json b/apps/v4/public/r/styles/base-maia/sidebar-05.json
index e7e492306c..3a80a3c316 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-05.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-maia/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-maia/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-06.json b/apps/v4/public/r/styles/base-maia/sidebar-06.json
index 90b73fc9ef..e98e4afc6c 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-06.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-maia/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-maia/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-maia/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-maia/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { SidebarInput } from \"@/registry/base-maia/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { SidebarInput } from \"@/registry/base-maia/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-07.json b/apps/v4/public/r/styles/base-maia/sidebar-07.json
index 60e16f5491..39922538e2 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-07.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-08.json b/apps/v4/public/r/styles/base-maia/sidebar-08.json
index abd31e7043..57d200dee9 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-08.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-maia/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-maia/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-maia/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-maia/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-maia/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-maia/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-09.json b/apps/v4/public/r/styles/base-maia/sidebar-09.json
index 5f4d00c296..94906e63b2 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-09.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-09.json
@@ -16,18 +16,18 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-09/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground md:h-8 md:p-0\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0 data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-10.json b/apps/v4/public/r/styles/base-maia/sidebar-10.json
index 08d1dd45e1..99ded0d07a 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-10.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-maia/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-maia/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"data-open:bg-accent h-7 w-7\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"h-7 w-7 data-open:bg-accent\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-11.json b/apps/v4/public/r/styles/base-maia/sidebar-11.json
index b072c31e4f..9663d69c8d 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-11.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-12.json b/apps/v4/public/r/styles/base-maia/sidebar-12.json
index f5c15949e1..b8a6e310c1 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-12.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-maia/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-maia/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-maia/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-maia/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-13.json b/apps/v4/public/r/styles/base-maia/sidebar-13.json
index d4dd7136f9..a2a3723fa3 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-13.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-14.json b/apps/v4/public/r/styles/base-maia/sidebar-14.json
index 96306a651a..bdbb34e808 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-14.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-15.json b/apps/v4/public/r/styles/base-maia/sidebar-15.json
index be28dbce86..3e10723825 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-15.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/base-maia/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-maia/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/base-maia/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-maia/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-maia/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-maia/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-maia/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-maia/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"aria-expanded:bg-muted aria-expanded:text-foreground w-fit px-1.5\" />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"w-fit px-1.5 aria-expanded:bg-muted aria-expanded:text-foreground\" />\n            }\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-16.json b/apps/v4/public/r/styles/base-maia/sidebar-16.json
index 9d9700b8ae..b946bd0742 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-16.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-maia/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-maia/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-maia/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-maia/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-maia/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-maia/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-maia/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-maia/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-maia/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-maia/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-maia/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-maia/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-maia/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-maia/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { useSidebar } from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-maia/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { useSidebar } from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-example.json b/apps/v4/public/r/styles/base-maia/sidebar-example.json
index e32daf4474..d07892ad90 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-floating-example.json b/apps/v4/public/r/styles/base-maia/sidebar-floating-example.json
index 6545554d58..e060d050bf 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-maia/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-maia/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json b/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json
index 23de794f4a..72e3da50fd 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar-inset-example.json b/apps/v4/public/r/styles/base-maia/sidebar-inset-example.json
index 85489726af..70ee8c7155 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/sidebar.json b/apps/v4/public/r/styles/base-maia/sidebar.json
index c671b26018..c77e40e18d 100644
--- a/apps/v4/public/r/styles/base-maia/sidebar.json
+++ b/apps/v4/public/r/styles/base-maia/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-maia/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-maia/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-maia/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\n        \"flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]\",\n        className\n      )}\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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:var(--radius-xl)] 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          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"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-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-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,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-maia/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-maia/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-maia/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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-lg 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-xl 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(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\n        \"flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]\",\n        className\n      )}\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:var(--radius-xl)] 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-md px-2 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-md 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-1\", 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-lg 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-md 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-md 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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\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-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/signup-02.json b/apps/v4/public/r/styles/base-maia/signup-02.json
index d70580e201..ac09790e46 100644
--- a/apps/v4/public/r/styles/base-maia/signup-02.json
+++ b/apps/v4/public/r/styles/base-maia/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-maia/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-maia/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/signup-03.json b/apps/v4/public/r/styles/base-maia/signup-03.json
index 336c81d08d..73499410a6 100644
--- a/apps/v4/public/r/styles/base-maia/signup-03.json
+++ b/apps/v4/public/r/styles/base-maia/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-maia/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-maia/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-maia/signup-04.json b/apps/v4/public/r/styles/base-maia/signup-04.json
index d7b4fba792..8284da4410 100644
--- a/apps/v4/public/r/styles/base-maia/signup-04.json
+++ b/apps/v4/public/r/styles/base-maia/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-maia/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-maia/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-maia/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/signup-05.json b/apps/v4/public/r/styles/base-maia/signup-05.json
index 904dbdcdb0..54e83a4124 100644
--- a/apps/v4/public/r/styles/base-maia/signup-05.json
+++ b/apps/v4/public/r/styles/base-maia/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-maia/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-maia/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-maia/skeleton.json b/apps/v4/public/r/styles/base-maia/skeleton.json
index 33f6b9e31f..3001f9d26b 100644
--- a/apps/v4/public/r/styles/base-maia/skeleton.json
+++ b/apps/v4/public/r/styles/base-maia/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-xl\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-xl bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/slider-example.json b/apps/v4/public/r/styles/base-maia/slider-example.json
index 6776b8615b..c6b38d961f 100644
--- a/apps/v4/public/r/styles/base-maia/slider-example.json
+++ b/apps/v4/public/r/styles/base-maia/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/slider-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 { Label } from \"@/registry/base-maia/ui/label\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/slider.json b/apps/v4/public/r/styles/base-maia/slider.json
index 713678aa3e..08a43c3ac1 100644
--- a/apps/v4/public/r/styles/base-maia/slider.json
+++ b/apps/v4/public/r/styles/base-maia/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"bg-muted relative grow overflow-hidden rounded-4xl select-none data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-4xl border bg-white shadow-sm transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"relative grow overflow-hidden rounded-4xl bg-muted select-none data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"block size-4 shrink-0 rounded-4xl border border-primary bg-white shadow-sm ring-ring/50 transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+      "api": "https://base-ui.com/react/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/sonner.json b/apps/v4/public/r/styles/base-maia/sonner.json
index e8ce64d4b7..7210be4116 100644
--- a/apps/v4/public/r/styles/base-maia/sonner.json
+++ b/apps/v4/public/r/styles/base-maia/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/spinner.json b/apps/v4/public/r/styles/base-maia/spinner.json
index fcbcaacc66..bafb6a9fdc 100644
--- a/apps/v4/public/r/styles/base-maia/spinner.json
+++ b/apps/v4/public/r/styles/base-maia/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/style.json b/apps/v4/public/r/styles/base-maia/style.json
new file mode 100644
index 0000000000..a58f5ba309
--- /dev/null
+++ b/apps/v4/public/r/styles/base-maia/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/switch.json b/apps/v4/public/r/styles/base-maia/switch.json
index 9116f9c280..49ac396b68 100644
--- a/apps/v4/public/r/styles/base-maia/switch.json
+++ b/apps/v4/public/r/styles/base-maia/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+      "api": "https://base-ui.com/react/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/table.json b/apps/v4/public/r/styles/base-maia/table.json
index 9b3cb226e2..b076f5da2f 100644
--- a/apps/v4/public/r/styles/base-maia/table.json
+++ b/apps/v4/public/r/styles/base-maia/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/tabs-example.json b/apps/v4/public/r/styles/base-maia/tabs-example.json
index 53550d9860..ff3cf1f3de 100644
--- a/apps/v4/public/r/styles/base-maia/tabs-example.json
+++ b/apps/v4/public/r/styles/base-maia/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/tabs.json b/apps/v4/public/r/styles/base-maia/tabs.json
index 4175ed1547..e3a3f2feff 100644
--- a/apps/v4/public/r/styles/base-maia/tabs.json
+++ b/apps/v4/public/r/styles/base-maia/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"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-maia/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-4xl p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none\",\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-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+      "api": "https://base-ui.com/react/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/textarea.json b/apps/v4/public/r/styles/base-maia/textarea.json
index c3ae577bb7..dfea610b14 100644
--- a/apps/v4/public/r/styles/base-maia/textarea.json
+++ b/apps/v4/public/r/styles/base-maia/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-maia/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full resize-none rounded-xl border px-3 py-3 text-base transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full resize-none rounded-xl border border-input bg-input/30 px-3 py-3 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/toggle-group-example.json b/apps/v4/public/r/styles/base-maia/toggle-group-example.json
index 2f46382739..9fdebb200c 100644
--- a/apps/v4/public/r/styles/base-maia/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-maia/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-maia/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-maia/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/toggle-group.json b/apps/v4/public/r/styles/base-maia/toggle-group.json
index 16cd7fa345..e1041cd1c6 100644
--- a/apps/v4/public/r/styles/base-maia/toggle-group.json
+++ b/apps/v4/public/r/styles/base-maia/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-maia/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-maia/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:rounded-4xl\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"data-[state=on]:bg-muted shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-4xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-4xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-xl group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-maia/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-4xl data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-4xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-4xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-xl data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/toggle.json b/apps/v4/public/r/styles/base-maia/toggle.json
index cc4ae988c4..3d7ae85adc 100644
--- a/apps/v4/public/r/styles/base-maia/toggle.json
+++ b/apps/v4/public/r/styles/base-maia/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-4xl text-sm font-medium transition-colors [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent\",\n      },\n      size: {\n        default: \"h-9 min-w-9 rounded-[min(var(--radius-2xl),12px)] px-2.5\",\n        sm: \"h-8 min-w-8 px-3\",\n        lg: \"h-10 min-w-10 px-2.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-maia/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-4xl text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 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: \"h-9 min-w-9 rounded-[min(var(--radius-2xl),12px)] px-2.5\",\n        sm: \"h-8 min-w-8 px-3\",\n        lg: \"h-10 min-w-10 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/tooltip-example.json b/apps/v4/public/r/styles/base-maia/tooltip-example.json
index d9697ade59..b59d9876e7 100644
--- a/apps/v4/public/r/styles/base-maia/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-maia/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/tooltip-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 { Kbd } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "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 { Kbd } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/tooltip.json b/apps/v4/public/r/styles/base-maia/tooltip.json
index 278777ee7b..eecd5234bc 100644
--- a/apps/v4/public/r/styles/base-maia/tooltip.json
+++ b/apps/v4/public/r/styles/base-maia/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/base-maia/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-2xl bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-4xl data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:translate-x-[-1.5px] data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:translate-x-[1.5px] data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+      "api": "https://base-ui.com/react/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-maia/vercel.json b/apps/v4/public/r/styles/base-maia/vercel.json
deleted file mode 100644
index 7cddf93d45..0000000000
--- a/apps/v4/public/r/styles/base-maia/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-maia/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-maia/ui/alert\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Calendar } from \"@/registry/base-maia/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/base-maia/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/accordion-example.json b/apps/v4/public/r/styles/base-mira/accordion-example.json
index 29668076d6..315188b025 100644
--- a/apps/v4/public/r/styles/base-mira/accordion-example.json
+++ b/apps/v4/public/r/styles/base-mira/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-mira/ui/accordion\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-mira/ui/accordion\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/accordion.json b/apps/v4/public/r/styles/base-mira/accordion.json
index 073a2f4a9a..d732a7dcc6 100644
--- a/apps/v4/public/r/styles/base-mira/accordion.json
+++ b/apps/v4/public/r/styles/base-mira/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-mira/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(\n        \"flex w-full flex-col overflow-hidden rounded-md border\",\n        className\n      )}\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(\"data-open:bg-muted/50 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          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-2 text-left text-xs/relaxed font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden px-2 text-xs/relaxed\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-mira/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(\n        \"flex w-full flex-col overflow-hidden rounded-md border\",\n        className\n      )}\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 data-open:bg-muted/50\", 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 border border-transparent p-2 text-left text-xs/relaxed font-medium transition-all outline-none hover:underline 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 px-2 text-xs/relaxed data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+      "api": "https://base-ui.com/react/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/alert-dialog.json b/apps/v4/public/r/styles/base-mira/alert-dialog.json
index 08ec98919e..092065c648 100644
--- a/apps/v4/public/r/styles/base-mira/alert-dialog.json
+++ b/apps/v4/public/r/styles/base-mira/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-8 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-8 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/alert.json b/apps/v4/public/r/styles/base-mira/alert.json
index de7d2d9870..47548fb7db 100644
--- a/apps/v4/public/r/styles/base-mira/alert.json
+++ b/apps/v4/public/r/styles/base-mira/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-1.5 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-1.5 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/aspect-ratio-example.json b/apps/v4/public/r/styles/base-mira/aspect-ratio-example.json
index a972663313..57e1e592f6 100644
--- a/apps/v4/public/r/styles/base-mira/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/base-mira/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { AspectRatio } from \"@/registry/base-mira/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { AspectRatio } from \"@/registry/base-mira/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/aspect-ratio.json b/apps/v4/public/r/styles/base-mira/aspect-ratio.json
index aa034019bf..2eb609a5ba 100644
--- a/apps/v4/public/r/styles/base-mira/aspect-ratio.json
+++ b/apps/v4/public/r/styles/base-mira/aspect-ratio.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/avatar.json b/apps/v4/public/r/styles/base-mira/avatar.json
index 08fcf40797..7e298b625a 100644
--- a/apps/v4/public/r/styles/base-mira/avatar.json
+++ b/apps/v4/public/r/styles/base-mira/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-xs/relaxed ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs/relaxed text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+      "api": "https://base-ui.com/react/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/badge.json b/apps/v4/public/r/styles/base-mira/badge.json
index 1eec3ac468..eda6428956 100644
--- a/apps/v4/public/r/styles/base-mira/badge.json
+++ b/apps/v4/public/r/styles/base-mira/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-2.5!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border bg-input/20 text-foreground dark:bg-input/30 [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/breadcrumb.json b/apps/v4/public/r/styles/base-mira/breadcrumb.json
index 04ff923bb5..6b72f62606 100644
--- a/apps/v4/public/r/styles/base-mira/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-mira/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs/relaxed wrap-break-word\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-4 items-center justify-center [&>svg]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-xs/relaxed wrap-break-word text-muted-foreground\",\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\", 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-4 items-center justify-center [&>svg]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/button-group.json b/apps/v4/public/r/styles/base-mira/button-group.json
index 09804bfce3..86bcec60e5 100644
--- a/apps/v4/public/r/styles/base-mira/button-group.json
+++ b/apps/v4/public/r/styles/base-mira/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/button-group.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-md border px-2.5 text-xs/relaxed font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-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-mira/lib/utils\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[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-b-md! [&>[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 rounded-md border bg-muted px-2.5 text-xs/relaxed font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/button.json b/apps/v4/public/r/styles/base-mira/button.json
index a401f81013..24785cb112 100644
--- a/apps/v4/public/r/styles/base-mira/button.json
+++ b/apps/v4/public/r/styles/base-mira/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/button.tsx",
-      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n        sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n        icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n        \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 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 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark: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-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n        sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n        icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n        \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/calendar-example.json b/apps/v4/public/r/styles/base-mira/calendar-example.json
index 8c5e32540c..a4263bb276 100644
--- a/apps/v4/public/r/styles/base-mira/calendar-example.json
+++ b/apps/v4/public/r/styles/base-mira/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-mira/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-mira/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/calendar.json b/apps/v4/public/r/styles/base-mira/calendar.json
index b0d8cfb00c..6d7680847a 100644
--- a/apps/v4/public/r/styles/base-mira/calendar.json
+++ b/apps/v4/public/r/styles/base-mira/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/card-example.json b/apps/v4/public/r/styles/base-mira/card-example.json
index ec9f000060..7f8672ce50 100644
--- a/apps/v4/public/r/styles/base-mira/card-example.json
+++ b/apps/v4/public/r/styles/base-mira/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/card.json b/apps/v4/public/r/styles/base-mira/card.json
index 4615493381..f087adbdf9 100644
--- a/apps/v4/public/r/styles/base-mira/card.json
+++ b/apps/v4/public/r/styles/base-mira/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-lg py-4 text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-4 overflow-hidden rounded-lg bg-card py-4 text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/carousel.json b/apps/v4/public/r/styles/base-mira/carousel.json
index af0de043c2..f88f94f7b5 100644
--- a/apps/v4/public/r/styles/base-mira/carousel.json
+++ b/apps/v4/public/r/styles/base-mira/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/chart-example.json b/apps/v4/public/r/styles/base-mira/chart-example.json
index 1bfb440396..95169950c6 100644
--- a/apps/v4/public/r/styles/base-mira/chart-example.json
+++ b/apps/v4/public/r/styles/base-mira/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/chart.json b/apps/v4/public/r/styles/base-mira/chart.json
index 4dcb3d9769..8531569426 100644
--- a/apps/v4/public/r/styles/base-mira/chart.json
+++ b/apps/v4/public/r/styles/base-mira/chart.json
@@ -10,9 +10,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs/relaxed shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs/relaxed shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/chatgpt.json b/apps/v4/public/r/styles/base-mira/chatgpt.json
deleted file mode 100644
index 3adfd3c921..0000000000
--- a/apps/v4/public/r/styles/base-mira/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-mira/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-mira/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { Kbd } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                      remixicon=\"RiAttachmentLine\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                      remixicon=\"RiMagicLine\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                            remixicon=\"RiHand\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                            remixicon=\"RiBookOpenLine\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                            remixicon=\"RiGlobeLine\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                            remixicon=\"RiPencilLine\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                  remixicon=\"RiMicLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        remixicon=\"RiFolderLine\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/checkbox.json b/apps/v4/public/r/styles/base-mira/checkbox.json
index 2d357083bc..4a3a0cb827 100644
--- a/apps/v4/public/r/styles/base-mira/checkbox.json
+++ b/apps/v4/public/r/styles/base-mira/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+      "api": "https://base-ui.com/react/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/collapsible-example.json b/apps/v4/public/r/styles/base-mira/collapsible-example.json
index f0ee4af1a2..c5fc67f285 100644
--- a/apps/v4/public/r/styles/base-mira/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-mira/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/collapsible.json b/apps/v4/public/r/styles/base-mira/collapsible.json
index 75d2a3c835..1c57fbf703 100644
--- a/apps/v4/public/r/styles/base-mira/collapsible.json
+++ b/apps/v4/public/r/styles/base-mira/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+      "api": "https://base-ui.com/react/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/combobox-example.json b/apps/v4/public/r/styles/base-mira/combobox-example.json
index b0036c78f3..a720e345e8 100644
--- a/apps/v4/public/r/styles/base-mira/combobox-example.json
+++ b/apps/v4/public/r/styles/base-mira/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-mira/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-mira/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/combobox.json b/apps/v4/public/r/styles/base-mira/combobox.json
index b9b16a93dd..de6321112d 100644
--- a/apps/v4/public/r/styles/base-mira/combobox.json
+++ b/apps/v4/public/r/styles/base-mira/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-3.5\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-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 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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed 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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-2 has-aria-invalid:ring-2 has-data-[slot=combobox-chip]:px-1\",\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-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-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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-lg 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:bg-input/20 *:data-[slot=input-group]:shadow-none dark:bg-popover 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 overflow-y-auto overscroll-contain p-1 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 min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed 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 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-xs/relaxed 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 my-1 h-px bg-border/50\", 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-7 flex-wrap items-center gap-1 rounded-md border border-input bg-input/20 bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 has-aria-invalid:border-destructive has-aria-invalid:ring-2 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] bg-muted-foreground/10 px-1.5 text-xs/relaxed font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/command.json b/apps/v4/public/r/styles/base-mira/command.json
index c39208a52b..0fc46d7137 100644
--- a/apps/v4/public/r/styles/base-mira/command.json
+++ b/apps/v4/public/r/styles/base-mira/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-3.5 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none in-data-[slot=dialog-content]:rounded-md data-[disabled=true]:pointer-events-none data-[disabled=true]: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      <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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\",\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-mira/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-xl bg-popover p-1 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! bg-input/20 dark:bg-input/30\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-3.5 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\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(\"-mx-1 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 min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none in-data-[slot=dialog-content]:rounded-md 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-[0.625rem] tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/component-example.json b/apps/v4/public/r/styles/base-mira/component-example.json
index d08de08d0e..b3d7108945 100644
--- a/apps/v4/public/r/styles/base-mira/component-example.json
+++ b/apps/v4/public/r/styles/base-mira/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-mira/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-mira/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/context-menu.json b/apps/v4/public/r/styles/base-mira/context-menu.json
index 37c5bad6bc..8362ec07d0 100644
--- a/apps/v4/public/r/styles/base-mira/context-menu.json
+++ b/apps/v4/public/r/styles/base-mira/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/context-menu-item relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none data-inset:pl-7.5 [&_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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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 flex items-center justify-center\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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 flex items-center justify-center\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\",\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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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-2 py-1.5 text-xs text-muted-foreground data-inset:pl-7.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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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 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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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 flex items-center justify-center\">\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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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 flex items-center justify-center\">\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 my-1 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-[0.625rem] tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/dashboard-01.json b/apps/v4/public/r/styles/base-mira/dashboard-01.json
index 355c9ee1ac..e29e1bf47a 100644
--- a/apps/v4/public/r/styles/base-mira/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-mira/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-mira/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-mira/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"data-open:bg-muted text-muted-foreground flex size-8\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-mira/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -67,7 +67,7 @@
     },
     {
       "path": "registry/base-mira/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/base-mira/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"text-foreground/70 truncate text-xs\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"text-muted-foreground truncate text-xs\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs text-foreground/70\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs text-muted-foreground\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-mira/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-mira/demo.json b/apps/v4/public/r/styles/base-mira/demo.json
new file mode 100644
index 0000000000..d1abea32a3
--- /dev/null
+++ b/apps/v4/public/r/styles/base-mira/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/base-mira/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/dialog-example.json b/apps/v4/public/r/styles/base-mira/dialog-example.json
index 86916bbc6c..88360cba00 100644
--- a/apps/v4/public/r/styles/base-mira/dialog-example.json
+++ b/apps/v4/public/r/styles/base-mira/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { Kbd } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { Kbd } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dialog.json b/apps/v4/public/r/styles/base-mira/dialog.json
index c8534eb595..4181d9f8f0 100644
--- a/apps/v4/public/r/styles/base-mira/dialog.json
+++ b/apps/v4/public/r/styles/base-mira/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-xs/relaxed ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/direction.json b/apps/v4/public/r/styles/base-mira/direction.json
index 4a4a828ff8..63ffb32392 100644
--- a/apps/v4/public/r/styles/base-mira/direction.json
+++ b/apps/v4/public/r/styles/base-mira/direction.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/direction",
+      "api": "https://base-ui.com/react/utils/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/drawer-example.json b/apps/v4/public/r/styles/base-mira/drawer-example.json
index c4f37a0061..7f3737ae9e 100644
--- a/apps/v4/public/r/styles/base-mira/drawer-example.json
+++ b/apps/v4/public/r/styles/base-mira/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/drawer-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  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/drawer.json b/apps/v4/public/r/styles/base-mira/drawer.json
index 7f72ecc93c..a655523868 100644
--- a/apps/v4/public/r/styles/base-mira/drawer.json
+++ b/apps/v4/public/r/styles/base-mira/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background before:border-border group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border before:border-border before:bg-background data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json b/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json
index 39863c15e2..c71ca51c1b 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=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dropdown-menu.json b/apps/v4/public/r/styles/base-mira/dropdown-menu.json
index 89980e9579..5dbe850399 100644
--- a/apps/v4/public/r/styles/base-mira/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-mira/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none data-inset:pl-7.5 [&_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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\",\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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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-2 py-1.5 text-xs text-muted-foreground data-inset:pl-7.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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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        \"w-auto min-w-32 rounded-lg bg-popover p-1 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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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 my-1 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-[0.625rem] tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/elevenlabs.json b/apps/v4/public/r/styles/base-mira/elevenlabs.json
deleted file mode 100644
index 4bf4e6c9b8..0000000000
--- a/apps/v4/public/r/styles/base-mira/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/base-mira/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/empty.json b/apps/v4/public/r/styles/base-mira/empty.json
index 572030c918..66a5fbf567 100644
--- a/apps/v4/public/r/styles/base-mira/empty.json
+++ b/apps/v4/public/r/styles/base-mira/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/example.json b/apps/v4/public/r/styles/base-mira/example.json
index 3ba342b8f0..afb2faf9b1 100644
--- a/apps/v4/public/r/styles/base-mira/example.json
+++ b/apps/v4/public/r/styles/base-mira/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-mira/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/field.json b/apps/v4/public/r/styles/base-mira/field.json
index 060d4aa69c..8f4c840049 100644
--- a/apps/v4/public/r/styles/base-mira/field.json
+++ b/apps/v4/public/r/styles/base-mira/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-xs/relaxed leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-xs/relaxed font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs/relaxed font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/font-dm-sans.json b/apps/v4/public/r/styles/base-mira/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/base-mira/font-dm-sans.json
+++ b/apps/v4/public/r/styles/base-mira/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-mira/font-jetbrains-mono.json b/apps/v4/public/r/styles/base-mira/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/base-mira/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/base-mira/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/base-mira/font-geist-sans.json b/apps/v4/public/r/styles/base-mira/font-lora.json
similarity index 52%
rename from apps/v4/public/r/styles/base-mira/font-geist-sans.json
rename to apps/v4/public/r/styles/base-mira/font-lora.json
index a60a347fd3..cacd01a3f0 100644
--- a/apps/v4/public/r/styles/base-mira/font-geist-sans.json
+++ b/apps/v4/public/r/styles/base-mira/font-lora.json
@@ -1,13 +1,13 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
+  "name": "font-lora",
+  "title": "Lora",
   "type": "registry:font",
   "font": {
-    "family": "'Geist Variable', sans-serif",
+    "family": "'Lora Variable', serif",
     "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
+    "import": "Lora",
+    "variable": "--font-serif",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/base-mira/font-merriweather.json b/apps/v4/public/r/styles/base-mira/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-mira/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/font-noto-serif.json b/apps/v4/public/r/styles/base-mira/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-mira/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/font-outfit.json b/apps/v4/public/r/styles/base-mira/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/base-mira/font-outfit.json
+++ b/apps/v4/public/r/styles/base-mira/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-mira/font-playfair-display.json b/apps/v4/public/r/styles/base-mira/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/base-mira/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/font-public-sans.json b/apps/v4/public/r/styles/base-mira/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/base-mira/font-public-sans.json
+++ b/apps/v4/public/r/styles/base-mira/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-mira/font-raleway.json b/apps/v4/public/r/styles/base-mira/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/base-mira/font-raleway.json
+++ b/apps/v4/public/r/styles/base-mira/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-mira/font-roboto-slab.json b/apps/v4/public/r/styles/base-mira/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-mira/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/font-roboto.json b/apps/v4/public/r/styles/base-mira/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/base-mira/font-roboto.json
+++ b/apps/v4/public/r/styles/base-mira/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-mira/github.json b/apps/v4/public/r/styles/base-mira/github.json
deleted file mode 100644
index 822a0cb95e..0000000000
--- a/apps/v4/public/r/styles/base-mira/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-mira/blocks/github.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 { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-mira/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-mira/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-mira/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { Kbd } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { Spinner } from \"@/registry/base-mira/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/hover-card-example.json b/apps/v4/public/r/styles/base-mira/hover-card-example.json
index 9d4eb54533..9197d8a9e7 100644
--- a/apps/v4/public/r/styles/base-mira/hover-card-example.json
+++ b/apps/v4/public/r/styles/base-mira/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-mira/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/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  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-mira/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/hover-card.json b/apps/v4/public/r/styles/base-mira/hover-card.json
index 1a650b5d5d..5d218ad05e 100644
--- a/apps/v4/public/r/styles/base-mira/hover-card.json
+++ b/apps/v4/public/r/styles/base-mira/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) rounded-lg p-2.5 text-xs/relaxed shadow-md ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"z-50 w-72 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-xs/relaxed text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+      "api": "https://base-ui.com/react/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/index.json b/apps/v4/public/r/styles/base-mira/index.json
new file mode 100644
index 0000000000..94f1c90de2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-mira/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/input-group-example.json b/apps/v4/public/r/styles/base-mira/input-group-example.json
index 12e33d719e..e1a7e263e3 100644
--- a/apps/v4/public/r/styles/base-mira/input-group-example.json
+++ b/apps/v4/public/r/styles/base-mira/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-mira/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Spinner } from \"@/registry/base-mira/ui/spinner\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-mira/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Spinner } from \"@/registry/base-mira/ui/spinner\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-group.json b/apps/v4/public/r/styles/base-mira/input-group.json
index 44c02f31b6..2b0cac513e 100644
--- a/apps/v4/public/r/styles/base-mira/input-group.json
+++ b/apps/v4/public/r/styles/base-mira/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 group/input-group relative flex h-7 w-full min-w-0 items-center rounded-md border transition-colors 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-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-2 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-xs/relaxed [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none 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-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-7 w-full min-w-0 items-center rounded-md border border-input bg-input/20 transition-colors 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-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-1 py-2 text-xs/relaxed font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\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-md text-xs/relaxed shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"gap-1\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-7 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-xs/relaxed 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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/input-otp-example.json b/apps/v4/public/r/styles/base-mira/input-otp-example.json
index ff235e38fd..3757eeaf2d 100644
--- a/apps/v4/public/r/styles/base-mira/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-mira/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-mira/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-mira/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-otp.json b/apps/v4/public/r/styles/base-mira/input-otp.json
index e42c5c9167..f8b69a85ff 100644
--- a/apps/v4/public/r/styles/base-mira/input-otp.json
+++ b/apps/v4/public/r/styles/base-mira/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-md has-aria-invalid:ring-2\",\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        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-7 items-center justify-center border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-2\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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 rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-2 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-7 items-center justify-center border-y border-r border-input bg-input/20 text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/input.json b/apps/v4/public/r/styles/base-mira/input.json
index b3f83928f7..cb27aef6be 100644
--- a/apps/v4/public/r/styles/base-mira/input.json
+++ b/apps/v4/public/r/styles/base-mira/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/input.tsx",
-      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-7 w-full min-w-0 rounded-md border px-2 py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium focus-visible:ring-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 md:text-xs/relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-7 w-full min-w-0 rounded-md border border-input bg-input/20 px-2 py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/item-example.json b/apps/v4/public/r/styles/base-mira/item-example.json
index 30400bf70e..5c6346da92 100644
--- a/apps/v4/public/r/styles/base-mira/item-example.json
+++ b/apps/v4/public/r/styles/base-mira/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/item.json b/apps/v4/public/r/styles/base-mira/item.json
index 3f39e91999..d635944223 100644
--- a/apps/v4/public/r/styles/base-mira/item.json
+++ b/apps/v4/public/r/styles/base-mira/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-xs/relaxed font-normal [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-md border text-xs/relaxed transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-xs/relaxed font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/kbd.json b/apps/v4/public/r/styles/base-mira/kbd.json
index ac197887fd..155f3158d6 100644
--- a/apps/v4/public/r/styles/base-mira/kbd.json
+++ b/apps/v4/public/r/styles/base-mira/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-[0.625rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs bg-muted px-1 font-sans text-[0.625rem] font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/label.json b/apps/v4/public/r/styles/base-mira/label.json
index a9dc305911..718b329b64 100644
--- a/apps/v4/public/r/styles/base-mira/label.json
+++ b/apps/v4/public/r/styles/base-mira/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+      "api": "https://base-ui.com/react/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/login-02.json b/apps/v4/public/r/styles/base-mira/login-02.json
index 685815adf7..e5b92ea6fe 100644
--- a/apps/v4/public/r/styles/base-mira/login-02.json
+++ b/apps/v4/public/r/styles/base-mira/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-mira/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-mira/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/login-03.json b/apps/v4/public/r/styles/base-mira/login-03.json
index 57e4a109a5..82d65014b0 100644
--- a/apps/v4/public/r/styles/base-mira/login-03.json
+++ b/apps/v4/public/r/styles/base-mira/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-mira/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-mira/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-mira/login-04.json b/apps/v4/public/r/styles/base-mira/login-04.json
index 2ca7b3f155..26a19ce70d 100644
--- a/apps/v4/public/r/styles/base-mira/login-04.json
+++ b/apps/v4/public/r/styles/base-mira/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-mira/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-mira/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/login-05.json b/apps/v4/public/r/styles/base-mira/login-05.json
index dee47cf592..1cfb2015f7 100644
--- a/apps/v4/public/r/styles/base-mira/login-05.json
+++ b/apps/v4/public/r/styles/base-mira/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-mira/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-mira/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-mira/menubar.json b/apps/v4/public/r/styles/base-mira/menubar.json
index f13637b760..3108b1453f 100644
--- a/apps/v4/public/r/styles/base-mira/menubar.json
+++ b/apps/v4/public/r/styles/base-mira/menubar.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-9 items-center rounded-lg 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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-disabled:opacity-50 data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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-2 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        \"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100\",\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-mira/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center rounded-lg border bg-background 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-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed 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 min-w-32 rounded-lg bg-popover p-1 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 min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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-2 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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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-2 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-2 py-1.5 text-xs text-muted-foreground data-inset:pl-7.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-[0.625rem] 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        \"min-h-7 gap-2 rounded-md px-2 py-1 text-xs focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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        \"min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+      "api": "https://base-ui.com/react/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/native-select.json b/apps/v4/public/r/styles/base-mira/native-select.json
index 5a348e634c..fe40afe04d 100644
--- a/apps/v4/public/r/styles/base-mira/native-select.json
+++ b/apps/v4/public/r/styles/base-mira/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors outline-none select-none focus-visible:ring-2 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-2 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem]\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-1.5 size-3.5 -translate-y-1/2 select-none group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))]\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-7 w-full min-w-0 appearance-none rounded-md border border-input bg-input/20 py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-1.5 size-3.5 -translate-y-1/2 text-muted-foreground select-none group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))]\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/navigation-menu-example.json b/apps/v4/public/r/styles/base-mira/navigation-menu-example.json
index eec2cdbf8e..5e07639a91 100644
--- a/apps/v4/public/r/styles/base-mira/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-mira/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-mira/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-mira/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/navigation-menu.json b/apps/v4/public/r/styles/base-mira/navigation-menu.json
index 637ebad063..3e9d2efc34 100644
--- a/apps/v4/public/r/styles/base-mira/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-mira/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-2 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\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=\"bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-xl shadow ring-1 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        \"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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-md bg-background px-2.5 py-1.5 text-xs/relaxed 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-1.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl 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-xl bg-popover text-popover-foreground shadow 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-lg p-2 text-xs/relaxed transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 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-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/otp-01.json b/apps/v4/public/r/styles/base-mira/otp-01.json
deleted file mode 100644
index bae5c015a3..0000000000
--- a/apps/v4/public/r/styles/base-mira/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-mira/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-mira/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-mira/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-mira/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/otp-02.json b/apps/v4/public/r/styles/base-mira/otp-02.json
deleted file mode 100644
index 33ade436b4..0000000000
--- a/apps/v4/public/r/styles/base-mira/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-mira/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-mira/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-mira/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-mira/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/otp-03.json b/apps/v4/public/r/styles/base-mira/otp-03.json
deleted file mode 100644
index d84d58a763..0000000000
--- a/apps/v4/public/r/styles/base-mira/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-mira/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/base-mira/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-mira/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-mira/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/otp-04.json b/apps/v4/public/r/styles/base-mira/otp-04.json
deleted file mode 100644
index 0d8b4adea2..0000000000
--- a/apps/v4/public/r/styles/base-mira/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-mira/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-mira/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-mira/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-mira/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/otp-05.json b/apps/v4/public/r/styles/base-mira/otp-05.json
deleted file mode 100644
index 6fdb1442ff..0000000000
--- a/apps/v4/public/r/styles/base-mira/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-mira/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-mira/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-mira/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-mira/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/pagination.json b/apps/v4/public/r/styles/base-mira/pagination.json
index 0479e4e81f..265acb10bb 100644
--- a/apps/v4/public/r/styles/base-mira/pagination.json
+++ b/apps/v4/public/r/styles/base-mira/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/popover.json b/apps/v4/public/r/styles/base-mira/popover.json
index 4b1c5145f6..e4e27d6360 100644
--- a/apps/v4/public/r/styles/base-mira/popover.json
+++ b/apps/v4/public/r/styles/base-mira/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-lg p-2.5 text-xs shadow-md ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-lg bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+      "api": "https://base-ui.com/react/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/preview.json b/apps/v4/public/r/styles/base-mira/preview.json
index b7fd8ea4c4..93fdac0522 100644
--- a/apps/v4/public/r/styles/base-mira/preview.json
+++ b/apps/v4/public/r/styles/base-mira/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -9,6 +9,7 @@
     "button",
     "button-group",
     "card",
+    "chart",
     "checkbox",
     "combobox",
     "dropdown-menu",
@@ -32,8 +33,8 @@
   ],
   "files": [
     {
-      "path": "registry/base-mira/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-mira/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-mira/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-mira/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-mira/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\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 { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-mira/ui/sheet\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Spinner } from \"@/registry/base-mira/ui/spinner\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                      remixicon=\"RiMicLine\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.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=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n              remixicon=\"RiShoppingBagLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/base-mira/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-mira/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-mira/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-mira/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-mira/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-mira/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-mira/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-mira/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-mira/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-mira/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-mira/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-mira/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-mira/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-mira/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-mira/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-mira/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-mira/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-mira/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-mira/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-mira/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-mira/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-mira/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-mira/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-mira/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-mira/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-mira/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-mira/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-mira/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-mira/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-mira/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-mira/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-mira/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-mira/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/progress-example.json b/apps/v4/public/r/styles/base-mira/progress-example.json
index 4ac3519990..8c968de119 100644
--- a/apps/v4/public/r/styles/base-mira/progress-example.json
+++ b/apps/v4/public/r/styles/base-mira/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/progress-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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-mira/ui/progress\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-mira/ui/progress\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/progress.json b/apps/v4/public/r/styles/base-mira/progress.json
index 148c3cb9d3..f7464363f3 100644
--- a/apps/v4/public/r/styles/base-mira/progress.json
+++ b/apps/v4/public/r/styles/base-mira/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-md\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"bg-primary h-full transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-xs/relaxed font-medium\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs/relaxed tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
+      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"relative flex h-1 w-full items-center overflow-x-hidden rounded-md bg-muted\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"h-full bg-primary transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-xs/relaxed font-medium\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"ml-auto text-xs/relaxed text-muted-foreground tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+      "api": "https://base-ui.com/react/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/radio-group.json b/apps/v4/public/r/styles/base-mira/radio-group.json
index 3c9215c1f7..c121ff0248 100644
--- a/apps/v4/public/r/styles/base-mira/radio-group.json
+++ b/apps/v4/public/r/styles/base-mira/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+      "api": "https://base-ui.com/react/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/registry.json b/apps/v4/public/r/styles/base-mira/registry.json
index 0f0a01ae35..4a5be7c122 100644
--- a/apps/v4/public/r/styles/base-mira/registry.json
+++ b/apps/v4/public/r/styles/base-mira/registry.json
@@ -2,6 +2,56 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +60,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+          "api": "https://base-ui.com/react/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +77,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +94,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +111,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +127,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+          "api": "https://base-ui.com/react/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +144,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +160,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +176,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +193,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +211,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +228,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +246,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -138,6 +265,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -148,6 +281,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+          "api": "https://base-ui.com/react/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -158,6 +298,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+          "api": "https://base-ui.com/react/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -170,6 +317,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -182,6 +336,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -192,6 +353,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -203,6 +371,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -214,6 +389,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -224,6 +406,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -234,6 +423,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -245,6 +440,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -259,6 +460,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+          "api": "https://base-ui.com/react/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -269,6 +477,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -280,6 +494,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -291,6 +511,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -302,6 +529,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -312,6 +545,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+          "api": "https://base-ui.com/react/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -323,6 +563,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+          "api": "https://base-ui.com/react/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -333,6 +580,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -344,6 +598,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -354,6 +614,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+          "api": "https://base-ui.com/react/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -364,6 +631,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+          "api": "https://base-ui.com/react/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -374,6 +648,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+          "api": "https://base-ui.com/react/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -385,6 +666,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -395,6 +683,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+          "api": "https://base-ui.com/react/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -405,6 +700,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+          "api": "https://base-ui.com/react/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -415,6 +717,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+          "api": "https://base-ui.com/react/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -426,6 +735,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -445,6 +761,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -455,6 +777,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -465,6 +793,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+          "api": "https://base-ui.com/react/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -476,6 +811,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -486,6 +828,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -496,6 +844,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+          "api": "https://base-ui.com/react/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -506,6 +861,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -516,6 +877,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+          "api": "https://base-ui.com/react/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -526,6 +894,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -536,6 +910,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -547,6 +928,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -557,6 +945,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+          "api": "https://base-ui.com/react/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -568,6 +963,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -578,6 +979,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -589,6 +996,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/direction",
+          "api": "https://base-ui.com/react/utils/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1467,6 +1880,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/base-mira/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1515,7 +1955,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1523,6 +1963,7 @@
         "button",
         "button-group",
         "card",
+        "chart",
         "checkbox",
         "combobox",
         "dropdown-menu",
@@ -1546,110 +1987,7 @@
       ],
       "files": [
         {
-          "path": "registry/base-mira/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/base-mira/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-mira/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-mira/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-mira/blocks/chatgpt.tsx",
+          "path": "registry/base-mira/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2554,7 +2892,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2566,7 +2904,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2578,7 +2916,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2590,7 +2928,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2602,7 +2940,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2617,7 +2955,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2632,6 +2970,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-mira/resizable.json b/apps/v4/public/r/styles/base-mira/resizable.json
index aaf4182656..6f0888b97c 100644
--- a/apps/v4/public/r/styles/base-mira/resizable.json
+++ b/apps/v4/public/r/styles/base-mira/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/scroll-area-example.json b/apps/v4/public/r/styles/base-mira/scroll-area-example.json
index daf72d1cb3..a0af54affe 100644
--- a/apps/v4/public/r/styles/base-mira/scroll-area-example.json
+++ b/apps/v4/public/r/styles/base-mira/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-mira/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-mira/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/scroll-area.json b/apps/v4/public/r/styles/base-mira/scroll-area.json
index 9a4e09d8a3..583192c5f0 100644
--- a/apps/v4/public/r/styles/base-mira/scroll-area.json
+++ b/apps/v4/public/r/styles/base-mira/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+      "api": "https://base-ui.com/react/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/select.json b/apps/v4/public/r/styles/base-mira/select.json
index c7b7326a0d..7f4fdec999 100644
--- a/apps/v4/public/r/styles/base-mira/select.json
+++ b/apps/v4/public/r/styles/base-mira/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-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=\"text-muted-foreground pointer-events-none size-3.5\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-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 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        \"bg-border/50 pointer-events-none -mx-1 my-1 h-px\",\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        \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center 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        \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center 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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-input/20 px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-7 data-[size=sm]:h-6 *: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:bg-input/30 dark:hover:bg-input/50 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        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 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed 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 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 my-1 h-px bg-border/50\",\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"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+      "api": "https://base-ui.com/react/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/separator-example.json b/apps/v4/public/r/styles/base-mira/separator-example.json
index a37a5a8306..a29cdb0470 100644
--- a/apps/v4/public/r/styles/base-mira/separator-example.json
+++ b/apps/v4/public/r/styles/base-mira/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/separator.json b/apps/v4/public/r/styles/base-mira/separator.json
index 0a4778eae1..fa7721521b 100644
--- a/apps/v4/public/r/styles/base-mira/separator.json
+++ b/apps/v4/public/r/styles/base-mira/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+      "api": "https://base-ui.com/react/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/sheet-example.json b/apps/v4/public/r/styles/base-mira/sheet-example.json
index 556fc6e3ee..5acca5a8f2 100644
--- a/apps/v4/public/r/styles/base-mira/sheet-example.json
+++ b/apps/v4/public/r/styles/base-mira/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-mira/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-mira/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sheet.json b/apps/v4/public/r/styles/base-mira/sheet.json
index 16f10c0dae..9bd22815e9 100644
--- a/apps/v4/public/r/styles/base-mira/sheet.json
+++ b/apps/v4/public/r/styles/base-mira/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col bg-background bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-01.json b/apps/v4/public/r/styles/base-mira/sidebar-01.json
index ef8499c5b7..b7afcec749 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-01.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-02.json b/apps/v4/public/r/styles/base-mira/sidebar-02.json
index 755e532dbb..09adc411de 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-02.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-mira/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-mira/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-mira/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-mira/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-03.json b/apps/v4/public/r/styles/base-mira/sidebar-03.json
index 51661c176f..ba72046cef 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-03.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-04.json b/apps/v4/public/r/styles/base-mira/sidebar-04.json
index d948d6611e..ac6de6fdb8 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-04.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-05.json b/apps/v4/public/r/styles/base-mira/sidebar-05.json
index f7787917b1..322cc9bb9b 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-05.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-mira/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-mira/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-06.json b/apps/v4/public/r/styles/base-mira/sidebar-06.json
index b711454e09..e3a537dfe3 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-06.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-mira/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-mira/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-mira/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-mira/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { SidebarInput } from \"@/registry/base-mira/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { SidebarInput } from \"@/registry/base-mira/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-07.json b/apps/v4/public/r/styles/base-mira/sidebar-07.json
index e3d9f77b37..e326161b9b 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-07.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-08.json b/apps/v4/public/r/styles/base-mira/sidebar-08.json
index fee333cf20..5ec81c5666 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-08.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-09.json b/apps/v4/public/r/styles/base-mira/sidebar-09.json
index 8a7fa913fa..c325a5692b 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-09.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-09.json
@@ -16,18 +16,18 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-09/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground md:h-8 md:p-0\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0 data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-10.json b/apps/v4/public/r/styles/base-mira/sidebar-10.json
index 1230b2b036..4359a2a006 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-10.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-mira/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-mira/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"data-open:bg-accent h-7 w-7\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"h-7 w-7 data-open:bg-accent\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-11.json b/apps/v4/public/r/styles/base-mira/sidebar-11.json
index a2d5bb2ede..366c236060 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-11.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-12.json b/apps/v4/public/r/styles/base-mira/sidebar-12.json
index 7ca92837e0..5652be6e87 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-12.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-mira/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-mira/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-mira/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-mira/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-13.json b/apps/v4/public/r/styles/base-mira/sidebar-13.json
index a6403c51a9..9f6235aeef 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-13.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-14.json b/apps/v4/public/r/styles/base-mira/sidebar-14.json
index 0083e6235e..cdb5a37d9e 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-14.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-15.json b/apps/v4/public/r/styles/base-mira/sidebar-15.json
index f00bf5e2f0..fa48b68721 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-15.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/base-mira/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-mira/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/base-mira/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-mira/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-mira/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-mira/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-mira/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-mira/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"aria-expanded:bg-muted aria-expanded:text-foreground w-fit px-1.5\" />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"w-fit px-1.5 aria-expanded:bg-muted aria-expanded:text-foreground\" />\n            }\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-16.json b/apps/v4/public/r/styles/base-mira/sidebar-16.json
index 70f5ca9c5e..e565f46e51 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-16.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-mira/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-mira/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-mira/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-mira/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-mira/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-mira/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-mira/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-mira/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-mira/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-mira/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-mira/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-mira/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-mira/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-mira/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { useSidebar } from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-mira/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { useSidebar } from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-example.json b/apps/v4/public/r/styles/base-mira/sidebar-example.json
index 0dbedef096..78a6ed113b 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-floating-example.json b/apps/v4/public/r/styles/base-mira/sidebar-floating-example.json
index 3b9012a71f..0333cb33bb 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-mira/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-mira/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json b/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json
index a628eb773e..9f5881aa57 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar-inset-example.json b/apps/v4/public/r/styles/base-mira/sidebar-inset-example.json
index 670b90527b..1cbb62ee2d 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/sidebar.json b/apps/v4/public/r/styles/base-mira/sidebar.json
index eb98b80eae..9f07d3ffab 100644
--- a/apps/v4/public/r/styles/base-mira/sidebar.json
+++ b/apps/v4/public/r/styles/base-mira/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-mira/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-mira/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\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        \"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\",\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\", 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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"relative flex w-full min-w-0 flex-col px-2 py-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-xs\", 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-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-[calc(var(--radius-sm)-2px)] p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-xs data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-mira/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-mira/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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-lg 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-xl 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-muted/20 dark:bg-muted/30\",\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\", 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-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"relative flex w-full min-w-0 flex-col px-2 py-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs 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-md 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-xs\", 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-px\", 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-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs 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-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : <TooltipTrigger 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-[calc(var(--radius-sm)-2px)] 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-1.5 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-[calc(var(--radius-sm)-2px)] 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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\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-md px-2 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-xs data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/signup-02.json b/apps/v4/public/r/styles/base-mira/signup-02.json
index 00d3d2f88b..1fe9499df5 100644
--- a/apps/v4/public/r/styles/base-mira/signup-02.json
+++ b/apps/v4/public/r/styles/base-mira/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-mira/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-mira/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/signup-03.json b/apps/v4/public/r/styles/base-mira/signup-03.json
index 1a446306ec..81cefc1b3f 100644
--- a/apps/v4/public/r/styles/base-mira/signup-03.json
+++ b/apps/v4/public/r/styles/base-mira/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-mira/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-mira/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-mira/signup-04.json b/apps/v4/public/r/styles/base-mira/signup-04.json
index ed99de2be8..6e597c8e37 100644
--- a/apps/v4/public/r/styles/base-mira/signup-04.json
+++ b/apps/v4/public/r/styles/base-mira/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-mira/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-mira/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-mira/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/signup-05.json b/apps/v4/public/r/styles/base-mira/signup-05.json
index 6d835fa26c..ba3be51305 100644
--- a/apps/v4/public/r/styles/base-mira/signup-05.json
+++ b/apps/v4/public/r/styles/base-mira/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-mira/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-mira/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-mira/skeleton.json b/apps/v4/public/r/styles/base-mira/skeleton.json
index 3164341452..52c94a67e1 100644
--- a/apps/v4/public/r/styles/base-mira/skeleton.json
+++ b/apps/v4/public/r/styles/base-mira/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/slider-example.json b/apps/v4/public/r/styles/base-mira/slider-example.json
index 54f6ef37e6..bbbebaf9d8 100644
--- a/apps/v4/public/r/styles/base-mira/slider-example.json
+++ b/apps/v4/public/r/styles/base-mira/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/slider-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 { Label } from \"@/registry/base-mira/ui/label\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/slider.json b/apps/v4/public/r/styles/base-mira/slider.json
index 543a052ac5..c8f888f0eb 100644
--- a/apps/v4/public/r/styles/base-mira/slider.json
+++ b/apps/v4/public/r/styles/base-mira/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"bg-muted relative grow overflow-hidden rounded-md select-none data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"border-primary ring-ring/30 block size-4 shrink-0 rounded-md border bg-white shadow-sm transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"relative grow overflow-hidden rounded-md bg-muted select-none data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"block size-4 shrink-0 rounded-md border border-primary bg-white shadow-sm ring-ring/30 transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+      "api": "https://base-ui.com/react/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/sonner.json b/apps/v4/public/r/styles/base-mira/sonner.json
index a8bb17db7a..8df4f01d36 100644
--- a/apps/v4/public/r/styles/base-mira/sonner.json
+++ b/apps/v4/public/r/styles/base-mira/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/spinner.json b/apps/v4/public/r/styles/base-mira/spinner.json
index 015cb0e6b3..fb89a836e7 100644
--- a/apps/v4/public/r/styles/base-mira/spinner.json
+++ b/apps/v4/public/r/styles/base-mira/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/style.json b/apps/v4/public/r/styles/base-mira/style.json
new file mode 100644
index 0000000000..a58f5ba309
--- /dev/null
+++ b/apps/v4/public/r/styles/base-mira/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/switch.json b/apps/v4/public/r/styles/base-mira/switch.json
index 9dcc746ab1..dfeb5a9397 100644
--- a/apps/v4/public/r/styles/base-mira/switch.json
+++ b/apps/v4/public/r/styles/base-mira/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-2 aria-invalid:ring-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+      "api": "https://base-ui.com/react/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/table.json b/apps/v4/public/r/styles/base-mira/table.json
index fd650f2b79..7ff1c863b7 100644
--- a/apps/v4/public/r/styles/base-mira/table.json
+++ b/apps/v4/public/r/styles/base-mira/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-xs\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-xs\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/tabs-example.json b/apps/v4/public/r/styles/base-mira/tabs-example.json
index 881498d467..d895603e12 100644
--- a/apps/v4/public/r/styles/base-mira/tabs-example.json
+++ b/apps/v4/public/r/styles/base-mira/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/tabs.json b/apps/v4/public/r/styles/base-mira/tabs.json
index c53c0867b5..4d25bc9a84 100644
--- a/apps/v4/public/r/styles/base-mira/tabs.json
+++ b/apps/v4/public/r/styles/base-mira/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-xs/relaxed outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\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-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] 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 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-xs/relaxed outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+      "api": "https://base-ui.com/react/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/textarea.json b/apps/v4/public/r/styles/base-mira/textarea.json
index c3af4a39e2..4259c40abe 100644
--- a/apps/v4/public/r/styles/base-mira/textarea.json
+++ b/apps/v4/public/r/styles/base-mira/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-mira/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full resize-none rounded-md border px-2 py-2 text-sm transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 md:text-xs/relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full resize-none rounded-md border border-input bg-input/20 px-2 py-2 text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/toggle-group-example.json b/apps/v4/public/r/styles/base-mira/toggle-group-example.json
index 334f52fe55..1ecc523322 100644
--- a/apps/v4/public/r/styles/base-mira/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-mira/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-mira/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-mira/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/toggle-group.json b/apps/v4/public/r/styles/base-mira/toggle-group.json
index 40459e00d2..0fa514c6ca 100644
--- a/apps/v4/public/r/styles/base-mira/toggle-group.json
+++ b/apps/v4/public/r/styles/base-mira/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-mira/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-mira/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),8px)]\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-mira/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/toggle.json b/apps/v4/public/r/styles/base-mira/toggle.json
index 8ab17aa30b..6885ee7fb2 100644
--- a/apps/v4/public/r/styles/base-mira/toggle.json
+++ b/apps/v4/public/r/styles/base-mira/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-md text-xs font-medium transition-all [&_svg:not([class*='size-'])]:size-3.5 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent\",\n      },\n      size: {\n        default: \"h-7 min-w-7 px-2\",\n        sm: \"h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-1.5 text-[0.625rem] [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 min-w-8 px-2\",\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-mira/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]: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: \"h-7 min-w-7 px-2\",\n        sm: \"h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-1.5 text-[0.625rem] [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 min-w-8 px-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/tooltip-example.json b/apps/v4/public/r/styles/base-mira/tooltip-example.json
index 43b514a8d5..4ea13f72ea 100644
--- a/apps/v4/public/r/styles/base-mira/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-mira/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/tooltip-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 { Kbd } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "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 { Kbd } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/tooltip.json b/apps/v4/public/r/styles/base-mira/tooltip.json
index 7b60968133..e12e79f392 100644
--- a/apps/v4/public/r/styles/base-mira/tooltip.json
+++ b/apps/v4/public/r/styles/base-mira/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/base-mira/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+      "api": "https://base-ui.com/react/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-mira/vercel.json b/apps/v4/public/r/styles/base-mira/vercel.json
deleted file mode 100644
index 3cede8390d..0000000000
--- a/apps/v4/public/r/styles/base-mira/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-mira/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-mira/ui/alert\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Calendar } from \"@/registry/base-mira/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/base-mira/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/accordion-example.json b/apps/v4/public/r/styles/base-nova/accordion-example.json
index 9cb2eb4650..26f259212a 100644
--- a/apps/v4/public/r/styles/base-nova/accordion-example.json
+++ b/apps/v4/public/r/styles/base-nova/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-nova/ui/accordion\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-nova/ui/accordion\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/accordion.json b/apps/v4/public/r/styles/base-nova/accordion.json
index d85f0fb8df..6e7ff13e07 100644
--- a/apps/v4/public/r/styles/base-nova/accordion.json
+++ b/apps/v4/public/r/styles/base-nova/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring 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-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+      "api": "https://base-ui.com/react/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/alert-dialog.json b/apps/v4/public/r/styles/base-nova/alert-dialog.json
index ae38669ffe..5893c609f1 100644
--- a/apps/v4/public/r/styles/base-nova/alert-dialog.json
+++ b/apps/v4/public/r/styles/base-nova/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/alert.json b/apps/v4/public/r/styles/base-nova/alert.json
index 3fc19343c5..e5d5ede505 100644
--- a/apps/v4/public/r/styles/base-nova/alert.json
+++ b/apps/v4/public/r/styles/base-nova/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/aspect-ratio-example.json b/apps/v4/public/r/styles/base-nova/aspect-ratio-example.json
index 2efc039255..ba769ab146 100644
--- a/apps/v4/public/r/styles/base-nova/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/base-nova/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { AspectRatio } from \"@/registry/base-nova/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { AspectRatio } from \"@/registry/base-nova/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/aspect-ratio.json b/apps/v4/public/r/styles/base-nova/aspect-ratio.json
index 213f66bed1..c75b3d9823 100644
--- a/apps/v4/public/r/styles/base-nova/aspect-ratio.json
+++ b/apps/v4/public/r/styles/base-nova/aspect-ratio.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/avatar.json b/apps/v4/public/r/styles/base-nova/avatar.json
index 04f25c020d..693bdaeee3 100644
--- a/apps/v4/public/r/styles/base-nova/avatar.json
+++ b/apps/v4/public/r/styles/base-nova/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+      "api": "https://base-ui.com/react/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/badge.json b/apps/v4/public/r/styles/base-nova/badge.json
index 61a414f03c..d8f1f9aa43 100644
--- a/apps/v4/public/r/styles/base-nova/badge.json
+++ b/apps/v4/public/r/styles/base-nova/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/breadcrumb.json b/apps/v4/public/r/styles/base-nova/breadcrumb.json
index f8adcecf60..1d6c401202 100644
--- a/apps/v4/public/r/styles/base-nova/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-nova/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground\",\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\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/button-group.json b/apps/v4/public/r/styles/base-nova/button-group.json
index 9cc04b7be0..bad7a7d818 100644
--- a/apps/v4/public/r/styles/base-nova/button-group.json
+++ b/apps/v4/public/r/styles/base-nova/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/button-group.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-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-nova/lib/utils\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n        vertical:\n          \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! [&>[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 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/button.json b/apps/v4/public/r/styles/base-nova/button.json
index 3f81e1b37e..70ec4e88c7 100644
--- a/apps/v4/public/r/styles/base-nova/button.json
+++ b/apps/v4/public/r/styles/base-nova/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/button.tsx",
-      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary:\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 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 [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\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-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/calendar-example.json b/apps/v4/public/r/styles/base-nova/calendar-example.json
index 85381dc396..705a3fa9cf 100644
--- a/apps/v4/public/r/styles/base-nova/calendar-example.json
+++ b/apps/v4/public/r/styles/base-nova/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-nova/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-nova/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/calendar.json b/apps/v4/public/r/styles/base-nova/calendar.json
index 5157038764..c7ed4a525d 100644
--- a/apps/v4/public/r/styles/base-nova/calendar.json
+++ b/apps/v4/public/r/styles/base-nova/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/card-example.json b/apps/v4/public/r/styles/base-nova/card-example.json
index 89bbb6892b..4e79edafd4 100644
--- a/apps/v4/public/r/styles/base-nova/card-example.json
+++ b/apps/v4/public/r/styles/base-nova/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/card.json b/apps/v4/public/r/styles/base-nova/card.json
index 4259901919..e7b83bf4db 100644
--- a/apps/v4/public/r/styles/base-nova/card.json
+++ b/apps/v4/public/r/styles/base-nova/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/carousel.json b/apps/v4/public/r/styles/base-nova/carousel.json
index 13802bf380..b942259c47 100644
--- a/apps/v4/public/r/styles/base-nova/carousel.json
+++ b/apps/v4/public/r/styles/base-nova/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/chart-example.json b/apps/v4/public/r/styles/base-nova/chart-example.json
index 7dc7dcfe64..ce609082fb 100644
--- a/apps/v4/public/r/styles/base-nova/chart-example.json
+++ b/apps/v4/public/r/styles/base-nova/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/chart.json b/apps/v4/public/r/styles/base-nova/chart.json
index 255d34f1a3..9cb13b8456 100644
--- a/apps/v4/public/r/styles/base-nova/chart.json
+++ b/apps/v4/public/r/styles/base-nova/chart.json
@@ -10,9 +10,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/chatgpt.json b/apps/v4/public/r/styles/base-nova/chatgpt.json
deleted file mode 100644
index a4344b5134..0000000000
--- a/apps/v4/public/r/styles/base-nova/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-nova/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-nova/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                      remixicon=\"RiAttachmentLine\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                      remixicon=\"RiMagicLine\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                            remixicon=\"RiHand\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                            remixicon=\"RiBookOpenLine\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                            remixicon=\"RiGlobeLine\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                            remixicon=\"RiPencilLine\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                  remixicon=\"RiMicLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        remixicon=\"RiFolderLine\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/checkbox.json b/apps/v4/public/r/styles/base-nova/checkbox.json
index e3d60fcfc7..3c50a05bc4 100644
--- a/apps/v4/public/r/styles/base-nova/checkbox.json
+++ b/apps/v4/public/r/styles/base-nova/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+      "api": "https://base-ui.com/react/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/collapsible-example.json b/apps/v4/public/r/styles/base-nova/collapsible-example.json
index 1ce3d05ed0..e8e9da32d2 100644
--- a/apps/v4/public/r/styles/base-nova/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-nova/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/collapsible.json b/apps/v4/public/r/styles/base-nova/collapsible.json
index 527e34bc83..5547036a90 100644
--- a/apps/v4/public/r/styles/base-nova/collapsible.json
+++ b/apps/v4/public/r/styles/base-nova/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+      "api": "https://base-ui.com/react/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/combobox-example.json b/apps/v4/public/r/styles/base-nova/combobox-example.json
index b314959ebf..b6c39e16d2 100644
--- a/apps/v4/public/r/styles/base-nova/combobox-example.json
+++ b/apps/v4/public/r/styles/base-nova/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-nova/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-nova/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/combobox.json b/apps/v4/public/r/styles/base-nova/combobox.json
index 2cc3bfeec9..a31756a038 100644
--- a/apps/v4/public/r/styles/base-nova/combobox.json
+++ b/apps/v4/public/r/styles/base-nova/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-4\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm 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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1\",\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-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-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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-lg 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 overflow-y-auto overscroll-contain p-1 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 rounded-md py-1 pr-8 pl-1.5 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\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 my-1 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-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/command.json b/apps/v4/public/r/styles/base-nova/command.json
index 96952db6f4..979d8f1b63 100644
--- a/apps/v4/public/r/styles/base-nova/command.json
+++ b/apps/v4/public/r/styles/base-nova/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\",\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-nova/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\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(\"-mx-1 h-px bg-border\", 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-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/component-example.json b/apps/v4/public/r/styles/base-nova/component-example.json
index a372dd79aa..665c0b4585 100644
--- a/apps/v4/public/r/styles/base-nova/component-example.json
+++ b/apps/v4/public/r/styles/base-nova/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-nova/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-nova/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/context-menu.json b/apps/v4/public/r/styles/base-nova/context-menu.json
index ac65935061..d2578e1ce5 100644
--- a/apps/v4/public/r/styles/base-nova/context-menu.json
+++ b/apps/v4/public/r/styles/base-nova/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\",\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-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/dashboard-01.json b/apps/v4/public/r/styles/base-nova/dashboard-01.json
index 163259c371..670b281b74 100644
--- a/apps/v4/public/r/styles/base-nova/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-nova/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-nova/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-nova/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-nova/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"data-open:bg-muted text-muted-foreground flex size-8\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-nova/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-nova/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -67,7 +67,7 @@
     },
     {
       "path": "registry/base-nova/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/base-nova/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"text-foreground/70 truncate text-xs\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"text-muted-foreground truncate text-xs\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs text-foreground/70\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs text-muted-foreground\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-nova/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-nova/demo.json b/apps/v4/public/r/styles/base-nova/demo.json
new file mode 100644
index 0000000000..9525397dfe
--- /dev/null
+++ b/apps/v4/public/r/styles/base-nova/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/base-nova/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/dialog-example.json b/apps/v4/public/r/styles/base-nova/dialog-example.json
index 1a3137a92f..ba2fe372d4 100644
--- a/apps/v4/public/r/styles/base-nova/dialog-example.json
+++ b/apps/v4/public/r/styles/base-nova/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dialog.json b/apps/v4/public/r/styles/base-nova/dialog.json
index 686e9ba2b7..a795aaf725 100644
--- a/apps/v4/public/r/styles/base-nova/dialog.json
+++ b/apps/v4/public/r/styles/base-nova/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-2 right-2\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/direction.json b/apps/v4/public/r/styles/base-nova/direction.json
index 52193e0973..487701cd5f 100644
--- a/apps/v4/public/r/styles/base-nova/direction.json
+++ b/apps/v4/public/r/styles/base-nova/direction.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/direction",
+      "api": "https://base-ui.com/react/utils/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/drawer-example.json b/apps/v4/public/r/styles/base-nova/drawer-example.json
index ff23177ba1..5909204ef3 100644
--- a/apps/v4/public/r/styles/base-nova/drawer-example.json
+++ b/apps/v4/public/r/styles/base-nova/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/drawer-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  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/drawer.json b/apps/v4/public/r/styles/base-nova/drawer.json
index 3f9a44fe58..f0ccece816 100644
--- a/apps/v4/public/r/styles/base-nova/drawer.json
+++ b/apps/v4/public/r/styles/base-nova/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json b/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json
index 6c66fadda4..44a46217c5 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=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dropdown-menu.json b/apps/v4/public/r/styles/base-nova/dropdown-menu.json
index 9be39a9a5a..14fc296c6d 100644
--- a/apps/v4/public/r/styles/base-nova/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-nova/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\",\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-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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        \"w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg 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-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/elevenlabs.json b/apps/v4/public/r/styles/base-nova/elevenlabs.json
deleted file mode 100644
index 1bd6627962..0000000000
--- a/apps/v4/public/r/styles/base-nova/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/base-nova/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/empty.json b/apps/v4/public/r/styles/base-nova/empty.json
index c40ef37ee1..fc79b6d3d3 100644
--- a/apps/v4/public/r/styles/base-nova/empty.json
+++ b/apps/v4/public/r/styles/base-nova/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/example.json b/apps/v4/public/r/styles/base-nova/example.json
index 05ae7b15e3..cc9fa80776 100644
--- a/apps/v4/public/r/styles/base-nova/example.json
+++ b/apps/v4/public/r/styles/base-nova/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-nova/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/field.json b/apps/v4/public/r/styles/base-nova/field.json
index b60a2fdb1c..32e773fbbe 100644
--- a/apps/v4/public/r/styles/base-nova/field.json
+++ b/apps/v4/public/r/styles/base-nova/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\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=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/font-dm-sans.json b/apps/v4/public/r/styles/base-nova/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/base-nova/font-dm-sans.json
+++ b/apps/v4/public/r/styles/base-nova/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-nova/font-jetbrains-mono.json b/apps/v4/public/r/styles/base-nova/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/base-nova/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/base-nova/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/base-nova/font-geist-sans.json b/apps/v4/public/r/styles/base-nova/font-lora.json
similarity index 52%
rename from apps/v4/public/r/styles/base-nova/font-geist-sans.json
rename to apps/v4/public/r/styles/base-nova/font-lora.json
index a60a347fd3..cacd01a3f0 100644
--- a/apps/v4/public/r/styles/base-nova/font-geist-sans.json
+++ b/apps/v4/public/r/styles/base-nova/font-lora.json
@@ -1,13 +1,13 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
+  "name": "font-lora",
+  "title": "Lora",
   "type": "registry:font",
   "font": {
-    "family": "'Geist Variable', sans-serif",
+    "family": "'Lora Variable', serif",
     "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
+    "import": "Lora",
+    "variable": "--font-serif",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/base-nova/font-merriweather.json b/apps/v4/public/r/styles/base-nova/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-nova/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/font-noto-serif.json b/apps/v4/public/r/styles/base-nova/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-nova/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/font-outfit.json b/apps/v4/public/r/styles/base-nova/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/base-nova/font-outfit.json
+++ b/apps/v4/public/r/styles/base-nova/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-nova/font-playfair-display.json b/apps/v4/public/r/styles/base-nova/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/base-nova/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/font-public-sans.json b/apps/v4/public/r/styles/base-nova/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/base-nova/font-public-sans.json
+++ b/apps/v4/public/r/styles/base-nova/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-nova/font-raleway.json b/apps/v4/public/r/styles/base-nova/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/base-nova/font-raleway.json
+++ b/apps/v4/public/r/styles/base-nova/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-nova/font-roboto-slab.json b/apps/v4/public/r/styles/base-nova/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-nova/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/font-roboto.json b/apps/v4/public/r/styles/base-nova/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/base-nova/font-roboto.json
+++ b/apps/v4/public/r/styles/base-nova/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-nova/github.json b/apps/v4/public/r/styles/base-nova/github.json
deleted file mode 100644
index f89ca2866e..0000000000
--- a/apps/v4/public/r/styles/base-nova/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-nova/blocks/github.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 { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-nova/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-nova/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-nova/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { Spinner } from \"@/registry/base-nova/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/hover-card-example.json b/apps/v4/public/r/styles/base-nova/hover-card-example.json
index 981007fab5..74c2de770e 100644
--- a/apps/v4/public/r/styles/base-nova/hover-card-example.json
+++ b/apps/v4/public/r/styles/base-nova/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-nova/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/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  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-nova/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/hover-card.json b/apps/v4/public/r/styles/base-nova/hover-card.json
index e475988fcf..9448b17125 100644
--- a/apps/v4/public/r/styles/base-nova/hover-card.json
+++ b/apps/v4/public/r/styles/base-nova/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-64 origin-(--transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+      "api": "https://base-ui.com/react/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/index.json b/apps/v4/public/r/styles/base-nova/index.json
new file mode 100644
index 0000000000..94f1c90de2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-nova/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/input-group-example.json b/apps/v4/public/r/styles/base-nova/input-group-example.json
index 54b758f266..c66497efdf 100644
--- a/apps/v4/public/r/styles/base-nova/input-group-example.json
+++ b/apps/v4/public/r/styles/base-nova/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-nova/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Spinner } from \"@/registry/base-nova/ui/spinner\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-nova/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Spinner } from \"@/registry/base-nova/ui/spinner\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-group.json b/apps/v4/public/r/styles/base-nova/input-group.json
index bc28491577..529b0b60d5 100644
--- a/apps/v4/public/r/styles/base-nova/input-group.json
+++ b/apps/v4/public/r/styles/base-nova/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\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-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\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 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"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 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/input-otp-example.json b/apps/v4/public/r/styles/base-nova/input-otp-example.json
index 00bfe617e6..3421248f74 100644
--- a/apps/v4/public/r/styles/base-nova/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-nova/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-nova/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-nova/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-otp.json b/apps/v4/public/r/styles/base-nova/input-otp.json
index 7aeae7ab6b..0e739ce94a 100644
--- a/apps/v4/public/r/styles/base-nova/input-otp.json
+++ b/apps/v4/public/r/styles/base-nova/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3\",\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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 rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/input.json b/apps/v4/public/r/styles/base-nova/input.json
index 6389ba47b8..4fb39a6d13 100644
--- a/apps/v4/public/r/styles/base-nova/input.json
+++ b/apps/v4/public/r/styles/base-nova/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/input.tsx",
-      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/item-example.json b/apps/v4/public/r/styles/base-nova/item-example.json
index d600426d5e..d37493d940 100644
--- a/apps/v4/public/r/styles/base-nova/item-example.json
+++ b/apps/v4/public/r/styles/base-nova/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/item.json b/apps/v4/public/r/styles/base-nova/item.json
index 811adf7252..662a83bc42 100644
--- a/apps/v4/public/r/styles/base-nova/item.json
+++ b/apps/v4/public/r/styles/base-nova/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/kbd.json b/apps/v4/public/r/styles/base-nova/kbd.json
index 6b0595f499..e24bc8bc94 100644
--- a/apps/v4/public/r/styles/base-nova/kbd.json
+++ b/apps/v4/public/r/styles/base-nova/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/label.json b/apps/v4/public/r/styles/base-nova/label.json
index 8349b197c6..be2d8853c2 100644
--- a/apps/v4/public/r/styles/base-nova/label.json
+++ b/apps/v4/public/r/styles/base-nova/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+      "api": "https://base-ui.com/react/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/login-02.json b/apps/v4/public/r/styles/base-nova/login-02.json
index 03cb853247..67eb73817d 100644
--- a/apps/v4/public/r/styles/base-nova/login-02.json
+++ b/apps/v4/public/r/styles/base-nova/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-nova/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-nova/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/login-03.json b/apps/v4/public/r/styles/base-nova/login-03.json
index 9fb3f00edf..8056efccee 100644
--- a/apps/v4/public/r/styles/base-nova/login-03.json
+++ b/apps/v4/public/r/styles/base-nova/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-nova/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-nova/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-nova/login-04.json b/apps/v4/public/r/styles/base-nova/login-04.json
index 9116dd25ee..0ed22e196a 100644
--- a/apps/v4/public/r/styles/base-nova/login-04.json
+++ b/apps/v4/public/r/styles/base-nova/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-nova/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-nova/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/login-05.json b/apps/v4/public/r/styles/base-nova/login-05.json
index 9678757431..93e2002f66 100644
--- a/apps/v4/public/r/styles/base-nova/login-05.json
+++ b/apps/v4/public/r/styles/base-nova/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-nova/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-nova/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-nova/menubar.json b/apps/v4/public/r/styles/base-nova/menubar.json
index 39cc80588f..24c8a9ce8a 100644
--- a/apps/v4/public/r/styles/base-nova/menubar.json
+++ b/apps/v4/public/r/styles/base-nova/menubar.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-8 items-center gap-0.5 rounded-lg border p-[3px]\",\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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 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-1.5 py-1 text-sm font-medium data-inset:pl-7\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100\",\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-nova/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]\",\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-sm px-1.5 py-[2px] 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 min-w-36 rounded-lg bg-popover p-1 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-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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-1.5 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-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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-1.5 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-1.5 py-1 text-sm font-medium data-inset:pl-7\",\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\", 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-1.5 rounded-md px-1.5 py-1 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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        \"min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+      "api": "https://base-ui.com/react/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/native-select.json b/apps/v4/public/r/styles/base-nova/native-select.json
index c9cc911182..cb5c5a3fe4 100644
--- a/apps/v4/public/r/styles/base-nova/native-select.json
+++ b/apps/v4/public/r/styles/base-nova/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-2.5 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({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/navigation-menu-example.json b/apps/v4/public/r/styles/base-nova/navigation-menu-example.json
index f3f5614a20..46663d7380 100644
--- a/apps/v4/public/r/styles/base-nova/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-nova/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-nova/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-nova/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/navigation-menu.json b/apps/v4/public/r/styles/base-nova/navigation-menu.json
index f5ce57440b..107bd79293 100644
--- a/apps/v4/public/r/styles/base-nova/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-nova/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\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=\"bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] 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        \"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 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-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow 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-lg bg-popover text-popover-foreground shadow 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-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active: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-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/otp-01.json b/apps/v4/public/r/styles/base-nova/otp-01.json
deleted file mode 100644
index 3dc87f2b93..0000000000
--- a/apps/v4/public/r/styles/base-nova/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-nova/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-nova/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-nova/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-nova/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/otp-02.json b/apps/v4/public/r/styles/base-nova/otp-02.json
deleted file mode 100644
index 8cdddb4b82..0000000000
--- a/apps/v4/public/r/styles/base-nova/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-nova/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-nova/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-nova/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-nova/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/otp-03.json b/apps/v4/public/r/styles/base-nova/otp-03.json
deleted file mode 100644
index dcfc828145..0000000000
--- a/apps/v4/public/r/styles/base-nova/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-nova/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/base-nova/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-nova/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-nova/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/otp-04.json b/apps/v4/public/r/styles/base-nova/otp-04.json
deleted file mode 100644
index 310521c716..0000000000
--- a/apps/v4/public/r/styles/base-nova/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-nova/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-nova/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-nova/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-nova/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/otp-05.json b/apps/v4/public/r/styles/base-nova/otp-05.json
deleted file mode 100644
index da10f57df0..0000000000
--- a/apps/v4/public/r/styles/base-nova/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-nova/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-nova/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-nova/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-nova/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/pagination.json b/apps/v4/public/r/styles/base-nova/pagination.json
index c9c1865c8c..2b93ac1e07 100644
--- a/apps/v4/public/r/styles/base-nova/pagination.json
+++ b/apps/v4/public/r/styles/base-nova/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/popover.json b/apps/v4/public/r/styles/base-nova/popover.json
index f5713b458b..491256c107 100644
--- a/apps/v4/public/r/styles/base-nova/popover.json
+++ b/apps/v4/public/r/styles/base-nova/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-0.5 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-0.5 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+      "api": "https://base-ui.com/react/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/preview.json b/apps/v4/public/r/styles/base-nova/preview.json
index 0eee72c14b..a1444866ca 100644
--- a/apps/v4/public/r/styles/base-nova/preview.json
+++ b/apps/v4/public/r/styles/base-nova/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -9,6 +9,7 @@
     "button",
     "button-group",
     "card",
+    "chart",
     "checkbox",
     "combobox",
     "dropdown-menu",
@@ -32,8 +33,8 @@
   ],
   "files": [
     {
-      "path": "registry/base-nova/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-nova/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-nova/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-nova/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-nova/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\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 { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-nova/ui/sheet\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Spinner } from \"@/registry/base-nova/ui/spinner\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                      remixicon=\"RiMicLine\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.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=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n              remixicon=\"RiShoppingBagLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/base-nova/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-nova/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-nova/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-nova/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-nova/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-nova/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-nova/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-nova/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-nova/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-nova/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-nova/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-nova/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-nova/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-nova/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-nova/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-nova/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-nova/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-nova/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-nova/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-nova/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-nova/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-nova/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-nova/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-nova/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-nova/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-nova/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-nova/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-nova/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-nova/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-nova/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-nova/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-nova/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-nova/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/progress-example.json b/apps/v4/public/r/styles/base-nova/progress-example.json
index 45ce2c8a55..6a8bebed4a 100644
--- a/apps/v4/public/r/styles/base-nova/progress-example.json
+++ b/apps/v4/public/r/styles/base-nova/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/progress-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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-nova/ui/progress\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-nova/ui/progress\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/progress.json b/apps/v4/public/r/styles/base-nova/progress.json
index 624f808db4..4194ee38a1 100644
--- a/apps/v4/public/r/styles/base-nova/progress.json
+++ b/apps/v4/public/r/styles/base-nova/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"bg-primary h-full transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"text-muted-foreground ml-auto text-sm tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
+      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"h-full bg-primary transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"ml-auto text-sm text-muted-foreground tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+      "api": "https://base-ui.com/react/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/radio-group.json b/apps/v4/public/r/styles/base-nova/radio-group.json
index be83f079f0..d25f10d79c 100644
--- a/apps/v4/public/r/styles/base-nova/radio-group.json
+++ b/apps/v4/public/r/styles/base-nova/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+      "api": "https://base-ui.com/react/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/registry.json b/apps/v4/public/r/styles/base-nova/registry.json
index 34f243ec80..40f647bfa8 100644
--- a/apps/v4/public/r/styles/base-nova/registry.json
+++ b/apps/v4/public/r/styles/base-nova/registry.json
@@ -2,6 +2,56 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +60,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+          "api": "https://base-ui.com/react/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +77,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +94,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +111,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +127,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+          "api": "https://base-ui.com/react/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +144,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +160,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +176,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +193,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +211,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +228,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +246,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -138,6 +265,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -148,6 +281,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+          "api": "https://base-ui.com/react/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -158,6 +298,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+          "api": "https://base-ui.com/react/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -170,6 +317,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -182,6 +336,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -192,6 +353,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -203,6 +371,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -214,6 +389,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -224,6 +406,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -234,6 +423,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -245,6 +440,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -259,6 +460,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+          "api": "https://base-ui.com/react/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -269,6 +477,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -280,6 +494,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -291,6 +511,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -302,6 +529,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -312,6 +545,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+          "api": "https://base-ui.com/react/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -323,6 +563,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+          "api": "https://base-ui.com/react/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -333,6 +580,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -344,6 +598,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -354,6 +614,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+          "api": "https://base-ui.com/react/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -364,6 +631,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+          "api": "https://base-ui.com/react/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -374,6 +648,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+          "api": "https://base-ui.com/react/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -385,6 +666,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -395,6 +683,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+          "api": "https://base-ui.com/react/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -405,6 +700,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+          "api": "https://base-ui.com/react/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -415,6 +717,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+          "api": "https://base-ui.com/react/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -426,6 +735,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -445,6 +761,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -455,6 +777,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -465,6 +793,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+          "api": "https://base-ui.com/react/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -476,6 +811,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -486,6 +828,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -496,6 +844,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+          "api": "https://base-ui.com/react/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -506,6 +861,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -516,6 +877,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+          "api": "https://base-ui.com/react/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -526,6 +894,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -536,6 +910,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -547,6 +928,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -557,6 +945,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+          "api": "https://base-ui.com/react/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -568,6 +963,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -578,6 +979,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -589,6 +996,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/direction",
+          "api": "https://base-ui.com/react/utils/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1467,6 +1880,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/base-nova/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1515,7 +1955,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1523,6 +1963,7 @@
         "button",
         "button-group",
         "card",
+        "chart",
         "checkbox",
         "combobox",
         "dropdown-menu",
@@ -1546,110 +1987,7 @@
       ],
       "files": [
         {
-          "path": "registry/base-nova/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/base-nova/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-nova/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-nova/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-nova/blocks/chatgpt.tsx",
+          "path": "registry/base-nova/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2554,7 +2892,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2566,7 +2904,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2578,7 +2916,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2590,7 +2928,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2602,7 +2940,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2617,7 +2955,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2632,6 +2970,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-nova/resizable.json b/apps/v4/public/r/styles/base-nova/resizable.json
index 061f4aea60..8c96fd99d0 100644
--- a/apps/v4/public/r/styles/base-nova/resizable.json
+++ b/apps/v4/public/r/styles/base-nova/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/scroll-area-example.json b/apps/v4/public/r/styles/base-nova/scroll-area-example.json
index cad4eb77d4..7edb71083e 100644
--- a/apps/v4/public/r/styles/base-nova/scroll-area-example.json
+++ b/apps/v4/public/r/styles/base-nova/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-nova/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-nova/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/scroll-area.json b/apps/v4/public/r/styles/base-nova/scroll-area.json
index e8a24323ff..1646757392 100644
--- a/apps/v4/public/r/styles/base-nova/scroll-area.json
+++ b/apps/v4/public/r/styles/base-nova/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+      "api": "https://base-ui.com/react/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/select.json b/apps/v4/public/r/styles/base-nova/select.json
index d8767abbce..226da5c220 100644
--- a/apps/v4/public/r/styles/base-nova/select.json
+++ b/apps/v4/public/r/styles/base-nova/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"text-muted-foreground pointer-events-none size-4\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\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(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center 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        \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center 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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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        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 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg 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(\"px-1.5 py-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none 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(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+      "api": "https://base-ui.com/react/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/separator-example.json b/apps/v4/public/r/styles/base-nova/separator-example.json
index 72e926f4f1..92e34a536a 100644
--- a/apps/v4/public/r/styles/base-nova/separator-example.json
+++ b/apps/v4/public/r/styles/base-nova/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/separator.json b/apps/v4/public/r/styles/base-nova/separator.json
index 0e8a6f6217..dcae1a14d3 100644
--- a/apps/v4/public/r/styles/base-nova/separator.json
+++ b/apps/v4/public/r/styles/base-nova/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+      "api": "https://base-ui.com/react/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/sheet-example.json b/apps/v4/public/r/styles/base-nova/sheet-example.json
index 4e189c593a..ef01177bc0 100644
--- a/apps/v4/public/r/styles/base-nova/sheet-example.json
+++ b/apps/v4/public/r/styles/base-nova/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-nova/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-nova/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sheet.json b/apps/v4/public/r/styles/base-nova/sheet.json
index f1899f9396..5137559a31 100644
--- a/apps/v4/public/r/styles/base-nova/sheet.json
+++ b/apps/v4/public/r/styles/base-nova/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-3 right-3\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-01.json b/apps/v4/public/r/styles/base-nova/sidebar-01.json
index 64d637a9d1..0d66902c7f 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-01.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-02.json b/apps/v4/public/r/styles/base-nova/sidebar-02.json
index b2890a8af7..d837945ec9 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-02.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-nova/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-nova/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-nova/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-nova/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-03.json b/apps/v4/public/r/styles/base-nova/sidebar-03.json
index d09cd8258e..94607ddbba 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-03.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-04.json b/apps/v4/public/r/styles/base-nova/sidebar-04.json
index 9ecb09140b..849b8105dd 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-04.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-05.json b/apps/v4/public/r/styles/base-nova/sidebar-05.json
index 576de5af62..46a76e82b4 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-05.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-nova/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-nova/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-06.json b/apps/v4/public/r/styles/base-nova/sidebar-06.json
index d208acc649..f1e11d32ef 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-06.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-nova/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-nova/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-nova/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-nova/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { SidebarInput } from \"@/registry/base-nova/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { SidebarInput } from \"@/registry/base-nova/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-07.json b/apps/v4/public/r/styles/base-nova/sidebar-07.json
index 4aef4ecb6f..83a46f3312 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-07.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-08.json b/apps/v4/public/r/styles/base-nova/sidebar-08.json
index 33457b3373..1ed513c400 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-08.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-nova/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-nova/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-nova/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-nova/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-nova/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-nova/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-09.json b/apps/v4/public/r/styles/base-nova/sidebar-09.json
index 55c7ad2223..fa0a32599b 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-09.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-09.json
@@ -16,18 +16,18 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-09/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground md:h-8 md:p-0\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0 data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-10.json b/apps/v4/public/r/styles/base-nova/sidebar-10.json
index 51175d0522..bed2dfc258 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-10.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-nova/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-nova/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"data-open:bg-accent h-7 w-7\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"h-7 w-7 data-open:bg-accent\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-11.json b/apps/v4/public/r/styles/base-nova/sidebar-11.json
index 08543c7355..16836f8ade 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-11.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-12.json b/apps/v4/public/r/styles/base-nova/sidebar-12.json
index 7e5be141e9..6499f19fe7 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-12.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-nova/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-nova/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-nova/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-nova/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-13.json b/apps/v4/public/r/styles/base-nova/sidebar-13.json
index 930fd123ef..f5774031de 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-13.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-14.json b/apps/v4/public/r/styles/base-nova/sidebar-14.json
index 60aaeca08c..8593c1b216 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-14.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-15.json b/apps/v4/public/r/styles/base-nova/sidebar-15.json
index fd94292b44..84ce5ee7b5 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-15.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/base-nova/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-nova/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/base-nova/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-nova/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-nova/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-nova/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-nova/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-nova/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"aria-expanded:bg-muted aria-expanded:text-foreground w-fit px-1.5\" />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"w-fit px-1.5 aria-expanded:bg-muted aria-expanded:text-foreground\" />\n            }\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-16.json b/apps/v4/public/r/styles/base-nova/sidebar-16.json
index 2a5b010c72..5a477812c3 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-16.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-nova/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-nova/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-nova/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-nova/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-nova/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-nova/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-nova/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-nova/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-nova/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-nova/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-nova/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-nova/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-nova/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-nova/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { useSidebar } from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-nova/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { useSidebar } from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-example.json b/apps/v4/public/r/styles/base-nova/sidebar-example.json
index 94f05cf619..cae9828037 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-floating-example.json b/apps/v4/public/r/styles/base-nova/sidebar-floating-example.json
index 244e2bef96..fb6cc78aa4 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-nova/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-nova/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json b/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json
index 5dc8b0b27e..125da871e9 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar-inset-example.json b/apps/v4/public/r/styles/base-nova/sidebar-inset-example.json
index 63b13bb2c5..43c0773935 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/sidebar.json b/apps/v4/public/r/styles/base-nova/sidebar.json
index 03a952cb8c..8e28480d2f 100644
--- a/apps/v4/public/r/styles/base-nova/sidebar.json
+++ b/apps/v4/public/r/styles/base-nova/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-nova/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-nova/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-nova/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"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\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-nova/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-nova/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-nova/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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-lg 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-xl 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(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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-md px-2 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-md 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\", 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-md p-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-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : <TooltipTrigger 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-md 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-1.5 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-md 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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\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-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/signup-02.json b/apps/v4/public/r/styles/base-nova/signup-02.json
index 67c341dc5d..90dc53cc98 100644
--- a/apps/v4/public/r/styles/base-nova/signup-02.json
+++ b/apps/v4/public/r/styles/base-nova/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-nova/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-nova/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/signup-03.json b/apps/v4/public/r/styles/base-nova/signup-03.json
index a7db4ee907..57d2da82dc 100644
--- a/apps/v4/public/r/styles/base-nova/signup-03.json
+++ b/apps/v4/public/r/styles/base-nova/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-nova/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-nova/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-nova/signup-04.json b/apps/v4/public/r/styles/base-nova/signup-04.json
index a631825b72..fc8bad097b 100644
--- a/apps/v4/public/r/styles/base-nova/signup-04.json
+++ b/apps/v4/public/r/styles/base-nova/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-nova/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-nova/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-nova/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/signup-05.json b/apps/v4/public/r/styles/base-nova/signup-05.json
index 004fb8d0b0..d6406f968a 100644
--- a/apps/v4/public/r/styles/base-nova/signup-05.json
+++ b/apps/v4/public/r/styles/base-nova/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-nova/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-nova/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-nova/skeleton.json b/apps/v4/public/r/styles/base-nova/skeleton.json
index 0cb08fa1f3..fcc21a4c9f 100644
--- a/apps/v4/public/r/styles/base-nova/skeleton.json
+++ b/apps/v4/public/r/styles/base-nova/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/slider-example.json b/apps/v4/public/r/styles/base-nova/slider-example.json
index b8d78adc4b..a0748c7ecb 100644
--- a/apps/v4/public/r/styles/base-nova/slider-example.json
+++ b/apps/v4/public/r/styles/base-nova/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/slider-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 { Label } from \"@/registry/base-nova/ui/label\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/slider.json b/apps/v4/public/r/styles/base-nova/slider.json
index 589586b72c..94e3537389 100644
--- a/apps/v4/public/r/styles/base-nova/slider.json
+++ b/apps/v4/public/r/styles/base-nova/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"bg-muted relative grow overflow-hidden rounded-full select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+      "api": "https://base-ui.com/react/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/sonner.json b/apps/v4/public/r/styles/base-nova/sonner.json
index fb314caeaa..37b2ef2441 100644
--- a/apps/v4/public/r/styles/base-nova/sonner.json
+++ b/apps/v4/public/r/styles/base-nova/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/spinner.json b/apps/v4/public/r/styles/base-nova/spinner.json
index 5d2fdd23e1..f64663ce08 100644
--- a/apps/v4/public/r/styles/base-nova/spinner.json
+++ b/apps/v4/public/r/styles/base-nova/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/style.json b/apps/v4/public/r/styles/base-nova/style.json
new file mode 100644
index 0000000000..a58f5ba309
--- /dev/null
+++ b/apps/v4/public/r/styles/base-nova/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/switch.json b/apps/v4/public/r/styles/base-nova/switch.json
index 2cc6af4c63..e009136db3 100644
--- a/apps/v4/public/r/styles/base-nova/switch.json
+++ b/apps/v4/public/r/styles/base-nova/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+      "api": "https://base-ui.com/react/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/table.json b/apps/v4/public/r/styles/base-nova/table.json
index 6c1cb100d9..6d77bc96e5 100644
--- a/apps/v4/public/r/styles/base-nova/table.json
+++ b/apps/v4/public/r/styles/base-nova/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/tabs-example.json b/apps/v4/public/r/styles/base-nova/tabs-example.json
index 1bace8fde5..9eb1a03bf7 100644
--- a/apps/v4/public/r/styles/base-nova/tabs-example.json
+++ b/apps/v4/public/r/styles/base-nova/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/tabs.json b/apps/v4/public/r/styles/base-nova/tabs.json
index e57ef17696..8e9bffbe22 100644
--- a/apps/v4/public/r/styles/base-nova/tabs.json
+++ b/apps/v4/public/r/styles/base-nova/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"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-nova/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\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-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+      "api": "https://base-ui.com/react/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/textarea.json b/apps/v4/public/r/styles/base-nova/textarea.json
index 704709e801..08ede804c8 100644
--- a/apps/v4/public/r/styles/base-nova/textarea.json
+++ b/apps/v4/public/r/styles/base-nova/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-nova/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/toggle-group-example.json b/apps/v4/public/r/styles/base-nova/toggle-group-example.json
index 027c3ada39..4aea9dafc7 100644
--- a/apps/v4/public/r/styles/base-nova/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-nova/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-nova/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-nova/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/toggle-group.json b/apps/v4/public/r/styles/base-nova/toggle-group.json
index 8e60e425b2..8dfc883be4 100644
--- a/apps/v4/public/r/styles/base-nova/toggle-group.json
+++ b/apps/v4/public/r/styles/base-nova/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-nova/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-nova/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-nova/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/toggle.json b/apps/v4/public/r/styles/base-nova/toggle.json
index 8ee8aa2c24..b89ccf1ed5 100644
--- a/apps/v4/public/r/styles/base-nova/toggle.json
+++ b/apps/v4/public/r/styles/base-nova/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent\",\n      },\n      size: {\n        default: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]\",\n        lg: \"h-9 min-w-9 px-2.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-nova/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]: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: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]\",\n        lg: \"h-9 min-w-9 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/tooltip-example.json b/apps/v4/public/r/styles/base-nova/tooltip-example.json
index 69e63a7ece..089aac6c33 100644
--- a/apps/v4/public/r/styles/base-nova/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-nova/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/tooltip-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 { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "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 { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/tooltip.json b/apps/v4/public/r/styles/base-nova/tooltip.json
index fdd7d078e6..6e99932626 100644
--- a/apps/v4/public/r/styles/base-nova/tooltip.json
+++ b/apps/v4/public/r/styles/base-nova/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/base-nova/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+      "api": "https://base-ui.com/react/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-nova/vercel.json b/apps/v4/public/r/styles/base-nova/vercel.json
deleted file mode 100644
index 89fd9faa97..0000000000
--- a/apps/v4/public/r/styles/base-nova/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-nova/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-nova/ui/alert\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Calendar } from \"@/registry/base-nova/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/base-nova/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/accordion-example.json b/apps/v4/public/r/styles/base-vega/accordion-example.json
index 17a4a06072..13892f6218 100644
--- a/apps/v4/public/r/styles/base-vega/accordion-example.json
+++ b/apps/v4/public/r/styles/base-vega/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-vega/ui/accordion\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/base-vega/ui/accordion\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion multiple className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            multiple\n            defaultValue={[\"plans\"]}\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\">\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/accordion.json b/apps/v4/public/r/styles/base-vega/accordion.json
index 79b6b93d70..6a616bab6b 100644
--- a/apps/v4/public/r/styles/base-vega/accordion.json
+++ b/apps/v4/public/r/styles/base-vega/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+      "api": "https://base-ui.com/react/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/alert-dialog.json b/apps/v4/public/r/styles/base-vega/alert-dialog.json
index d9d76d560f..f39aa305f8 100644
--- a/apps/v4/public/r/styles/base-vega/alert-dialog.json
+++ b/apps/v4/public/r/styles/base-vega/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"@base-ui/react/alert-dialog\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\n\nfunction AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: AlertDialogPrimitive.Backdrop.Props) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Popup.Props & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Popup\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"alert-dialog-action\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: AlertDialogPrimitive.Close.Props &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(className)}\n      render={<Button variant={variant} size={size} />}\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/alert.json b/apps/v4/public/r/styles/base-vega/alert.json
index 1d860fe994..6d683f84b1 100644
--- a/apps/v4/public/r/styles/base-vega/alert.json
+++ b/apps/v4/public/r/styles/base-vega/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/aspect-ratio-example.json b/apps/v4/public/r/styles/base-vega/aspect-ratio-example.json
index fa9f031835..3156f74e3b 100644
--- a/apps/v4/public/r/styles/base-vega/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/base-vega/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { AspectRatio } from \"@/registry/base-vega/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { AspectRatio } from \"@/registry/base-vega/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/aspect-ratio.json b/apps/v4/public/r/styles/base-vega/aspect-ratio.json
index e3a1caf676..d8763c0bf3 100644
--- a/apps/v4/public/r/styles/base-vega/aspect-ratio.json
+++ b/apps/v4/public/r/styles/base-vega/aspect-ratio.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/avatar.json b/apps/v4/public/r/styles/base-vega/avatar.json
index c162714778..cd64286deb 100644
--- a/apps/v4/public/r/styles/base-vega/avatar.json
+++ b/apps/v4/public/r/styles/base-vega/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"@base-ui/react/avatar\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: AvatarPrimitive.Root.Props & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: AvatarPrimitive.Fallback.Props) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+      "api": "https://base-ui.com/react/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/badge.json b/apps/v4/public/r/styles/base-vega/badge.json
index 33ab219b17..90fa3b9442 100644
--- a/apps/v4/public/r/styles/base-vega/badge.json
+++ b/apps/v4/public/r/styles/base-vega/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/badge.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  })\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/breadcrumb.json b/apps/v4/public/r/styles/base-vega/breadcrumb.json
index bc95abbc81..b777d1fb3b 100644
--- a/apps/v4/public/r/styles/base-vega/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-vega/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word 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(\"hover:text-foreground transition-colors\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/button-group.json b/apps/v4/public/r/styles/base-vega/button-group.json
index 0b4ee52bb1..334475bef6 100644
--- a/apps/v4/public/r/styles/base-vega/button-group.json
+++ b/apps/v4/public/r/styles/base-vega/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/button-group.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-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-vega/lib/utils\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[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-b-md! [&>[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 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/button.json b/apps/v4/public/r/styles/base-vega/button.json
index 61d09547cf..70d2866989 100644
--- a/apps/v4/public/r/styles/base-vega/button.json
+++ b/apps/v4/public/r/styles/base-vega/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/button.tsx",
-      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs\",\n        secondary:\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 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-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\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-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/calendar-example.json b/apps/v4/public/r/styles/base-vega/calendar-example.json
index 93afa53bd8..3965d25f94 100644
--- a/apps/v4/public/r/styles/base-vega/calendar-example.json
+++ b/apps/v4/public/r/styles/base-vega/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-vega/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-vega/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger\n          render={<Button variant=\"outline\" className=\"px-2.5 font-normal\" />}\n        >\n          <IconPlaceholder\n            lucide=\"CalendarIcon\"\n            tabler=\"IconCalendar\"\n            hugeicons=\"CalendarIcon\"\n            phosphor=\"CalendarBlankIcon\"\n            remixicon=\"RiCalendarLine\"\n            data-icon=\"inline-start\"\n          />\n          Open Calendar\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-simple\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-range\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            {date?.from ? (\n              date.to ? (\n                <>\n                  {format(date.from, \"LLL dd, y\")} -{\" \"}\n                  {format(date.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(date.from, \"LLL dd, y\")\n              )\n            ) : (\n              <span>Pick a date</span>\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                id=\"date-picker-with-dropdowns-desktop\"\n                className=\"justify-start px-2.5 font-normal\"\n              />\n            }\n          >\n            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-start\"\n              className=\"ml-auto\"\n            />\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/calendar.json b/apps/v4/public/r/styles/base-vega/calendar.json
index ced9c97cca..bbbe9fdbbc 100644
--- a/apps/v4/public/r/styles/base-vega/calendar.json
+++ b/apps/v4/public/r/styles/base-vega/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/card-example.json b/apps/v4/public/r/styles/base-vega/card-example.json
index 7e61c2ea59..ca8c3db7a5 100644
--- a/apps/v4/public/r/styles/base-vega/card-example.json
+++ b/apps/v4/public/r/styles/base-vega/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/card.json b/apps/v4/public/r/styles/base-vega/card.json
index c36eee360c..07135a618a 100644
--- a/apps/v4/public/r/styles/base-vega/card.json
+++ b/apps/v4/public/r/styles/base-vega/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/carousel.json b/apps/v4/public/r/styles/base-vega/carousel.json
index 137860f2cd..33fc3401aa 100644
--- a/apps/v4/public/r/styles/base-vega/carousel.json
+++ b/apps/v4/public/r/styles/base-vega/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/chart-example.json b/apps/v4/public/r/styles/base-vega/chart-example.json
index 9979452c22..343705c661 100644
--- a/apps/v4/public/r/styles/base-vega/chart-example.json
+++ b/apps/v4/public/r/styles/base-vega/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/chart.json b/apps/v4/public/r/styles/base-vega/chart.json
index e4ef566a1c..96ec0d309a 100644
--- a/apps/v4/public/r/styles/base-vega/chart.json
+++ b/apps/v4/public/r/styles/base-vega/chart.json
@@ -10,9 +10,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/chatgpt.json b/apps/v4/public/r/styles/base-vega/chatgpt.json
deleted file mode 100644
index d06eafa881..0000000000
--- a/apps/v4/public/r/styles/base-vega/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-vega/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-vega/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { Kbd } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <DropdownMenuTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          onClick={() => setDictateEnabled(!dictateEnabled)}\n                          className=\"rounded-4xl\"\n                        />\n                      }\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"PaperclipIcon\"\n                      tabler=\"IconPaperclip\"\n                      hugeicons=\"AttachmentIcon\"\n                      phosphor=\"PaperclipIcon\"\n                      remixicon=\"RiAttachmentLine\"\n                    />\n                    Add photos & files\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                    Deep research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBag01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                    Shopping research\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"WandIcon\"\n                      tabler=\"IconWand\"\n                      hugeicons=\"MagicWand05Icon\"\n                      phosphor=\"MagicWandIcon\"\n                      remixicon=\"RiMagicLine\"\n                    />\n                    Create image\n                  </DropdownMenuItem>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"MousePointerIcon\"\n                            tabler=\"IconPointer\"\n                            hugeicons=\"Cursor01Icon\"\n                            phosphor=\"HandPointingIcon\"\n                            remixicon=\"RiHand\"\n                          />\n                          Agent mode\n                        </DropdownMenuItem>\n                      }\n                    />\n                    <TooltipContent side=\"right\">\n                      <div className=\"font-medium\">35 left</div>\n                      <div className=\"text-primary-foreground/80 text-xs\">\n                        More available for purchase\n                      </div>\n                    </TooltipContent>\n                  </Tooltip>\n                </DropdownMenuGroup>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuPortal>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Add sources\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"BookOpenIcon\"\n                            tabler=\"IconBook\"\n                            hugeicons=\"BookIcon\"\n                            phosphor=\"BookOpenIcon\"\n                            remixicon=\"RiBookOpenLine\"\n                          />\n                          Study and learn\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"GlobeIcon\"\n                            tabler=\"IconWorld\"\n                            hugeicons=\"GlobalIcon\"\n                            phosphor=\"GlobeIcon\"\n                            remixicon=\"RiGlobeLine\"\n                          />\n                          Web search\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PenToolIcon\"\n                            tabler=\"IconPencil\"\n                            hugeicons=\"PenIcon\"\n                            phosphor=\"PencilIcon\"\n                            remixicon=\"RiPencilLine\"\n                          />\n                          Canvas\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuPortal>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    onClick={() => setDictateEnabled(!dictateEnabled)}\n                    className=\"ml-auto rounded-4xl\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"AudioLinesIcon\"\n                  tabler=\"IconMicrophone\"\n                  hugeicons=\"AudioWave01Icon\"\n                  phosphor=\"MicrophoneIcon\"\n                  remixicon=\"RiMicLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"ghost\" className=\"gap-2\" />}\n        >\n          ChatGPT 5.1\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconChevronDown\"\n            hugeicons=\"ArrowDown01Icon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"text-muted-foreground size-4\"\n          />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n              GPT-5.1\n            </DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n              <DropdownMenuRadioItem value=\"auto\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Auto</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Decides how long to think\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"instant\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Instant</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Answers right away\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"thinking\">\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle>Thinking</ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      Thinks longer for better answers\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={model}\n                    onValueChange={setModel}\n                  >\n                    <DropdownMenuRadioItem value=\"gpt-4\">\n                      GPT-4\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                      GPT-4 Turbo\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"gpt-3.5\">\n                      GPT-3.5\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger render={<Button />}>\n          Start Group Chat\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"Settings01Icon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                <span className=\"sr-only\">Memory</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuGroup>\n                  <DropdownMenuRadioGroup\n                    value={memorySetting}\n                    onValueChange={(value) => {\n                      setMemorySetting(value as \"default\" | \"project-only\")\n                    }}\n                  >\n                    <DropdownMenuRadioItem value=\"default\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Default</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can access memories from outside chats, and\n                            vice versa.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                    <DropdownMenuRadioItem value=\"project-only\">\n                      <Item size=\"xs\">\n                        <ItemContent>\n                          <ItemTitle>Project Only</ItemTitle>\n                          <ItemDescription className=\"text-xs\">\n                            Project can only access its own memories. Its\n                            memories are hidden from outside chats.\n                          </ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuRadioItem>\n                  </DropdownMenuRadioGroup>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>\n                    Note that this setting can&apos;t be changed later.\n                  </DropdownMenuLabel>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger\n                      render={\n                        <InputGroupButton variant=\"ghost\" size=\"icon-xs\" />\n                      }\n                    >\n                      <IconPlaceholder\n                        style={\n                          { \"--color\": selectedColor } as React.CSSProperties\n                        }\n                        lucide=\"FolderIcon\"\n                        tabler=\"IconFolder\"\n                        hugeicons=\"FolderIcon\"\n                        phosphor=\"FolderIcon\"\n                        remixicon=\"RiFolderLine\"\n                        className=\"text-(--color)\"\n                      />\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    render={\n                      <button\n                        onClick={() => {\n                          setSelectedCategory(\n                            selectedCategory === category.id\n                              ? null\n                              : category.id\n                          )\n                        }}\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleCheckIcon\"\n                      tabler=\"IconCircleCheck\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      data-icon=\"inline-start\"\n                      className=\"hidden group-data-[checked=true]/badge:inline\"\n                    />\n                    {category.label}\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/checkbox.json b/apps/v4/public/r/styles/base-vega/checkbox.json
index 110aaf5b37..f078d87666 100644
--- a/apps/v4/public/r/styles/base-vega/checkbox.json
+++ b/apps/v4/public/r/styles/base-vega/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+      "api": "https://base-ui.com/react/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/collapsible-example.json b/apps/v4/public/r/styles/base-vega/collapsible-example.json
index 511d479ec9..ced58a742b 100644
--- a/apps/v4/public/r/styles/base-vega/collapsible-example.json
+++ b/apps/v4/public/r/styles/base-vega/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/collapsible-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/base-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"ChevronRightIcon\"\n              tabler=\"IconChevronRight\"\n              hugeicons=\"ArrowRight01Icon\"\n              phosphor=\"CaretRightIcon\"\n              remixicon=\"RiArrowRightSLine\"\n              className=\"transition-transform group-data-[state=open]:rotate-90\"\n            />\n            <IconPlaceholder\n              lucide=\"FolderIcon\"\n              tabler=\"IconFolder\"\n              hugeicons=\"Folder01Icon\"\n              phosphor=\"FolderIcon\"\n              remixicon=\"RiFolderLine\"\n            />\n            {fileItem.name}\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger\n              render={<Button variant=\"outline\" size=\"icon\" />}\n            >\n              {isOpen ? (\n                <IconPlaceholder\n                  lucide=\"MinimizeIcon\"\n                  tabler=\"IconMinimize\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              ) : (\n                <IconPlaceholder\n                  lucide=\"MaximizeIcon\"\n                  tabler=\"IconMaximize\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              )}\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/collapsible.json b/apps/v4/public/r/styles/base-vega/collapsible.json
index 9f8a3f9a2c..6a37d55fb1 100644
--- a/apps/v4/public/r/styles/base-vega/collapsible.json
+++ b/apps/v4/public/r/styles/base-vega/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+      "api": "https://base-ui.com/react/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/combobox-example.json b/apps/v4/public/r/styles/base-vega/combobox-example.json
index 6326604e64..afa2162ed0 100644
--- a/apps/v4/public/r/styles/base-vega/combobox-example.json
+++ b/apps/v4/public/r/styles/base-vega/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-vega/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-vega/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/combobox.json b/apps/v4/public/r/styles/base-vega/combobox.json
index 9b7e6330f6..eacdb20d36 100644
--- a/apps/v4/public/r/styles/base-vega/combobox.json
+++ b/apps/v4/public/r/styles/base-vega/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-4\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm 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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1.5\",\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-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-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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-md 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 overflow-y-auto overscroll-contain p-1 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 rounded-sm py-1.5 pr-8 pl-2 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\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 my-1 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-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/command.json b/apps/v4/public/r/styles/base-vega/command.json
index a77e7a2b68..62a751642e 100644
--- a/apps/v4/public/r/styles/base-vega/command.json
+++ b/apps/v4/public/r/styles/base-vega/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\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(\"bg-border -mx-1 h-px w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\",\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-vega/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\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(\"-mx-1 h-px w-auto bg-border\", 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-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/component-example.json b/apps/v4/public/r/styles/base-vega/component-example.json
index cefcb1099d..6d1f6b99c4 100644
--- a/apps/v4/public/r/styles/base-vega/component-example.json
+++ b/apps/v4/public/r/styles/base-vega/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-vega/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-vega/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger render={<Button />}>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                data-icon=\"inline-start\"\n              />\n              Show Dialog\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/context-menu.json b/apps/v4/public/r/styles/base-vega/context-menu.json
index e17fee6d46..9831a633e3 100644
--- a/apps/v4/public/r/styles/base-vega/context-menu.json
+++ b/apps/v4/public/r/styles/base-vega/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100 outline-none\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_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        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 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-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8\",\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 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/dashboard-01.json b/apps/v4/public/r/styles/base-vega/dashboard-01.json
index 84f6b16dd0..a353d12eb5 100644
--- a/apps/v4/public/r/styles/base-vega/dashboard-01.json
+++ b/apps/v4/public/r/styles/base-vega/dashboard-01.json
@@ -57,7 +57,7 @@
     },
     {
       "path": "registry/base-vega/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-vega/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-vega/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"data-open:bg-muted text-muted-foreground flex size-8\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-vega/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/base-vega/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={table.getIsAllPageRowsSelected()}\n          indeterminate={\n            table.getIsSomePageRowsSelected() &&\n            !table.getIsAllPageRowsSelected()\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select\n            items={[\n              { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n              { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n            ]}\n          >\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              className=\"flex size-8 text-muted-foreground data-open:bg-muted\"\n              size=\"icon\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"EllipsisVerticalIcon\"\n            tabler=\"IconDotsVertical\"\n            hugeicons=\"MoreVerticalCircle01Icon\"\n            phosphor=\"DotsThreeVerticalIcon\"\n            remixicon=\"RiMore2Line\"\n          />\n          <span className=\"sr-only\">Open menu</span>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select\n          defaultValue=\"outline\"\n          items={[\n            { label: \"Outline\", value: \"outline\" },\n            { label: \"Past Performance\", value: \"past-performance\" },\n            { label: \"Key Personnel\", value: \"key-personnel\" },\n            { label: \"Focus Documents\", value: \"focus-documents\" },\n          ]}\n        >\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" size=\"sm\" />}\n            >\n              <IconPlaceholder\n                lucide=\"Columns3Icon\"\n                tabler=\"IconLayoutColumns\"\n                hugeicons=\"LeftToRightListBulletIcon\"\n                phosphor=\"ColumnsIcon\"\n                remixicon=\"RiLayoutColumnLine\"\n                data-icon=\"inline-start\"\n              />\n              Columns\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n                items={[10, 20, 30, 40, 50].map((pageSize) => ({\n                  label: `${pageSize}`,\n                  value: `${pageSize}`,\n                }))}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\nconst chartData = [\n  {\n    month: \"January\",\n    desktop: 186,\n    mobile: 80,\n  },\n  {\n    month: \"February\",\n    desktop: 305,\n    mobile: 200,\n  },\n  {\n    month: \"March\",\n    desktop: 237,\n    mobile: 120,\n  },\n  {\n    month: \"April\",\n    desktop: 73,\n    mobile: 190,\n  },\n  {\n    month: \"May\",\n    desktop: 209,\n    mobile: 130,\n  },\n  {\n    month: \"June\",\n    desktop: 214,\n    mobile: 140,\n  },\n]\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select\n                  defaultValue={item.type}\n                  items={[\n                    { label: \"Table of Contents\", value: \"Table of Contents\" },\n                    { label: \"Executive Summary\", value: \"Executive Summary\" },\n                    {\n                      label: \"Technical Approach\",\n                      value: \"Technical Approach\",\n                    },\n                    { label: \"Design\", value: \"Design\" },\n                    { label: \"Capabilities\", value: \"Capabilities\" },\n                    { label: \"Focus Documents\", value: \"Focus Documents\" },\n                    { label: \"Narrative\", value: \"Narrative\" },\n                    { label: \"Cover Page\", value: \"Cover Page\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select\n                  defaultValue={item.status}\n                  items={[\n                    { label: \"Done\", value: \"Done\" },\n                    { label: \"In Progress\", value: \"In Progress\" },\n                    { label: \"Not Started\", value: \"Not Started\" },\n                  ]}\n                >\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select\n                defaultValue={item.reviewer}\n                items={[\n                  { label: \"Eddie Lake\", value: \"Eddie Lake\" },\n                  { label: \"Jamik Tashpulatov\", value: \"Jamik Tashpulatov\" },\n                  { label: \"Emily Whalen\", value: \"Emily Whalen\" },\n                ]}\n              >\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" />\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -67,7 +67,7 @@
     },
     {
       "path": "registry/base-vega/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/base-vega/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"text-foreground/70 truncate text-xs\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"text-muted-foreground truncate text-xs\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton size=\"lg\" className=\"aria-expanded:bg-muted\" />\n            }\n          >\n            <Avatar className=\"size-8 rounded-lg grayscale\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs text-foreground/70\">\n                {user.email}\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                  <Avatar className=\"size-8\">\n                    <AvatarImage src={user.avatar} alt={user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">{user.name}</span>\n                    <span className=\"truncate text-xs text-muted-foreground\">\n                      {user.email}\n                    </span>\n                  </div>\n                </div>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-vega/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-vega/demo.json b/apps/v4/public/r/styles/base-vega/demo.json
new file mode 100644
index 0000000000..ba4ab2a316
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/base-vega/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback(\n    (value: number | readonly number[]) => {\n      if (typeof value === \"number\") {\n        setSliderValue([value])\n      } else {\n        setSliderValue([...value])\n      }\n    },\n    []\n  )\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                    <span className=\"hidden md:block\">Alert Dialog</span>\n                    <span className=\"block md:hidden\">Dialog</span>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger\n                      render={<Button variant=\"outline\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"ChevronUpIcon\"\n                        tabler=\"IconChevronUp\"\n                        hugeicons=\"ArrowUp01Icon\"\n                        phosphor=\"CaretUpIcon\"\n                        remixicon=\"RiArrowUpSLine\"\n                      />\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/dialog-example.json b/apps/v4/public/r/styles/base-vega/dialog-example.json
index 44b2c52d07..94d96c307b 100644
--- a/apps/v4/public/r/styles/base-vega/dialog-example.json
+++ b/apps/v4/public/r/styles/base-vega/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { Kbd } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { Kbd } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger render={<Button variant=\"outline\" />}>\n            Edit Profile\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose render={<Button variant=\"outline\" />}>\n                Cancel\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Scrollable Content\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Sticky Footer\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Close\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"Auto\", value: \"auto\" },\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nconst themes = [\n  { label: \"Light\", value: \"light\" },\n  { label: \"Dark\", value: \"dark\" },\n  { label: \"System\", value: \"system\" },\n]\n\nconst accents = [\n  { label: \"Default\", value: \"default\" },\n  { label: \"Red\", value: \"red\" },\n  { label: \"Blue\", value: \"blue\" },\n  { label: \"Green\", value: \"green\" },\n  { label: \"Purple\", value: \"purple\" },\n  { label: \"Pink\", value: \"pink\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Chat Settings\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select\n                          items={themes}\n                          value={theme}\n                          onValueChange={(value) => setTheme(value as string)}\n                        >\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {themes.map((theme) => (\n                                <SelectItem\n                                  key={theme.value}\n                                  value={theme.value}\n                                >\n                                  {theme.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          items={accents}\n                          value={accentColor}\n                          onValueChange={(value) =>\n                            setAccentColor(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {accents.map((accent) => (\n                                <SelectItem\n                                  key={accent.value}\n                                  value={accent.value}\n                                >\n                                  {accent.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          items={spokenLanguages}\n                          value={spokenLanguage}\n                          onValueChange={(value) =>\n                            setSpokenLanguage(value as string)\n                          }\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select\n                          items={voices}\n                          value={voice}\n                          onValueChange={(value) => setVoice(value as string)}\n                        >\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger\n                              render={<InputGroupButton size=\"icon-xs\" />}\n                            >\n                              <IconPlaceholder\n                                lucide=\"InfoIcon\"\n                                tabler=\"IconInfoCircle\"\n                                hugeicons=\"AlertCircleIcon\"\n                                phosphor=\"InfoIcon\"\n                                remixicon=\"RiInformationLine\"\n                              />\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dialog.json b/apps/v4/public/r/styles/base-vega/dialog.json
index e6e213477b..01860f97b3 100644
--- a/apps/v4/public/r/styles/base-vega/dialog.json
+++ b/apps/v4/public/r/styles/base-vega/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({ ...props }: DialogPrimitive.Root.Props) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({ ...props }: DialogPrimitive.Close.Props) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: DialogPrimitive.Backdrop.Props) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: DialogPrimitive.Popup.Props & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Popup\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Popup>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close render={<Button variant=\"outline\" />}>\n          Close\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: DialogPrimitive.Description.Props) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/direction.json b/apps/v4/public/r/styles/base-vega/direction.json
index 6af197b65f..7c4723517b 100644
--- a/apps/v4/public/r/styles/base-vega/direction.json
+++ b/apps/v4/public/r/styles/base-vega/direction.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/direction",
+      "api": "https://base-ui.com/react/utils/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/drawer-example.json b/apps/v4/public/r/styles/base-vega/drawer-example.json
index 96ac714643..b2d807eaec 100644
--- a/apps/v4/public/r/styles/base-vega/drawer-example.json
+++ b/apps/v4/public/r/styles/base-vega/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/drawer-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  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/drawer.json b/apps/v4/public/r/styles/base-vega/drawer.json
index 4b07c5bb00..4c680d7daa 100644
--- a/apps/v4/public/r/styles/base-vega/drawer.json
+++ b/apps/v4/public/r/styles/base-vega/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json b/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json
index 81cb0fc478..8ca8261887 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=\"text-muted-foreground truncate text-xs\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dropdown-menu.json b/apps/v4/public/r/styles/base-vega/dropdown-menu.json
index 21337eb47e..49765fc1ff 100644
--- a/apps/v4/public/r/styles/base-vega/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-vega/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100 outline-none data-closed:overflow-hidden\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-auto min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 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-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8\",\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 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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        \"w-auto min-w-[96px] rounded-md bg-popover p-1 text-popover-foreground shadow-lg 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 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/elevenlabs.json b/apps/v4/public/r/styles/base-vega/elevenlabs.json
deleted file mode 100644
index be26cef65f..0000000000
--- a/apps/v4/public/r/styles/base-vega/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/base-vega/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/empty.json b/apps/v4/public/r/styles/base-vega/empty.json
index 819a79897e..edd137f3f3 100644
--- a/apps/v4/public/r/styles/base-vega/empty.json
+++ b/apps/v4/public/r/styles/base-vega/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/example.json b/apps/v4/public/r/styles/base-vega/example.json
index bbb5c91582..78617efed4 100644
--- a/apps/v4/public/r/styles/base-vega/example.json
+++ b/apps/v4/public/r/styles/base-vega/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/base-vega/components/example.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/field.json b/apps/v4/public/r/styles/base-vega/field.json
index c19af2fa6f..c8e90dec7c 100644
--- a/apps/v4/public/r/styles/base-vega/field.json
+++ b/apps/v4/public/r/styles/base-vega/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\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=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/font-dm-sans.json b/apps/v4/public/r/styles/base-vega/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/base-vega/font-dm-sans.json
+++ b/apps/v4/public/r/styles/base-vega/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-vega/font-geist-sans.json b/apps/v4/public/r/styles/base-vega/font-geist-sans.json
deleted file mode 100644
index a60a347fd3..0000000000
--- a/apps/v4/public/r/styles/base-vega/font-geist-sans.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
-  "type": "registry:font",
-  "font": {
-    "family": "'Geist Variable', sans-serif",
-    "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
-    "subsets": [
-      "latin"
-    ]
-  }
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/font-jetbrains-mono.json b/apps/v4/public/r/styles/base-vega/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/base-vega/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/base-vega/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/base-vega/font-lora.json b/apps/v4/public/r/styles/base-vega/font-lora.json
new file mode 100644
index 0000000000..cacd01a3f0
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/font-lora.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-lora",
+  "title": "Lora",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/font-merriweather.json b/apps/v4/public/r/styles/base-vega/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/font-noto-serif.json b/apps/v4/public/r/styles/base-vega/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/font-outfit.json b/apps/v4/public/r/styles/base-vega/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/base-vega/font-outfit.json
+++ b/apps/v4/public/r/styles/base-vega/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-vega/font-playfair-display.json b/apps/v4/public/r/styles/base-vega/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/font-public-sans.json b/apps/v4/public/r/styles/base-vega/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/base-vega/font-public-sans.json
+++ b/apps/v4/public/r/styles/base-vega/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-vega/font-raleway.json b/apps/v4/public/r/styles/base-vega/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/base-vega/font-raleway.json
+++ b/apps/v4/public/r/styles/base-vega/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-vega/font-roboto-slab.json b/apps/v4/public/r/styles/base-vega/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/font-roboto.json b/apps/v4/public/r/styles/base-vega/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/base-vega/font-roboto.json
+++ b/apps/v4/public/r/styles/base-vega/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/base-vega/github.json b/apps/v4/public/r/styles/base-vega/github.json
deleted file mode 100644
index 99bc833871..0000000000
--- a/apps/v4/public/r/styles/base-vega/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-vega/blocks/github.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 { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-vega/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-vega/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-vega/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { Kbd } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { Spinner } from \"@/registry/base-vega/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/hover-card-example.json b/apps/v4/public/r/styles/base-vega/hover-card-example.json
index 03ff2c2ed3..df8cd9e15a 100644
--- a/apps/v4/public/r/styles/base-vega/hover-card-example.json
+++ b/apps/v4/public/r/styles/base-vega/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-vega/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/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  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/base-vega/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\n  \"inline-start\",\n  \"left\",\n  \"top\",\n  \"bottom\",\n  \"right\",\n  \"inline-end\",\n] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side}>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </HoverCardTrigger>\n            <HoverCardContent side={side}>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side.replace(\"-\", \" \")} side\n                  of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard>\n            <HoverCardTrigger\n              delay={100}\n              closeDelay={100}\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Hover me\n            </HoverCardTrigger>\n            <HoverCardContent>\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/hover-card.json b/apps/v4/public/r/styles/base-vega/hover-card.json
index d511e1300a..3dd5561f3e 100644
--- a/apps/v4/public/r/styles/base-vega/hover-card.json
+++ b/apps/v4/public/r/styles/base-vega/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-64 origin-(--transform-origin) rounded-lg p-4 text-sm shadow-md ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport { PreviewCard as PreviewCardPrimitive } from \"@base-ui/react/preview-card\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) {\n  return <PreviewCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) {\n  return (\n    <PreviewCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 4,\n  ...props\n}: PreviewCardPrimitive.Popup.Props &\n  Pick<\n    PreviewCardPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PreviewCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <PreviewCardPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PreviewCardPrimitive.Popup\n          data-slot=\"hover-card-content\"\n          className={cn(\n            \"z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PreviewCardPrimitive.Positioner>\n    </PreviewCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+      "api": "https://base-ui.com/react/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/index.json b/apps/v4/public/r/styles/base-vega/index.json
new file mode 100644
index 0000000000..94f1c90de2
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/input-group-example.json b/apps/v4/public/r/styles/base-vega/input-group-example.json
index f3a60f98d7..a7750b4ffd 100644
--- a/apps/v4/public/r/styles/base-vega/input-group-example.json
+++ b/apps/v4/public/r/styles/base-vega/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-vega/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Spinner } from \"@/registry/base-vega/ui/spinner\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/base-vega/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Spinner } from \"@/registry/base-vega/ui/spinner\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger\n                  render={\n                    <InputGroupButton className=\"rounded-full\" size=\"icon-xs\" />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <InputGroupButton className=\"text-muted-foreground tabular-nums\" />\n                  }\n                >\n                  {country}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDownIcon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>\n                <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-group.json b/apps/v4/public/r/styles/base-vega/input-group.json
index 81aa05d707..1e4553bfd6 100644
--- a/apps/v4/public/r/styles/base-vega/input-group.json
+++ b/apps/v4/public/r/styles/base-vega/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none 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-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\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-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\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 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/input-otp-example.json b/apps/v4/public/r/styles/base-vega/input-otp-example.json
index b10edd502c..e32bfadca7 100644
--- a/apps/v4/public/r/styles/base-vega/input-otp-example.json
+++ b/apps/v4/public/r/styles/base-vega/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-vega/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-vega/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-otp.json b/apps/v4/public/r/styles/base-vega/input-otp.json
index e747459bc8..3eda831d00 100644
--- a/apps/v4/public/r/styles/base-vega/input-otp.json
+++ b/apps/v4/public/r/styles/base-vega/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-md has-aria-invalid:ring-3\",\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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 rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/input.json b/apps/v4/public/r/styles/base-vega/input.json
index 4ba472f7b8..b56418168d 100644
--- a/apps/v4/public/r/styles/base-vega/input.json
+++ b/apps/v4/public/r/styles/base-vega/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/input.tsx",
-      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/item-example.json b/apps/v4/public/r/styles/base-vega/item-example.json
index 68c13f434a..249e0ef178 100644
--- a/apps/v4/public/r/styles/base-vega/item-example.json
+++ b/apps/v4/public/r/styles/base-vega/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title Only (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Clickable item with title and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title (Link)</ItemTitle>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n            <ItemDescription>\n              Complete link item with media, title, and description.\n            </ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"muted\" render={<a href=\"#\" />}>\n          <ItemContent>\n            <ItemTitle>With Actions (Link)</ItemTitle>\n            <ItemDescription>\n              Link item that also has action buttons.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Share\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/item.json b/apps/v4/public/r/styles/base-vega/item.json
index b25442d28e..dd4f3b0f4d 100644
--- a/apps/v4/public/r/styles/base-vega/item.json
+++ b/apps/v4/public/r/styles/base-vega/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/kbd.json b/apps/v4/public/r/styles/base-vega/kbd.json
index 3e65864015..bc47661797 100644
--- a/apps/v4/public/r/styles/base-vega/kbd.json
+++ b/apps/v4/public/r/styles/base-vega/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/label.json b/apps/v4/public/r/styles/base-vega/label.json
index 3bdd0b0845..1bcae885c9 100644
--- a/apps/v4/public/r/styles/base-vega/label.json
+++ b/apps/v4/public/r/styles/base-vega/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+      "api": "https://base-ui.com/react/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/login-02.json b/apps/v4/public/r/styles/base-vega/login-02.json
index 135d7fc72d..985da5f312 100644
--- a/apps/v4/public/r/styles/base-vega/login-02.json
+++ b/apps/v4/public/r/styles/base-vega/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-vega/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-vega/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/login-03.json b/apps/v4/public/r/styles/base-vega/login-03.json
index 08c114fb47..5f293c5032 100644
--- a/apps/v4/public/r/styles/base-vega/login-03.json
+++ b/apps/v4/public/r/styles/base-vega/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-vega/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/base-vega/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-vega/login-04.json b/apps/v4/public/r/styles/base-vega/login-04.json
index 643e70e7f5..36499c0c2d 100644
--- a/apps/v4/public/r/styles/base-vega/login-04.json
+++ b/apps/v4/public/r/styles/base-vega/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-vega/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-vega/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/login-05.json b/apps/v4/public/r/styles/base-vega/login-05.json
index cfe287e4da..936fe1e9e9 100644
--- a/apps/v4/public/r/styles/base-vega/login-05.json
+++ b/apps/v4/public/r/styles/base-vega/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/base-vega/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/base-vega/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-vega/menubar.json b/apps/v4/public/r/styles/base-vega/menubar.json
index 15d3dd45c0..fecdb3b855 100644
--- a/apps/v4/public/r/styles/base-vega/menubar.json
+++ b/apps/v4/public/r/styles/base-vega/menubar.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs\",\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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target min-w-36 rounded-md p-1 shadow-md ring-1 duration-100\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-2 rounded-sm px-2 py-1.5 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 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-2 py-1.5 text-sm font-medium data-inset:pl-8\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-md p-1 shadow-lg ring-1 duration-100\",\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-vega/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs\",\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-sm px-2 py-1 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 min-w-36 rounded-md bg-popover p-1 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 rounded-sm px-2 py-1.5 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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-2 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 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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-2 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-2 py-1.5 text-sm font-medium data-inset:pl-8\",\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\", 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-sm px-2 py-1.5 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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        \"min-w-32 rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+      "api": "https://base-ui.com/react/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/native-select.json b/apps/v4/public/r/styles/base-vega/native-select.json
index 108d8ec465..d8c0f33e76 100644
--- a/apps/v4/public/r/styles/base-vega/native-select.json
+++ b/apps/v4/public/r/styles/base-vega/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-8\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-2.5 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({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/navigation-menu-example.json b/apps/v4/public/r/styles/base-vega/navigation-menu-example.json
index b3be686516..a2dccc9f09 100644
--- a/apps/v4/public/r/styles/base-vega/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/base-vega/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-vega/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/base-vega/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuBasic />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-2 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Backlog\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    To Do\n                  </NavigationMenuLink>\n                  <NavigationMenuLink\n                    render={\n                      <Link href=\"#\" className=\"flex-row items-center gap-2\" />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"CircleAlertIcon\"\n                      tabler=\"IconExclamationCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"WarningCircleIcon\"\n                      remixicon=\"RiErrorWarningLine\"\n                    />\n                    Done\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              render={<Link href=\"/docs\" />}\n              className={navigationMenuTriggerStyle()}\n            >\n              Documentation\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink render={<Link href={href} />}>\n        <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n          <div className=\"leading-none font-medium\">{title}</div>\n          <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n        </div>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/navigation-menu.json b/apps/v4/public/r/styles/base-vega/navigation-menu.json
index b7f8672aa0..196dc48c44 100644
--- a/apps/v4/public/r/styles/base-vega/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-vega/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 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 pr-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\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=\"bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] 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        \"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"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-md bg-background px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 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 pr-2.5 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow 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-lg bg-popover text-popover-foreground shadow 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-sm p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 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-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+      "api": "https://base-ui.com/react/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/otp-01.json b/apps/v4/public/r/styles/base-vega/otp-01.json
deleted file mode 100644
index dd6d088d3d..0000000000
--- a/apps/v4/public/r/styles/base-vega/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-vega/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-vega/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-vega/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-vega/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/otp-02.json b/apps/v4/public/r/styles/base-vega/otp-02.json
deleted file mode 100644
index c7cd66e279..0000000000
--- a/apps/v4/public/r/styles/base-vega/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-vega/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-vega/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-vega/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-vega/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/otp-03.json b/apps/v4/public/r/styles/base-vega/otp-03.json
deleted file mode 100644
index 4d4afa1eab..0000000000
--- a/apps/v4/public/r/styles/base-vega/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-vega/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/base-vega/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-vega/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/base-vega/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/otp-04.json b/apps/v4/public/r/styles/base-vega/otp-04.json
deleted file mode 100644
index fcfbda5f1d..0000000000
--- a/apps/v4/public/r/styles/base-vega/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-vega/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-vega/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-vega/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-vega/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/otp-05.json b/apps/v4/public/r/styles/base-vega/otp-05.json
deleted file mode 100644
index 4fb7e2654a..0000000000
--- a/apps/v4/public/r/styles/base-vega/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/base-vega/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/base-vega/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/base-vega/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-vega/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/pagination.json b/apps/v4/public/r/styles/base-vega/pagination.json
index 764be30d9a..4657e5c8f9 100644
--- a/apps/v4/public/r/styles/base-vega/pagination.json
+++ b/apps/v4/public/r/styles/base-vega/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/popover.json b/apps/v4/public/r/styles/base-vega/popover.json
index 9cb55214b7..b0700e1990 100644
--- a/apps/v4/public/r/styles/base-vega/popover.json
+++ b/apps/v4/public/r/styles/base-vega/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden duration-100\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"@base-ui/react/popover\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Popover({ ...props }: PopoverPrimitive.Root.Props) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  ...props\n}: PopoverPrimitive.Popup.Props &\n  Pick<\n    PopoverPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            \"z-50 flex w-72 origin-(--transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: PopoverPrimitive.Description.Props) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+      "api": "https://base-ui.com/react/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/preview.json b/apps/v4/public/r/styles/base-vega/preview.json
index 2a845d62c4..af22992a63 100644
--- a/apps/v4/public/r/styles/base-vega/preview.json
+++ b/apps/v4/public/r/styles/base-vega/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -9,6 +9,7 @@
     "button",
     "button-group",
     "card",
+    "chart",
     "checkbox",
     "combobox",
     "dropdown-menu",
@@ -32,8 +33,8 @@
   ],
   "files": [
     {
-      "path": "registry/base-vega/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/base-vega/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/base-vega/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/base-vega/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-vega/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\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 { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-vega/ui/sheet\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Spinner } from \"@/registry/base-vega/ui/spinner\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon-sm\"\n                    aria-label=\"More Options\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuRadioGroup\n                            value={label}\n                            onValueChange={setLabel}\n                          >\n                            <DropdownMenuRadioItem value=\"personal\">\n                              Personal\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"work\">\n                              Work\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"other\">\n                              Other\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <Button\n                      variant=\"outline\"\n                      size=\"icon\"\n                      aria-label=\"Open Popover\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger\n                render={\n                  <InputGroupButton\n                    className=\"rounded-full\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  />\n                }\n              >\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <InputGroupAddon>\n              <Popover>\n                <PopoverTrigger\n                  render={\n                    <InputGroupButton\n                      variant=\"secondary\"\n                      size=\"icon-xs\"\n                      aria-label=\"Info\"\n                    />\n                  }\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </PopoverTrigger>\n                <PopoverContent\n                  align=\"start\"\n                  alignOffset={10}\n                  className=\"flex flex-col gap-1 rounded-xl text-sm\"\n                >\n                  <p className=\"font-medium\">Your connection is not secure.</p>\n                  <p>\n                    You should not enter any sensitive information on this site.\n                  </p>\n                </PopoverContent>\n              </Popover>\n            </InputGroupAddon>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger\n                    render={\n                      <InputGroupButton\n                        onClick={() => setVoiceEnabled(!voiceEnabled)}\n                        data-active={voiceEnabled}\n                        className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                        aria-pressed={voiceEnabled}\n                        size=\"icon-xs\"\n                        aria-label=\"Voice Mode\"\n                      />\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"AudioLinesIcon\"\n                      tabler=\"IconWaveSine\"\n                      hugeicons=\"AudioWave01Icon\"\n                      phosphor=\"MicrophoneIcon\"\n                      remixicon=\"RiMicLine\"\n                    />\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<InputGroupButton variant=\"ghost\" />}\n              >\n                Auto\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Auto</DropdownMenuItem>\n                  <DropdownMenuItem>Agent</DropdownMenuItem>\n                  <DropdownMenuItem>Manual</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button variant=\"outline\" />}>\n                Show Dialog\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger render={<Button />}>\n                Connect Mouse\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  const monthItems = [\n    { label: \"MM\", value: null },\n    { label: \"01\", value: \"01\" },\n    { label: \"02\", value: \"02\" },\n    { label: \"03\", value: \"03\" },\n    { label: \"04\", value: \"04\" },\n    { label: \"05\", value: \"05\" },\n    { label: \"06\", value: \"06\" },\n    { label: \"07\", value: \"07\" },\n    { label: \"08\", value: \"08\" },\n    { label: \"09\", value: \"09\" },\n    { label: \"10\", value: \"10\" },\n    { label: \"11\", value: \"11\" },\n    { label: \"12\", value: \"12\" },\n  ]\n\n  const yearItems = [\n    { label: \"YYYY\", value: null },\n    { label: \"2024\", value: \"2024\" },\n    { label: \"2025\", value: \"2025\" },\n    { label: \"2026\", value: \"2026\" },\n    { label: \"2027\", value: \"2027\" },\n    { label: \"2028\", value: \"2028\" },\n    { label: \"2029\", value: \"2029\" },\n  ]\n\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select items={monthItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {monthItems.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=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select items={yearItems} defaultValue={null}>\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            {yearItems.map((item) => (\n                              <SelectItem key={item.value} value={item.value}>\n                                {item.label}\n                              </SelectItem>\n                            ))}\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst roleItems = [\n  { label: \"Developer\", value: \"developer\" },\n  { label: \"Designer\", value: \"designer\" },\n  { label: \"Manager\", value: \"manager\" },\n  { label: \"Other\", value: \"other\" },\n]\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger\n                render={<Button variant=\"ghost\" size=\"icon\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"MoreVerticalIcon\"\n                  tabler=\"IconDotsVertical\"\n                  hugeicons=\"MoreVerticalCircle01Icon\"\n                  phosphor=\"DotsThreeVerticalIcon\"\n                  remixicon=\"RiMore2Line\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select items={roleItems} defaultValue={null}>\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        {roleItems.map((item) => (\n                          <SelectItem key={item.value} value={item.value}>\n                            {item.label}\n                          </SelectItem>\n                        ))}\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" render={<a href=\"#\" />}>\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"ShoppingBagIcon\"\n              tabler=\"IconShoppingBag\"\n              hugeicons=\"ShoppingBasket01Icon\"\n              phosphor=\"BagIcon\"\n              remixicon=\"RiShoppingBagLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Your order has been shipped.</ItemTitle>\n          </ItemContent>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={\n                <Button variant=\"secondary\" className=\"flex-1 capitalize\" />\n              }\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/base-vega/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/base-vega/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/base-vega/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/base-vega/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/base-vega/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/base-vega/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/base-vega/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/base-vega/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/base-vega/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/base-vega/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/base-vega/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/base-vega/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/base-vega/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/base-vega/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/base-vega/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/base-vega/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/base-vega/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/base-vega/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/base-vega/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/base-vega/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/base-vega/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/base-vega/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/base-vega/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/base-vega/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/base-vega/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/base-vega/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/base-vega/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/base-vega/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/base-vega/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/base-vega/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/base-vega/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/base-vega/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/base-vega/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/progress-example.json b/apps/v4/public/r/styles/base-vega/progress-example.json
index a97a1d6b47..ed23e00833 100644
--- a/apps/v4/public/r/styles/base-vega/progress-example.json
+++ b/apps/v4/public/r/styles/base-vega/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/progress-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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-vega/ui/progress\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Progress,\n  ProgressLabel,\n  ProgressValue,\n} from \"@/registry/base-vega/ui/progress\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Progress value={56}>\n        <ProgressLabel>Upload progress</ProgressLabel>\n        <ProgressValue />\n      </Progress>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState(50)\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={(value) => setValue(value as number)}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/progress.json b/apps/v4/public/r/styles/base-vega/progress.json
index 63d67bbed4..e96a0d163f 100644
--- a/apps/v4/public/r/styles/base-vega/progress.json
+++ b/apps/v4/public/r/styles/base-vega/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"bg-muted relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"bg-primary h-full transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"text-muted-foreground ml-auto text-sm tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
+      "content": "\"use client\"\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  ...props\n}: ProgressPrimitive.Root.Props) {\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      data-slot=\"progress\"\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      <ProgressTrack>\n        <ProgressIndicator />\n      </ProgressTrack>\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"h-full bg-primary transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"ml-auto text-sm text-muted-foreground tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+      "api": "https://base-ui.com/react/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/radio-group.json b/apps/v4/public/r/styles/base-vega/radio-group.json
index 263e74e04f..b894b6f698 100644
--- a/apps/v4/public/r/styles/base-vega/radio-group.json
+++ b/apps/v4/public/r/styles/base-vega/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\"\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+      "api": "https://base-ui.com/react/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/registry.json b/apps/v4/public/r/styles/base-vega/registry.json
index a92fa8d6c7..e8bb4e825b 100644
--- a/apps/v4/public/r/styles/base-vega/registry.json
+++ b/apps/v4/public/r/styles/base-vega/registry.json
@@ -2,6 +2,56 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": [
+        "class-variance-authority",
+        "lucide-react",
+        "@base-ui/react"
+      ],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +60,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+          "api": "https://base-ui.com/react/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +77,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +94,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +111,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +127,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+          "api": "https://base-ui.com/react/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +144,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +160,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +176,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +193,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +211,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +228,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +246,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -138,6 +265,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -148,6 +281,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+          "api": "https://base-ui.com/react/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -158,6 +298,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+          "api": "https://base-ui.com/react/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -170,6 +317,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -182,6 +336,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -192,6 +353,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -203,6 +371,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -214,6 +389,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -224,6 +406,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -234,6 +423,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -245,6 +440,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -259,6 +460,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+          "api": "https://base-ui.com/react/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -269,6 +477,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -280,6 +494,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -291,6 +511,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -302,6 +529,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -312,6 +545,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+          "api": "https://base-ui.com/react/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -323,6 +563,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+          "api": "https://base-ui.com/react/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -333,6 +580,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+          "api": "https://base-ui.com/react/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -344,6 +598,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -354,6 +614,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+          "api": "https://base-ui.com/react/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -364,6 +631,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+          "api": "https://base-ui.com/react/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -374,6 +648,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+          "api": "https://base-ui.com/react/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -385,6 +666,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -395,6 +683,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+          "api": "https://base-ui.com/react/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -405,6 +700,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+          "api": "https://base-ui.com/react/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -415,6 +717,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+          "api": "https://base-ui.com/react/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -426,6 +735,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+          "api": "https://base-ui.com/react/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -445,6 +761,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -455,6 +777,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -465,6 +793,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+          "api": "https://base-ui.com/react/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -476,6 +811,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -486,6 +828,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -496,6 +844,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+          "api": "https://base-ui.com/react/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -506,6 +861,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -516,6 +877,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+          "api": "https://base-ui.com/react/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -526,6 +894,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -536,6 +910,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -547,6 +928,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+          "api": "https://base-ui.com/react/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -557,6 +945,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+          "api": "https://base-ui.com/react/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -568,6 +963,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -578,6 +979,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -589,6 +996,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/base/direction",
+          "api": "https://base-ui.com/react/utils/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1467,6 +1880,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/base-vega/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1515,7 +1955,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1523,6 +1963,7 @@
         "button",
         "button-group",
         "card",
+        "chart",
         "checkbox",
         "combobox",
         "dropdown-menu",
@@ -1546,110 +1987,7 @@
       ],
       "files": [
         {
-          "path": "registry/base-vega/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/base-vega/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-vega/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-vega/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/base-vega/blocks/chatgpt.tsx",
+          "path": "registry/base-vega/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2554,7 +2892,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2566,7 +2904,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2578,7 +2916,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2590,7 +2928,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2602,7 +2940,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2617,7 +2955,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2632,6 +2970,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/base-vega/resizable.json b/apps/v4/public/r/styles/base-vega/resizable.json
index e37139ded6..23c5b84a0a 100644
--- a/apps/v4/public/r/styles/base-vega/resizable.json
+++ b/apps/v4/public/r/styles/base-vega/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/scroll-area-example.json b/apps/v4/public/r/styles/base-vega/scroll-area-example.json
index 53e0f8f487..0cbc38ec17 100644
--- a/apps/v4/public/r/styles/base-vega/scroll-area-example.json
+++ b/apps/v4/public/r/styles/base-vega/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-vega/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/base-vega/ui/scroll-area\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/scroll-area.json b/apps/v4/public/r/styles/base-vega/scroll-area.json
index 2d2abcef28..63e0edfac4 100644
--- a/apps/v4/public/r/styles/base-vega/scroll-area.json
+++ b/apps/v4/public/r/styles/base-vega/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: ScrollAreaPrimitive.Root.Props) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props) {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+      "api": "https://base-ui.com/react/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/select.json b/apps/v4/public/r/styles/base-vega/select.json
index 2eb5ae3ac5..a6b9d0cc68 100644
--- a/apps/v4/public/r/styles/base-vega/select.json
+++ b/apps/v4/public/r/styles/base-vega/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"text-muted-foreground pointer-events-none size-4\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[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(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center 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        \"bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center 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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *: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:bg-input/30 dark:hover:bg-input/50 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        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 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+      "api": "https://base-ui.com/react/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/separator-example.json b/apps/v4/public/r/styles/base-vega/separator-example.json
index 0ea3cfe69f..7022fe61ee 100644
--- a/apps/v4/public/r/styles/base-vega/separator-example.json
+++ b/apps/v4/public/r/styles/base-vega/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/separator.json b/apps/v4/public/r/styles/base-vega/separator.json
index b25b112a9e..4b9fe0601c 100644
--- a/apps/v4/public/r/styles/base-vega/separator.json
+++ b/apps/v4/public/r/styles/base-vega/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: SeparatorPrimitive.Props) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+      "api": "https://base-ui.com/react/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/sheet-example.json b/apps/v4/public/r/styles/base-vega/sheet-example.json
index ad0a355274..492afb141a 100644
--- a/apps/v4/public/r/styles/base-vega/sheet-example.json
+++ b/apps/v4/public/r/styles/base-vega/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-vega/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/base-vega/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>Open</SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose render={<Button variant=\"outline\" />}>Close</SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger render={<Button variant=\"outline\" />}>\n          No Close Button\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger\n              render={<Button variant=\"outline\" className=\"capitalize\" />}\n            >\n              {side}\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose render={<Button variant=\"outline\" />}>\n                  Cancel\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sheet.json b/apps/v4/public/r/styles/base-vega/sheet.json
index 7865f22f3b..5f2703027c 100644
--- a/apps/v4/public/r/styles/base-vega/sheet.json
+++ b/apps/v4/public/r/styles/base-vega/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <IconPlaceholder\n              lucide=\"XIcon\"\n              tabler=\"IconX\"\n              hugeicons=\"Cancel01Icon\"\n              phosphor=\"XIcon\"\n              remixicon=\"RiCloseLine\"\n            />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+      "api": "https://base-ui.com/react/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-01.json b/apps/v4/public/r/styles/base-vega/sidebar-01.json
index fa0624ad78..d0c4ac1c7a 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-01.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-02.json b/apps/v4/public/r/styles/base-vega/sidebar-02.json
index 1c2d83762d..fb7e924c1f 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-02.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-vega/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-vega/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-vega/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/base-vega/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {item.title}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            <div className=\"flex flex-col gap-0.5 leading-none\">\n              <span className=\"font-medium\">Documentation</span>\n              <span className=\"\">v{selectedVersion}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-03.json b/apps/v4/public/r/styles/base-vega/sidebar-03.json
index 9033fb8df9..8b40c80c4b 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-03.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-04.json b/apps/v4/public/r/styles/base-vega/sidebar-04.json
index 51e6b6f37b..dcc7cab962 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-04.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton\n                  render={<a href={item.url} className=\"font-medium\" />}\n                >\n                  {item.title}\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton\n                          isActive={item.isActive}\n                          render={<a href={item.url} />}\n                        >\n                          {item.title}\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-05.json b/apps/v4/public/r/styles/base-vega/sidebar-05.json
index a5b5bd76bd..95e4ec74c3 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-05.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-vega/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/base-vega/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <SidebarMenuButton render={<CollapsibleTrigger />}>\n                    {item.title}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"PlusIcon\"\n                      tabler=\"IconPlus\"\n                      hugeicons=\"PlusSignIcon\"\n                      phosphor=\"PlusIcon\"\n                      remixicon=\"RiAddLine\"\n                      className=\"ml-auto group-aria-expanded/menu-button:hidden\"\n                    />\n                    <IconPlaceholder\n                      lucide=\"MinusIcon\"\n                      tabler=\"IconMinus\"\n                      hugeicons=\"MinusSignIcon\"\n                      phosphor=\"MinusIcon\"\n                      remixicon=\"RiSubtractLine\"\n                      className=\"ml-auto hidden group-aria-expanded/menu-button:block\"\n                    />\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              isActive={item.isActive}\n                              render={<a href={item.url} />}\n                            >\n                              {item.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-06.json b/apps/v4/public/r/styles/base-vega/sidebar-06.json
index 051b4aca6e..77e124fb1b 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-06.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-vega/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-vega/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-vega/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/base-vega/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v1.0.0</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { SidebarInput } from \"@/registry/base-vega/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { SidebarInput } from \"@/registry/base-vega/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-07.json b/apps/v4/public/r/styles/base-vega/sidebar-07.json
index dbff7fcedf..c42298311a 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-07.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-08.json b/apps/v4/public/r/styles/base-vega/sidebar-08.json
index b931eedd1d..1971716f55 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-08.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-vega/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-vega/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-vega/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-vega/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-vega/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-vega/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-09.json b/apps/v4/public/r/styles/base-vega/sidebar-09.json
index dca4c2b4d1..8952de7ad4 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-09.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-09.json
@@ -16,18 +16,18 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0\"\n                render={<a href=\"#\" />}\n              >\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-09/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground md:h-8 md:p-0\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton\n                size=\"lg\"\n                className=\"md:h-8 md:p-0 data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n              />\n            }\n          >\n            <Avatar className=\"h-8 w-8 rounded-lg\">\n              <AvatarImage src={user.avatar} alt={user.name} />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-medium\">{user.name}</span>\n              <span className=\"truncate text-xs\">{user.email}</span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto size-4\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs\">{user.email}</span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Upgrade to Pro\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BadgeCheckIcon\"\n                  tabler=\"IconRosetteDiscountCheck\"\n                  hugeicons=\"CheckmarkBadgeIcon\"\n                  phosphor=\"CheckCircleIcon\"\n                  remixicon=\"RiCheckboxCircleLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconBell\"\n                  hugeicons=\"NotificationIcon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotificationLine\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-10.json b/apps/v4/public/r/styles/base-vega/sidebar-10.json
index 7b463f9262..1ca14b6d76 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-10.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-vega/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/base-vega/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"data-open:bg-accent h-7 w-7\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"h-7 w-7 data-open:bg-accent\"\n            />\n          }\n        >\n          <IconPlaceholder\n            lucide=\"MoreHorizontalIcon\"\n            tabler=\"IconDots\"\n            hugeicons=\"MoreHorizontalCircle01Icon\"\n            phosphor=\"DotsThreeOutlineIcon\"\n            remixicon=\"RiMoreLine\"\n          />\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<SidebarMenuButton className=\"w-fit px-1.5\" />}\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-11.json b/apps/v4/public/r/styles/base-vega/sidebar-11.json
index d247629ad9..24c03b4184 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-11.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-12.json b/apps/v4/public/r/styles/base-vega/sidebar-12.json
index 21bd01117d..73d24f5dfc 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-12.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-vega/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-vega/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-vega/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/base-vega/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-13.json b/apps/v4/public/r/styles/base-vega/sidebar-13.json
index 481693b609..9ae4829ca9 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-13.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger render={<Button size=\"sm\" />}>Open Dialog</DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          isActive={item.name === \"Messages & media\"}\n                          render={<a href=\"#\" />}\n                        >\n                          {item.icon}\n                          <span>{item.name}</span>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({\n                length: 10,\n              }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-14.json b/apps/v4/public/r/styles/base-vega/sidebar-14.json
index 37ffe1f57c..68f9a33a42 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-14.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-15.json b/apps/v4/public/r/styles/base-vega/sidebar-15.json
index 0e01f4d8ff..865789f76e 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-15.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/base-vega/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-vega/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/base-vega/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/base-vega/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                render={<CollapsibleTrigger />}\n              >\n                {calendar.name}{\" \"}\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                  className=\"ml-auto transition-transform group-data-open/collapsible:rotate-90\"\n                />\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton render={<a href=\"#\" />}>\n                  <span>{workspace.emoji}</span>\n                  <span>{workspace.name}</span>\n                </SidebarMenuButton>\n                <SidebarMenuAction\n                  render={<CollapsibleTrigger />}\n                  className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90\"\n                  showOnHover\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </SidebarMenuAction>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton render={<a href=\"#\" />}>\n                          <span>{page.emoji}</span>\n                          <span>{page.name}</span>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-vega/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-vega/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/base-vega/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/base-vega/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"aria-expanded:bg-muted aria-expanded:text-foreground w-fit px-1.5\" />\n            }\n          >\n            <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground font-medium\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n  if (!activeTeam) {\n    return null\n  }\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <SidebarMenuButton className=\"w-fit px-1.5 aria-expanded:bg-muted aria-expanded:text-foreground\" />\n            }\n          >\n            <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n              {activeTeam.logo}\n            </div>\n            <span className=\"truncate font-medium\">{activeTeam.name}</span>\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"opacity-50\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n                Teams\n              </DropdownMenuLabel>\n              {teams.map((team, index) => (\n                <DropdownMenuItem\n                  key={team.name}\n                  onClick={() => setActiveTeam(team)}\n                  className=\"gap-2 p-2\"\n                >\n                  <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                    {team.logo}\n                  </div>\n                  {team.name}\n                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem className=\"gap-2 p-2\">\n                <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"font-medium text-muted-foreground\">\n                  Add team\n                </div>\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-16.json b/apps/v4/public/r/styles/base-vega/sidebar-16.json
index a85fe0ca2d..d927dc28f0 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-16.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-vega/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-vega/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/base-vega/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/base-vega/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/base-vega/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-vega/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-vega/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-vega/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/base-vega/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/base-vega/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/base-vega/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/base-vega/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"TerminalIcon\"\n                  tabler=\"IconCommand\"\n                  hugeicons=\"CommandIcon\"\n                  phosphor=\"CommandIcon\"\n                  remixicon=\"RiCommandLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">Acme Inc</span>\n                <span className=\"truncate text-xs\">Enterprise</span>\n              </div>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/base-vega/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-vega/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { useSidebar } from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-vega/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { useSidebar } from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-example.json b/apps/v4/public/r/styles/base-vega/sidebar-example.json
index 9165457c5b..4626cb1cef 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-example.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v{selectedVersion}</ItemDescription>\n                    </ItemContent>\n                    <ItemActions>\n                      <IconPlaceholder\n                        lucide=\"ChevronsUpDownIcon\"\n                        tabler=\"IconSelector\"\n                        hugeicons=\"UnfoldMoreIcon\"\n                        phosphor=\"CaretUpDownIcon\"\n                        remixicon=\"RiArrowUpDownLine\"\n                      />\n                    </ItemActions>\n                  </Item>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  {data.versions.map((version) => (\n                    <DropdownMenuItem\n                      key={version}\n                      onSelect={() => setSelectedVersion(version)}\n                    >\n                      v{version}{\" \"}\n                      {version === selectedVersion && (\n                        <IconPlaceholder\n                          lucide=\"CheckIcon\"\n                          tabler=\"IconCheck\"\n                          hugeicons=\"Tick02Icon\"\n                          phosphor=\"CheckIcon\"\n                          remixicon=\"RiCheckLine\"\n                          className=\"ml-auto\"\n                        />\n                      )}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton\n                        render={<a href={subItem.url} />}\n                        isActive={subItem.isActive}\n                      >\n                        {subItem.title}\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-floating-example.json b/apps/v4/public/r/styles/base-vega/sidebar-floating-example.json
index 3f8b7f6348..fe9f364410 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-vega/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Field } from \"@/registry/base-vega/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" render={<a href=\"#\" />}>\n                <Item className=\"p-0\" size=\"xs\">\n                  <ItemContent>\n                    <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                    <ItemDescription>v1.0.0</ItemDescription>\n                  </ItemContent>\n                </Item>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger\n                      render={\n                        <SidebarMenuButton className=\"data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground\" />\n                      }\n                    >\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                        className=\"ml-auto\"\n                      />\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem\n                              render={<a href={subItem.url} />}\n                              key={subItem.title}\n                            >\n                              {subItem.title}\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json b/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json
index 64860e9644..005ab40cec 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    tooltip={item.title}\n                    render={<CollapsibleTrigger />}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                      className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                    />\n                  </SidebarMenuButton>\n                  <CollapsibleContent>\n                    <SidebarMenuSub>\n                      {item.items?.map((subItem) => (\n                        <SidebarMenuSubItem key={subItem.title}>\n                          <SidebarMenuSubButton\n                            render={<a href={subItem.url} />}\n                          >\n                            {subItem.title}\n                          </SidebarMenuSubButton>\n                        </SidebarMenuSubItem>\n                      ))}\n                    </SidebarMenuSub>\n                  </CollapsibleContent>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Button\n                    size=\"icon-sm\"\n                    render={<span />}\n                    nativeButton={false}\n                    className=\"size-8\"\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      viewBox=\"0 0 256 256\"\n                    >\n                      <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                      <line\n                        x1=\"208\"\n                        y1=\"128\"\n                        x2=\"128\"\n                        y2=\"208\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                      <line\n                        x1=\"192\"\n                        y1=\"40\"\n                        x2=\"40\"\n                        y2=\"192\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        strokeWidth=\"32\"\n                      ></line>\n                    </svg>\n                  </Button>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {activeTeam.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuGroup>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <CollapsibleTrigger\n                      render={<SidebarMenuButton tooltip={item.title} />}\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                      <IconPlaceholder\n                        lucide=\"ChevronRightIcon\"\n                        tabler=\"IconChevronRight\"\n                        hugeicons=\"ArrowRight01Icon\"\n                        phosphor=\"CaretRightIcon\"\n                        remixicon=\"RiArrowRightSLine\"\n                        className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                      />\n                    </CollapsibleTrigger>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton\n                              render={<a href={subItem.url} />}\n                            >\n                              {subItem.title}\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton render={<a href={item.url} />}>\n                    {item.icon}\n                    {item.name}\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger\n                  render={\n                    <SidebarMenuButton\n                      size=\"lg\"\n                      className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                    />\n                  }\n                >\n                  <Avatar>\n                    <AvatarImage src={data.user.avatar} alt={data.user.name} />\n                    <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                  </Avatar>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">\n                      {data.user.name}\n                    </span>\n                    <span className=\"truncate text-xs\">{data.user.email}</span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ChevronsUpDownIcon\"\n                    tabler=\"IconSelector\"\n                    hugeicons=\"UnfoldMoreIcon\"\n                    phosphor=\"CaretUpDownIcon\"\n                    remixicon=\"RiArrowUpDownLine\"\n                  />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar-inset-example.json b/apps/v4/public/r/styles/base-vega/sidebar-inset-example.json
index bce5f1257c..4ade3cee39 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/base-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  defaultOpen={item.isActive}\n                  render={<SidebarMenuItem />}\n                >\n                  <SidebarMenuButton\n                    render={<a href={item.url} />}\n                    isActive={item.isActive}\n                  >\n                    {item.icon}\n                    <span>{item.title}</span>\n                  </SidebarMenuButton>\n                  {item.items?.length ? (\n                    <>\n                      <CollapsibleTrigger\n                        render={\n                          <SidebarMenuAction className=\"data-open:rotate-90\" />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                        />\n                        <span className=\"sr-only\">Toggle</span>\n                      </CollapsibleTrigger>\n                      <CollapsibleContent>\n                        <SidebarMenuSub>\n                          {item.items.map((subItem) => (\n                            <SidebarMenuSubItem key={subItem.title}>\n                              <SidebarMenuSubButton\n                                render={<a href={subItem.url} />}\n                              >\n                                {subItem.title}\n                              </SidebarMenuSubButton>\n                            </SidebarMenuSubItem>\n                          ))}\n                        </SidebarMenuSub>\n                      </CollapsibleContent>\n                    </>\n                  ) : null}\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton render={<a href={item.url} />} size=\"sm\">\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/sidebar.json b/apps/v4/public/r/styles/base-vega/sidebar.json
index 0860d1a864..91c9118dd8 100644
--- a/apps/v4/public/r/styles/base-vega/sidebar.json
+++ b/apps/v4/public/r/styles/base-vega/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-vega/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-vega/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-vega/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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          \"text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-md px-2 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 flex shrink-0 items-center outline-hidden [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-md p-0 focus-visible:ring-2 [&>svg]:size-4 flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"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-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : TooltipTrigger,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-md p-0 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4 flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0\",\n          showOnHover &&\n            \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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          \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-md px-2 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4 flex min-w-0 -translate-x-px items-center overflow-hidden outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-vega/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-vega/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-vega/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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-lg 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-xl 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(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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 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-md px-2 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-md 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-1\", 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-md p-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-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : <TooltipTrigger 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-md 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-1.5 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-md 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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\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-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/signup-02.json b/apps/v4/public/r/styles/base-vega/signup-02.json
index b23f986578..33fd691cea 100644
--- a/apps/v4/public/r/styles/base-vega/signup-02.json
+++ b/apps/v4/public/r/styles/base-vega/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-vega/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-vega/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/signup-03.json b/apps/v4/public/r/styles/base-vega/signup-03.json
index 33e86719d3..8aeb7e23b0 100644
--- a/apps/v4/public/r/styles/base-vega/signup-03.json
+++ b/apps/v4/public/r/styles/base-vega/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-vega/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/base-vega/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-vega/signup-04.json b/apps/v4/public/r/styles/base-vega/signup-04.json
index fdddd83a11..da9f92e0f6 100644
--- a/apps/v4/public/r/styles/base-vega/signup-04.json
+++ b/apps/v4/public/r/styles/base-vega/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-vega/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-vega/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/base-vega/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/signup-05.json b/apps/v4/public/r/styles/base-vega/signup-05.json
index 5d6fc89b68..6e9e516971 100644
--- a/apps/v4/public/r/styles/base-vega/signup-05.json
+++ b/apps/v4/public/r/styles/base-vega/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/base-vega/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/base-vega/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/base-vega/skeleton.json b/apps/v4/public/r/styles/base-vega/skeleton.json
index 7647d292d1..1b4c2f82f0 100644
--- a/apps/v4/public/r/styles/base-vega/skeleton.json
+++ b/apps/v4/public/r/styles/base-vega/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/slider-example.json b/apps/v4/public/r/styles/base-vega/slider-example.json
index ce039373d7..3621462627 100644
--- a/apps/v4/public/r/styles/base-vega/slider-example.json
+++ b/apps/v4/public/r/styles/base-vega/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/slider-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 { Label } from \"@/registry/base-vega/ui/label\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={50} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={(value) => setValue(value as number[])}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/slider.json b/apps/v4/public/r/styles/base-vega/slider.json
index 8bcff176fb..ed1f7bcc8d 100644
--- a/apps/v4/public/r/styles/base-vega/slider.json
+++ b/apps/v4/public/r/styles/base-vega/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"bg-muted relative grow overflow-hidden rounded-full select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: SliderPrimitive.Root.Props) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      className={cn(\"data-horizontal:w-full data-vertical:h-full\", className)}\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      thumbAlignment=\"edge\"\n      {...props}\n    >\n      <SliderPrimitive.Control className=\"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"relative grow overflow-hidden rounded-full bg-muted select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5\"\n        >\n          <SliderPrimitive.Indicator\n            data-slot=\"slider-range\"\n            className=\"bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n          />\n        </SliderPrimitive.Track>\n        {Array.from({ length: _values.length }, (_, index) => (\n          <SliderPrimitive.Thumb\n            data-slot=\"slider-thumb\"\n            key={index}\n            className=\"block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+      "api": "https://base-ui.com/react/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/sonner.json b/apps/v4/public/r/styles/base-vega/sonner.json
index 89e20a3945..40aa70e58f 100644
--- a/apps/v4/public/r/styles/base-vega/sonner.json
+++ b/apps/v4/public/r/styles/base-vega/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/spinner.json b/apps/v4/public/r/styles/base-vega/spinner.json
index 3af27cef74..9a027ed81e 100644
--- a/apps/v4/public/r/styles/base-vega/spinner.json
+++ b/apps/v4/public/r/styles/base-vega/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/style.json b/apps/v4/public/r/styles/base-vega/style.json
new file mode 100644
index 0000000000..a58f5ba309
--- /dev/null
+++ b/apps/v4/public/r/styles/base-vega/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "@base-ui/react"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/switch.json b/apps/v4/public/r/styles/base-vega/switch.json
index 57bdb4e5c5..547f757f2d 100644
--- a/apps/v4/public/r/styles/base-vega/switch.json
+++ b/apps/v4/public/r/styles/base-vega/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+      "api": "https://base-ui.com/react/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/table.json b/apps/v4/public/r/styles/base-vega/table.json
index 99084b5138..18a4d77bb8 100644
--- a/apps/v4/public/r/styles/base-vega/table.json
+++ b/apps/v4/public/r/styles/base-vega/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/tabs-example.json b/apps/v4/public/r/styles/base-vega/tabs-example.json
index f30f60d348..49ebd26868 100644
--- a/apps/v4/public/r/styles/base-vega/tabs-example.json
+++ b/apps/v4/public/r/styles/base-vega/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"ghost\" size=\"icon\" className=\"size-8\" />}\n            >\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span className=\"sr-only\">More options</span>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/tabs.json b/apps/v4/public/r/styles/base-vega/tabs.json
index c642667dbf..fe3dc975a4 100644
--- a/apps/v4/public/r/styles/base-vega/tabs.json
+++ b/apps/v4/public/r/styles/base-vega/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"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-vega/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\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-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+      "api": "https://base-ui.com/react/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/textarea.json b/apps/v4/public/r/styles/base-vega/textarea.json
index 73e5913509..4b6a4e54cb 100644
--- a/apps/v4/public/r/styles/base-vega/textarea.json
+++ b/apps/v4/public/r/styles/base-vega/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/base-vega/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/toggle-group-example.json b/apps/v4/public/r/styles/base-vega/toggle-group-example.json
index 9c6104108b..b99e16c67a 100644
--- a/apps/v4/public/r/styles/base-vega/toggle-group-example.json
+++ b/apps/v4/public/r/styles/base-vega/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-vega/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/base-vega/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup multiple spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" defaultValue={[\"all\"]}>\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup size=\"sm\" defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup defaultValue={[\"top\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup multiple variant=\"outline\" spacing={2} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup defaultValue={[\"all\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        defaultValue={[\"today\"]}\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup defaultValue={[\"newest\"]} variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  const items = [\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Archived\", value: \"archived\" },\n  ]\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items} defaultValue={items[0]}>\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup defaultValue={[\"grid\"]} variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup multiple orientation=\"vertical\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        defaultValue={[\"all\"]}\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup variant=\"outline\" multiple orientation=\"vertical\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          value={[fontWeight]}\n          onValueChange={(value) => setFontWeight(value[0])}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        size=\"sm\"\n        defaultValue={[\"top\"]}\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={1}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/toggle-group.json b/apps/v4/public/r/styles/base-vega/toggle-group.json
index 244b962594..7fa4a43ef6 100644
--- a/apps/v4/public/r/styles/base-vega/toggle-group.json
+++ b/apps/v4/public/r/styles/base-vega/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/base-vega/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-vega/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"data-[state=on]:bg-muted shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-vega/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: ToggleGroupPrimitive.Props &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/toggle.json b/apps/v4/public/r/styles/base-vega/toggle.json
index adc780504a..56dea02031 100644
--- a/apps/v4/public/r/styles/base-vega/toggle.json
+++ b/apps/v4/public/r/styles/base-vega/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent shadow-xs\",\n      },\n      size: {\n        default: \"h-9 min-w-9 px-2\",\n        sm: \"h-8 min-w-8 px-1.5\",\n        lg: \"h-10 min-w-10 px-2.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-vega/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 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 shadow-xs hover:bg-muted\",\n      },\n      size: {\n        default: \"h-9 min-w-9 px-2\",\n        sm: \"h-8 min-w-8 px-1.5\",\n        lg: \"h-10 min-w-10 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+      "api": "https://base-ui.com/react/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/tooltip-example.json b/apps/v4/public/r/styles/base-vega/tooltip-example.json
index e81672f1a8..6a5bc16554 100644
--- a/apps/v4/public/r/styles/base-vega/tooltip-example.json
+++ b/apps/v4/public/r/styles/base-vega/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/tooltip-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 { Kbd } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "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 { Kbd } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"ghost\" size=\"icon\" />}>\n          <IconPlaceholder\n            lucide=\"InfoIcon\"\n            tabler=\"IconInfoCircle\"\n            hugeicons=\"AlertCircleIcon\"\n            phosphor=\"InfoIcon\"\n            remixicon=\"RiInformationLine\"\n          />\n          <span className=\"sr-only\">Info</span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Show Tooltip\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger render={<span className=\"inline-block w-fit\" />}>\n          <Button variant=\"outline\" disabled>\n            Disabled\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" size=\"icon-sm\" />}>\n          <IconPlaceholder\n            lucide=\"SaveIcon\"\n            tabler=\"IconDeviceFloppy\"\n            hugeicons=\"FloppyDiskIcon\"\n            phosphor=\"FloppyDiskIcon\"\n            remixicon=\"RiSaveLine\"\n          />\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger\n          render={\n            <a\n              href=\"#\"\n              className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n              onClick={(e) => e.preventDefault()}\n            />\n          }\n        >\n          Learn more\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger render={<Button variant=\"outline\" className=\"w-fit\" />}>\n          Status\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/tooltip.json b/apps/v4/public/r/styles/base-vega/tooltip.json
index b01face9a8..b8c9506462 100644
--- a/apps/v4/public/r/styles/base-vega/tooltip.json
+++ b/apps/v4/public/r/styles/base-vega/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/base-vega/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin) rounded-md px-3 py-1.5 text-xs\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction TooltipProvider({\n  delay = 0,\n  ...props\n}: TooltipPrimitive.Provider.Props) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delay={delay}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({ ...props }: TooltipPrimitive.Root.Props) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  side = \"top\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  children,\n  ...props\n}: TooltipPrimitive.Popup.Props &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n        className=\"isolate z-50\"\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          className={cn(\n            \"z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5\" />\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/base/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+      "api": "https://base-ui.com/react/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/base-vega/vercel.json b/apps/v4/public/r/styles/base-vega/vercel.json
deleted file mode 100644
index 769823d955..0000000000
--- a/apps/v4/public/r/styles/base-vega/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/base-vega/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/base-vega/ui/alert\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Calendar } from \"@/registry/base-vega/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/base-vega/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n                render={<a href=\"#\" />}\n              >\n                <ItemMedia variant=\"icon\" className=\"text-primary\">\n                  <CircularGauge percentage={item.percentage} />\n                </ItemMedia>\n                <ItemContent className=\"inline-block truncate\">\n                  <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                    {item.value}\n                  </span>\n                </ItemActions>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example\n      title=\"Anomaly Alert\"\n      className=\"aspect-square items-center justify-center\"\n    >\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger\n            render={<Button variant=\"outline\" className=\"justify-start\" />}\n          >\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"Calendar01Icon\"\n              phosphor=\"CalendarIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n              className=\"text-muted-foreground\"\n            />\n            {dateRange?.from ? (\n              dateRange.to ? (\n                <>\n                  {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                  {format(dateRange.to, \"LLL dd, y\")}\n                </>\n              ) : (\n                format(dateRange.from, \"LLL dd, y\")\n              )\n            ) : (\n              \"Select Date Range\"\n            )}\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            {selectedEnvironment}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" className=\"justify-between\" />}\n          >\n            <div className=\"flex items-center -space-x-0.5\">\n              {statuses.map((status) => (\n                <div\n                  key={status.name}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                  className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                  data-active={selectedStatuses.has(status.name)}\n                />\n              ))}\n            </div>\n            Status {selectedStatuses.size}/{statuses.length}\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n              className=\"text-muted-foreground ml-auto\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger\n                    render={<Button variant=\"ghost\" size=\"icon\" />}\n                  >\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    <span className=\"sr-only\">More options</span>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Activate Agent\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"outline\" />}>\n              Cancel\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/new-york-v4/accordion.json b/apps/v4/public/r/styles/new-york-v4/accordion.json
index 6c35a6a1b3..54bf7500ac 100644
--- a/apps/v4/public/r/styles/new-york-v4/accordion.json
+++ b/apps/v4/public/r/styles/new-york-v4/accordion.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />\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(\"border-b last:border-b-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Accordion({\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />\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(\"border-b last:border-b-0\", 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          \"flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDownIcon className=\"pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200\" />\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-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      {...props}\n    >\n      <div className={cn(\"pt-0 pb-4\", className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/alert-dialog.json b/apps/v4/public/r/styles/new-york-v4/alert-dialog.json
index 35e333fe74..71a67909d8 100644
--- a/apps/v4/public/r/styles/new-york-v4/alert-dialog.json
+++ b/apps/v4/public/r/styles/new-york-v4/alert-dialog.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-semibold sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/alert.json b/apps/v4/public/r/styles/new-york-v4/alert.json
index d2130cb271..504120959a 100644
--- a/apps/v4/public/r/styles/new-york-v4/alert.json
+++ b/apps/v4/public/r/styles/new-york-v4/alert.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst alertVariants = cva(\n  \"relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/aspect-ratio-demo.json b/apps/v4/public/r/styles/new-york-v4/aspect-ratio-demo.json
index 6afd26b1c8..11024b6059 100644
--- a/apps/v4/public/r/styles/new-york-v4/aspect-ratio-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/aspect-ratio-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/aspect-ratio-demo.tsx",
-      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york-v4/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale\"\n      />\n    </AspectRatio>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/new-york-v4/ui/aspect-ratio\"\n\nexport default function AspectRatioDemo() {\n  return (\n    <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n      <Image\n        src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n        alt=\"Photo by Drew Beamer\"\n        fill\n        className=\"h-full w-full rounded-lg object-cover dark:brightness-[0.2] dark:grayscale\"\n      />\n    </AspectRatio>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/avatar-demo.json b/apps/v4/public/r/styles/new-york-v4/avatar-demo.json
index c273a47da0..927386f272 100644
--- a/apps/v4/public/r/styles/new-york-v4/avatar-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/avatar-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/avatar-demo.tsx",
-      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <div className=\"flex flex-row flex-wrap items-center gap-12\">\n      <Avatar>\n        <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n        <AvatarFallback>CN</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-lg\">\n        <AvatarImage\n          src=\"https://github.com/evilrabbit.png\"\n          alt=\"@evilrabbit\"\n        />\n        <AvatarFallback>ER</AvatarFallback>\n      </Avatar>\n      <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\n\nexport default function AvatarDemo() {\n  return (\n    <div className=\"flex flex-row flex-wrap items-center gap-12\">\n      <Avatar>\n        <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n        <AvatarFallback>CN</AvatarFallback>\n      </Avatar>\n      <Avatar className=\"rounded-lg\">\n        <AvatarImage\n          src=\"https://github.com/evilrabbit.png\"\n          alt=\"@evilrabbit\"\n        />\n        <AvatarFallback>ER</AvatarFallback>\n      </Avatar>\n      <div className=\"flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n          <AvatarFallback>CN</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/maxleiter.png\"\n            alt=\"@maxleiter\"\n          />\n          <AvatarFallback>LR</AvatarFallback>\n        </Avatar>\n        <Avatar>\n          <AvatarImage\n            src=\"https://github.com/evilrabbit.png\"\n            alt=\"@evilrabbit\"\n          />\n          <AvatarFallback>ER</AvatarFallback>\n        </Avatar>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/avatar.json b/apps/v4/public/r/styles/new-york-v4/avatar.json
index 99b4accbff..4c22880250 100644
--- a/apps/v4/public/r/styles/new-york-v4/avatar.json
+++ b/apps/v4/public/r/styles/new-york-v4/avatar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square size-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarBadge,\n  AvatarGroup,\n  AvatarGroupCount,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\"aspect-square size-full\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarBadge,\n  AvatarGroup,\n  AvatarGroupCount,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/badge.json b/apps/v4/public/r/styles/new-york-v4/badge.json
index c4bf061dbd..1ae0e3cc51 100644
--- a/apps/v4/public/r/styles/new-york-v4/badge.json
+++ b/apps/v4/public/r/styles/new-york-v4/badge.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/badge.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90\",\n        outline:\n          \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/breadcrumb.json b/apps/v4/public/r/styles/new-york-v4/breadcrumb.json
index 5c4849b467..7406897fe0 100644
--- a/apps/v4/public/r/styles/new-york-v4/breadcrumb.json
+++ b/apps/v4/public/r/styles/new-york-v4/breadcrumb.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words 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(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? <ChevronRight />}\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(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\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 { ChevronRight, MoreHorizontal } from \"lucide-react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n  return <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />\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 break-words 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 ?? <ChevronRight />}\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(\"flex size-9 items-center justify-center\", className)}\n      {...props}\n    >\n      <MoreHorizontal className=\"size-4\" />\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/new-york-v4/button-group-dropdown.json b/apps/v4/public/r/styles/new-york-v4/button-group-dropdown.json
index efd3997352..932ee6e1fe 100644
--- a/apps/v4/public/r/styles/new-york-v4/button-group-dropdown.json
+++ b/apps/v4/public/r/styles/new-york-v4/button-group-dropdown.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/button-group-dropdown.tsx",
-      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ButtonGroup } from \"@/registry/new-york-v4/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"!pl-2\">\n            <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  AlertTriangleIcon,\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  ShareIcon,\n  TrashIcon,\n  UserRoundXIcon,\n  VolumeOffIcon,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ButtonGroup } from \"@/registry/new-york-v4/ui/button-group\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function ButtonGroupDropdown() {\n  return (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"pl-2!\">\n            <ChevronDownIcon />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <VolumeOffIcon />\n              Mute Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CheckIcon />\n              Mark as Read\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <AlertTriangleIcon />\n              Report Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <UserRoundXIcon />\n              Block User\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <ShareIcon />\n              Share Conversation\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <CopyIcon />\n              Copy Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <TrashIcon />\n              Delete Conversation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/button-group.json b/apps/v4/public/r/styles/new-york-v4/button-group.json
index 6af66696af..16ef0142d6 100644
--- a/apps/v4/public/r/styles/new-york-v4/button-group.json
+++ b/apps/v4/public/r/styles/new-york-v4/button-group.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/button.json b/apps/v4/public/r/styles/new-york-v4/button.json
index 5ea7a0c3f5..0578140422 100644
--- a/apps/v4/public/r/styles/new-york-v4/button.json
+++ b/apps/v4/public/r/styles/new-york-v4/button.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/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 \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 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/90\",\n        destructive:\n          \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json b/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json
index 2e715a1db1..a58ccddf48 100644
--- a/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json
+++ b/apps/v4/public/r/styles/new-york-v4/calendar-hijri.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/calendar-hijri.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Vazirmatn } from \"next/font/google\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { getDefaultClassNames, type DayButton } from \"react-day-picker\"\nimport { DayPicker } from \"react-day-picker/persian\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nconst vazirmatn = Vazirmatn({ subsets: [\"arabic\"] })\n\nexport default function CalendarHijri() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className={vazirmatn.className}>\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-lg border shadow-sm\"\n      />\n    </div>\n  )\n}\n\n// ----------------------------------------------------------------------------\n// The code below is for this example only.\n// For your own calendar, you would edit the calendar.tsx component directly.\n// ----------------------------------------------------------------------------\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Vazirmatn } from \"next/font/google\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport { getDefaultClassNames, type DayButton } from \"react-day-picker\"\nimport { DayPicker } from \"react-day-picker/persian\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nconst vazirmatn = Vazirmatn({ subsets: [\"arabic\"] })\n\nexport default function CalendarHijri() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(2025, 5, 12)\n  )\n\n  return (\n    <div className={vazirmatn.className}>\n      <Calendar\n        mode=\"single\"\n        defaultMonth={date}\n        selected={date}\n        onSelect={setDate}\n        className=\"rounded-lg border shadow-sm\"\n      />\n    </div>\n  )\n}\n\n// ----------------------------------------------------------------------------\n// The code below is for this example only.\n// For your own calendar, you would edit the calendar.tsx component directly.\n// ----------------------------------------------------------------------------\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\"absolute inset-0 opacity-0\", defaultClassNames.dropdown),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/calendar.json b/apps/v4/public/r/styles/new-york-v4/calendar.json
index 67ef0fe9e1..d112137e59 100644
--- a/apps/v4/public/r/styles/new-york-v4/calendar.json
+++ b/apps/v4/public/r/styles/new-york-v4/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronDownIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from \"lucide-react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(\"default\", { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-md\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-md bg-accent\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\"rounded-r-md bg-accent\", defaultClassNames.range_end),\n        today: cn(\n          \"rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <ChevronLeftIcon className={cn(\"size-4\", className)} {...props} />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <ChevronRightIcon\n                className={cn(\"size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <ChevronDownIcon className={cn(\"size-4\", className)} {...props} />\n          )\n        },\n        DayButton: CalendarDayButton,\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  ...props\n}: React.ComponentProps<typeof DayButton>) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString()}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/card.json b/apps/v4/public/r/styles/new-york-v4/card.json
index c32e4443e9..9cdd6ed365 100644
--- a/apps/v4/public/r/styles/new-york-v4/card.json
+++ b/apps/v4/public/r/styles/new-york-v4/card.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-6 [.border-t]:pt-6\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/carousel-api.json b/apps/v4/public/r/styles/new-york-v4/carousel-api.json
index fd78dc636b..8943653772 100644
--- a/apps/v4/public/r/styles/new-york-v4/carousel-api.json
+++ b/apps/v4/public/r/styles/new-york-v4/carousel-api.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/carousel-api.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  return (\n    <div className=\"mx-auto max-w-xs\">\n      <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>\n      <div className=\"text-muted-foreground py-2 text-center text-sm\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n  type CarouselApi,\n} from \"@/registry/new-york-v4/ui/carousel\"\n\nexport default function CarouselDApiDemo() {\n  const [api, setApi] = React.useState<CarouselApi>()\n  const [current, setCurrent] = React.useState(0)\n  const [count, setCount] = React.useState(0)\n\n  React.useEffect(() => {\n    if (!api) {\n      return\n    }\n\n    setCount(api.scrollSnapList().length)\n    setCurrent(api.selectedScrollSnap() + 1)\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1)\n    })\n  }, [api])\n\n  return (\n    <div className=\"mx-auto max-w-xs\">\n      <Carousel setApi={setApi} className=\"w-full max-w-xs\">\n        <CarouselContent>\n          {Array.from({ length: 5 }).map((_, index) => (\n            <CarouselItem key={index}>\n              <Card>\n                <CardContent className=\"flex aspect-square items-center justify-center p-6\">\n                  <span className=\"text-4xl font-semibold\">{index + 1}</span>\n                </CardContent>\n              </Card>\n            </CarouselItem>\n          ))}\n        </CarouselContent>\n        <CarouselPrevious />\n        <CarouselNext />\n      </Carousel>\n      <div className=\"py-2 text-center text-sm text-muted-foreground\">\n        Slide {current} of {count}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json b/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json
index c70665ac8f..b92a234f99 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-area-axes.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with axes\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaAxes() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with axes\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaAxes() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Axes</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: -20,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <YAxis\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickCount={3}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-default.json b/apps/v4/public/r/styles/new-york-v4/chart-area-default.json
index 6bd00ad7b9..c4f2490bab 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-area-default.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-default.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-area-default.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json b/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json
index 29544ddcf8..fb6b255c54 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-area-gradient.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with gradient fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaGradient() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with gradient fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaGradient() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Gradient</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json b/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json
index 337cf4a5fe..1c6556f078 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-area-icons.tsx",
-      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaIcons() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: TrendingDown,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n    icon: TrendingUp,\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaIcons() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json b/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json
index c4630c9737..f5425a2c0a 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-area-legend.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaLegend() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaLegend() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n            <ChartLegend content={<ChartLegendContent />} />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json b/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json
index 5d141febb6..64685e01ea 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-area-linear.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaLinear() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaLinear() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Linear</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"linear\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json
index 2bfba9907a..443ae99a35 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-area-stacked-expand.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart with expand stacking\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-3)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStackedExpand() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart with expand stacking\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n  { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n  { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n  { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n  { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n  { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-3)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStackedExpand() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked Expanded</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n              top: 12,\n            }}\n            stackOffset=\"expand\"\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Area\n              dataKey=\"other\"\n              type=\"natural\"\n              fill=\"var(--color-other)\"\n              fillOpacity={0.1}\n              stroke=\"var(--color-other)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json
index 69a486ec50..eb6e4f050a 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-area-stacked.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStacked() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStacked() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Stacked</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dot\" />}\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-step.json b/apps/v4/public/r/styles/new-york-v4/chart-area-step.json
index 2d5398498d..dc4e308b88 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-area-step.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-area-step.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-area-step.tsx",
-      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A step area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStep() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A step area chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: Activity,\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaStep() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Area Chart - Step</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"step\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-desktop)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              January - June 2024\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json
index 24918e8e44..a6da9eb0a4 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-active.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarActive() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarActive() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              activeIndex={2}\n              activeBar={({ ...props }) => {\n                return (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                )\n              }}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json
index cdfb514808..b55c7c7d46 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-default.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json
index e2f6d0c025..ce4a1720f1 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-horizontal.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A horizontal bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarHorizontal() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A horizontal bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarHorizontal() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Horizontal</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: -20,\n            }}\n          >\n            <XAxis type=\"number\" dataKey=\"desktop\" hide />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-interactive.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-interactive.json
index bc3fc3f02d..32624bac63 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-interactive.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-interactive.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-interactive.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An interactive bar chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarInteractive() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card className=\"py-0\">\n      <CardHeader className=\"flex flex-col items-stretch border-b !p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-muted-foreground text-xs\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg leading-none font-bold sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An interactive bar chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarInteractive() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card className=\"py-0\">\n      <CardHeader className=\"flex flex-col items-stretch border-b p-0! sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!\">\n          <CardTitle>Bar Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg leading-none font-bold sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json
index 8d0cd72dc6..0d2b1c4d7f 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-label-custom.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n  label: {\n    color: \"var(--background)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-(--color-label)\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-2)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n  label: {\n    color: \"var(--background)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              right: 16,\n            }}\n          >\n            <CartesianGrid horizontal={false} />\n            <YAxis\n              dataKey=\"month\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n              hide\n            />\n            <XAxis dataKey=\"desktop\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Bar\n              dataKey=\"desktop\"\n              layout=\"vertical\"\n              fill=\"var(--color-desktop)\"\n              radius={4}\n            >\n              <LabelList\n                dataKey=\"month\"\n                position=\"insideLeft\"\n                offset={8}\n                className=\"fill-(--color-label)\"\n                fontSize={12}\n              />\n              <LabelList\n                dataKey=\"desktop\"\n                position=\"right\"\n                offset={8}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json
index 244cc8219b..82a9edf588 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-label.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarLabel() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarLabel() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={8}>\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json
index e70ef36e0e..edce7cbae6 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-mixed.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A mixed bar chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarMixed() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A mixed bar chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarMixed() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Mixed</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart\n            accessibilityLayer\n            data={chartData}\n            layout=\"vertical\"\n            margin={{\n              left: 0,\n            }}\n          >\n            <YAxis\n              dataKey=\"browser\"\n              type=\"category\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <XAxis dataKey=\"visitors\" type=\"number\" hide />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar dataKey=\"visitors\" layout=\"vertical\" radius={5} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json
index b827de0ac4..e62ed1e07d 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-multiple.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarMultiple() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple bar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarMultiple() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"dashed\" />}\n            />\n            <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n            <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json
index 399994ab33..958c4721d1 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-negative.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with negative values\"\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarNegative() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={item.visitors > 0 ? \"var(--chart-1)\" : \"var(--chart-2)\"}\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with negative values\"\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 205 },\n  { month: \"March\", visitors: -207 },\n  { month: \"April\", visitors: 173 },\n  { month: \"May\", visitors: -209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarNegative() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Negative</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel hideIndicator />}\n            />\n            <Bar dataKey=\"visitors\">\n              <LabelList position=\"top\" dataKey=\"month\" fillOpacity={1} />\n              {chartData.map((item) => (\n                <Cell\n                  key={item.month}\n                  fill={item.visitors > 0 ? \"var(--chart-1)\" : \"var(--chart-2)\"}\n                />\n              ))}\n            </Bar>\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json
index 61887460d2..42de02b72e 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-stacked.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarStacked() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartBarStacked() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Stacked + Legend</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <ChartLegend content={<ChartLegendContent />} />\n            <Bar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              fill=\"var(--color-desktop)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"mobile\"\n              stackId=\"a\"\n              fill=\"var(--color-mobile)\"\n              radius={[4, 4, 0, 0]}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-default.json b/apps/v4/public/r/styles/new-york-v4/chart-line-default.json
index dab9940d32..92dabee542 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-default.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-default.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-default.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDefault() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json
index b5912cd8a9..dc620e7a2c 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-dots-colors.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots and colors\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-2)\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDotsColors() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots and colors\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-2)\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDotsColors() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots Colors</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={({ payload, ...props }) => {\n                return (\n                  <Dot\n                    key={payload.browser}\n                    r={5}\n                    cx={props.cx}\n                    cy={props.cy}\n                    fill={payload.fill}\n                    stroke={payload.fill}\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json
index b14894eb0a..8a513c1147 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-dots-custom.tsx",
-      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with custom dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDotsCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with custom dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDotsCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={({ cx, cy, payload }) => {\n                const r = 24\n                return (\n                  <GitCommitVertical\n                    key={payload.month}\n                    x={cx - r / 2}\n                    y={cy - r / 2}\n                    width={r}\n                    height={r}\n                    fill=\"hsl(var(--background))\"\n                    stroke=\"var(--color-desktop)\"\n                  />\n                )\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json b/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json
index 1e3851f26a..db61ec4edd 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-dots.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDots() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineDots() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Dots</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-interactive.json b/apps/v4/public/r/styles/new-york-v4/chart-line-interactive.json
index 2043b8ba62..d663d14d71 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-interactive.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-interactive.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-interactive.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An interactive line chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineInteractive() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card className=\"py-4 sm:py-0\">\n      <CardHeader className=\"flex flex-col items-stretch border-b !p-0 sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 pb-3 sm:pb-0\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-muted-foreground text-xs\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg leading-none font-bold sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An interactive line chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  views: {\n    label: \"Page Views\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineInteractive() {\n  const [activeChart, setActiveChart] =\n    React.useState<keyof typeof chartConfig>(\"desktop\")\n\n  const total = React.useMemo(\n    () => ({\n      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n    }),\n    []\n  )\n\n  return (\n    <Card className=\"py-4 sm:py-0\">\n      <CardHeader className=\"flex flex-col items-stretch border-b p-0! sm:flex-row\">\n        <div className=\"flex flex-1 flex-col justify-center gap-1 px-6 pb-3 sm:pb-0\">\n          <CardTitle>Line Chart - Interactive</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 3 months\n          </CardDescription>\n        </div>\n        <div className=\"flex\">\n          {[\"desktop\", \"mobile\"].map((key) => {\n            const chart = key as keyof typeof chartConfig\n            return (\n              <button\n                key={chart}\n                data-active={activeChart === chart}\n                className=\"flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6\"\n                onClick={() => setActiveChart(chart)}\n              >\n                <span className=\"text-xs text-muted-foreground\">\n                  {chartConfig[chart].label}\n                </span>\n                <span className=\"text-lg leading-none font-bold sm:text-3xl\">\n                  {total[key as keyof typeof total].toLocaleString()}\n                </span>\n              </button>\n            )\n          })}\n        </div>\n      </CardHeader>\n      <CardContent className=\"px-2 sm:p-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  className=\"w-[150px]\"\n                  nameKey=\"views\"\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                      year: \"numeric\",\n                    })\n                  }}\n                />\n              }\n            />\n            <Line\n              dataKey={activeChart}\n              type=\"monotone\"\n              stroke={`var(--color-${activeChart})`}\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json
index 9d4d926be8..95d87c621d 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-label-custom.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-2)\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-2)\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLabelCustom() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 24,\n              left: 24,\n              right: 24,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  indicator=\"line\"\n                  nameKey=\"visitors\"\n                  hideLabel\n                />\n              }\n            />\n            <Line\n              dataKey=\"visitors\"\n              type=\"natural\"\n              stroke=\"var(--color-visitors)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-visitors)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n                dataKey=\"browser\"\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-label.json b/apps/v4/public/r/styles/new-york-v4/chart-line-label.json
index 1ef2246349..3e0d2f132b 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-label.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-label.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-label.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLabel() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLabel() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              top: 20,\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"natural\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={{\n                fill: \"var(--color-desktop)\",\n              }}\n              activeDot={{\n                r: 6,\n              }}\n            >\n              <LabelList\n                position=\"top\"\n                offset={12}\n                className=\"fill-foreground\"\n                fontSize={12}\n              />\n            </Line>\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json b/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json
index a56bdbc3ac..69708ed805 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-linear.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLinear() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineLinear() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Linear</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"linear\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json b/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json
index 4bf763b7be..61cba68adc 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-multiple.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineMultiple() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple line chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineMultiple() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Multiple</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <Line\n              dataKey=\"desktop\"\n              type=\"monotone\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n            <Line\n              dataKey=\"mobile\"\n              type=\"monotone\"\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter>\n        <div className=\"flex w-full items-start gap-2 text-sm\">\n          <div className=\"grid gap-2\">\n            <div className=\"flex items-center gap-2 leading-none font-medium\">\n              Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n            </div>\n            <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n              Showing total visitors for the last 6 months\n            </div>\n          </div>\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-step.json b/apps/v4/public/r/styles/new-york-v4/chart-line-step.json
index 6aa788c781..9596ff0820 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-line-step.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-line-step.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-line-step.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with step\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineStep() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with step\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartLineStep() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Line Chart - Step</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <LineChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 12,\n              right: 12,\n            }}\n          >\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"month\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              tickFormatter={(value) => value.slice(0, 3)}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Line\n              dataKey=\"desktop\"\n              type=\"step\"\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n              dot={false}\n            />\n          </LineChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json
index 65fe926a03..a852738a1b 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { type PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonutActive() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport { type PieSectorDataItem } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonutActive() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              activeIndex={0}\n              activeShape={({\n                outerRadius = 0,\n                ...props\n              }: PieSectorDataItem) => (\n                <Sector {...props} outerRadius={outerRadius + 10} />\n              )}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json
index 017824264c..c672e336a1 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-donut-text.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with text\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonutText() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with text\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonutText() {\n  const totalVisitors = React.useMemo(() => {\n    return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut with Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json
index 03dd543352..5fa708f67f 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-donut.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonut() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieDonut() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json
index 568499f3af..83732abd32 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-label-custom.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelCustom() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelCustom() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json
index 6200c28e5b..7cddc2c94c 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-label-list.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label list\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelList() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"[&_.recharts-text]:fill-background mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label list\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelList() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label List</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\">\n              <LabelList\n                dataKey=\"browser\"\n                className=\"fill-background\"\n                stroke=\"none\"\n                fontSize={12}\n                formatter={(value: keyof typeof chartConfig) =>\n                  chartConfig[value]?.label\n                }\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json
index 7869bc1c41..cc163ad517 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-label.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabel() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabel() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground\"\n        >\n          <PieChart>\n            <ChartTooltip content={<ChartTooltipContent hideLabel />} />\n            <Pie data={chartData} dataKey=\"visitors\" label nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json
index 2b074e7a38..c28dffc448 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-separator-none.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with no separator\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieSeparatorNone() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with no separator\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieSeparatorNone() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Separator None</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              stroke=\"0\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json
index 54520721d7..1465aab8d4 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-simple.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple pie chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieSimple() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple pie chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieSimple() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie data={chartData} dataKey=\"visitors\" nameKey=\"browser\" />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json
index a0b1d5074f..f69c93fcac 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-stacked.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with stacked sections\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"var(--chart-1)\",\n  },\n  february: {\n    label: \"February\",\n    color: \"var(--chart-2)\",\n  },\n  march: {\n    label: \"March\",\n    color: \"var(--chart-3)\",\n  },\n  april: {\n    label: \"April\",\n    color: \"var(--chart-4)\",\n  },\n  may: {\n    label: \"May\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieStacked() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with stacked sections\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n  { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n  { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n  { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n  { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n  { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"var(--chart-1)\",\n  },\n  february: {\n    label: \"February\",\n    color: \"var(--chart-2)\",\n  },\n  march: {\n    label: \"March\",\n    color: \"var(--chart-3)\",\n  },\n  april: {\n    label: \"April\",\n    color: \"var(--chart-4)\",\n  },\n  may: {\n    label: \"May\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieStacked() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  labelKey=\"visitors\"\n                  nameKey=\"month\"\n                  indicator=\"line\"\n                  labelFormatter={(_, payload) => {\n                    return chartConfig[\n                      payload?.[0].dataKey as keyof typeof chartConfig\n                    ].label\n                  }}\n                />\n              }\n            />\n            <Pie data={desktopData} dataKey=\"desktop\" outerRadius={60} />\n            <Pie\n              data={mobileData}\n              dataKey=\"mobile\"\n              innerRadius={70}\n              outerRadius={90}\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json
index b390007162..0ddbe0fd89 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-default.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarDefault() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarDefault() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json
index d57d631048..1cd6df6fb9 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-dots.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarDots() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with dots\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarDots() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Dots</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json
index 023e7f89e9..8e2b2b2526 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleFill() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-(--color-desktop) opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleFill() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n            <PolarGrid\n              className=\"fill-(--color-desktop) opacity-20\"\n              gridType=\"circle\"\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json
index a079ce7aa0..ab2d745cb4 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleNoLines() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleNoLines() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle - No lines</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" radialLines={false} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json
index 499baab15d..11429d4e68 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-grid-circle.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircle() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircle() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Circle</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json
index 9c08e773c8..64ed452e4d 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-grid-custom.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCustom() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCustom() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Custom</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid radialLines={false} polarRadius={[90]} strokeWidth={1} />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json
index 9ae208ae8f..91e94a2144 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-grid-fill.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid filled\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridFill() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-(--color-desktop) opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid filled\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 285 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 203 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridFill() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid Filled</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarGrid className=\"fill-(--color-desktop) opacity-20\" />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.5}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json
index 042bfecd2c..d9fb43736b 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-grid-none.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with no grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridNone() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with no grid\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 273 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarGridNone() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Grid None</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n              dot={{\n                r: 4,\n                fillOpacity: 1,\n              }}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json
index 35fcdebf86..5c2aeb9aae 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-icons.tsx",
-      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarIcons() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with icons\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n    icon: ArrowDownFromLine,\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n    icon: ArrowUpFromLine,\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarIcons() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Icons</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json
index ff673546cb..f3d93a0a80 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-label-custom.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLabelCustom() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom label\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLabelCustom() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Custom Label</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: 10,\n              right: 10,\n              bottom: 10,\n              left: 10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis\n              dataKey=\"month\"\n              tick={({ x, y, textAnchor, value, index, ...props }) => {\n                const data = chartData[index]\n\n                return (\n                  <text\n                    x={x}\n                    y={index === 0 ? y - 10 : y}\n                    textAnchor={textAnchor}\n                    fontSize={13}\n                    fontWeight={500}\n                    {...props}\n                  >\n                    <tspan>{data.desktop}</tspan>\n                    <tspan className=\"fill-muted-foreground\">/</tspan>\n                    <tspan>{data.mobile}</tspan>\n                    <tspan\n                      x={x}\n                      dy={\"1rem\"}\n                      fontSize={12}\n                      className=\"fill-muted-foreground\"\n                    >\n                      {data.month}\n                    </tspan>\n                  </text>\n                )\n              }}\n            />\n\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json
index 930d8021c1..52af275540 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-legend.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLegend() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a legend\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLegend() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center\">\n        <CardTitle>Radar Chart - Legend</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart\n            data={chartData}\n            margin={{\n              top: -40,\n              bottom: -10,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <ChartLegend className=\"mt-8\" content={<ChartLegendContent />} />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 pt-4 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json
index 2392adc4df..0930d97266 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-lines-only.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with lines only\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLinesOnly() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with lines only\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 160 },\n  { month: \"February\", desktop: 185, mobile: 170 },\n  { month: \"March\", desktop: 207, mobile: 180 },\n  { month: \"April\", desktop: 173, mobile: 160 },\n  { month: \"May\", desktop: 160, mobile: 190 },\n  { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarLinesOnly() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Lines Only</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid radialLines={false} />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0}\n              stroke=\"var(--color-desktop)\"\n              strokeWidth={2}\n            />\n            <Radar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              fillOpacity={0}\n              stroke=\"var(--color-mobile)\"\n              strokeWidth={2}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json
index fba362f4ce..d91416064c 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-multiple.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with multiple data\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarMultiple() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with multiple data\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarMultiple() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Multiple</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" />}\n            />\n            <PolarAngleAxis dataKey=\"month\" />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json
index 643c5c3c8e..e387cef2bf 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-radius.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json
index c2959392e3..b2d9f213e7 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radial-grid.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a grid\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialGrid() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a grid\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialGrid() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Grid</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={100}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <PolarGrid gridType=\"circle\" />\n            <RadialBar dataKey=\"visitors\" />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json
index 9875560454..a4919c12ee 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radial-label.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialLabel() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialLabel() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={-90}\n            endAngle={380}\n            innerRadius={30}\n            outerRadius={110}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background>\n              <LabelList\n                position=\"insideStart\"\n                dataKey=\"browser\"\n                className=\"fill-white capitalize mix-blend-luminosity\"\n                fontSize={11}\n              />\n            </RadialBar>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json
index 77c0ac5481..cf6f89485f 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radial-shape.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a custom shape\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialShape() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a custom shape\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialShape() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Shape</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={100}\n            innerRadius={80}\n            outerRadius={140}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json
index 937182ae7f..ae368d9dfe 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radial-simple.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialSimple() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialSimple() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart data={chartData} innerRadius={30} outerRadius={110}>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel nameKey=\"browser\" />}\n            />\n            <RadialBar dataKey=\"visitors\" background />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json
index d94ca479e9..32def768a7 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radial-stacked.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with stacked sections\"\n\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialStacked() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with stacked sections\"\n\nconst chartData = [{ month: \"january\", desktop: 1260, mobile: 570 }]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialStacked() {\n  const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Stacked</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 items-center pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            endAngle={180}\n            innerRadius={80}\n            outerRadius={130}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text x={viewBox.cx} y={viewBox.cy} textAnchor=\"middle\">\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) - 16}\n                          className=\"fill-foreground text-2xl font-bold\"\n                        >\n                          {totalVisitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 4}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n            <RadialBar\n              dataKey=\"desktop\"\n              stackId=\"a\"\n              cornerRadius={5}\n              fill=\"var(--color-desktop)\"\n              className=\"stroke-transparent stroke-2\"\n            />\n            <RadialBar\n              dataKey=\"mobile\"\n              fill=\"var(--color-mobile)\"\n              stackId=\"a\"\n              cornerRadius={5}\n              className=\"stroke-transparent stroke-2\"\n            />\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json
index 0ba413cf86..bb809b65c2 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radial-text.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with text\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialText() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"text-muted-foreground leading-none\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  Label,\n  PolarGrid,\n  PolarRadiusAxis,\n  RadialBar,\n  RadialBarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with text\"\n\nconst chartData = [\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadialText() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Radial Chart - Text</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadialBarChart\n            data={chartData}\n            startAngle={0}\n            endAngle={250}\n            innerRadius={80}\n            outerRadius={110}\n          >\n            <PolarGrid\n              gridType=\"circle\"\n              radialLines={false}\n              stroke=\"none\"\n              className=\"first:fill-muted last:fill-background\"\n              polarRadius={[86, 74]}\n            />\n            <RadialBar dataKey=\"visitors\" background cornerRadius={10} />\n            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-4xl font-bold\"\n                        >\n                          {chartData[0].visitors.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </PolarRadiusAxis>\n          </RadialBarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json
index b1ae1f2118..10bbf29b37 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-tooltip-advanced.tsx",
-      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipAdvanced() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                        {value}\n                        <span className=\"text-muted-foreground font-normal\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium\">\n                          Total\n                          <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"text-muted-foreground font-normal\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipAdvanced() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Advanced</CardTitle>\n        <CardDescription>\n          Tooltip with custom formatter and total.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  className=\"w-[180px]\"\n                  formatter={(value, name, item, index) => (\n                    <>\n                      <div\n                        className=\"h-2.5 w-2.5 shrink-0 rounded-[2px] bg-(--color-bg)\"\n                        style={\n                          {\n                            \"--color-bg\": `var(--color-${name})`,\n                          } as React.CSSProperties\n                        }\n                      />\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                      {/* Add this after the last item */}\n                      {index === 1 && (\n                        <div className=\"mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground\">\n                          Total\n                          <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums\">\n                            {item.payload.running + item.payload.swimming}\n                            <span className=\"font-normal text-muted-foreground\">\n                              kcal\n                            </span>\n                          </div>\n                        </div>\n                      )}\n                    </>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json
index 6e00f4c118..25edcf1ee9 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/chart-tooltip-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute top-[45px] left-[-35px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute top-[50px] left-[5px] z-10\"\n        >\n          <g clipPath=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute top-[0px] left-[122px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute top-[10px] left-[85px] z-10 -scale-x-100\"\n        >\n          <g clipPath=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"!hidden md:!flex\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"!items-start !justify-start\">\n        <div className=\"absolute top-[60px] left-[50px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute top-[38px] left-[30px] z-10 rotate-[-40deg]\"\n        >\n          <g clipPath=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute top-[45px] left-[-35px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute top-[50px] left-[5px] z-10\"\n        >\n          <g clipPath=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute top-[0px] left-[122px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute top-[10px] left-[85px] z-10 -scale-x-100\"\n        >\n          <g clipPath=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"hidden! md:flex!\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"items-start! justify-start!\">\n        <div className=\"absolute top-[60px] left-[50px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute top-[38px] left-[30px] z-10 rotate-[-40deg]\"\n        >\n          <g clipPath=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-formatter.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-formatter.json
index c525f6c643..f26f0af91a 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-formatter.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-formatter.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-tooltip-formatter.tsx",
-      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipFormatter() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"text-muted-foreground flex min-w-[130px] items-center text-xs\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums\">\n                        {value}\n                        <span className=\"text-muted-foreground font-normal\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n  { date: \"2024-07-15\", running: 450, swimming: 300 },\n  { date: \"2024-07-16\", running: 380, swimming: 420 },\n  { date: \"2024-07-17\", running: 520, swimming: 120 },\n  { date: \"2024-07-18\", running: 140, swimming: 550 },\n  { date: \"2024-07-19\", running: 600, swimming: 350 },\n  { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n  running: {\n    label: \"Running\",\n    color: \"var(--chart-1)\",\n  },\n  swimming: {\n    label: \"Swimming\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartTooltipFormatter() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Tooltip - Formatter</CardTitle>\n        <CardDescription>Tooltip with custom formatter .</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) => {\n                return new Date(value).toLocaleDateString(\"en-US\", {\n                  weekday: \"short\",\n                })\n              }}\n            />\n            <Bar\n              dataKey=\"running\"\n              stackId=\"a\"\n              fill=\"var(--color-running)\"\n              radius={[0, 0, 4, 4]}\n            />\n            <Bar\n              dataKey=\"swimming\"\n              stackId=\"a\"\n              fill=\"var(--color-swimming)\"\n              radius={[4, 4, 0, 0]}\n            />\n            <ChartTooltip\n              content={\n                <ChartTooltipContent\n                  hideLabel\n                  formatter={(value, name) => (\n                    <div className=\"flex min-w-[130px] items-center text-xs text-muted-foreground\">\n                      {chartConfig[name as keyof typeof chartConfig]?.label ||\n                        name}\n                      <div className=\"ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums\">\n                        {value}\n                        <span className=\"font-normal text-muted-foreground\">\n                          kcal\n                        </span>\n                      </div>\n                    </div>\n                  )}\n                />\n              }\n              cursor={false}\n              defaultIndex={1}\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart.json b/apps/v4/public/r/styles/new-york-v4/chart.json
index 5a61a768d5..65c4f8ed82 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/checkbox-demo.json b/apps/v4/public/r/styles/new-york-v4/checkbox-demo.json
index 84a4f8fc01..51e9ece234 100644
--- a/apps/v4/public/r/styles/new-york-v4/checkbox-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/checkbox-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/checkbox-demo.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex items-center gap-3\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"terms-2\" defaultChecked />\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"terms-2\">Accept terms and conditions</Label>\n          <p className=\"text-muted-foreground text-sm\">\n            By clicking this checkbox, you agree to the terms and conditions.\n          </p>\n        </div>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"toggle\" disabled />\n        <Label htmlFor=\"toggle\">Enable notifications</Label>\n      </div>\n      <Label className=\"hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950\">\n        <Checkbox\n          id=\"toggle-2\"\n          defaultChecked\n          className=\"data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700\"\n        />\n        <div className=\"grid gap-1.5 font-normal\">\n          <p className=\"text-sm leading-none font-medium\">\n            Enable notifications\n          </p>\n          <p className=\"text-muted-foreground text-sm\">\n            You can enable or disable notifications at any time.\n          </p>\n        </div>\n      </Label>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function CheckboxDemo() {\n  return (\n    <div className=\"flex flex-col gap-6\">\n      <div className=\"flex items-center gap-3\">\n        <Checkbox id=\"terms\" />\n        <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"terms-2\" defaultChecked />\n        <div className=\"grid gap-2\">\n          <Label htmlFor=\"terms-2\">Accept terms and conditions</Label>\n          <p className=\"text-sm text-muted-foreground\">\n            By clicking this checkbox, you agree to the terms and conditions.\n          </p>\n        </div>\n      </div>\n      <div className=\"flex items-start gap-3\">\n        <Checkbox id=\"toggle\" disabled />\n        <Label htmlFor=\"toggle\">Enable notifications</Label>\n      </div>\n      <Label className=\"flex items-start gap-3 rounded-lg border p-3 hover:bg-accent/50 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950\">\n        <Checkbox\n          id=\"toggle-2\"\n          defaultChecked\n          className=\"data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700\"\n        />\n        <div className=\"grid gap-1.5 font-normal\">\n          <p className=\"text-sm leading-none font-medium\">\n            Enable notifications\n          </p>\n          <p className=\"text-sm text-muted-foreground\">\n            You can enable or disable notifications at any time.\n          </p>\n        </div>\n      </Label>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/checkbox-with-text.json b/apps/v4/public/r/styles/new-york-v4/checkbox-with-text.json
index 69e72ba666..224d56a683 100644
--- a/apps/v4/public/r/styles/new-york-v4/checkbox-with-text.json
+++ b/apps/v4/public/r/styles/new-york-v4/checkbox-with-text.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/checkbox-with-text.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n  return (\n    <div className=\"items-top flex gap-2\">\n      <Checkbox id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-muted-foreground text-sm\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\n\nexport default function CheckboxWithText() {\n  return (\n    <div className=\"items-top flex gap-2\">\n      <Checkbox id=\"terms1\" />\n      <div className=\"grid gap-1.5 leading-none\">\n        <label\n          htmlFor=\"terms1\"\n          className=\"text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          Accept terms and conditions\n        </label>\n        <p className=\"text-sm text-muted-foreground\">\n          You agree to our Terms of Service and Privacy Policy.\n        </p>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/checkbox.json b/apps/v4/public/r/styles/new-york-v4/checkbox.json
index 428b88f9b6..8d33ff0065 100644
--- a/apps/v4/public/r/styles/new-york-v4/checkbox.json
+++ b/apps/v4/public/r/styles/new-york-v4/checkbox.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"lucide-react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"lucide-react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none\"\n      >\n        <CheckIcon className=\"size-3.5\" />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/combobox-dropdown-menu.json b/apps/v4/public/r/styles/new-york-v4/combobox-dropdown-menu.json
index 6c5bc8439e..b4fc06037c 100644
--- a/apps/v4/public/r/styles/new-york-v4/combobox-dropdown-menu.json
+++ b/apps/v4/public/r/styles/new-york-v4/combobox-dropdown-menu.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/combobox-dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n  const [label, setLabel] = React.useState(\"feature\")\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm leading-none font-medium\">\n        <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Assign to...</DropdownMenuItem>\n            <DropdownMenuItem>Set due date...</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                    className=\"h-9\"\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value)\n                            setOpen(false)\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n  const [label, setLabel] = React.useState(\"feature\")\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm leading-none font-medium\">\n        <span className=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Assign to...</DropdownMenuItem>\n            <DropdownMenuItem>Set due date...</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                    className=\"h-9\"\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value)\n                            setOpen(false)\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/combobox-popover.json b/apps/v4/public/r/styles/new-york-v4/combobox-popover.json
index a07843026e..5b8560d411 100644
--- a/apps/v4/public/r/styles/new-york-v4/combobox-popover.json
+++ b/apps/v4/public/r/styles/new-york-v4/combobox-popover.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/combobox-popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-muted-foreground text-sm\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboboxPopover() {\n  const [open, setOpen] = React.useState(false)\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  return (\n    <div className=\"flex items-center space-x-4\">\n      <p className=\"text-sm text-muted-foreground\">Status</p>\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"p-0\" side=\"right\" align=\"start\">\n          <Command>\n            <CommandInput placeholder=\"Change status...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup>\n                {statuses.map((status) => (\n                  <CommandItem\n                    key={status.value}\n                    value={status.value}\n                    onSelect={(value) => {\n                      setSelectedStatus(\n                        statuses.find((priority) => priority.value === value) ||\n                          null\n                      )\n                      setOpen(false)\n                    }}\n                  >\n                    {status.label}\n                  </CommandItem>\n                ))}\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/combobox.json b/apps/v4/public/r/styles/new-york-v4/combobox.json
index ef0cd04f8f..3044be9963 100644
--- a/apps/v4/public/r/styles/new-york-v4/combobox.json
+++ b/apps/v4/public/r/styles/new-york-v4/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\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      <ChevronDownIcon\n        data-slot=\"combobox-trigger-icon\"\n        className=\"text-muted-foreground pointer-events-none size-4\"\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      <XIcon className=\"pointer-events-none\" />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\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        \"max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        data-slot=\"combobox-item-indicator\"\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <CheckIcon className=\"pointer-events-none size-4 pointer-coarse:size-5\" />\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        \"text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm\",\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        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm 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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\",\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-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          <XIcon className=\"pointer-events-none\" />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  children,\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\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\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      <ChevronDownIcon\n        data-slot=\"combobox-trigger-icon\"\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      <XIcon className=\"pointer-events-none\" />\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            \"group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md 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=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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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        \"max-h-[min(calc(--spacing(96)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto p-1 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 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent 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        data-slot=\"combobox-item-indicator\"\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <CheckIcon className=\"pointer-events-none size-4 pointer-coarse:size-5\" />\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-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm\",\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 my-1 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-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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-sm bg-muted px-1.5 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          <XIcon className=\"pointer-events-none\" />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  children,\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/new-york-v4/command-dialog.json b/apps/v4/public/r/styles/new-york-v4/command-dialog.json
index bb44a62389..d1c39b81b1 100644
--- a/apps/v4/public/r/styles/new-york-v4/command-dialog.json
+++ b/apps/v4/public/r/styles/new-york-v4/command-dialog.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/command-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york-v4/ui/command\"\n\nexport default function CommandDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-muted-foreground text-sm\">\n        Press{\" \"}\n        <kbd className=\"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from \"lucide-react\"\n\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/new-york-v4/ui/command\"\n\nexport default function CommandDialogDemo() {\n  const [open, setOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  return (\n    <>\n      <p className=\"text-sm text-muted-foreground\">\n        Press{\" \"}\n        <kbd className=\"pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 select-none\">\n          <span className=\"text-xs\">⌘</span>J\n        </kbd>\n      </p>\n      <CommandDialog open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Type a command or search...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup heading=\"Suggestions\">\n            <CommandItem>\n              <Calendar />\n              <span>Calendar</span>\n            </CommandItem>\n            <CommandItem>\n              <Smile />\n              <span>Search Emoji</span>\n            </CommandItem>\n            <CommandItem>\n              <Calculator />\n              <span>Calculator</span>\n            </CommandItem>\n          </CommandGroup>\n          <CommandSeparator />\n          <CommandGroup heading=\"Settings\">\n            <CommandItem>\n              <User />\n              <span>Profile</span>\n              <CommandShortcut>⌘P</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <CreditCard />\n              <span>Billing</span>\n              <CommandShortcut>⌘B</CommandShortcut>\n            </CommandItem>\n            <CommandItem>\n              <Settings />\n              <span>Settings</span>\n              <CommandShortcut>⌘S</CommandShortcut>\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </CommandDialog>\n    </>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/command.json b/apps/v4/public/r/styles/new-york-v4/command.json
index fe04d68037..3847791fba 100644
--- a/apps/v4/public/r/styles/new-york-v4/command.json
+++ b/apps/v4/public/r/styles/new-york-v4/command.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/new-york-v4/ui/dialog\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md\",\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 = true,\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(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\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        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\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        \"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\",\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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\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        \"text-muted-foreground ml-auto text-xs tracking-widest\",\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\"\nimport { SearchIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/new-york-v4/ui/dialog\"\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 h-full w-full flex-col overflow-hidden rounded-md 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 = true,\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(\"overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        <Command className=\"**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div\n      data-slot=\"command-input-wrapper\"\n      className=\"flex h-9 items-center gap-2 border-b px-3\"\n    >\n      <SearchIcon className=\"size-4 shrink-0 opacity-50\" />\n      <CommandPrimitive.Input\n        data-slot=\"command-input\"\n        className={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\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        \"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className=\"py-6 text-center text-sm\"\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 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\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(\"-mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\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\",\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/new-york-v4/context-menu.json b/apps/v4/public/r/styles/new-york-v4/context-menu.json
index 06f1107afe..c71da2df74 100644
--- a/apps/v4/public/r/styles/new-york-v4/context-menu.json
+++ b/apps/v4/public/r/styles/new-york-v4/context-menu.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\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  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />\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 ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\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        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\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        \"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\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 { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\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  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger data-slot=\"context-menu-trigger\" {...props} />\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 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-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\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        \"z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-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        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\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-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8\",\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 my-1 h-px bg-border\", 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\",\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/new-york-v4/dashboard-01.json b/apps/v4/public/r/styles/new-york-v4/dashboard-01.json
index 3620f37ab2..b61c6aab43 100644
--- a/apps/v4/public/r/styles/new-york-v4/dashboard-01.json
+++ b/apps/v4/public/r/styles/new-york-v4/dashboard-01.json
@@ -47,27 +47,27 @@
     },
     {
       "path": "registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  IconCamera,\n  IconChartBar,\n  IconDashboard,\n  IconDatabase,\n  IconFileAi,\n  IconFileDescription,\n  IconFileWord,\n  IconFolder,\n  IconHelp,\n  IconInnerShadowTop,\n  IconListDetails,\n  IconReport,\n  IconSearch,\n  IconSettings,\n  IconUsers,\n} from \"@tabler/icons-react\"\n\nimport { NavDocuments } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: IconDashboard,\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: IconListDetails,\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: IconChartBar,\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: IconFolder,\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: IconUsers,\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: IconCamera,\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: IconFileDescription,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: IconFileAi,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: IconSettings,\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: IconHelp,\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: IconSearch,\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: IconDatabase,\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: IconReport,\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: IconFileWord,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              asChild\n              className=\"data-[slot=sidebar-menu-button]:!p-1.5\"\n            >\n              <a href=\"#\">\n                <IconInnerShadowTop className=\"!size-5\" />\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  IconCamera,\n  IconChartBar,\n  IconDashboard,\n  IconDatabase,\n  IconFileAi,\n  IconFileDescription,\n  IconFileWord,\n  IconFolder,\n  IconHelp,\n  IconInnerShadowTop,\n  IconListDetails,\n  IconReport,\n  IconSearch,\n  IconSettings,\n  IconUsers,\n} from \"@tabler/icons-react\"\n\nimport { NavDocuments } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-documents\"\nimport { NavMain } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-main\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/dashboard-01/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Dashboard\",\n      url: \"#\",\n      icon: IconDashboard,\n    },\n    {\n      title: \"Lifecycle\",\n      url: \"#\",\n      icon: IconListDetails,\n    },\n    {\n      title: \"Analytics\",\n      url: \"#\",\n      icon: IconChartBar,\n    },\n    {\n      title: \"Projects\",\n      url: \"#\",\n      icon: IconFolder,\n    },\n    {\n      title: \"Team\",\n      url: \"#\",\n      icon: IconUsers,\n    },\n  ],\n  navClouds: [\n    {\n      title: \"Capture\",\n      icon: IconCamera,\n      isActive: true,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Proposal\",\n      icon: IconFileDescription,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Prompts\",\n      icon: IconFileAi,\n      url: \"#\",\n      items: [\n        {\n          title: \"Active Proposals\",\n          url: \"#\",\n        },\n        {\n          title: \"Archived\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: IconSettings,\n    },\n    {\n      title: \"Get Help\",\n      url: \"#\",\n      icon: IconHelp,\n    },\n    {\n      title: \"Search\",\n      url: \"#\",\n      icon: IconSearch,\n    },\n  ],\n  documents: [\n    {\n      name: \"Data Library\",\n      url: \"#\",\n      icon: IconDatabase,\n    },\n    {\n      name: \"Reports\",\n      url: \"#\",\n      icon: IconReport,\n    },\n    {\n      name: \"Word Assistant\",\n      url: \"#\",\n      icon: IconFileWord,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar collapsible=\"offcanvas\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton\n              asChild\n              className=\"data-[slot=sidebar-menu-button]:p-1.5!\"\n            >\n              <a href=\"#\">\n                <IconInnerShadowTop className=\"size-5!\" />\n                <span className=\"text-base font-semibold\">Acme Inc.</span>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavDocuments items={data.documents} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader>\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"hidden @[540px]/card:block\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <CardAction>\n          <ToggleGroup\n            type=\"single\"\n            value={timeRange}\n            onValueChange={setTimeRange}\n            variant=\"outline\"\n            className=\"hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex\"\n          >\n            <ToggleGroupItem value=\"90d\">Last 3 months</ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\">Last 30 days</ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\">Last 7 days</ToggleGroupItem>\n          </ToggleGroup>\n          <Select value={timeRange} onValueChange={setTimeRange}>\n            <SelectTrigger\n              className=\"flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden\"\n              size=\"sm\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport const description = \"An interactive area chart\"\n\nconst chartData = [\n  { date: \"2024-04-01\", desktop: 222, mobile: 150 },\n  { date: \"2024-04-02\", desktop: 97, mobile: 180 },\n  { date: \"2024-04-03\", desktop: 167, mobile: 120 },\n  { date: \"2024-04-04\", desktop: 242, mobile: 260 },\n  { date: \"2024-04-05\", desktop: 373, mobile: 290 },\n  { date: \"2024-04-06\", desktop: 301, mobile: 340 },\n  { date: \"2024-04-07\", desktop: 245, mobile: 180 },\n  { date: \"2024-04-08\", desktop: 409, mobile: 320 },\n  { date: \"2024-04-09\", desktop: 59, mobile: 110 },\n  { date: \"2024-04-10\", desktop: 261, mobile: 190 },\n  { date: \"2024-04-11\", desktop: 327, mobile: 350 },\n  { date: \"2024-04-12\", desktop: 292, mobile: 210 },\n  { date: \"2024-04-13\", desktop: 342, mobile: 380 },\n  { date: \"2024-04-14\", desktop: 137, mobile: 220 },\n  { date: \"2024-04-15\", desktop: 120, mobile: 170 },\n  { date: \"2024-04-16\", desktop: 138, mobile: 190 },\n  { date: \"2024-04-17\", desktop: 446, mobile: 360 },\n  { date: \"2024-04-18\", desktop: 364, mobile: 410 },\n  { date: \"2024-04-19\", desktop: 243, mobile: 180 },\n  { date: \"2024-04-20\", desktop: 89, mobile: 150 },\n  { date: \"2024-04-21\", desktop: 137, mobile: 200 },\n  { date: \"2024-04-22\", desktop: 224, mobile: 170 },\n  { date: \"2024-04-23\", desktop: 138, mobile: 230 },\n  { date: \"2024-04-24\", desktop: 387, mobile: 290 },\n  { date: \"2024-04-25\", desktop: 215, mobile: 250 },\n  { date: \"2024-04-26\", desktop: 75, mobile: 130 },\n  { date: \"2024-04-27\", desktop: 383, mobile: 420 },\n  { date: \"2024-04-28\", desktop: 122, mobile: 180 },\n  { date: \"2024-04-29\", desktop: 315, mobile: 240 },\n  { date: \"2024-04-30\", desktop: 454, mobile: 380 },\n  { date: \"2024-05-01\", desktop: 165, mobile: 220 },\n  { date: \"2024-05-02\", desktop: 293, mobile: 310 },\n  { date: \"2024-05-03\", desktop: 247, mobile: 190 },\n  { date: \"2024-05-04\", desktop: 385, mobile: 420 },\n  { date: \"2024-05-05\", desktop: 481, mobile: 390 },\n  { date: \"2024-05-06\", desktop: 498, mobile: 520 },\n  { date: \"2024-05-07\", desktop: 388, mobile: 300 },\n  { date: \"2024-05-08\", desktop: 149, mobile: 210 },\n  { date: \"2024-05-09\", desktop: 227, mobile: 180 },\n  { date: \"2024-05-10\", desktop: 293, mobile: 330 },\n  { date: \"2024-05-11\", desktop: 335, mobile: 270 },\n  { date: \"2024-05-12\", desktop: 197, mobile: 240 },\n  { date: \"2024-05-13\", desktop: 197, mobile: 160 },\n  { date: \"2024-05-14\", desktop: 448, mobile: 490 },\n  { date: \"2024-05-15\", desktop: 473, mobile: 380 },\n  { date: \"2024-05-16\", desktop: 338, mobile: 400 },\n  { date: \"2024-05-17\", desktop: 499, mobile: 420 },\n  { date: \"2024-05-18\", desktop: 315, mobile: 350 },\n  { date: \"2024-05-19\", desktop: 235, mobile: 180 },\n  { date: \"2024-05-20\", desktop: 177, mobile: 230 },\n  { date: \"2024-05-21\", desktop: 82, mobile: 140 },\n  { date: \"2024-05-22\", desktop: 81, mobile: 120 },\n  { date: \"2024-05-23\", desktop: 252, mobile: 290 },\n  { date: \"2024-05-24\", desktop: 294, mobile: 220 },\n  { date: \"2024-05-25\", desktop: 201, mobile: 250 },\n  { date: \"2024-05-26\", desktop: 213, mobile: 170 },\n  { date: \"2024-05-27\", desktop: 420, mobile: 460 },\n  { date: \"2024-05-28\", desktop: 233, mobile: 190 },\n  { date: \"2024-05-29\", desktop: 78, mobile: 130 },\n  { date: \"2024-05-30\", desktop: 340, mobile: 280 },\n  { date: \"2024-05-31\", desktop: 178, mobile: 230 },\n  { date: \"2024-06-01\", desktop: 178, mobile: 200 },\n  { date: \"2024-06-02\", desktop: 470, mobile: 410 },\n  { date: \"2024-06-03\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-04\", desktop: 439, mobile: 380 },\n  { date: \"2024-06-05\", desktop: 88, mobile: 140 },\n  { date: \"2024-06-06\", desktop: 294, mobile: 250 },\n  { date: \"2024-06-07\", desktop: 323, mobile: 370 },\n  { date: \"2024-06-08\", desktop: 385, mobile: 320 },\n  { date: \"2024-06-09\", desktop: 438, mobile: 480 },\n  { date: \"2024-06-10\", desktop: 155, mobile: 200 },\n  { date: \"2024-06-11\", desktop: 92, mobile: 150 },\n  { date: \"2024-06-12\", desktop: 492, mobile: 420 },\n  { date: \"2024-06-13\", desktop: 81, mobile: 130 },\n  { date: \"2024-06-14\", desktop: 426, mobile: 380 },\n  { date: \"2024-06-15\", desktop: 307, mobile: 350 },\n  { date: \"2024-06-16\", desktop: 371, mobile: 310 },\n  { date: \"2024-06-17\", desktop: 475, mobile: 520 },\n  { date: \"2024-06-18\", desktop: 107, mobile: 170 },\n  { date: \"2024-06-19\", desktop: 341, mobile: 290 },\n  { date: \"2024-06-20\", desktop: 408, mobile: 450 },\n  { date: \"2024-06-21\", desktop: 169, mobile: 210 },\n  { date: \"2024-06-22\", desktop: 317, mobile: 270 },\n  { date: \"2024-06-23\", desktop: 480, mobile: 530 },\n  { date: \"2024-06-24\", desktop: 132, mobile: 180 },\n  { date: \"2024-06-25\", desktop: 141, mobile: 190 },\n  { date: \"2024-06-26\", desktop: 434, mobile: 380 },\n  { date: \"2024-06-27\", desktop: 448, mobile: 490 },\n  { date: \"2024-06-28\", desktop: 149, mobile: 200 },\n  { date: \"2024-06-29\", desktop: 103, mobile: 160 },\n  { date: \"2024-06-30\", desktop: 446, mobile: 400 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartAreaInteractive() {\n  const isMobile = useIsMobile()\n  const [timeRange, setTimeRange] = React.useState(\"90d\")\n\n  React.useEffect(() => {\n    if (isMobile) {\n      setTimeRange(\"7d\")\n    }\n  }, [isMobile])\n\n  const filteredData = chartData.filter((item) => {\n    const date = new Date(item.date)\n    const referenceDate = new Date(\"2024-06-30\")\n    let daysToSubtract = 90\n    if (timeRange === \"30d\") {\n      daysToSubtract = 30\n    } else if (timeRange === \"7d\") {\n      daysToSubtract = 7\n    }\n    const startDate = new Date(referenceDate)\n    startDate.setDate(startDate.getDate() - daysToSubtract)\n    return date >= startDate\n  })\n\n  return (\n    <Card className=\"@container/card\">\n      <CardHeader>\n        <CardTitle>Total Visitors</CardTitle>\n        <CardDescription>\n          <span className=\"hidden @[540px]/card:block\">\n            Total for the last 3 months\n          </span>\n          <span className=\"@[540px]/card:hidden\">Last 3 months</span>\n        </CardDescription>\n        <CardAction>\n          <ToggleGroup\n            type=\"single\"\n            value={timeRange}\n            onValueChange={setTimeRange}\n            variant=\"outline\"\n            className=\"hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex\"\n          >\n            <ToggleGroupItem value=\"90d\">Last 3 months</ToggleGroupItem>\n            <ToggleGroupItem value=\"30d\">Last 30 days</ToggleGroupItem>\n            <ToggleGroupItem value=\"7d\">Last 7 days</ToggleGroupItem>\n          </ToggleGroup>\n          <Select value={timeRange} onValueChange={setTimeRange}>\n            <SelectTrigger\n              className=\"flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden\"\n              size=\"sm\"\n              aria-label=\"Select a value\"\n            >\n              <SelectValue placeholder=\"Last 3 months\" />\n            </SelectTrigger>\n            <SelectContent className=\"rounded-xl\">\n              <SelectItem value=\"90d\" className=\"rounded-lg\">\n                Last 3 months\n              </SelectItem>\n              <SelectItem value=\"30d\" className=\"rounded-lg\">\n                Last 30 days\n              </SelectItem>\n              <SelectItem value=\"7d\" className=\"rounded-lg\">\n                Last 7 days\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </CardAction>\n      </CardHeader>\n      <CardContent className=\"px-2 pt-4 sm:px-6 sm:pt-6\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"aspect-auto h-[250px] w-full\"\n        >\n          <AreaChart data={filteredData}>\n            <defs>\n              <linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={1.0}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-desktop)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n              <linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop\n                  offset=\"5%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.8}\n                />\n                <stop\n                  offset=\"95%\"\n                  stopColor=\"var(--color-mobile)\"\n                  stopOpacity={0.1}\n                />\n              </linearGradient>\n            </defs>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"date\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              minTickGap={32}\n              tickFormatter={(value) => {\n                const date = new Date(value)\n                return date.toLocaleDateString(\"en-US\", {\n                  month: \"short\",\n                  day: \"numeric\",\n                })\n              }}\n            />\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent\n                  labelFormatter={(value) => {\n                    return new Date(value).toLocaleDateString(\"en-US\", {\n                      month: \"short\",\n                      day: \"numeric\",\n                    })\n                  }}\n                  indicator=\"dot\"\n                />\n              }\n            />\n            <Area\n              dataKey=\"mobile\"\n              type=\"natural\"\n              fill=\"url(#fillMobile)\"\n              stroke=\"var(--color-mobile)\"\n              stackId=\"a\"\n            />\n            <Area\n              dataKey=\"desktop\"\n              type=\"natural\"\n              fill=\"url(#fillDesktop)\"\n              stroke=\"var(--color-desktop)\"\n              stackId=\"a\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronsLeft,\n  IconChevronsRight,\n  IconCircleCheckFilled,\n  IconDotsVertical,\n  IconGripVertical,\n  IconLayoutColumns,\n  IconLoader,\n  IconPlus,\n  IconTrendingUp,\n} from \"@tabler/icons-react\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york-v4/ui/tabs\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconGripVertical className=\"text-muted-foreground size-3\" />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconCircleCheckFilled className=\"fill-green-500 dark:fill-green-400\" />\n        ) : (\n          <IconLoader />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n              <SelectItem value=\"Jamik Tashpulatov\">\n                Jamik Tashpulatov\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"data-[state=open]:bg-muted text-muted-foreground flex size-8\"\n            size=\"icon\"\n          >\n            <IconDotsVertical />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"outline\">Outline</SelectItem>\n            <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n            <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n            <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconLayoutColumns />\n                <span className=\"hidden lg:inline\">Customize Columns</span>\n                <span className=\"lg:hidden\">Columns</span>\n                <IconChevronDown />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlus />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  {[10, 20, 30, 40, 50].map((pageSize) => (\n                    <SelectItem key={pageSize} value={`${pageSize}`}>\n                      {pageSize}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconChevronsLeft />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconChevronLeft />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconChevronRight />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconChevronsRight />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconTrendingUp className=\"size-4\" />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Table of Contents\">\n                      Table of Contents\n                    </SelectItem>\n                    <SelectItem value=\"Executive Summary\">\n                      Executive Summary\n                    </SelectItem>\n                    <SelectItem value=\"Technical Approach\">\n                      Technical Approach\n                    </SelectItem>\n                    <SelectItem value=\"Design\">Design</SelectItem>\n                    <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                    <SelectItem value=\"Focus Documents\">\n                      Focus Documents\n                    </SelectItem>\n                    <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                    <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Done\">Done</SelectItem>\n                    <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                    <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                  <SelectItem value=\"Jamik Tashpulatov\">\n                    Jamik Tashpulatov\n                  </SelectItem>\n                  <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  IconChevronDown,\n  IconChevronLeft,\n  IconChevronRight,\n  IconChevronsLeft,\n  IconChevronsRight,\n  IconCircleCheckFilled,\n  IconDotsVertical,\n  IconGripVertical,\n  IconLayoutColumns,\n  IconLoader,\n  IconPlus,\n  IconTrendingUp,\n} from \"@tabler/icons-react\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/new-york-v4/ui/tabs\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconGripVertical className=\"size-3 text-muted-foreground\" />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconCircleCheckFilled className=\"fill-green-500 dark:fill-green-400\" />\n        ) : (\n          <IconLoader />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n              <SelectItem value=\"Jamik Tashpulatov\">\n                Jamik Tashpulatov\n              </SelectItem>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <IconDotsVertical />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"outline\">Outline</SelectItem>\n            <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n            <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n            <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconLayoutColumns />\n                <span className=\"hidden lg:inline\">Customize Columns</span>\n                <span className=\"lg:hidden\">Columns</span>\n                <IconChevronDown />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlus />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  {[10, 20, 30, 40, 50].map((pageSize) => (\n                    <SelectItem key={pageSize} value={`${pageSize}`}>\n                      {pageSize}\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconChevronsLeft />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconChevronLeft />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconChevronRight />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconChevronsRight />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconTrendingUp className=\"size-4\" />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Table of Contents\">\n                      Table of Contents\n                    </SelectItem>\n                    <SelectItem value=\"Executive Summary\">\n                      Executive Summary\n                    </SelectItem>\n                    <SelectItem value=\"Technical Approach\">\n                      Technical Approach\n                    </SelectItem>\n                    <SelectItem value=\"Design\">Design</SelectItem>\n                    <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                    <SelectItem value=\"Focus Documents\">\n                      Focus Documents\n                    </SelectItem>\n                    <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                    <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"Done\">Done</SelectItem>\n                    <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                    <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                  <SelectItem value=\"Jamik Tashpulatov\">\n                    Jamik Tashpulatov\n                  </SelectItem>\n                  <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx",
-      "content": "\"use client\"\n\nimport {\n  IconDots,\n  IconFolder,\n  IconShare3,\n  IconTrash,\n  type Icon,\n} from \"@tabler/icons-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: Icon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"data-[state=open]:bg-accent rounded-sm\"\n                >\n                  <IconDots />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconFolder />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconShare3 />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconTrash />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconDots className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  IconDots,\n  IconFolder,\n  IconShare3,\n  IconTrash,\n  type Icon,\n} from \"@tabler/icons-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: Icon\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                <item.icon />\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <IconDots />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconFolder />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconShare3 />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconTrash />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconDots className=\"text-sidebar-foreground/70\" />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { IconCirclePlusFilled, IconMail, type Icon } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: Icon\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconCirclePlusFilled />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconMail />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon && <item.icon />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { IconCirclePlusFilled, IconMail, type Icon } from \"@tabler/icons-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: Icon\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconCirclePlusFilled />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconMail />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon && <item.icon />}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  IconCreditCard,\n  IconDotsVertical,\n  IconLogout,\n  IconNotification,\n  IconUserCircle,\n} from \"@tabler/icons-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  {user.email}\n                </span>\n              </div>\n              <IconDotsVertical className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconUserCircle />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconCreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconNotification />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconLogout />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  IconCreditCard,\n  IconDotsVertical,\n  IconLogout,\n  IconNotification,\n  IconUserCircle,\n} from \"@tabler/icons-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <IconDotsVertical className=\"ml-auto size-4\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconUserCircle />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconCreditCard />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconNotification />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconLogout />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "import { IconTrendingDown, IconTrendingUp } from \"@tabler/icons-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingDown />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period <IconTrendingDown className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "import { IconTrendingDown, IconTrendingUp } from \"@tabler/icons-react\"\n\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingDown />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period <IconTrendingDown className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconTrendingUp />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase <IconTrendingUp className=\"size-4\" />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/new-york-v4/data-table-demo.json b/apps/v4/public/r/styles/new-york-v4/data-table-demo.json
index cf77a8037f..e1e42d2061 100644
--- a/apps/v4/public/r/styles/new-york-v4/data-table-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/data-table-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/data-table-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst data: Payment[] = [\n  {\n    id: \"m5gr84i9\",\n    amount: 316,\n    status: \"success\",\n    email: \"ken99@example.com\",\n  },\n  {\n    id: \"3u1reuv4\",\n    amount: 242,\n    status: \"success\",\n    email: \"Abe45@example.com\",\n  },\n  {\n    id: \"derv1ws0\",\n    amount: 837,\n    status: \"processing\",\n    email: \"Monserrat44@example.com\",\n  },\n  {\n    id: \"5kma53ae\",\n    amount: 874,\n    status: \"success\",\n    email: \"Silas22@example.com\",\n  },\n  {\n    id: \"bhqecj4p\",\n    amount: 721,\n    status: \"failed\",\n    email: \"carmella@example.com\",\n  },\n]\n\nexport type Payment = {\n  id: string\n  amount: number\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n  email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n    ),\n  },\n  {\n    accessorKey: \"email\",\n    header: ({ column }) => {\n      return (\n        <Button\n          variant=\"ghost\"\n          onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n        >\n          Email\n          <ArrowUpDown />\n        </Button>\n      )\n    },\n    cell: ({ row }) => <div className=\"lowercase\">{row.getValue(\"email\")}</div>,\n  },\n  {\n    accessorKey: \"amount\",\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"amount\"))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n\n      return <div className=\"text-right font-medium\">{formatted}</div>\n    },\n  },\n  {\n    id: \"actions\",\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" className=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem\n              onClick={() => navigator.clipboard.writeText(payment.id)}\n            >\n              Copy payment ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>View customer</DropdownMenuItem>\n            <DropdownMenuItem>View payment details</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n  },\n]\n\nexport default function DataTableDemo() {\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [rowSelection, setRowSelection] = React.useState({})\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  })\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center py-4\">\n        <Input\n          placeholder=\"Filter emails...\"\n          value={(table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"}\n          onChange={(event) =>\n            table.getColumn(\"email\")?.setFilterValue(event.target.value)\n          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    className=\"capitalize\"\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2 py-4\">\n        <div className=\"text-muted-foreground flex-1 text-sm\">\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"space-x-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst data: Payment[] = [\n  {\n    id: \"m5gr84i9\",\n    amount: 316,\n    status: \"success\",\n    email: \"ken99@example.com\",\n  },\n  {\n    id: \"3u1reuv4\",\n    amount: 242,\n    status: \"success\",\n    email: \"Abe45@example.com\",\n  },\n  {\n    id: \"derv1ws0\",\n    amount: 837,\n    status: \"processing\",\n    email: \"Monserrat44@example.com\",\n  },\n  {\n    id: \"5kma53ae\",\n    amount: 874,\n    status: \"success\",\n    email: \"Silas22@example.com\",\n  },\n  {\n    id: \"bhqecj4p\",\n    amount: 721,\n    status: \"failed\",\n    email: \"carmella@example.com\",\n  },\n]\n\nexport type Payment = {\n  id: string\n  amount: number\n  status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n  email: string\n}\n\nexport const columns: ColumnDef<Payment>[] = [\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <Checkbox\n        checked={\n          table.getIsAllPageRowsSelected() ||\n          (table.getIsSomePageRowsSelected() && \"indeterminate\")\n        }\n        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n        aria-label=\"Select all\"\n      />\n    ),\n    cell: ({ row }) => (\n      <Checkbox\n        checked={row.getIsSelected()}\n        onCheckedChange={(value) => row.toggleSelected(!!value)}\n        aria-label=\"Select row\"\n      />\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <div className=\"capitalize\">{row.getValue(\"status\")}</div>\n    ),\n  },\n  {\n    accessorKey: \"email\",\n    header: ({ column }) => {\n      return (\n        <Button\n          variant=\"ghost\"\n          onClick={() => column.toggleSorting(column.getIsSorted() === \"asc\")}\n        >\n          Email\n          <ArrowUpDown />\n        </Button>\n      )\n    },\n    cell: ({ row }) => <div className=\"lowercase\">{row.getValue(\"email\")}</div>,\n  },\n  {\n    accessorKey: \"amount\",\n    header: () => <div className=\"text-right\">Amount</div>,\n    cell: ({ row }) => {\n      const amount = parseFloat(row.getValue(\"amount\"))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat(\"en-US\", {\n        style: \"currency\",\n        currency: \"USD\",\n      }).format(amount)\n\n      return <div className=\"text-right font-medium\">{formatted}</div>\n    },\n  },\n  {\n    id: \"actions\",\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return (\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" className=\"h-8 w-8 p-0\">\n              <span className=\"sr-only\">Open menu</span>\n              <MoreHorizontal />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem\n              onClick={() => navigator.clipboard.writeText(payment.id)}\n            >\n              Copy payment ID\n            </DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>View customer</DropdownMenuItem>\n            <DropdownMenuItem>View payment details</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )\n    },\n  },\n]\n\nexport default function DataTableDemo() {\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [rowSelection, setRowSelection] = React.useState({})\n\n  const table = useReactTable({\n    data,\n    columns,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    onColumnVisibilityChange: setColumnVisibility,\n    onRowSelectionChange: setRowSelection,\n    state: {\n      sorting,\n      columnFilters,\n      columnVisibility,\n      rowSelection,\n    },\n  })\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"flex items-center py-4\">\n        <Input\n          placeholder=\"Filter emails...\"\n          value={(table.getColumn(\"email\")?.getFilterValue() as string) ?? \"\"}\n          onChange={(event) =>\n            table.getColumn(\"email\")?.setFilterValue(event.target.value)\n          }\n          className=\"max-w-sm\"\n        />\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"ml-auto\">\n              Columns <ChevronDown />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {table\n              .getAllColumns()\n              .filter((column) => column.getCanHide())\n              .map((column) => {\n                return (\n                  <DropdownMenuCheckboxItem\n                    key={column.id}\n                    className=\"capitalize\"\n                    checked={column.getIsVisible()}\n                    onCheckedChange={(value) =>\n                      column.toggleVisibility(!!value)\n                    }\n                  >\n                    {column.id}\n                  </DropdownMenuCheckboxItem>\n                )\n              })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  return (\n                    <TableHead key={header.id}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext()\n                          )}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={columns.length}\n                  className=\"h-24 text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      <div className=\"flex items-center justify-end space-x-2 py-4\">\n        <div className=\"flex-1 text-sm text-muted-foreground\">\n          {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n          {table.getFilteredRowModel().rows.length} row(s) selected.\n        </div>\n        <div className=\"space-x-2\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.previousPage()}\n            disabled={!table.getCanPreviousPage()}\n          >\n            Previous\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            onClick={() => table.nextPage()}\n            disabled={!table.getCanNextPage()}\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/dialog.json b/apps/v4/public/r/styles/new-york-v4/dialog.json
index 3d463eec4c..b3af4700f7 100644
--- a/apps/v4/public/r/styles/new-york-v4/dialog.json
+++ b/apps/v4/public/r/styles/new-york-v4/dialog.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal data-slot=\"dialog-portal\">\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close\n            data-slot=\"dialog-close\"\n            className=\"absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\"\n          >\n            <XIcon />\n            <span className=\"sr-only\">Close</span>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-lg leading-none font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/drawer-demo.json b/apps/v4/public/r/styles/new-york-v4/drawer-demo.json
index b8c488b8ff..929f785d92 100644
--- a/apps/v4/public/r/styles/new-york-v4/drawer-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/drawer-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/drawer-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-muted-foreground text-[0.70rem] uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] text-muted-foreground uppercase\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/drawer.json b/apps/v4/public/r/styles/new-york-v4/drawer.json
index aff2071fda..da3f958f8d 100644
--- a/apps/v4/public/r/styles/new-york-v4/drawer.json
+++ b/apps/v4/public/r/styles/new-york-v4/drawer.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content bg-background fixed z-50 flex h-auto flex-col\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background\",\n          \"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b\",\n          \"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t\",\n          \"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          \"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"font-semibold text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/dropdown-menu.json b/apps/v4/public/r/styles/new-york-v4/dropdown-menu.json
index 4244cb60a3..2eb989ad17 100644
--- a/apps/v4/public/r/styles/new-york-v4/dropdown-menu.json
+++ b/apps/v4/public/r/styles/new-york-v4/dropdown-menu.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\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  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        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\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-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\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        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\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 { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\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  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        className={cn(\n          \"z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-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        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\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-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\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 my-1 h-px bg-border\", 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\",\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-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\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        \"z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-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/new-york-v4/empty-avatar-group.json b/apps/v4/public/r/styles/new-york-v4/empty-avatar-group.json
index 2f7f29f9ce..19340e02ec 100644
--- a/apps/v4/public/r/styles/new-york-v4/empty-avatar-group.json
+++ b/apps/v4/public/r/styles/new-york-v4/empty-avatar-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/empty-avatar-group.tsx",
-      "content": "import { PlusIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/new-york-v4/ui/empty\"\n\nexport default function EmptyAvatarGroup() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia>\n          <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n          </div>\n        </EmptyMedia>\n        <EmptyTitle>No Team Members</EmptyTitle>\n        <EmptyDescription>\n          Invite your team to collaborate on this project.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button size=\"sm\">\n          <PlusIcon />\n          Invite Members\n        </Button>\n      </EmptyContent>\n    </Empty>\n  )\n}\n",
+      "content": "import { PlusIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/new-york-v4/ui/empty\"\n\nexport default function EmptyAvatarGroup() {\n  return (\n    <Empty>\n      <EmptyHeader>\n        <EmptyMedia>\n          <div className=\"flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale\">\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n          </div>\n        </EmptyMedia>\n        <EmptyTitle>No Team Members</EmptyTitle>\n        <EmptyDescription>\n          Invite your team to collaborate on this project.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button size=\"sm\">\n          <PlusIcon />\n          Invite Members\n        </Button>\n      </EmptyContent>\n    </Empty>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/empty-background.json b/apps/v4/public/r/styles/new-york-v4/empty-background.json
index e6378ba141..d2c53b0561 100644
--- a/apps/v4/public/r/styles/new-york-v4/empty-background.json
+++ b/apps/v4/public/r/styles/new-york-v4/empty-background.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/empty-background.tsx",
-      "content": "import { IconBell } from \"@tabler/icons-react\"\nimport { RefreshCcwIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/new-york-v4/ui/empty\"\n\nexport default function EmptyMuted() {\n  return (\n    <Empty className=\"from-muted/50 to-background h-full bg-gradient-to-b from-30%\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <IconBell />\n        </EmptyMedia>\n        <EmptyTitle>No Notifications</EmptyTitle>\n        <EmptyDescription>\n          You&apos;re all caught up. New notifications will appear here.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button variant=\"outline\" size=\"sm\">\n          <RefreshCcwIcon />\n          Refresh\n        </Button>\n      </EmptyContent>\n    </Empty>\n  )\n}\n",
+      "content": "import { IconBell } from \"@tabler/icons-react\"\nimport { RefreshCcwIcon } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/new-york-v4/ui/empty\"\n\nexport default function EmptyMuted() {\n  return (\n    <Empty className=\"h-full bg-gradient-to-b from-muted/50 from-30% to-background\">\n      <EmptyHeader>\n        <EmptyMedia variant=\"icon\">\n          <IconBell />\n        </EmptyMedia>\n        <EmptyTitle>No Notifications</EmptyTitle>\n        <EmptyDescription>\n          You&apos;re all caught up. New notifications will appear here.\n        </EmptyDescription>\n      </EmptyHeader>\n      <EmptyContent>\n        <Button variant=\"outline\" size=\"sm\">\n          <RefreshCcwIcon />\n          Refresh\n        </Button>\n      </EmptyContent>\n    </Empty>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/empty.json b/apps/v4/public/r/styles/new-york-v4/empty.json
index e87a0a737d..77b4c73c3c 100644
--- a/apps/v4/public/r/styles/new-york-v4/empty.json
+++ b/apps/v4/public/r/styles/new-york-v4/empty.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\n        \"flex max-w-sm flex-col items-center gap-2 text-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\n        \"flex max-w-sm flex-col items-center gap-2 text-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/field.json b/apps/v4/public/r/styles/new-york-v4/field.json
index a120aa5e1f..e1af695aa6 100644
--- a/apps/v4/public/r/styles/new-york-v4/field.json
+++ b/apps/v4/public/r/styles/new-york-v4/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Separator } from \"@/registry/new-york-v4/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\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n        horizontal: [\n          \"flex-row items-center\",\n          \"[&>[data-slot=field-label]]:flex-auto\",\n          \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n        responsive: [\n          \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto\",\n          \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n          \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n      },\n    },\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.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\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=\"bg-background text-muted-foreground relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Separator } from \"@/registry/new-york-v4/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\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n        horizontal: [\n          \"flex-row items-center\",\n          \"[&>[data-slot=field-label]]:flex-auto\",\n          \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n        responsive: [\n          \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n          \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n          \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n      },\n    },\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.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\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/new-york-v4/form-rhf-array.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-array.json
index 998e304098..428267c266 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-array.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-array.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-array.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { XIcon } from \"lucide-react\"\nimport { Controller, useFieldArray, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst formSchema = z.object({\n  emails: z\n    .array(\n      z.object({\n        address: z.string().email(\"Enter a valid email address.\"),\n      })\n    )\n    .min(1, \"Add at least one email address.\")\n    .max(5, \"You can add up to 5 email addresses.\"),\n})\n\nexport default function FormRhfArray() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      emails: [{ address: \"\" }, { address: \"\" }],\n    },\n  })\n\n  const { fields, append, remove } = useFieldArray({\n    control: form.control,\n    name: \"emails\",\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>Contact Emails</CardTitle>\n        <CardDescription>Manage your contact email addresses.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-array\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldSet className=\"gap-4\">\n            <FieldLegend variant=\"label\">Email Addresses</FieldLegend>\n            <FieldDescription>\n              Add up to 5 email addresses where we can contact you.\n            </FieldDescription>\n            <FieldGroup className=\"gap-4\">\n              {fields.map((field, index) => (\n                <Controller\n                  key={field.id}\n                  name={`emails.${index}.address`}\n                  control={form.control}\n                  render={({ field: controllerField, fieldState }) => (\n                    <Field\n                      orientation=\"horizontal\"\n                      data-invalid={fieldState.invalid}\n                    >\n                      <FieldContent>\n                        <InputGroup>\n                          <InputGroupInput\n                            {...controllerField}\n                            id={`form-rhf-array-email-${index}`}\n                            aria-invalid={fieldState.invalid}\n                            placeholder=\"name@example.com\"\n                            type=\"email\"\n                            autoComplete=\"email\"\n                          />\n                          {fields.length > 1 && (\n                            <InputGroupAddon align=\"inline-end\">\n                              <InputGroupButton\n                                type=\"button\"\n                                variant=\"ghost\"\n                                size=\"icon-xs\"\n                                onClick={() => remove(index)}\n                                aria-label={`Remove email ${index + 1}`}\n                              >\n                                <XIcon />\n                              </InputGroupButton>\n                            </InputGroupAddon>\n                          )}\n                        </InputGroup>\n                        {fieldState.invalid && (\n                          <FieldError errors={[fieldState.error]} />\n                        )}\n                      </FieldContent>\n                    </Field>\n                  )}\n                />\n              ))}\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => append({ address: \"\" })}\n                disabled={fields.length >= 5}\n              >\n                Add Email Address\n              </Button>\n            </FieldGroup>\n            {form.formState.errors.emails?.root && (\n              <FieldError errors={[form.formState.errors.emails.root]} />\n            )}\n          </FieldSet>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-array\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { XIcon } from \"lucide-react\"\nimport { Controller, useFieldArray, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst formSchema = z.object({\n  emails: z\n    .array(\n      z.object({\n        address: z.string().email(\"Enter a valid email address.\"),\n      })\n    )\n    .min(1, \"Add at least one email address.\")\n    .max(5, \"You can add up to 5 email addresses.\"),\n})\n\nexport default function FormRhfArray() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      emails: [{ address: \"\" }, { address: \"\" }],\n    },\n  })\n\n  const { fields, append, remove } = useFieldArray({\n    control: form.control,\n    name: \"emails\",\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>Contact Emails</CardTitle>\n        <CardDescription>Manage your contact email addresses.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-array\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldSet className=\"gap-4\">\n            <FieldLegend variant=\"label\">Email Addresses</FieldLegend>\n            <FieldDescription>\n              Add up to 5 email addresses where we can contact you.\n            </FieldDescription>\n            <FieldGroup className=\"gap-4\">\n              {fields.map((field, index) => (\n                <Controller\n                  key={field.id}\n                  name={`emails.${index}.address`}\n                  control={form.control}\n                  render={({ field: controllerField, fieldState }) => (\n                    <Field\n                      orientation=\"horizontal\"\n                      data-invalid={fieldState.invalid}\n                    >\n                      <FieldContent>\n                        <InputGroup>\n                          <InputGroupInput\n                            {...controllerField}\n                            id={`form-rhf-array-email-${index}`}\n                            aria-invalid={fieldState.invalid}\n                            placeholder=\"name@example.com\"\n                            type=\"email\"\n                            autoComplete=\"email\"\n                          />\n                          {fields.length > 1 && (\n                            <InputGroupAddon align=\"inline-end\">\n                              <InputGroupButton\n                                type=\"button\"\n                                variant=\"ghost\"\n                                size=\"icon-xs\"\n                                onClick={() => remove(index)}\n                                aria-label={`Remove email ${index + 1}`}\n                              >\n                                <XIcon />\n                              </InputGroupButton>\n                            </InputGroupAddon>\n                          )}\n                        </InputGroup>\n                        {fieldState.invalid && (\n                          <FieldError errors={[fieldState.error]} />\n                        )}\n                      </FieldContent>\n                    </Field>\n                  )}\n                />\n              ))}\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={() => append({ address: \"\" })}\n                disabled={fields.length >= 5}\n              >\n                Add Email Address\n              </Button>\n            </FieldGroup>\n            {form.formState.errors.emails?.root && (\n              <FieldError errors={[form.formState.errors.emails.root]} />\n            )}\n          </FieldSet>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-array\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-rhf-checkbox.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-checkbox.json
index faf4ff9a50..df5f42e3fb 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-checkbox.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-checkbox.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\n\nconst tasks = [\n  {\n    id: \"push\",\n    label: \"Push notifications\",\n  },\n  {\n    id: \"email\",\n    label: \"Email notifications\",\n  },\n] as const\n\nconst formSchema = z.object({\n  responses: z.boolean(),\n  tasks: z\n    .array(z.string())\n    .min(1, \"Please select at least one notification type.\")\n    .refine(\n      (value) => value.every((task) => tasks.some((t) => t.id === task)),\n      {\n        message: \"Invalid notification type selected.\",\n      }\n    ),\n})\n\nexport default function FormRhfCheckbox() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      responses: true,\n      tasks: [],\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>Manage your notification preferences.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-checkbox\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"responses\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <div>\n                  <FieldSet data-invalid={fieldState.invalid}>\n                    <FieldLegend variant=\"label\">Responses</FieldLegend>\n                    <FieldDescription>\n                      Get notified for requests that take time, like research or\n                      image generation.\n                    </FieldDescription>\n                    <FieldGroup data-slot=\"checkbox-group\">\n                      <Field orientation=\"horizontal\">\n                        <Checkbox\n                          id=\"form-rhf-checkbox-responses\"\n                          name={field.name}\n                          checked={field.value}\n                          onCheckedChange={field.onChange}\n                          disabled\n                        />\n                        <FieldLabel\n                          htmlFor=\"form-rhf-checkbox-responses\"\n                          className=\"font-normal\"\n                        >\n                          Push notifications\n                        </FieldLabel>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </div>\n              )}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"tasks\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <FieldGroup>\n                  <FieldSet data-invalid={fieldState.invalid}>\n                    <FieldLegend variant=\"label\">Tasks</FieldLegend>\n                    <FieldDescription>\n                      Get notified when tasks you&apos;ve created have updates.\n                    </FieldDescription>\n                    <FieldGroup data-slot=\"checkbox-group\">\n                      {tasks.map((task) => (\n                        <Field\n                          key={task.id}\n                          orientation=\"horizontal\"\n                          data-invalid={fieldState.invalid}\n                        >\n                          <Checkbox\n                            id={`form-rhf-checkbox-${task.id}`}\n                            name={field.name}\n                            aria-invalid={fieldState.invalid}\n                            checked={field.value.includes(task.id)}\n                            onCheckedChange={(checked) => {\n                              const newValue = checked\n                                ? [...field.value, task.id]\n                                : field.value.filter(\n                                    (value) => value !== task.id\n                                  )\n                              field.onChange(newValue)\n                            }}\n                          />\n                          <FieldLabel\n                            htmlFor={`form-rhf-checkbox-${task.id}`}\n                            className=\"font-normal\"\n                          >\n                            {task.label}\n                          </FieldLabel>\n                        </Field>\n                      ))}\n                    </FieldGroup>\n                  </FieldSet>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </FieldGroup>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-checkbox\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\n\nconst tasks = [\n  {\n    id: \"push\",\n    label: \"Push notifications\",\n  },\n  {\n    id: \"email\",\n    label: \"Email notifications\",\n  },\n] as const\n\nconst formSchema = z.object({\n  responses: z.boolean(),\n  tasks: z\n    .array(z.string())\n    .min(1, \"Please select at least one notification type.\")\n    .refine(\n      (value) => value.every((task) => tasks.some((t) => t.id === task)),\n      {\n        message: \"Invalid notification type selected.\",\n      }\n    ),\n})\n\nexport default function FormRhfCheckbox() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      responses: true,\n      tasks: [],\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>Manage your notification preferences.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-checkbox\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"responses\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <div>\n                  <FieldSet data-invalid={fieldState.invalid}>\n                    <FieldLegend variant=\"label\">Responses</FieldLegend>\n                    <FieldDescription>\n                      Get notified for requests that take time, like research or\n                      image generation.\n                    </FieldDescription>\n                    <FieldGroup data-slot=\"checkbox-group\">\n                      <Field orientation=\"horizontal\">\n                        <Checkbox\n                          id=\"form-rhf-checkbox-responses\"\n                          name={field.name}\n                          checked={field.value}\n                          onCheckedChange={field.onChange}\n                          disabled\n                        />\n                        <FieldLabel\n                          htmlFor=\"form-rhf-checkbox-responses\"\n                          className=\"font-normal\"\n                        >\n                          Push notifications\n                        </FieldLabel>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </div>\n              )}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"tasks\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <FieldGroup>\n                  <FieldSet data-invalid={fieldState.invalid}>\n                    <FieldLegend variant=\"label\">Tasks</FieldLegend>\n                    <FieldDescription>\n                      Get notified when tasks you&apos;ve created have updates.\n                    </FieldDescription>\n                    <FieldGroup data-slot=\"checkbox-group\">\n                      {tasks.map((task) => (\n                        <Field\n                          key={task.id}\n                          orientation=\"horizontal\"\n                          data-invalid={fieldState.invalid}\n                        >\n                          <Checkbox\n                            id={`form-rhf-checkbox-${task.id}`}\n                            name={field.name}\n                            aria-invalid={fieldState.invalid}\n                            checked={field.value.includes(task.id)}\n                            onCheckedChange={(checked) => {\n                              const newValue = checked\n                                ? [...field.value, task.id]\n                                : field.value.filter(\n                                    (value) => value !== task.id\n                                  )\n                              field.onChange(newValue)\n                            }}\n                          />\n                          <FieldLabel\n                            htmlFor={`form-rhf-checkbox-${task.id}`}\n                            className=\"font-normal\"\n                          >\n                            {task.label}\n                          </FieldLabel>\n                        </Field>\n                      ))}\n                    </FieldGroup>\n                  </FieldSet>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </FieldGroup>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-checkbox\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-rhf-complex.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-complex.json
index 6db78613ca..e69ac67b82 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-complex.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-complex.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-complex.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst addons = [\n  {\n    id: \"analytics\",\n    title: \"Analytics\",\n    description: \"Advanced analytics and reporting\",\n  },\n  {\n    id: \"backup\",\n    title: \"Backup\",\n    description: \"Automated daily backups\",\n  },\n  {\n    id: \"support\",\n    title: \"Priority Support\",\n    description: \"24/7 premium customer support\",\n  },\n] as const\n\nconst formSchema = z.object({\n  plan: z\n    .string({\n      required_error: \"Please select a subscription plan\",\n    })\n    .min(1, \"Please select a subscription plan\")\n    .refine((value) => value === \"basic\" || value === \"pro\", {\n      message: \"Invalid plan selection. Please choose Basic or Pro\",\n    }),\n  billingPeriod: z\n    .string({\n      required_error: \"Please select a billing period\",\n    })\n    .min(1, \"Please select a billing period\"),\n  addons: z\n    .array(z.string())\n    .min(1, \"Please select at least one add-on\")\n    .max(3, \"You can select up to 3 add-ons\")\n    .refine(\n      (value) => value.every((addon) => addons.some((a) => a.id === addon)),\n      {\n        message: \"You selected an invalid add-on\",\n      }\n    ),\n  emailNotifications: z.boolean(),\n})\n\nexport default function FormRhfComplex() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      plan: \"basic\",\n      billingPeriod: \"\",\n      addons: [],\n      emailNotifications: false,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>You&apos;re almost there!</CardTitle>\n        <CardDescription>\n          Choose your subscription plan and billing period.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-complex\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"plan\"\n              control={form.control}\n              render={({ field, fieldState }) => {\n                const isInvalid = fieldState.invalid\n                return (\n                  <FieldSet data-invalid={isInvalid}>\n                    <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n                    <FieldDescription>\n                      Choose your subscription plan.\n                    </FieldDescription>\n                    <RadioGroup\n                      name={field.name}\n                      value={field.value}\n                      onValueChange={field.onChange}\n                      aria-invalid={isInvalid}\n                    >\n                      <FieldLabel htmlFor=\"form-rhf-complex-basic\">\n                        <Field orientation=\"horizontal\">\n                          <FieldContent>\n                            <FieldTitle>Basic</FieldTitle>\n                            <FieldDescription>\n                              For individuals and small teams\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"basic\"\n                            id=\"form-rhf-complex-basic\"\n                          />\n                        </Field>\n                      </FieldLabel>\n                      <FieldLabel htmlFor=\"form-rhf-complex-pro\">\n                        <Field orientation=\"horizontal\">\n                          <FieldContent>\n                            <FieldTitle>Pro</FieldTitle>\n                            <FieldDescription>\n                              For businesses with higher demands\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"pro\"\n                            id=\"form-rhf-complex-pro\"\n                          />\n                        </Field>\n                      </FieldLabel>\n                    </RadioGroup>\n                    {isInvalid && <FieldError errors={[fieldState.error]} />}\n                  </FieldSet>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"billingPeriod\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-complex-billingPeriod\">\n                    Billing Period\n                  </FieldLabel>\n                  <Select\n                    name={field.name}\n                    value={field.value}\n                    onValueChange={field.onChange}\n                  >\n                    <SelectTrigger\n                      id=\"form-rhf-complex-billingPeriod\"\n                      aria-invalid={fieldState.invalid}\n                    >\n                      <SelectValue placeholder=\"Select\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"monthly\">Monthly</SelectItem>\n                      <SelectItem value=\"yearly\">Yearly</SelectItem>\n                    </SelectContent>\n                  </Select>\n                  <FieldDescription>\n                    Choose how often you want to be billed.\n                  </FieldDescription>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"addons\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <FieldSet>\n                  <FieldLegend>Add-ons</FieldLegend>\n                  <FieldDescription>\n                    Select additional features you&apos;d like to include.\n                  </FieldDescription>\n                  <FieldGroup data-slot=\"checkbox-group\">\n                    {addons.map((addon) => (\n                      <Field\n                        key={addon.id}\n                        orientation=\"horizontal\"\n                        data-invalid={fieldState.invalid}\n                      >\n                        <Checkbox\n                          id={`form-rhf-complex-${addon.id}`}\n                          name={field.name}\n                          aria-invalid={fieldState.invalid}\n                          checked={field.value.includes(addon.id)}\n                          onCheckedChange={(checked) => {\n                            const newValue = checked\n                              ? [...field.value, addon.id]\n                              : field.value.filter(\n                                  (value) => value !== addon.id\n                                )\n                            field.onChange(newValue)\n                            field.onBlur()\n                          }}\n                        />\n                        <FieldContent>\n                          <FieldLabel htmlFor={`form-rhf-complex-${addon.id}`}>\n                            {addon.title}\n                          </FieldLabel>\n                          <FieldDescription>\n                            {addon.description}\n                          </FieldDescription>\n                        </FieldContent>\n                      </Field>\n                    ))}\n                  </FieldGroup>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </FieldSet>\n              )}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"emailNotifications\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field\n                  orientation=\"horizontal\"\n                  data-invalid={fieldState.invalid}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-rhf-complex-emailNotifications\">\n                      Email Notifications\n                    </FieldLabel>\n                    <FieldDescription>\n                      Receive email updates about your subscription\n                    </FieldDescription>\n                  </FieldContent>\n                  <Switch\n                    id=\"form-rhf-complex-emailNotifications\"\n                    name={field.name}\n                    checked={field.value}\n                    onCheckedChange={field.onChange}\n                    aria-invalid={fieldState.invalid}\n                  />\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field>\n          <Button type=\"submit\" form=\"form-rhf-complex\">\n            Save Preferences\n          </Button>\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst addons = [\n  {\n    id: \"analytics\",\n    title: \"Analytics\",\n    description: \"Advanced analytics and reporting\",\n  },\n  {\n    id: \"backup\",\n    title: \"Backup\",\n    description: \"Automated daily backups\",\n  },\n  {\n    id: \"support\",\n    title: \"Priority Support\",\n    description: \"24/7 premium customer support\",\n  },\n] as const\n\nconst formSchema = z.object({\n  plan: z\n    .string({\n      required_error: \"Please select a subscription plan\",\n    })\n    .min(1, \"Please select a subscription plan\")\n    .refine((value) => value === \"basic\" || value === \"pro\", {\n      message: \"Invalid plan selection. Please choose Basic or Pro\",\n    }),\n  billingPeriod: z\n    .string({\n      required_error: \"Please select a billing period\",\n    })\n    .min(1, \"Please select a billing period\"),\n  addons: z\n    .array(z.string())\n    .min(1, \"Please select at least one add-on\")\n    .max(3, \"You can select up to 3 add-ons\")\n    .refine(\n      (value) => value.every((addon) => addons.some((a) => a.id === addon)),\n      {\n        message: \"You selected an invalid add-on\",\n      }\n    ),\n  emailNotifications: z.boolean(),\n})\n\nexport default function FormRhfComplex() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      plan: \"basic\",\n      billingPeriod: \"\",\n      addons: [],\n      emailNotifications: false,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>You&apos;re almost there!</CardTitle>\n        <CardDescription>\n          Choose your subscription plan and billing period.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-complex\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"plan\"\n              control={form.control}\n              render={({ field, fieldState }) => {\n                const isInvalid = fieldState.invalid\n                return (\n                  <FieldSet data-invalid={isInvalid}>\n                    <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n                    <FieldDescription>\n                      Choose your subscription plan.\n                    </FieldDescription>\n                    <RadioGroup\n                      name={field.name}\n                      value={field.value}\n                      onValueChange={field.onChange}\n                      aria-invalid={isInvalid}\n                    >\n                      <FieldLabel htmlFor=\"form-rhf-complex-basic\">\n                        <Field orientation=\"horizontal\">\n                          <FieldContent>\n                            <FieldTitle>Basic</FieldTitle>\n                            <FieldDescription>\n                              For individuals and small teams\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"basic\"\n                            id=\"form-rhf-complex-basic\"\n                          />\n                        </Field>\n                      </FieldLabel>\n                      <FieldLabel htmlFor=\"form-rhf-complex-pro\">\n                        <Field orientation=\"horizontal\">\n                          <FieldContent>\n                            <FieldTitle>Pro</FieldTitle>\n                            <FieldDescription>\n                              For businesses with higher demands\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"pro\"\n                            id=\"form-rhf-complex-pro\"\n                          />\n                        </Field>\n                      </FieldLabel>\n                    </RadioGroup>\n                    {isInvalid && <FieldError errors={[fieldState.error]} />}\n                  </FieldSet>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"billingPeriod\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-complex-billingPeriod\">\n                    Billing Period\n                  </FieldLabel>\n                  <Select\n                    name={field.name}\n                    value={field.value}\n                    onValueChange={field.onChange}\n                  >\n                    <SelectTrigger\n                      id=\"form-rhf-complex-billingPeriod\"\n                      aria-invalid={fieldState.invalid}\n                    >\n                      <SelectValue placeholder=\"Select\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"monthly\">Monthly</SelectItem>\n                      <SelectItem value=\"yearly\">Yearly</SelectItem>\n                    </SelectContent>\n                  </Select>\n                  <FieldDescription>\n                    Choose how often you want to be billed.\n                  </FieldDescription>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"addons\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <FieldSet>\n                  <FieldLegend>Add-ons</FieldLegend>\n                  <FieldDescription>\n                    Select additional features you&apos;d like to include.\n                  </FieldDescription>\n                  <FieldGroup data-slot=\"checkbox-group\">\n                    {addons.map((addon) => (\n                      <Field\n                        key={addon.id}\n                        orientation=\"horizontal\"\n                        data-invalid={fieldState.invalid}\n                      >\n                        <Checkbox\n                          id={`form-rhf-complex-${addon.id}`}\n                          name={field.name}\n                          aria-invalid={fieldState.invalid}\n                          checked={field.value.includes(addon.id)}\n                          onCheckedChange={(checked) => {\n                            const newValue = checked\n                              ? [...field.value, addon.id]\n                              : field.value.filter(\n                                  (value) => value !== addon.id\n                                )\n                            field.onChange(newValue)\n                            field.onBlur()\n                          }}\n                        />\n                        <FieldContent>\n                          <FieldLabel htmlFor={`form-rhf-complex-${addon.id}`}>\n                            {addon.title}\n                          </FieldLabel>\n                          <FieldDescription>\n                            {addon.description}\n                          </FieldDescription>\n                        </FieldContent>\n                      </Field>\n                    ))}\n                  </FieldGroup>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </FieldSet>\n              )}\n            />\n            <FieldSeparator />\n            <Controller\n              name=\"emailNotifications\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field\n                  orientation=\"horizontal\"\n                  data-invalid={fieldState.invalid}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-rhf-complex-emailNotifications\">\n                      Email Notifications\n                    </FieldLabel>\n                    <FieldDescription>\n                      Receive email updates about your subscription\n                    </FieldDescription>\n                  </FieldContent>\n                  <Switch\n                    id=\"form-rhf-complex-emailNotifications\"\n                    name={field.name}\n                    checked={field.value}\n                    onCheckedChange={field.onChange}\n                    aria-invalid={fieldState.invalid}\n                  />\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field>\n          <Button type=\"submit\" form=\"form-rhf-complex\">\n            Save Preferences\n          </Button>\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-rhf-demo.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-demo.json
index 4de268ef37..7ad7f43d29 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-demo.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst formSchema = z.object({\n  title: z\n    .string()\n    .min(5, \"Bug title must be at least 5 characters.\")\n    .max(32, \"Bug title must be at most 32 characters.\"),\n  description: z\n    .string()\n    .min(20, \"Description must be at least 20 characters.\")\n    .max(100, \"Description must be at most 100 characters.\"),\n})\n\nexport default function BugReportForm() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      title: \"\",\n      description: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Bug Report</CardTitle>\n        <CardDescription>\n          Help us improve by reporting bugs you encounter.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-demo\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"title\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-demo-title\">\n                    Bug Title\n                  </FieldLabel>\n                  <Input\n                    {...field}\n                    id=\"form-rhf-demo-title\"\n                    aria-invalid={fieldState.invalid}\n                    placeholder=\"Login button not working on mobile\"\n                    autoComplete=\"off\"\n                  />\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n            <Controller\n              name=\"description\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-demo-description\">\n                    Description\n                  </FieldLabel>\n                  <InputGroup>\n                    <InputGroupTextarea\n                      {...field}\n                      id=\"form-rhf-demo-description\"\n                      placeholder=\"I'm having an issue with the login button on mobile.\"\n                      rows={6}\n                      className=\"min-h-24 resize-none\"\n                      aria-invalid={fieldState.invalid}\n                    />\n                    <InputGroupAddon align=\"block-end\">\n                      <InputGroupText className=\"tabular-nums\">\n                        {field.value.length}/100 characters\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                  <FieldDescription>\n                    Include steps to reproduce, expected behavior, and what\n                    actually happened.\n                  </FieldDescription>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-demo\">\n            Submit\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst formSchema = z.object({\n  title: z\n    .string()\n    .min(5, \"Bug title must be at least 5 characters.\")\n    .max(32, \"Bug title must be at most 32 characters.\"),\n  description: z\n    .string()\n    .min(20, \"Description must be at least 20 characters.\")\n    .max(100, \"Description must be at most 100 characters.\"),\n})\n\nexport default function BugReportForm() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      title: \"\",\n      description: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Bug Report</CardTitle>\n        <CardDescription>\n          Help us improve by reporting bugs you encounter.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-demo\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"title\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-demo-title\">\n                    Bug Title\n                  </FieldLabel>\n                  <Input\n                    {...field}\n                    id=\"form-rhf-demo-title\"\n                    aria-invalid={fieldState.invalid}\n                    placeholder=\"Login button not working on mobile\"\n                    autoComplete=\"off\"\n                  />\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n            <Controller\n              name=\"description\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-demo-description\">\n                    Description\n                  </FieldLabel>\n                  <InputGroup>\n                    <InputGroupTextarea\n                      {...field}\n                      id=\"form-rhf-demo-description\"\n                      placeholder=\"I'm having an issue with the login button on mobile.\"\n                      rows={6}\n                      className=\"min-h-24 resize-none\"\n                      aria-invalid={fieldState.invalid}\n                    />\n                    <InputGroupAddon align=\"block-end\">\n                      <InputGroupText className=\"tabular-nums\">\n                        {field.value.length}/100 characters\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                  <FieldDescription>\n                    Include steps to reproduce, expected behavior, and what\n                    actually happened.\n                  </FieldDescription>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-demo\">\n            Submit\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-rhf-input.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-input.json
index 3ab1f35736..7d54788c58 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-input.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-input.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-input.tsx",
-      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nconst formSchema = z.object({\n  username: z\n    .string()\n    .min(3, \"Username must be at least 3 characters.\")\n    .max(10, \"Username must be at most 10 characters.\")\n    .regex(\n      /^[a-zA-Z0-9_]+$/,\n      \"Username can only contain letters, numbers, and underscores.\"\n    ),\n})\n\nexport default function FormRhfInput() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Profile Settings</CardTitle>\n        <CardDescription>\n          Update your profile information below.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-input\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"username\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-input-username\">\n                    Username\n                  </FieldLabel>\n                  <Input\n                    {...field}\n                    id=\"form-rhf-input-username\"\n                    aria-invalid={fieldState.invalid}\n                    placeholder=\"shadcn\"\n                    autoComplete=\"username\"\n                  />\n                  <FieldDescription>\n                    This is your public display name. Must be between 3 and 10\n                    characters. Must only contain letters, numbers, and\n                    underscores.\n                  </FieldDescription>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-input\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nconst formSchema = z.object({\n  username: z\n    .string()\n    .min(3, \"Username must be at least 3 characters.\")\n    .max(10, \"Username must be at most 10 characters.\")\n    .regex(\n      /^[a-zA-Z0-9_]+$/,\n      \"Username can only contain letters, numbers, and underscores.\"\n    ),\n})\n\nexport default function FormRhfInput() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      username: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Profile Settings</CardTitle>\n        <CardDescription>\n          Update your profile information below.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-input\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"username\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-input-username\">\n                    Username\n                  </FieldLabel>\n                  <Input\n                    {...field}\n                    id=\"form-rhf-input-username\"\n                    aria-invalid={fieldState.invalid}\n                    placeholder=\"shadcn\"\n                    autoComplete=\"username\"\n                  />\n                  <FieldDescription>\n                    This is your public display name. Must be between 3 and 10\n                    characters. Must only contain letters, numbers, and\n                    underscores.\n                  </FieldDescription>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-input\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-rhf-password.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-password.json
index 67dfced4ab..ea97d71978 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-password.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-password.json
@@ -16,7 +16,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-password.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CheckIcon } from \"lucide-react\"\nimport { Controller, useForm, useWatch } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport { Progress } from \"@/registry/new-york-v4/ui/progress\"\n\nconst passwordRequirements = [\n  {\n    id: \"length\",\n    label: \"At least 8 characters\",\n    test: (val: string) => val.length >= 8,\n  },\n  {\n    id: \"lowercase\",\n    label: \"One lowercase letter\",\n    test: (val: string) => /[a-z]/.test(val),\n  },\n  {\n    id: \"uppercase\",\n    label: \"One uppercase letter\",\n    test: (val: string) => /[A-Z]/.test(val),\n  },\n  { id: \"number\", label: \"One number\", test: (val: string) => /\\d/.test(val) },\n  {\n    id: \"special\",\n    label: \"One special character\",\n    test: (val: string) => /[!@#$%^&*(),.?\":{}|<>]/.test(val),\n  },\n]\n\nconst formSchema = z.object({\n  password: z\n    .string()\n    .min(8, \"Password must be at least 8 characters\")\n    .refine(\n      (val) => /[a-z]/.test(val),\n      \"Password must contain at least one lowercase letter\"\n    )\n    .refine(\n      (val) => /[A-Z]/.test(val),\n      \"Password must contain at least one uppercase letter\"\n    )\n    .refine(\n      (val) => /\\d/.test(val),\n      \"Password must contain at least one number\"\n    )\n    .refine(\n      (val) => /[!@#$%^&*(),.?\":{}|<>]/.test(val),\n      \"Password must contain at least one special character\"\n    ),\n})\n\nexport default function FormRhfPassword() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      password: \"\",\n    },\n  })\n\n  const password = useWatch({\n    control: form.control,\n    name: \"password\",\n  })\n\n  // Calculate password strength.\n  const metRequirements = passwordRequirements.filter((req) =>\n    req.test(password || \"\")\n  )\n  const strengthPercentage =\n    (metRequirements.length / passwordRequirements.length) * 100\n\n  // Determine strength level and color.\n  const getStrengthColor = () => {\n    if (strengthPercentage === 0) return \"bg-neutral-200\"\n    if (strengthPercentage <= 40) return \"bg-red-500\"\n    if (strengthPercentage <= 80) return \"bg-yellow-500\"\n    return \"bg-green-500\"\n  }\n\n  const allRequirementsMet =\n    metRequirements.length === passwordRequirements.length\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>Create Password</CardTitle>\n        <CardDescription>\n          Choose a strong password to secure your account.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-password\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"password\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-password-input\">\n                    Password\n                  </FieldLabel>\n                  <InputGroup>\n                    <InputGroupInput\n                      {...field}\n                      id=\"form-rhf-password-input\"\n                      type=\"password\"\n                      placeholder=\"Enter your password\"\n                      aria-invalid={fieldState.invalid}\n                      autoComplete=\"new-password\"\n                    />\n                    <InputGroupAddon align=\"inline-end\">\n                      <CheckIcon\n                        className={\n                          allRequirementsMet\n                            ? \"text-green-500\"\n                            : \"text-muted-foreground\"\n                        }\n                      />\n                    </InputGroupAddon>\n                  </InputGroup>\n\n                  {/* Password strength meter. */}\n                  <div className=\"space-y-2\">\n                    <Progress\n                      value={strengthPercentage}\n                      className={getStrengthColor()}\n                    />\n\n                    {/* Requirements list. */}\n                    <div className=\"space-y-1.5\">\n                      {passwordRequirements.map((requirement) => {\n                        const isMet = requirement.test(password || \"\")\n                        return (\n                          <div\n                            key={requirement.id}\n                            className=\"flex items-center gap-2 text-sm\"\n                          >\n                            <CheckIcon\n                              className={\n                                isMet\n                                  ? \"size-4 text-green-500\"\n                                  : \"text-muted-foreground size-4\"\n                              }\n                            />\n                            <span\n                              className={\n                                isMet\n                                  ? \"text-foreground\"\n                                  : \"text-muted-foreground\"\n                              }\n                            >\n                              {requirement.label}\n                            </span>\n                          </div>\n                        )\n                      })}\n                    </div>\n                  </div>\n\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field>\n          <Button type=\"submit\" form=\"form-rhf-password\">\n            Create Password\n          </Button>\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CheckIcon } from \"lucide-react\"\nimport { Controller, useForm, useWatch } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport { Progress } from \"@/registry/new-york-v4/ui/progress\"\n\nconst passwordRequirements = [\n  {\n    id: \"length\",\n    label: \"At least 8 characters\",\n    test: (val: string) => val.length >= 8,\n  },\n  {\n    id: \"lowercase\",\n    label: \"One lowercase letter\",\n    test: (val: string) => /[a-z]/.test(val),\n  },\n  {\n    id: \"uppercase\",\n    label: \"One uppercase letter\",\n    test: (val: string) => /[A-Z]/.test(val),\n  },\n  { id: \"number\", label: \"One number\", test: (val: string) => /\\d/.test(val) },\n  {\n    id: \"special\",\n    label: \"One special character\",\n    test: (val: string) => /[!@#$%^&*(),.?\":{}|<>]/.test(val),\n  },\n]\n\nconst formSchema = z.object({\n  password: z\n    .string()\n    .min(8, \"Password must be at least 8 characters\")\n    .refine(\n      (val) => /[a-z]/.test(val),\n      \"Password must contain at least one lowercase letter\"\n    )\n    .refine(\n      (val) => /[A-Z]/.test(val),\n      \"Password must contain at least one uppercase letter\"\n    )\n    .refine(\n      (val) => /\\d/.test(val),\n      \"Password must contain at least one number\"\n    )\n    .refine(\n      (val) => /[!@#$%^&*(),.?\":{}|<>]/.test(val),\n      \"Password must contain at least one special character\"\n    ),\n})\n\nexport default function FormRhfPassword() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      password: \"\",\n    },\n  })\n\n  const password = useWatch({\n    control: form.control,\n    name: \"password\",\n  })\n\n  // Calculate password strength.\n  const metRequirements = passwordRequirements.filter((req) =>\n    req.test(password || \"\")\n  )\n  const strengthPercentage =\n    (metRequirements.length / passwordRequirements.length) * 100\n\n  // Determine strength level and color.\n  const getStrengthColor = () => {\n    if (strengthPercentage === 0) return \"bg-neutral-200\"\n    if (strengthPercentage <= 40) return \"bg-red-500\"\n    if (strengthPercentage <= 80) return \"bg-yellow-500\"\n    return \"bg-green-500\"\n  }\n\n  const allRequirementsMet =\n    metRequirements.length === passwordRequirements.length\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>Create Password</CardTitle>\n        <CardDescription>\n          Choose a strong password to secure your account.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-password\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"password\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-password-input\">\n                    Password\n                  </FieldLabel>\n                  <InputGroup>\n                    <InputGroupInput\n                      {...field}\n                      id=\"form-rhf-password-input\"\n                      type=\"password\"\n                      placeholder=\"Enter your password\"\n                      aria-invalid={fieldState.invalid}\n                      autoComplete=\"new-password\"\n                    />\n                    <InputGroupAddon align=\"inline-end\">\n                      <CheckIcon\n                        className={\n                          allRequirementsMet\n                            ? \"text-green-500\"\n                            : \"text-muted-foreground\"\n                        }\n                      />\n                    </InputGroupAddon>\n                  </InputGroup>\n\n                  {/* Password strength meter. */}\n                  <div className=\"space-y-2\">\n                    <Progress\n                      value={strengthPercentage}\n                      className={getStrengthColor()}\n                    />\n\n                    {/* Requirements list. */}\n                    <div className=\"space-y-1.5\">\n                      {passwordRequirements.map((requirement) => {\n                        const isMet = requirement.test(password || \"\")\n                        return (\n                          <div\n                            key={requirement.id}\n                            className=\"flex items-center gap-2 text-sm\"\n                          >\n                            <CheckIcon\n                              className={\n                                isMet\n                                  ? \"size-4 text-green-500\"\n                                  : \"size-4 text-muted-foreground\"\n                              }\n                            />\n                            <span\n                              className={\n                                isMet\n                                  ? \"text-foreground\"\n                                  : \"text-muted-foreground\"\n                              }\n                            >\n                              {requirement.label}\n                            </span>\n                          </div>\n                        )\n                      })}\n                    </div>\n                  </div>\n\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field>\n          <Button type=\"submit\" form=\"form-rhf-password\">\n            Create Password\n          </Button>\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-rhf-radiogroup.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-radiogroup.json
index 73e1acd6c7..df5193e86c 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-radiogroup.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-radiogroup.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-radiogroup.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\n\nconst plans = [\n  {\n    id: \"starter\",\n    title: \"Starter (100K tokens/month)\",\n    description: \"For everyday use with basic features.\",\n  },\n  {\n    id: \"pro\",\n    title: \"Pro (1M tokens/month)\",\n    description: \"For advanced AI usage with more features.\",\n  },\n  {\n    id: \"enterprise\",\n    title: \"Enterprise (Unlimited tokens)\",\n    description: \"For large teams and heavy usage.\",\n  },\n] as const\n\nconst formSchema = z.object({\n  plan: z.string().min(1, \"You must select a subscription plan to continue.\"),\n})\n\nexport default function FormRhfRadioGroup() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      plan: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Subscription Plan</CardTitle>\n        <CardDescription>\n          See pricing and features for each plan.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-radiogroup\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"plan\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <FieldSet data-invalid={fieldState.invalid}>\n                  <FieldLegend>Plan</FieldLegend>\n                  <FieldDescription>\n                    You can upgrade or downgrade your plan at any time.\n                  </FieldDescription>\n                  <RadioGroup\n                    name={field.name}\n                    value={field.value}\n                    onValueChange={field.onChange}\n                    aria-invalid={fieldState.invalid}\n                  >\n                    {plans.map((plan) => (\n                      <FieldLabel\n                        key={plan.id}\n                        htmlFor={`form-rhf-radiogroup-${plan.id}`}\n                      >\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={fieldState.invalid}\n                        >\n                          <FieldContent>\n                            <FieldTitle>{plan.title}</FieldTitle>\n                            <FieldDescription>\n                              {plan.description}\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value={plan.id}\n                            id={`form-rhf-radiogroup-${plan.id}`}\n                            aria-invalid={fieldState.invalid}\n                          />\n                        </Field>\n                      </FieldLabel>\n                    ))}\n                  </RadioGroup>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </FieldSet>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-radiogroup\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\n\nconst plans = [\n  {\n    id: \"starter\",\n    title: \"Starter (100K tokens/month)\",\n    description: \"For everyday use with basic features.\",\n  },\n  {\n    id: \"pro\",\n    title: \"Pro (1M tokens/month)\",\n    description: \"For advanced AI usage with more features.\",\n  },\n  {\n    id: \"enterprise\",\n    title: \"Enterprise (Unlimited tokens)\",\n    description: \"For large teams and heavy usage.\",\n  },\n] as const\n\nconst formSchema = z.object({\n  plan: z.string().min(1, \"You must select a subscription plan to continue.\"),\n})\n\nexport default function FormRhfRadioGroup() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      plan: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Subscription Plan</CardTitle>\n        <CardDescription>\n          See pricing and features for each plan.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-radiogroup\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"plan\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <FieldSet data-invalid={fieldState.invalid}>\n                  <FieldLegend>Plan</FieldLegend>\n                  <FieldDescription>\n                    You can upgrade or downgrade your plan at any time.\n                  </FieldDescription>\n                  <RadioGroup\n                    name={field.name}\n                    value={field.value}\n                    onValueChange={field.onChange}\n                    aria-invalid={fieldState.invalid}\n                  >\n                    {plans.map((plan) => (\n                      <FieldLabel\n                        key={plan.id}\n                        htmlFor={`form-rhf-radiogroup-${plan.id}`}\n                      >\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={fieldState.invalid}\n                        >\n                          <FieldContent>\n                            <FieldTitle>{plan.title}</FieldTitle>\n                            <FieldDescription>\n                              {plan.description}\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value={plan.id}\n                            id={`form-rhf-radiogroup-${plan.id}`}\n                            aria-invalid={fieldState.invalid}\n                          />\n                        </Field>\n                      </FieldLabel>\n                    ))}\n                  </RadioGroup>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </FieldSet>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-radiogroup\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-rhf-select.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-select.json
index 3dd779ea3f..d11c3644a7 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-select.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-select.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n] as const\n\nconst formSchema = z.object({\n  language: z\n    .string()\n    .min(1, \"Please select your spoken language.\")\n    .refine((val) => val !== \"auto\", {\n      message:\n        \"Auto-detection is not allowed. Please select a specific language.\",\n    }),\n})\n\nexport default function FormRhfSelect() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      language: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-lg\">\n      <CardHeader>\n        <CardTitle>Language Preferences</CardTitle>\n        <CardDescription>\n          Select your preferred spoken language.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-select\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"language\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field\n                  orientation=\"responsive\"\n                  data-invalid={fieldState.invalid}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-rhf-select-language\">\n                      Spoken Language\n                    </FieldLabel>\n                    <FieldDescription>\n                      For best results, select the language you speak.\n                    </FieldDescription>\n                    {fieldState.invalid && (\n                      <FieldError errors={[fieldState.error]} />\n                    )}\n                  </FieldContent>\n                  <Select\n                    name={field.name}\n                    value={field.value}\n                    onValueChange={field.onChange}\n                  >\n                    <SelectTrigger\n                      id=\"form-rhf-select-language\"\n                      aria-invalid={fieldState.invalid}\n                      className=\"min-w-[120px]\"\n                    >\n                      <SelectValue placeholder=\"Select\" />\n                    </SelectTrigger>\n                    <SelectContent position=\"item-aligned\">\n                      <SelectItem value=\"auto\">Auto</SelectItem>\n                      <SelectSeparator />\n                      {spokenLanguages.map((language) => (\n                        <SelectItem key={language.value} value={language.value}>\n                          {language.label}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-select\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n] as const\n\nconst formSchema = z.object({\n  language: z\n    .string()\n    .min(1, \"Please select your spoken language.\")\n    .refine((val) => val !== \"auto\", {\n      message:\n        \"Auto-detection is not allowed. Please select a specific language.\",\n    }),\n})\n\nexport default function FormRhfSelect() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      language: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-lg\">\n      <CardHeader>\n        <CardTitle>Language Preferences</CardTitle>\n        <CardDescription>\n          Select your preferred spoken language.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-select\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"language\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field\n                  orientation=\"responsive\"\n                  data-invalid={fieldState.invalid}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-rhf-select-language\">\n                      Spoken Language\n                    </FieldLabel>\n                    <FieldDescription>\n                      For best results, select the language you speak.\n                    </FieldDescription>\n                    {fieldState.invalid && (\n                      <FieldError errors={[fieldState.error]} />\n                    )}\n                  </FieldContent>\n                  <Select\n                    name={field.name}\n                    value={field.value}\n                    onValueChange={field.onChange}\n                  >\n                    <SelectTrigger\n                      id=\"form-rhf-select-language\"\n                      aria-invalid={fieldState.invalid}\n                      className=\"min-w-[120px]\"\n                    >\n                      <SelectValue placeholder=\"Select\" />\n                    </SelectTrigger>\n                    <SelectContent position=\"item-aligned\">\n                      <SelectItem value=\"auto\">Auto</SelectItem>\n                      <SelectSeparator />\n                      {spokenLanguages.map((language) => (\n                        <SelectItem key={language.value} value={language.value}>\n                          {language.label}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-select\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-rhf-switch.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-switch.json
index a4769e2402..d6193ce838 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-switch.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-switch.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-switch.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst formSchema = z.object({\n  twoFactor: z.boolean().refine((val) => val === true, {\n    message: \"It is highly recommended to enable two-factor authentication.\",\n  }),\n})\n\nexport default function FormRhfSwitch() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      twoFactor: false,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Security Settings</CardTitle>\n        <CardDescription>\n          Manage your account security preferences.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-switch\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"twoFactor\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field\n                  orientation=\"horizontal\"\n                  data-invalid={fieldState.invalid}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-rhf-switch-twoFactor\">\n                      Multi-factor authentication\n                    </FieldLabel>\n                    <FieldDescription>\n                      Enable multi-factor authentication to secure your account.\n                    </FieldDescription>\n                    {fieldState.invalid && (\n                      <FieldError errors={[fieldState.error]} />\n                    )}\n                  </FieldContent>\n                  <Switch\n                    id=\"form-rhf-switch-twoFactor\"\n                    name={field.name}\n                    checked={field.value}\n                    onCheckedChange={field.onChange}\n                    aria-invalid={fieldState.invalid}\n                  />\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-switch\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst formSchema = z.object({\n  twoFactor: z.boolean().refine((val) => val === true, {\n    message: \"It is highly recommended to enable two-factor authentication.\",\n  }),\n})\n\nexport default function FormRhfSwitch() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      twoFactor: false,\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Security Settings</CardTitle>\n        <CardDescription>\n          Manage your account security preferences.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-switch\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"twoFactor\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field\n                  orientation=\"horizontal\"\n                  data-invalid={fieldState.invalid}\n                >\n                  <FieldContent>\n                    <FieldLabel htmlFor=\"form-rhf-switch-twoFactor\">\n                      Multi-factor authentication\n                    </FieldLabel>\n                    <FieldDescription>\n                      Enable multi-factor authentication to secure your account.\n                    </FieldDescription>\n                    {fieldState.invalid && (\n                      <FieldError errors={[fieldState.error]} />\n                    )}\n                  </FieldContent>\n                  <Switch\n                    id=\"form-rhf-switch-twoFactor\"\n                    name={field.name}\n                    checked={field.value}\n                    onCheckedChange={field.onChange}\n                    aria-invalid={fieldState.invalid}\n                  />\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-switch\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-rhf-textarea.json b/apps/v4/public/r/styles/new-york-v4/form-rhf-textarea.json
index 21f14a42d7..c71c149106 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-rhf-textarea.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-rhf-textarea.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-rhf-textarea.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nconst formSchema = z.object({\n  about: z\n    .string()\n    .min(10, \"Please provide at least 10 characters.\")\n    .max(200, \"Please keep it under 200 characters.\"),\n})\n\nexport default function FormRhfTextarea() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      about: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Personalization</CardTitle>\n        <CardDescription>\n          Customize your experience by telling us more about yourself.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-textarea\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"about\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-textarea-about\">\n                    More about you\n                  </FieldLabel>\n                  <Textarea\n                    {...field}\n                    id=\"form-rhf-textarea-about\"\n                    aria-invalid={fieldState.invalid}\n                    placeholder=\"I'm a software engineer...\"\n                    className=\"min-h-[120px]\"\n                  />\n                  <FieldDescription>\n                    Tell us more about yourself. This will be used to help us\n                    personalize your experience.\n                  </FieldDescription>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-textarea\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Controller, useForm } from \"react-hook-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nconst formSchema = z.object({\n  about: z\n    .string()\n    .min(10, \"Please provide at least 10 characters.\")\n    .max(200, \"Please keep it under 200 characters.\"),\n})\n\nexport default function FormRhfTextarea() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n    defaultValues: {\n      about: \"\",\n    },\n  })\n\n  function onSubmit(data: z.infer<typeof formSchema>) {\n    toast(\"You submitted the following values:\", {\n      description: (\n        <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n          <code>{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n      position: \"bottom-right\",\n      classNames: {\n        content: \"flex flex-col gap-2\",\n      },\n      style: {\n        \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n      } as React.CSSProperties,\n    })\n  }\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Personalization</CardTitle>\n        <CardDescription>\n          Customize your experience by telling us more about yourself.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form id=\"form-rhf-textarea\" onSubmit={form.handleSubmit(onSubmit)}>\n          <FieldGroup>\n            <Controller\n              name=\"about\"\n              control={form.control}\n              render={({ field, fieldState }) => (\n                <Field data-invalid={fieldState.invalid}>\n                  <FieldLabel htmlFor=\"form-rhf-textarea-about\">\n                    More about you\n                  </FieldLabel>\n                  <Textarea\n                    {...field}\n                    id=\"form-rhf-textarea-about\"\n                    aria-invalid={fieldState.invalid}\n                    placeholder=\"I'm a software engineer...\"\n                    className=\"min-h-[120px]\"\n                  />\n                  <FieldDescription>\n                    Tell us more about yourself. This will be used to help us\n                    personalize your experience.\n                  </FieldDescription>\n                  {fieldState.invalid && (\n                    <FieldError errors={[fieldState.error]} />\n                  )}\n                </Field>\n              )}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-rhf-textarea\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-tanstack-array.json b/apps/v4/public/r/styles/new-york-v4/form-tanstack-array.json
index 72839bb9e5..7bdfc99bc3 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-tanstack-array.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-tanstack-array.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-tanstack-array.tsx",
-      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport * as React from \"react\"\nimport { useForm } from \"@tanstack/react-form\"\nimport { XIcon } from \"lucide-react\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst formSchema = z.object({\n  emails: z\n    .array(\n      z.object({\n        address: z.string().email(\"Enter a valid email address.\"),\n      })\n    )\n    .min(1, \"Add at least one email address.\")\n    .max(5, \"You can add up to 5 email addresses.\"),\n})\n\nexport default function FormTanstackArray() {\n  const form = useForm({\n    defaultValues: {\n      emails: [{ address: \"\" }],\n    },\n    validators: {\n      onBlur: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>Contact Emails</CardTitle>\n        <CardDescription>Manage your contact email addresses.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-array\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <form.Field name=\"emails\" mode=\"array\">\n            {(field) => {\n              const isInvalid =\n                field.state.meta.isTouched && !field.state.meta.isValid\n              return (\n                <FieldSet className=\"gap-4\">\n                  <FieldLegend variant=\"label\">Email Addresses</FieldLegend>\n                  <FieldDescription>\n                    Add up to 5 email addresses where we can contact you.\n                  </FieldDescription>\n                  <FieldGroup className=\"gap-4\">\n                    {field.state.value.map((_, index) => (\n                      <form.Field\n                        key={index}\n                        name={`emails[${index}].address`}\n                        children={(subField) => {\n                          const isSubFieldInvalid =\n                            subField.state.meta.isTouched &&\n                            !subField.state.meta.isValid\n                          return (\n                            <Field\n                              orientation=\"horizontal\"\n                              data-invalid={isSubFieldInvalid}\n                            >\n                              <FieldContent>\n                                <InputGroup>\n                                  <InputGroupInput\n                                    id={`form-tanstack-array-email-${index}`}\n                                    name={subField.name}\n                                    value={subField.state.value}\n                                    onBlur={subField.handleBlur}\n                                    onChange={(e) =>\n                                      subField.handleChange(e.target.value)\n                                    }\n                                    aria-invalid={isSubFieldInvalid}\n                                    placeholder=\"name@example.com\"\n                                    type=\"email\"\n                                    autoComplete=\"email\"\n                                  />\n                                  {field.state.value.length > 1 && (\n                                    <InputGroupAddon align=\"inline-end\">\n                                      <InputGroupButton\n                                        type=\"button\"\n                                        variant=\"ghost\"\n                                        size=\"icon-xs\"\n                                        onClick={() => field.removeValue(index)}\n                                        aria-label={`Remove email ${index + 1}`}\n                                      >\n                                        <XIcon />\n                                      </InputGroupButton>\n                                    </InputGroupAddon>\n                                  )}\n                                </InputGroup>\n                                {isSubFieldInvalid && (\n                                  <FieldError\n                                    errors={subField.state.meta.errors}\n                                  />\n                                )}\n                              </FieldContent>\n                            </Field>\n                          )\n                        }}\n                      />\n                    ))}\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      size=\"sm\"\n                      onClick={() => field.pushValue({ address: \"\" })}\n                      disabled={field.state.value.length >= 5}\n                    >\n                      Add Email Address\n                    </Button>\n                  </FieldGroup>\n                  {isInvalid && <FieldError errors={field.state.meta.errors} />}\n                </FieldSet>\n              )\n            }}\n          </form.Field>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-array\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport * as React from \"react\"\nimport { useForm } from \"@tanstack/react-form\"\nimport { XIcon } from \"lucide-react\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst formSchema = z.object({\n  emails: z\n    .array(\n      z.object({\n        address: z.string().email(\"Enter a valid email address.\"),\n      })\n    )\n    .min(1, \"Add at least one email address.\")\n    .max(5, \"You can add up to 5 email addresses.\"),\n})\n\nexport default function FormTanstackArray() {\n  const form = useForm({\n    defaultValues: {\n      emails: [{ address: \"\" }],\n    },\n    validators: {\n      onBlur: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader className=\"border-b\">\n        <CardTitle>Contact Emails</CardTitle>\n        <CardDescription>Manage your contact email addresses.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-array\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <form.Field name=\"emails\" mode=\"array\">\n            {(field) => {\n              const isInvalid =\n                field.state.meta.isTouched && !field.state.meta.isValid\n              return (\n                <FieldSet className=\"gap-4\">\n                  <FieldLegend variant=\"label\">Email Addresses</FieldLegend>\n                  <FieldDescription>\n                    Add up to 5 email addresses where we can contact you.\n                  </FieldDescription>\n                  <FieldGroup className=\"gap-4\">\n                    {field.state.value.map((_, index) => (\n                      <form.Field\n                        key={index}\n                        name={`emails[${index}].address`}\n                        children={(subField) => {\n                          const isSubFieldInvalid =\n                            subField.state.meta.isTouched &&\n                            !subField.state.meta.isValid\n                          return (\n                            <Field\n                              orientation=\"horizontal\"\n                              data-invalid={isSubFieldInvalid}\n                            >\n                              <FieldContent>\n                                <InputGroup>\n                                  <InputGroupInput\n                                    id={`form-tanstack-array-email-${index}`}\n                                    name={subField.name}\n                                    value={subField.state.value}\n                                    onBlur={subField.handleBlur}\n                                    onChange={(e) =>\n                                      subField.handleChange(e.target.value)\n                                    }\n                                    aria-invalid={isSubFieldInvalid}\n                                    placeholder=\"name@example.com\"\n                                    type=\"email\"\n                                    autoComplete=\"email\"\n                                  />\n                                  {field.state.value.length > 1 && (\n                                    <InputGroupAddon align=\"inline-end\">\n                                      <InputGroupButton\n                                        type=\"button\"\n                                        variant=\"ghost\"\n                                        size=\"icon-xs\"\n                                        onClick={() => field.removeValue(index)}\n                                        aria-label={`Remove email ${index + 1}`}\n                                      >\n                                        <XIcon />\n                                      </InputGroupButton>\n                                    </InputGroupAddon>\n                                  )}\n                                </InputGroup>\n                                {isSubFieldInvalid && (\n                                  <FieldError\n                                    errors={subField.state.meta.errors}\n                                  />\n                                )}\n                              </FieldContent>\n                            </Field>\n                          )\n                        }}\n                      />\n                    ))}\n                    <Button\n                      type=\"button\"\n                      variant=\"outline\"\n                      size=\"sm\"\n                      onClick={() => field.pushValue({ address: \"\" })}\n                      disabled={field.state.value.length >= 5}\n                    >\n                      Add Email Address\n                    </Button>\n                  </FieldGroup>\n                  {isInvalid && <FieldError errors={field.state.meta.errors} />}\n                </FieldSet>\n              )\n            }}\n          </form.Field>\n        </form>\n      </CardContent>\n      <CardFooter className=\"border-t\">\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-array\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-tanstack-checkbox.json b/apps/v4/public/r/styles/new-york-v4/form-tanstack-checkbox.json
index c8958babc3..9710dd8cd0 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-tanstack-checkbox.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-tanstack-checkbox.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-tanstack-checkbox.tsx",
-      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\n\nconst tasks = [\n  {\n    id: \"push\",\n    label: \"Push notifications\",\n  },\n  {\n    id: \"email\",\n    label: \"Email notifications\",\n  },\n] as const\n\nconst formSchema = z.object({\n  responses: z.boolean(),\n  tasks: z\n    .array(z.string())\n    .min(1, \"Please select at least one notification type.\")\n    .refine(\n      (value) => value.every((task) => tasks.some((t) => t.id === task)),\n      {\n        message: \"Invalid notification type selected.\",\n      }\n    ),\n})\n\nexport default function FormTanstackCheckbox() {\n  const form = useForm({\n    defaultValues: {\n      responses: true,\n      tasks: [] as string[],\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>Manage your notification preferences.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-checkbox\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"responses\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <div>\n                    <FieldSet>\n                      <FieldLegend variant=\"label\">Responses</FieldLegend>\n                      <FieldDescription>\n                        Get notified for requests that take time, like research\n                        or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <Checkbox\n                            id=\"form-tanstack-checkbox-responses\"\n                            name={field.name}\n                            checked={field.state.value}\n                            onCheckedChange={(checked) =>\n                              field.handleChange(checked === true)\n                            }\n                            disabled\n                          />\n                          <FieldLabel\n                            htmlFor=\"form-tanstack-checkbox-responses\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </div>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"tasks\"\n              mode=\"array\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldGroup>\n                    <FieldSet data-invalid={isInvalid}>\n                      <FieldLegend variant=\"label\">Tasks</FieldLegend>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        {tasks.map((task) => (\n                          <Field\n                            key={task.id}\n                            orientation=\"horizontal\"\n                            data-invalid={isInvalid}\n                          >\n                            <Checkbox\n                              id={`form-tanstack-checkbox-${task.id}`}\n                              name={field.name}\n                              aria-invalid={isInvalid}\n                              checked={field.state.value.includes(task.id)}\n                              onCheckedChange={(checked) => {\n                                if (checked) {\n                                  field.pushValue(task.id)\n                                } else {\n                                  const index = field.state.value.indexOf(\n                                    task.id\n                                  )\n                                  if (index > -1) {\n                                    field.removeValue(index)\n                                  }\n                                }\n                              }}\n                            />\n                            <FieldLabel\n                              htmlFor={`form-tanstack-checkbox-${task.id}`}\n                              className=\"font-normal\"\n                            >\n                              {task.label}\n                            </FieldLabel>\n                          </Field>\n                        ))}\n                      </FieldGroup>\n                    </FieldSet>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldGroup>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-checkbox\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n} from \"@/registry/new-york-v4/ui/field\"\n\nconst tasks = [\n  {\n    id: \"push\",\n    label: \"Push notifications\",\n  },\n  {\n    id: \"email\",\n    label: \"Email notifications\",\n  },\n] as const\n\nconst formSchema = z.object({\n  responses: z.boolean(),\n  tasks: z\n    .array(z.string())\n    .min(1, \"Please select at least one notification type.\")\n    .refine(\n      (value) => value.every((task) => tasks.some((t) => t.id === task)),\n      {\n        message: \"Invalid notification type selected.\",\n      }\n    ),\n})\n\nexport default function FormTanstackCheckbox() {\n  const form = useForm({\n    defaultValues: {\n      responses: true,\n      tasks: [] as string[],\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>Manage your notification preferences.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-checkbox\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"responses\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <div>\n                    <FieldSet>\n                      <FieldLegend variant=\"label\">Responses</FieldLegend>\n                      <FieldDescription>\n                        Get notified for requests that take time, like research\n                        or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <Checkbox\n                            id=\"form-tanstack-checkbox-responses\"\n                            name={field.name}\n                            checked={field.state.value}\n                            onCheckedChange={(checked) =>\n                              field.handleChange(checked === true)\n                            }\n                            disabled\n                          />\n                          <FieldLabel\n                            htmlFor=\"form-tanstack-checkbox-responses\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </div>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"tasks\"\n              mode=\"array\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldGroup>\n                    <FieldSet data-invalid={isInvalid}>\n                      <FieldLegend variant=\"label\">Tasks</FieldLegend>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        {tasks.map((task) => (\n                          <Field\n                            key={task.id}\n                            orientation=\"horizontal\"\n                            data-invalid={isInvalid}\n                          >\n                            <Checkbox\n                              id={`form-tanstack-checkbox-${task.id}`}\n                              name={field.name}\n                              aria-invalid={isInvalid}\n                              checked={field.state.value.includes(task.id)}\n                              onCheckedChange={(checked) => {\n                                if (checked) {\n                                  field.pushValue(task.id)\n                                } else {\n                                  const index = field.state.value.indexOf(\n                                    task.id\n                                  )\n                                  if (index > -1) {\n                                    field.removeValue(index)\n                                  }\n                                }\n                              }}\n                            />\n                            <FieldLabel\n                              htmlFor={`form-tanstack-checkbox-${task.id}`}\n                              className=\"font-normal\"\n                            >\n                              {task.label}\n                            </FieldLabel>\n                          </Field>\n                        ))}\n                      </FieldGroup>\n                    </FieldSet>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldGroup>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-checkbox\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-tanstack-complex.json b/apps/v4/public/r/styles/new-york-v4/form-tanstack-complex.json
index e697472611..04f4afed79 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-tanstack-complex.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-tanstack-complex.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-tanstack-complex.tsx",
-      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport * as React from \"react\"\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst addons = [\n  {\n    id: \"analytics\",\n    title: \"Analytics\",\n    description: \"Advanced analytics and reporting\",\n  },\n  {\n    id: \"backup\",\n    title: \"Backup\",\n    description: \"Automated daily backups\",\n  },\n  {\n    id: \"support\",\n    title: \"Priority Support\",\n    description: \"24/7 premium customer support\",\n  },\n] as const\n\nconst formSchema = z.object({\n  plan: z\n    .string({\n      required_error: \"Please select a subscription plan\",\n    })\n    .min(1, \"Please select a subscription plan\")\n    .refine((value) => value === \"basic\" || value === \"pro\", {\n      message: \"Invalid plan selection. Please choose Basic or Pro\",\n    }),\n  billingPeriod: z\n    .string({\n      required_error: \"Please select a billing period\",\n    })\n    .min(1, \"Please select a billing period\"),\n  addons: z\n    .array(z.string())\n    .min(1, \"Please select at least one add-on\")\n    .max(3, \"You can select up to 3 add-ons\")\n    .refine(\n      (value) => value.every((addon) => addons.some((a) => a.id === addon)),\n      {\n        message: \"You selected an invalid add-on\",\n      }\n    ),\n  emailNotifications: z.boolean(),\n})\n\nexport default function FormTanstackComplex() {\n  const form = useForm({\n    defaultValues: {\n      plan: \"basic\",\n      billingPeriod: \"monthly\",\n      addons: [] as string[],\n      emailNotifications: false,\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardContent>\n        <form\n          id=\"subscription-form\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"plan\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldSet>\n                    <FieldLegend>Subscription Plan</FieldLegend>\n                    <FieldDescription>\n                      Choose your subscription plan.\n                    </FieldDescription>\n                    <RadioGroup\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                    >\n                      <FieldLabel htmlFor=\"basic\">\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <FieldContent>\n                            <FieldTitle>Basic</FieldTitle>\n                            <FieldDescription>\n                              For individuals and small teams\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"basic\"\n                            id=\"basic\"\n                            aria-invalid={isInvalid}\n                          />\n                        </Field>\n                      </FieldLabel>\n                      <FieldLabel htmlFor=\"pro\">\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <FieldContent>\n                            <FieldTitle>Pro</FieldTitle>\n                            <FieldDescription>\n                              For businesses with higher demands\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"pro\"\n                            id=\"pro\"\n                            aria-invalid={isInvalid}\n                          />\n                        </Field>\n                      </FieldLabel>\n                    </RadioGroup>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldSet>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"billingPeriod\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor={field.name}>Billing Period</FieldLabel>\n                    <Select\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                      aria-invalid={isInvalid}\n                    >\n                      <SelectTrigger id={field.name}>\n                        <SelectValue placeholder=\"Select\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"monthly\">Monthly</SelectItem>\n                        <SelectItem value=\"yearly\">Yearly</SelectItem>\n                      </SelectContent>\n                    </Select>\n                    <FieldDescription>\n                      Choose how often you want to be billed.\n                    </FieldDescription>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"addons\"\n              mode=\"array\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldSet>\n                    <FieldLegend>Add-ons</FieldLegend>\n                    <FieldDescription>\n                      Select additional features you&apos;d like to include.\n                    </FieldDescription>\n                    <FieldGroup data-slot=\"checkbox-group\">\n                      {addons.map((addon) => (\n                        <Field\n                          key={addon.id}\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <Checkbox\n                            id={addon.id}\n                            name={field.name}\n                            aria-invalid={isInvalid}\n                            checked={field.state.value.includes(addon.id)}\n                            onCheckedChange={(checked) => {\n                              if (checked) {\n                                field.pushValue(addon.id)\n                              } else {\n                                const index = field.state.value.indexOf(\n                                  addon.id\n                                )\n                                if (index > -1) {\n                                  field.removeValue(index)\n                                }\n                              }\n                            }}\n                          />\n                          <FieldContent>\n                            <FieldLabel htmlFor={addon.id}>\n                              {addon.title}\n                            </FieldLabel>\n                            <FieldDescription>\n                              {addon.description}\n                            </FieldDescription>\n                          </FieldContent>\n                        </Field>\n                      ))}\n                    </FieldGroup>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldSet>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"emailNotifications\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field orientation=\"horizontal\" data-invalid={isInvalid}>\n                    <FieldContent>\n                      <FieldLabel htmlFor={field.name}>\n                        Email Notifications\n                      </FieldLabel>\n                      <FieldDescription>\n                        Receive email updates about your subscription\n                      </FieldDescription>\n                    </FieldContent>\n                    <Switch\n                      id={field.name}\n                      name={field.name}\n                      checked={field.state.value}\n                      onCheckedChange={field.handleChange}\n                      aria-invalid={isInvalid}\n                    />\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\" className=\"justify-end\">\n          <Button type=\"submit\" form=\"subscription-form\">\n            Save Preferences\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport * as React from \"react\"\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/new-york-v4/ui/card\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst addons = [\n  {\n    id: \"analytics\",\n    title: \"Analytics\",\n    description: \"Advanced analytics and reporting\",\n  },\n  {\n    id: \"backup\",\n    title: \"Backup\",\n    description: \"Automated daily backups\",\n  },\n  {\n    id: \"support\",\n    title: \"Priority Support\",\n    description: \"24/7 premium customer support\",\n  },\n] as const\n\nconst formSchema = z.object({\n  plan: z\n    .string({\n      required_error: \"Please select a subscription plan\",\n    })\n    .min(1, \"Please select a subscription plan\")\n    .refine((value) => value === \"basic\" || value === \"pro\", {\n      message: \"Invalid plan selection. Please choose Basic or Pro\",\n    }),\n  billingPeriod: z\n    .string({\n      required_error: \"Please select a billing period\",\n    })\n    .min(1, \"Please select a billing period\"),\n  addons: z\n    .array(z.string())\n    .min(1, \"Please select at least one add-on\")\n    .max(3, \"You can select up to 3 add-ons\")\n    .refine(\n      (value) => value.every((addon) => addons.some((a) => a.id === addon)),\n      {\n        message: \"You selected an invalid add-on\",\n      }\n    ),\n  emailNotifications: z.boolean(),\n})\n\nexport default function FormTanstackComplex() {\n  const form = useForm({\n    defaultValues: {\n      plan: \"basic\",\n      billingPeriod: \"monthly\",\n      addons: [] as string[],\n      emailNotifications: false,\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full max-w-sm\">\n      <CardContent>\n        <form\n          id=\"subscription-form\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"plan\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldSet>\n                    <FieldLegend>Subscription Plan</FieldLegend>\n                    <FieldDescription>\n                      Choose your subscription plan.\n                    </FieldDescription>\n                    <RadioGroup\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                    >\n                      <FieldLabel htmlFor=\"basic\">\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <FieldContent>\n                            <FieldTitle>Basic</FieldTitle>\n                            <FieldDescription>\n                              For individuals and small teams\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"basic\"\n                            id=\"basic\"\n                            aria-invalid={isInvalid}\n                          />\n                        </Field>\n                      </FieldLabel>\n                      <FieldLabel htmlFor=\"pro\">\n                        <Field\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <FieldContent>\n                            <FieldTitle>Pro</FieldTitle>\n                            <FieldDescription>\n                              For businesses with higher demands\n                            </FieldDescription>\n                          </FieldContent>\n                          <RadioGroupItem\n                            value=\"pro\"\n                            id=\"pro\"\n                            aria-invalid={isInvalid}\n                          />\n                        </Field>\n                      </FieldLabel>\n                    </RadioGroup>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldSet>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"billingPeriod\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor={field.name}>Billing Period</FieldLabel>\n                    <Select\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                      aria-invalid={isInvalid}\n                    >\n                      <SelectTrigger id={field.name}>\n                        <SelectValue placeholder=\"Select\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"monthly\">Monthly</SelectItem>\n                        <SelectItem value=\"yearly\">Yearly</SelectItem>\n                      </SelectContent>\n                    </Select>\n                    <FieldDescription>\n                      Choose how often you want to be billed.\n                    </FieldDescription>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"addons\"\n              mode=\"array\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldSet>\n                    <FieldLegend>Add-ons</FieldLegend>\n                    <FieldDescription>\n                      Select additional features you&apos;d like to include.\n                    </FieldDescription>\n                    <FieldGroup data-slot=\"checkbox-group\">\n                      {addons.map((addon) => (\n                        <Field\n                          key={addon.id}\n                          orientation=\"horizontal\"\n                          data-invalid={isInvalid}\n                        >\n                          <Checkbox\n                            id={addon.id}\n                            name={field.name}\n                            aria-invalid={isInvalid}\n                            checked={field.state.value.includes(addon.id)}\n                            onCheckedChange={(checked) => {\n                              if (checked) {\n                                field.pushValue(addon.id)\n                              } else {\n                                const index = field.state.value.indexOf(\n                                  addon.id\n                                )\n                                if (index > -1) {\n                                  field.removeValue(index)\n                                }\n                              }\n                            }}\n                          />\n                          <FieldContent>\n                            <FieldLabel htmlFor={addon.id}>\n                              {addon.title}\n                            </FieldLabel>\n                            <FieldDescription>\n                              {addon.description}\n                            </FieldDescription>\n                          </FieldContent>\n                        </Field>\n                      ))}\n                    </FieldGroup>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldSet>\n                )\n              }}\n            />\n            <FieldSeparator />\n            <form.Field\n              name=\"emailNotifications\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field orientation=\"horizontal\" data-invalid={isInvalid}>\n                    <FieldContent>\n                      <FieldLabel htmlFor={field.name}>\n                        Email Notifications\n                      </FieldLabel>\n                      <FieldDescription>\n                        Receive email updates about your subscription\n                      </FieldDescription>\n                    </FieldContent>\n                    <Switch\n                      id={field.name}\n                      name={field.name}\n                      checked={field.state.value}\n                      onCheckedChange={field.handleChange}\n                      aria-invalid={isInvalid}\n                    />\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\" className=\"justify-end\">\n          <Button type=\"submit\" form=\"subscription-form\">\n            Save Preferences\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-tanstack-demo.json b/apps/v4/public/r/styles/new-york-v4/form-tanstack-demo.json
index 953af59424..df12884c86 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-tanstack-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-tanstack-demo.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-tanstack-demo.tsx",
-      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport * as React from \"react\"\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst formSchema = z.object({\n  title: z\n    .string()\n    .min(5, \"Bug title must be at least 5 characters.\")\n    .max(32, \"Bug title must be at most 32 characters.\"),\n  description: z\n    .string()\n    .min(20, \"Description must be at least 20 characters.\")\n    .max(100, \"Description must be at most 100 characters.\"),\n})\n\nexport default function BugReportForm() {\n  const form = useForm({\n    defaultValues: {\n      title: \"\",\n      description: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Bug Report</CardTitle>\n        <CardDescription>\n          Help us improve by reporting bugs you encounter.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"bug-report-form\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"title\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor={field.name}>Bug Title</FieldLabel>\n                    <Input\n                      id={field.name}\n                      name={field.name}\n                      value={field.state.value}\n                      onBlur={field.handleBlur}\n                      onChange={(e) => field.handleChange(e.target.value)}\n                      aria-invalid={isInvalid}\n                      placeholder=\"Login button not working on mobile\"\n                      autoComplete=\"off\"\n                    />\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n            <form.Field\n              name=\"description\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor={field.name}>Description</FieldLabel>\n                    <InputGroup>\n                      <InputGroupTextarea\n                        id={field.name}\n                        name={field.name}\n                        value={field.state.value}\n                        onBlur={field.handleBlur}\n                        onChange={(e) => field.handleChange(e.target.value)}\n                        placeholder=\"I'm having an issue with the login button on mobile.\"\n                        rows={6}\n                        className=\"min-h-24 resize-none\"\n                        aria-invalid={isInvalid}\n                      />\n                      <InputGroupAddon align=\"block-end\">\n                        <InputGroupText className=\"tabular-nums\">\n                          {field.state.value.length}/100 characters\n                        </InputGroupText>\n                      </InputGroupAddon>\n                    </InputGroup>\n                    <FieldDescription>\n                      Include steps to reproduce, expected behavior, and what\n                      actually happened.\n                    </FieldDescription>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"bug-report-form\">\n            Submit\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport * as React from \"react\"\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst formSchema = z.object({\n  title: z\n    .string()\n    .min(5, \"Bug title must be at least 5 characters.\")\n    .max(32, \"Bug title must be at most 32 characters.\"),\n  description: z\n    .string()\n    .min(20, \"Description must be at least 20 characters.\")\n    .max(100, \"Description must be at most 100 characters.\"),\n})\n\nexport default function BugReportForm() {\n  const form = useForm({\n    defaultValues: {\n      title: \"\",\n      description: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Bug Report</CardTitle>\n        <CardDescription>\n          Help us improve by reporting bugs you encounter.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"bug-report-form\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"title\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor={field.name}>Bug Title</FieldLabel>\n                    <Input\n                      id={field.name}\n                      name={field.name}\n                      value={field.state.value}\n                      onBlur={field.handleBlur}\n                      onChange={(e) => field.handleChange(e.target.value)}\n                      aria-invalid={isInvalid}\n                      placeholder=\"Login button not working on mobile\"\n                      autoComplete=\"off\"\n                    />\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n            <form.Field\n              name=\"description\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor={field.name}>Description</FieldLabel>\n                    <InputGroup>\n                      <InputGroupTextarea\n                        id={field.name}\n                        name={field.name}\n                        value={field.state.value}\n                        onBlur={field.handleBlur}\n                        onChange={(e) => field.handleChange(e.target.value)}\n                        placeholder=\"I'm having an issue with the login button on mobile.\"\n                        rows={6}\n                        className=\"min-h-24 resize-none\"\n                        aria-invalid={isInvalid}\n                      />\n                      <InputGroupAddon align=\"block-end\">\n                        <InputGroupText className=\"tabular-nums\">\n                          {field.state.value.length}/100 characters\n                        </InputGroupText>\n                      </InputGroupAddon>\n                    </InputGroup>\n                    <FieldDescription>\n                      Include steps to reproduce, expected behavior, and what\n                      actually happened.\n                    </FieldDescription>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"bug-report-form\">\n            Submit\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-tanstack-input.json b/apps/v4/public/r/styles/new-york-v4/form-tanstack-input.json
index f945e506eb..e29429b73d 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-tanstack-input.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-tanstack-input.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-tanstack-input.tsx",
-      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nconst formSchema = z.object({\n  username: z\n    .string()\n    .min(3, \"Username must be at least 3 characters.\")\n    .max(10, \"Username must be at most 10 characters.\")\n    .regex(\n      /^[a-zA-Z0-9_]+$/,\n      \"Username can only contain letters, numbers, and underscores.\"\n    ),\n})\n\nexport default function FormTanstackInput() {\n  const form = useForm({\n    defaultValues: {\n      username: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Profile Settings</CardTitle>\n        <CardDescription>\n          Update your profile information below.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-input\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"username\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor=\"form-tanstack-input-username\">\n                      Username\n                    </FieldLabel>\n                    <Input\n                      id=\"form-tanstack-input-username\"\n                      name={field.name}\n                      value={field.state.value}\n                      onBlur={field.handleBlur}\n                      onChange={(e) => field.handleChange(e.target.value)}\n                      aria-invalid={isInvalid}\n                      placeholder=\"shadcn\"\n                      autoComplete=\"username\"\n                    />\n                    <FieldDescription>\n                      This is your public display name. Must be between 3 and 10\n                      characters. Must only contain letters, numbers, and\n                      underscores.\n                    </FieldDescription>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-input\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nconst formSchema = z.object({\n  username: z\n    .string()\n    .min(3, \"Username must be at least 3 characters.\")\n    .max(10, \"Username must be at most 10 characters.\")\n    .regex(\n      /^[a-zA-Z0-9_]+$/,\n      \"Username can only contain letters, numbers, and underscores.\"\n    ),\n})\n\nexport default function FormTanstackInput() {\n  const form = useForm({\n    defaultValues: {\n      username: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Profile Settings</CardTitle>\n        <CardDescription>\n          Update your profile information below.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-input\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"username\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor=\"form-tanstack-input-username\">\n                      Username\n                    </FieldLabel>\n                    <Input\n                      id=\"form-tanstack-input-username\"\n                      name={field.name}\n                      value={field.state.value}\n                      onBlur={field.handleBlur}\n                      onChange={(e) => field.handleChange(e.target.value)}\n                      aria-invalid={isInvalid}\n                      placeholder=\"shadcn\"\n                      autoComplete=\"username\"\n                    />\n                    <FieldDescription>\n                      This is your public display name. Must be between 3 and 10\n                      characters. Must only contain letters, numbers, and\n                      underscores.\n                    </FieldDescription>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-input\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-tanstack-radiogroup.json b/apps/v4/public/r/styles/new-york-v4/form-tanstack-radiogroup.json
index debedbbeff..9d57089fce 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-tanstack-radiogroup.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-tanstack-radiogroup.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-tanstack-radiogroup.tsx",
-      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\n\nconst plans = [\n  {\n    id: \"starter\",\n    title: \"Starter (100K tokens/month)\",\n    description: \"For everyday use with basic features.\",\n  },\n  {\n    id: \"pro\",\n    title: \"Pro (1M tokens/month)\",\n    description: \"For advanced AI usage with more features.\",\n  },\n  {\n    id: \"enterprise\",\n    title: \"Enterprise (Unlimited tokens)\",\n    description: \"For large teams and heavy usage.\",\n  },\n] as const\n\nconst formSchema = z.object({\n  plan: z.string().min(1, \"You must select a subscription plan to continue.\"),\n})\n\nexport default function FormTanstackRadioGroup() {\n  const form = useForm({\n    defaultValues: {\n      plan: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Subscription Plan</CardTitle>\n        <CardDescription>\n          See pricing and features for each plan.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-radiogroup\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"plan\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldSet>\n                    <FieldLegend>Plan</FieldLegend>\n                    <FieldDescription>\n                      You can upgrade or downgrade your plan at any time.\n                    </FieldDescription>\n                    <RadioGroup\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                    >\n                      {plans.map((plan) => (\n                        <FieldLabel\n                          key={plan.id}\n                          htmlFor={`form-tanstack-radiogroup-${plan.id}`}\n                        >\n                          <Field\n                            orientation=\"horizontal\"\n                            data-invalid={isInvalid}\n                          >\n                            <FieldContent>\n                              <FieldTitle>{plan.title}</FieldTitle>\n                              <FieldDescription>\n                                {plan.description}\n                              </FieldDescription>\n                            </FieldContent>\n                            <RadioGroupItem\n                              value={plan.id}\n                              id={`form-tanstack-radiogroup-${plan.id}`}\n                              aria-invalid={isInvalid}\n                            />\n                          </Field>\n                        </FieldLabel>\n                      ))}\n                    </RadioGroup>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldSet>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-radiogroup\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/new-york-v4/ui/radio-group\"\n\nconst plans = [\n  {\n    id: \"starter\",\n    title: \"Starter (100K tokens/month)\",\n    description: \"For everyday use with basic features.\",\n  },\n  {\n    id: \"pro\",\n    title: \"Pro (1M tokens/month)\",\n    description: \"For advanced AI usage with more features.\",\n  },\n  {\n    id: \"enterprise\",\n    title: \"Enterprise (Unlimited tokens)\",\n    description: \"For large teams and heavy usage.\",\n  },\n] as const\n\nconst formSchema = z.object({\n  plan: z.string().min(1, \"You must select a subscription plan to continue.\"),\n})\n\nexport default function FormTanstackRadioGroup() {\n  const form = useForm({\n    defaultValues: {\n      plan: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Subscription Plan</CardTitle>\n        <CardDescription>\n          See pricing and features for each plan.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-radiogroup\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"plan\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <FieldSet>\n                    <FieldLegend>Plan</FieldLegend>\n                    <FieldDescription>\n                      You can upgrade or downgrade your plan at any time.\n                    </FieldDescription>\n                    <RadioGroup\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                    >\n                      {plans.map((plan) => (\n                        <FieldLabel\n                          key={plan.id}\n                          htmlFor={`form-tanstack-radiogroup-${plan.id}`}\n                        >\n                          <Field\n                            orientation=\"horizontal\"\n                            data-invalid={isInvalid}\n                          >\n                            <FieldContent>\n                              <FieldTitle>{plan.title}</FieldTitle>\n                              <FieldDescription>\n                                {plan.description}\n                              </FieldDescription>\n                            </FieldContent>\n                            <RadioGroupItem\n                              value={plan.id}\n                              id={`form-tanstack-radiogroup-${plan.id}`}\n                              aria-invalid={isInvalid}\n                            />\n                          </Field>\n                        </FieldLabel>\n                      ))}\n                    </RadioGroup>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </FieldSet>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-radiogroup\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-tanstack-select.json b/apps/v4/public/r/styles/new-york-v4/form-tanstack-select.json
index 48c6591c72..6ae2d0c2fb 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-tanstack-select.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-tanstack-select.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-tanstack-select.tsx",
-      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n] as const\n\nconst formSchema = z.object({\n  language: z\n    .string()\n    .min(1, \"Please select your spoken language.\")\n    .refine((val) => val !== \"auto\", {\n      message:\n        \"Auto-detection is not allowed. Please select a specific language.\",\n    }),\n})\n\nexport default function FormTanstackSelect() {\n  const form = useForm({\n    defaultValues: {\n      language: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-lg\">\n      <CardHeader>\n        <CardTitle>Language Preferences</CardTitle>\n        <CardDescription>\n          Select your preferred spoken language.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-select\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"language\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field orientation=\"responsive\" data-invalid={isInvalid}>\n                    <FieldContent>\n                      <FieldLabel htmlFor=\"form-tanstack-select-language\">\n                        Spoken Language\n                      </FieldLabel>\n                      <FieldDescription>\n                        For best results, select the language you speak.\n                      </FieldDescription>\n                      {isInvalid && (\n                        <FieldError errors={field.state.meta.errors} />\n                      )}\n                    </FieldContent>\n                    <Select\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                    >\n                      <SelectTrigger\n                        id=\"form-tanstack-select-language\"\n                        aria-invalid={isInvalid}\n                        className=\"min-w-[120px]\"\n                      >\n                        <SelectValue placeholder=\"Select\" />\n                      </SelectTrigger>\n                      <SelectContent position=\"item-aligned\">\n                        <SelectItem value=\"auto\">Auto</SelectItem>\n                        <SelectSeparator />\n                        {spokenLanguages.map((language) => (\n                          <SelectItem\n                            key={language.value}\n                            value={language.value}\n                          >\n                            {language.label}\n                          </SelectItem>\n                        ))}\n                      </SelectContent>\n                    </Select>\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-select\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n] as const\n\nconst formSchema = z.object({\n  language: z\n    .string()\n    .min(1, \"Please select your spoken language.\")\n    .refine((val) => val !== \"auto\", {\n      message:\n        \"Auto-detection is not allowed. Please select a specific language.\",\n    }),\n})\n\nexport default function FormTanstackSelect() {\n  const form = useForm({\n    defaultValues: {\n      language: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-lg\">\n      <CardHeader>\n        <CardTitle>Language Preferences</CardTitle>\n        <CardDescription>\n          Select your preferred spoken language.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-select\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"language\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field orientation=\"responsive\" data-invalid={isInvalid}>\n                    <FieldContent>\n                      <FieldLabel htmlFor=\"form-tanstack-select-language\">\n                        Spoken Language\n                      </FieldLabel>\n                      <FieldDescription>\n                        For best results, select the language you speak.\n                      </FieldDescription>\n                      {isInvalid && (\n                        <FieldError errors={field.state.meta.errors} />\n                      )}\n                    </FieldContent>\n                    <Select\n                      name={field.name}\n                      value={field.state.value}\n                      onValueChange={field.handleChange}\n                    >\n                      <SelectTrigger\n                        id=\"form-tanstack-select-language\"\n                        aria-invalid={isInvalid}\n                        className=\"min-w-[120px]\"\n                      >\n                        <SelectValue placeholder=\"Select\" />\n                      </SelectTrigger>\n                      <SelectContent position=\"item-aligned\">\n                        <SelectItem value=\"auto\">Auto</SelectItem>\n                        <SelectSeparator />\n                        {spokenLanguages.map((language) => (\n                          <SelectItem\n                            key={language.value}\n                            value={language.value}\n                          >\n                            {language.label}\n                          </SelectItem>\n                        ))}\n                      </SelectContent>\n                    </Select>\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-select\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-tanstack-switch.json b/apps/v4/public/r/styles/new-york-v4/form-tanstack-switch.json
index 55ff17a766..cf7e342e06 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-tanstack-switch.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-tanstack-switch.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-tanstack-switch.tsx",
-      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst formSchema = z.object({\n  twoFactor: z.boolean().refine((val) => val === true, {\n    message: \"It is highly recommended to enable two-factor authentication.\",\n  }),\n})\n\nexport default function FormTanstackSwitch() {\n  const form = useForm({\n    defaultValues: {\n      twoFactor: false,\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Security Settings</CardTitle>\n        <CardDescription>\n          Manage your account security preferences.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-switch\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"twoFactor\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field orientation=\"horizontal\" data-invalid={isInvalid}>\n                    <FieldContent>\n                      <FieldLabel htmlFor=\"form-tanstack-switch-twoFactor\">\n                        Multi-factor authentication\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enable multi-factor authentication to secure your\n                        account.\n                      </FieldDescription>\n                      {isInvalid && (\n                        <FieldError errors={field.state.meta.errors} />\n                      )}\n                    </FieldContent>\n                    <Switch\n                      id=\"form-tanstack-switch-twoFactor\"\n                      name={field.name}\n                      checked={field.state.value}\n                      onCheckedChange={field.handleChange}\n                      aria-invalid={isInvalid}\n                    />\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-switch\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\nconst formSchema = z.object({\n  twoFactor: z.boolean().refine((val) => val === true, {\n    message: \"It is highly recommended to enable two-factor authentication.\",\n  }),\n})\n\nexport default function FormTanstackSwitch() {\n  const form = useForm({\n    defaultValues: {\n      twoFactor: false,\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Security Settings</CardTitle>\n        <CardDescription>\n          Manage your account security preferences.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-switch\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"twoFactor\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field orientation=\"horizontal\" data-invalid={isInvalid}>\n                    <FieldContent>\n                      <FieldLabel htmlFor=\"form-tanstack-switch-twoFactor\">\n                        Multi-factor authentication\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enable multi-factor authentication to secure your\n                        account.\n                      </FieldDescription>\n                      {isInvalid && (\n                        <FieldError errors={field.state.meta.errors} />\n                      )}\n                    </FieldContent>\n                    <Switch\n                      id=\"form-tanstack-switch-twoFactor\"\n                      name={field.name}\n                      checked={field.state.value}\n                      onCheckedChange={field.handleChange}\n                      aria-invalid={isInvalid}\n                    />\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-switch\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form-tanstack-textarea.json b/apps/v4/public/r/styles/new-york-v4/form-tanstack-textarea.json
index 651aabb6ae..425e7ea3b9 100644
--- a/apps/v4/public/r/styles/new-york-v4/form-tanstack-textarea.json
+++ b/apps/v4/public/r/styles/new-york-v4/form-tanstack-textarea.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/form-tanstack-textarea.tsx",
-      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nconst formSchema = z.object({\n  about: z\n    .string()\n    .min(10, \"Please provide at least 10 characters.\")\n    .max(200, \"Please keep it under 200 characters.\"),\n})\n\nexport default function FormTanstackTextarea() {\n  const form = useForm({\n    defaultValues: {\n      about: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Personalization</CardTitle>\n        <CardDescription>\n          Customize your experience by telling us more about yourself.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-textarea\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"about\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor=\"form-tanstack-textarea-about\">\n                      More about you\n                    </FieldLabel>\n                    <Textarea\n                      id=\"form-tanstack-textarea-about\"\n                      name={field.name}\n                      value={field.state.value}\n                      onBlur={field.handleBlur}\n                      onChange={(e) => field.handleChange(e.target.value)}\n                      aria-invalid={isInvalid}\n                      placeholder=\"I'm a software engineer...\"\n                      className=\"min-h-[120px]\"\n                    />\n                    <FieldDescription>\n                      Tell us more about yourself. This will be used to help us\n                      personalize your experience.\n                    </FieldDescription>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-textarea\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "/* eslint-disable react/no-children-prop */\n\"use client\"\n\nimport { useForm } from \"@tanstack/react-form\"\nimport { toast } from \"sonner\"\nimport * as z from \"zod\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nconst formSchema = z.object({\n  about: z\n    .string()\n    .min(10, \"Please provide at least 10 characters.\")\n    .max(200, \"Please keep it under 200 characters.\"),\n})\n\nexport default function FormTanstackTextarea() {\n  const form = useForm({\n    defaultValues: {\n      about: \"\",\n    },\n    validators: {\n      onSubmit: formSchema,\n    },\n    onSubmit: async ({ value }) => {\n      toast(\"You submitted the following values:\", {\n        description: (\n          <pre className=\"mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground\">\n            <code>{JSON.stringify(value, null, 2)}</code>\n          </pre>\n        ),\n        position: \"bottom-right\",\n        classNames: {\n          content: \"flex flex-col gap-2\",\n        },\n        style: {\n          \"--border-radius\": \"calc(var(--radius)  + 4px)\",\n        } as React.CSSProperties,\n      })\n    },\n  })\n\n  return (\n    <Card className=\"w-full sm:max-w-md\">\n      <CardHeader>\n        <CardTitle>Personalization</CardTitle>\n        <CardDescription>\n          Customize your experience by telling us more about yourself.\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form\n          id=\"form-tanstack-textarea\"\n          onSubmit={(e) => {\n            e.preventDefault()\n            form.handleSubmit()\n          }}\n        >\n          <FieldGroup>\n            <form.Field\n              name=\"about\"\n              children={(field) => {\n                const isInvalid =\n                  field.state.meta.isTouched && !field.state.meta.isValid\n                return (\n                  <Field data-invalid={isInvalid}>\n                    <FieldLabel htmlFor=\"form-tanstack-textarea-about\">\n                      More about you\n                    </FieldLabel>\n                    <Textarea\n                      id=\"form-tanstack-textarea-about\"\n                      name={field.name}\n                      value={field.state.value}\n                      onBlur={field.handleBlur}\n                      onChange={(e) => field.handleChange(e.target.value)}\n                      aria-invalid={isInvalid}\n                      placeholder=\"I'm a software engineer...\"\n                      className=\"min-h-[120px]\"\n                    />\n                    <FieldDescription>\n                      Tell us more about yourself. This will be used to help us\n                      personalize your experience.\n                    </FieldDescription>\n                    {isInvalid && (\n                      <FieldError errors={field.state.meta.errors} />\n                    )}\n                  </Field>\n                )\n              }}\n            />\n          </FieldGroup>\n        </form>\n      </CardContent>\n      <CardFooter>\n        <Field orientation=\"horizontal\">\n          <Button type=\"button\" variant=\"outline\" onClick={() => form.reset()}>\n            Reset\n          </Button>\n          <Button type=\"submit\" form=\"form-tanstack-textarea\">\n            Save\n          </Button>\n        </Field>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/form.json b/apps/v4/public/r/styles/new-york-v4/form.json
index a61e51eaab..cbd2f30348 100644
--- a/apps/v4/public/r/styles/new-york-v4/form.json
+++ b/apps/v4/public/r/styles/new-york-v4/form.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/form.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Label as LabelPrimitive } from \"radix-ui\"\nimport { Slot } from \"radix-ui\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : props.children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-destructive text-sm\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport type { Label as LabelPrimitive } from \"radix-ui\"\nimport { Slot } from \"radix-ui\"\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useFormState,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from \"react-hook-form\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nconst Form = FormProvider\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  name: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\n  {} as FormFieldContextValue\n)\n\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  )\n}\n\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext)\n  const itemContext = React.useContext(FormItemContext)\n  const { getFieldState } = useFormContext()\n  const formState = useFormState({ name: fieldContext.name })\n  const fieldState = getFieldState(fieldContext.name, formState)\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\")\n  }\n\n  const { id } = itemContext\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  }\n}\n\ntype FormItemContextValue = {\n  id: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n)\n\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId()\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <div\n        data-slot=\"form-item\"\n        className={cn(\"grid gap-2\", className)}\n        {...props}\n      />\n    </FormItemContext.Provider>\n  )\n}\n\nfunction FormLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  const { error, formItemId } = useFormField()\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  )\n}\n\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error\n          ? `${formDescriptionId}`\n          : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  )\n}\n\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormField()\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { error, formMessageId } = useFormField()\n  const body = error ? String(error?.message ?? \"\") : props.children\n\n  if (!body) {\n    return null\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(\"text-sm text-destructive\", className)}\n      {...props}\n    >\n      {body}\n    </p>\n  )\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/hover-card-demo.json b/apps/v4/public/r/styles/new-york-v4/hover-card-demo.json
index 528d4136cb..817408fb91 100644
--- a/apps/v4/public/r/styles/new-york-v4/hover-card-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/hover-card-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/hover-card-demo.tsx",
-      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york-v4/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between gap-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"text-muted-foreground text-xs\">\n              Joined December 2021\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
+      "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/new-york-v4/ui/hover-card\"\n\nexport default function HoverCardDemo() {\n  return (\n    <HoverCard>\n      <HoverCardTrigger asChild>\n        <Button variant=\"link\">@nextjs</Button>\n      </HoverCardTrigger>\n      <HoverCardContent className=\"w-80\">\n        <div className=\"flex justify-between gap-4\">\n          <Avatar>\n            <AvatarImage src=\"https://github.com/vercel.png\" />\n            <AvatarFallback>VC</AvatarFallback>\n          </Avatar>\n          <div className=\"space-y-1\">\n            <h4 className=\"text-sm font-semibold\">@nextjs</h4>\n            <p className=\"text-sm\">\n              The React Framework – created and maintained by @vercel.\n            </p>\n            <div className=\"text-xs text-muted-foreground\">\n              Joined December 2021\n            </div>\n          </div>\n        </div>\n      </HoverCardContent>\n    </HoverCard>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/hover-card.json b/apps/v4/public/r/styles/new-york-v4/hover-card.json
index 55773d4fb4..5150a2460b 100644
--- a/apps/v4/public/r/styles/new-york-v4/hover-card.json
+++ b/apps/v4/public/r/styles/new-york-v4/hover-card.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/input-group-button.json b/apps/v4/public/r/styles/new-york-v4/input-group-button.json
index b56f76feb8..64e19f3157 100644
--- a/apps/v4/public/r/styles/new-york-v4/input-group-button.json
+++ b/apps/v4/public/r/styles/new-york-v4/input-group-button.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/input-group-button.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  IconCheck,\n  IconCopy,\n  IconInfoCircle,\n  IconStar,\n} from \"@tabler/icons-react\"\n\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function InputGroupButtonExample() {\n  const { copyToClipboard, isCopied } = useCopyToClipboard()\n  const [isFavorite, setIsFavorite] = React.useState(false)\n\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"https://x.com/shadcn\" readOnly />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            aria-label=\"Copy\"\n            title=\"Copy\"\n            size=\"icon-xs\"\n            onClick={() => {\n              copyToClipboard(\"https://x.com/shadcn\")\n            }}\n          >\n            {isCopied ? <IconCheck /> : <IconCopy />}\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup className=\"[--radius:9999px]\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconInfoCircle />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"start\"\n            className=\"flex flex-col gap-1 rounded-xl text-sm\"\n          >\n            <p className=\"font-medium\">Your connection is not secure.</p>\n            <p>You should not enter any sensitive information on this site.</p>\n          </PopoverContent>\n        </Popover>\n        <InputGroupAddon className=\"text-muted-foreground pl-1.5\">\n          https://\n        </InputGroupAddon>\n        <InputGroupInput id=\"input-secure-19\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            onClick={() => setIsFavorite(!isFavorite)}\n            size=\"icon-xs\"\n          >\n            <IconStar\n              data-favorite={isFavorite}\n              className=\"data-[favorite=true]:fill-blue-600 data-[favorite=true]:stroke-blue-600\"\n            />\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Type to search...\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton variant=\"secondary\">Search</InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  IconCheck,\n  IconCopy,\n  IconInfoCircle,\n  IconStar,\n} from \"@tabler/icons-react\"\n\nimport { useCopyToClipboard } from \"@/hooks/use-copy-to-clipboard\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function InputGroupButtonExample() {\n  const { copyToClipboard, isCopied } = useCopyToClipboard()\n  const [isFavorite, setIsFavorite] = React.useState(false)\n\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"https://x.com/shadcn\" readOnly />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            aria-label=\"Copy\"\n            title=\"Copy\"\n            size=\"icon-xs\"\n            onClick={() => {\n              copyToClipboard(\"https://x.com/shadcn\")\n            }}\n          >\n            {isCopied ? <IconCheck /> : <IconCopy />}\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup className=\"[--radius:9999px]\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconInfoCircle />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </PopoverTrigger>\n          <PopoverContent\n            align=\"start\"\n            className=\"flex flex-col gap-1 rounded-xl text-sm\"\n          >\n            <p className=\"font-medium\">Your connection is not secure.</p>\n            <p>You should not enter any sensitive information on this site.</p>\n          </PopoverContent>\n        </Popover>\n        <InputGroupAddon className=\"pl-1.5 text-muted-foreground\">\n          https://\n        </InputGroupAddon>\n        <InputGroupInput id=\"input-secure-19\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton\n            onClick={() => setIsFavorite(!isFavorite)}\n            size=\"icon-xs\"\n          >\n            <IconStar\n              data-favorite={isFavorite}\n              className=\"data-[favorite=true]:fill-blue-600 data-[favorite=true]:stroke-blue-600\"\n            />\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Type to search...\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton variant=\"secondary\">Search</InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/input-group-demo.json b/apps/v4/public/r/styles/new-york-v4/input-group-demo.json
index a0abcda8c2..6111c3d3ab 100644
--- a/apps/v4/public/r/styles/new-york-v4/input-group-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/input-group-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/input-group-demo.tsx",
-      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                <IconInfoCircle />\n              </InputGroupButton>\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuItem>Auto</DropdownMenuItem>\n              <DropdownMenuItem>Agent</DropdownMenuItem>\n              <DropdownMenuItem>Manual</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"!h-4\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { IconCheck, IconInfoCircle, IconPlus } from \"@tabler/icons-react\"\nimport { ArrowUpIcon, Search } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\n\nexport default function InputGroupDemo() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Search...\" />\n        <InputGroupAddon>\n          <Search />\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"example.com\" className=\"pl-1!\" />\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupAddon align=\"inline-end\">\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                <IconInfoCircle />\n              </InputGroupButton>\n            </TooltipTrigger>\n            <TooltipContent>This is content in a tooltip.</TooltipContent>\n          </Tooltip>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupButton\n            variant=\"outline\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n          >\n            <IconPlus />\n          </InputGroupButton>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              className=\"[--radius:0.95rem]\"\n            >\n              <DropdownMenuItem>Auto</DropdownMenuItem>\n              <DropdownMenuItem>Agent</DropdownMenuItem>\n              <DropdownMenuItem>Manual</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n          <Separator orientation=\"vertical\" className=\"h-4!\" />\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full\"\n            size=\"icon-xs\"\n            disabled\n          >\n            <ArrowUpIcon />\n            <span className=\"sr-only\">Send</span>\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"@shadcn\" />\n        <InputGroupAddon align=\"inline-end\">\n          <div className=\"flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground\">\n            <IconCheck className=\"size-3\" />\n          </div>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/input-group-dropdown.json b/apps/v4/public/r/styles/new-york-v4/input-group-dropdown.json
index 7a9d292967..8269efad8e 100644
--- a/apps/v4/public/r/styles/new-york-v4/input-group-dropdown.json
+++ b/apps/v4/public/r/styles/new-york-v4/input-group-dropdown.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/input-group-dropdown.tsx",
-      "content": "import { ChevronDownIcon, MoreHorizontal } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nexport default function InputGroupDropdown() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter file name\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton\n                variant=\"ghost\"\n                aria-label=\"More\"\n                size=\"icon-xs\"\n              >\n                <MoreHorizontal />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Copy path</DropdownMenuItem>\n              <DropdownMenuItem>Open location</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup className=\"[--radius:1rem]\">\n        <InputGroupInput placeholder=\"Enter search query\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\" className=\"!pr-1.5 text-xs\">\n                Search In... <ChevronDownIcon className=\"size-3\" />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"[--radius:0.95rem]\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Blog Posts</DropdownMenuItem>\n              <DropdownMenuItem>Changelog</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import { ChevronDownIcon, MoreHorizontal } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nexport default function InputGroupDropdown() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-4\">\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter file name\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton\n                variant=\"ghost\"\n                aria-label=\"More\"\n                size=\"icon-xs\"\n              >\n                <MoreHorizontal />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Copy path</DropdownMenuItem>\n              <DropdownMenuItem>Open location</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup className=\"[--radius:1rem]\">\n        <InputGroupInput placeholder=\"Enter search query\" />\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <InputGroupButton variant=\"ghost\" className=\"pr-1.5! text-xs\">\n                Search In... <ChevronDownIcon className=\"size-3\" />\n              </InputGroupButton>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"[--radius:0.95rem]\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Blog Posts</DropdownMenuItem>\n              <DropdownMenuItem>Changelog</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/input-group-text.json b/apps/v4/public/r/styles/new-york-v4/input-group-text.json
index 88d0f59717..1855d27a4a 100644
--- a/apps/v4/public/r/styles/new-york-v4/input-group-text.json
+++ b/apps/v4/public/r/styles/new-york-v4/input-group-text.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/input-group-text.tsx",
-      "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nexport default function InputGroupTextExample() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>$</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"0.00\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>USD</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"example.com\" className=\"!pl-0.5\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter your username\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>@company.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Enter your message\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupText className=\"text-muted-foreground text-xs\">\n            120 characters left\n          </InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
+      "content": "import {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nexport default function InputGroupTextExample() {\n  return (\n    <div className=\"grid w-full max-w-sm gap-6\">\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>$</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"0.00\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>USD</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupAddon>\n          <InputGroupText>https://</InputGroupText>\n        </InputGroupAddon>\n        <InputGroupInput placeholder=\"example.com\" className=\"pl-0.5!\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupInput placeholder=\"Enter your username\" />\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupText>@company.com</InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n      <InputGroup>\n        <InputGroupTextarea placeholder=\"Enter your message\" />\n        <InputGroupAddon align=\"block-end\">\n          <InputGroupText className=\"text-xs text-muted-foreground\">\n            120 characters left\n          </InputGroupText>\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/input-group.json b/apps/v4/public/r/styles/new-york-v4/input-group.json
index cf0cdb5146..c12a12c85b 100644
--- a/apps/v4/public/r/styles/new-york-v4/input-group.json
+++ b/apps/v4/public/r/styles/new-york-v4/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/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 \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Textarea } from \"@/registry/new-york-v4/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 border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.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  \"text-sm shadow-none flex gap-2 items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2\",\n        sm: \"h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_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 rounded-none border-0 bg-transparent shadow-none focus-visible: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 rounded-none border-0 bg-transparent py-3 shadow-none focus-visible: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 \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Textarea } from \"@/registry/new-york-v4/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 w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30\",\n        \"h-9 min-w-0 has-[>textarea]:h-auto\",\n\n        // Variants based on alignment.\n        \"has-[>[data-align=inline-start]]:[&>input]:pl-2\",\n        \"has-[>[data-align=inline-end]]:[&>input]:pr-2\",\n        \"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        \"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3\",\n\n        // Focus state.\n        \"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50\",\n\n        // Error state.\n        \"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40\",\n\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-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3\",\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 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"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 rounded-none border-0 bg-transparent shadow-none focus-visible: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 rounded-none border-0 bg-transparent py-3 shadow-none focus-visible: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/new-york-v4/input-otp.json b/apps/v4/public/r/styles/new-york-v4/input-otp.json
index 046da83699..5fb3866be2 100644
--- a/apps/v4/public/r/styles/new-york-v4/input-otp.json
+++ b/apps/v4/public/r/styles/new-york-v4/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\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        \"flex items-center gap-2 has-disabled:opacity-50\",\n        containerClassName\n      )}\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(\"flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\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\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\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        \"flex items-center gap-2 has-disabled:opacity-50\",\n        containerClassName\n      )}\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(\"flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\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 data-slot=\"input-otp-separator\" role=\"separator\" {...props}>\n      <MinusIcon />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/input-with-text.json b/apps/v4/public/r/styles/new-york-v4/input-with-text.json
index deb62187a2..35079ce170 100644
--- a/apps/v4/public/r/styles/new-york-v4/input-with-text.json
+++ b/apps/v4/public/r/styles/new-york-v4/input-with-text.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/input-with-text.tsx",
-      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function InputWithText() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"email-2\">Email</Label>\n      <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n      <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n    </div>\n  )\n}\n",
+      "content": "import { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\n\nexport default function InputWithText() {\n  return (\n    <div className=\"grid w-full max-w-sm items-center gap-3\">\n      <Label htmlFor=\"email-2\">Email</Label>\n      <Input type=\"email\" id=\"email-2\" placeholder=\"Email\" />\n      <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/input.json b/apps/v4/public/r/styles/new-york-v4/input.json
index 970454f5bc..94fcc0586d 100644
--- a/apps/v4/public/r/styles/new-york-v4/input.json
+++ b/apps/v4/public/r/styles/new-york-v4/input.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n        \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30\",\n        \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/item-avatar.json b/apps/v4/public/r/styles/new-york-v4/item-avatar.json
index 470868323e..3640ce464c 100644
--- a/apps/v4/public/r/styles/new-york-v4/item-avatar.json
+++ b/apps/v4/public/r/styles/new-york-v4/item-avatar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/item-avatar.tsx",
-      "content": "import { Plus } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/new-york-v4/ui/item\"\n\nexport default function ItemAvatar() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <Avatar className=\"size-10\">\n            <AvatarImage src=\"https://github.com/evilrabbit.png\" />\n            <AvatarFallback>ER</AvatarFallback>\n          </Avatar>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Evil Rabbit</ItemTitle>\n          <ItemDescription>Last seen 5 months ago</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button\n            size=\"icon-sm\"\n            variant=\"outline\"\n            className=\"rounded-full\"\n            aria-label=\"Invite\"\n          >\n            <Plus />\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <div className=\"*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale\">\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n          </div>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>No Team Members</ItemTitle>\n          <ItemDescription>\n            Invite your team to collaborate on this project.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Invite\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  )\n}\n",
+      "content": "import { Plus } from \"lucide-react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/new-york-v4/ui/item\"\n\nexport default function ItemAvatar() {\n  return (\n    <div className=\"flex w-full max-w-lg flex-col gap-6\">\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <Avatar className=\"size-10\">\n            <AvatarImage src=\"https://github.com/evilrabbit.png\" />\n            <AvatarFallback>ER</AvatarFallback>\n          </Avatar>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Evil Rabbit</ItemTitle>\n          <ItemDescription>Last seen 5 months ago</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button\n            size=\"icon-sm\"\n            variant=\"outline\"\n            className=\"rounded-full\"\n            aria-label=\"Invite\"\n          >\n            <Plus />\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia>\n          <div className=\"flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale\">\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar className=\"hidden sm:flex\">\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n          </div>\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>No Team Members</ItemTitle>\n          <ItemDescription>\n            Invite your team to collaborate on this project.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\" variant=\"outline\">\n            Invite\n          </Button>\n        </ItemActions>\n      </Item>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/item.json b/apps/v4/public/r/styles/new-york-v4/item.json
index 7354f06ead..6dfe7e9e94 100644
--- a/apps/v4/public/r/styles/new-york-v4/item.json
+++ b/apps/v4/public/r/styles/new-york-v4/item.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\"group/item-group flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-0\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50\",\n      },\n      size: {\n        default: \"p-4 gap-4 \",\n        sm: \"py-3 px-4 gap-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\"group/item-group flex flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-0\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50\",\n      },\n      size: {\n        default: \"gap-4 p-4\",\n        sm: \"gap-2.5 px-4 py-3\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/kbd-group.json b/apps/v4/public/r/styles/new-york-v4/kbd-group.json
index 89d11ad5dd..ecb437b43e 100644
--- a/apps/v4/public/r/styles/new-york-v4/kbd-group.json
+++ b/apps/v4/public/r/styles/new-york-v4/kbd-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/kbd-group.tsx",
-      "content": "import { Kbd, KbdGroup } from \"@/registry/new-york-v4/ui/kbd\"\n\nexport default function KbdGroupExample() {\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <p className=\"text-muted-foreground text-sm\">\n        Use{\" \"}\n        <KbdGroup>\n          <Kbd>Ctrl + B</Kbd>\n          <Kbd>Ctrl + K</Kbd>\n        </KbdGroup>{\" \"}\n        to open the command palette\n      </p>\n    </div>\n  )\n}\n",
+      "content": "import { Kbd, KbdGroup } from \"@/registry/new-york-v4/ui/kbd\"\n\nexport default function KbdGroupExample() {\n  return (\n    <div className=\"flex flex-col items-center gap-4\">\n      <p className=\"text-sm text-muted-foreground\">\n        Use{\" \"}\n        <KbdGroup>\n          <Kbd>Ctrl + B</Kbd>\n          <Kbd>Ctrl + K</Kbd>\n        </KbdGroup>{\" \"}\n        to open the command palette\n      </p>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/kbd-tooltip.json b/apps/v4/public/r/styles/new-york-v4/kbd-tooltip.json
index 3be945a2d1..de9b555502 100644
--- a/apps/v4/public/r/styles/new-york-v4/kbd-tooltip.json
+++ b/apps/v4/public/r/styles/new-york-v4/kbd-tooltip.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/kbd-tooltip.tsx",
-      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ButtonGroup } from \"@/registry/new-york-v4/ui/button-group\"\nimport { Kbd, KbdGroup } from \"@/registry/new-york-v4/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\n\nexport default function KbdTooltip() {\n  return (\n    <div className=\"flex flex-wrap gap-4\">\n      <ButtonGroup>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button size=\"sm\" variant=\"outline\">\n              Save\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>\n            <div className=\"flex items-center gap-2\">\n              Save Changes <Kbd>S</Kbd>\n            </div>\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button size=\"sm\" variant=\"outline\">\n              Print\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>\n            <div className=\"flex items-center gap-2\">\n              Print Document{\" \"}\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>P</Kbd>\n              </KbdGroup>\n            </div>\n          </TooltipContent>\n        </Tooltip>\n      </ButtonGroup>\n    </div>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { ButtonGroup } from \"@/registry/new-york-v4/ui/button-group\"\nimport { Kbd, KbdGroup } from \"@/registry/new-york-v4/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\n\nexport default function KbdTooltip() {\n  return (\n    <div className=\"flex flex-wrap gap-4\">\n      <ButtonGroup>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button size=\"sm\" variant=\"outline\">\n              Save\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>\n            Save Changes <Kbd>S</Kbd>\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger asChild>\n            <Button size=\"sm\" variant=\"outline\">\n              Print\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent>\n            Print Document{\" \"}\n            <KbdGroup>\n              <Kbd>Ctrl</Kbd>\n              <Kbd>P</Kbd>\n            </KbdGroup>\n          </TooltipContent>\n        </Tooltip>\n      </ButtonGroup>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/kbd.json b/apps/v4/public/r/styles/new-york-v4/kbd.json
index ca67cb5793..c1bdc4493a 100644
--- a/apps/v4/public/r/styles/new-york-v4/kbd.json
+++ b/apps/v4/public/r/styles/new-york-v4/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/kbd.tsx",
-      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none\",\n        \"[&_svg:not([class*='size-'])]:size-3\",\n        \"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none\",\n        \"[&_svg:not([class*='size-'])]:size-3\",\n        \"[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/login-02.json b/apps/v4/public/r/styles/new-york-v4/login-02.json
index 08aa7a7a97..386fc587bb 100644
--- a/apps/v4/public/r/styles/new-york-v4/login-02.json
+++ b/apps/v4/public/r/styles/new-york-v4/login-02.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/login-02/page.tsx",
-      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york-v4/blocks/login-02/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <GalleryVerticalEnd className=\"size-4\" />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york-v4/blocks/login-02/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <GalleryVerticalEnd className=\"size-4\" />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator>Or continue with</FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator>Or continue with</FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/login-03.json b/apps/v4/public/r/styles/new-york-v4/login-03.json
index 72147f69cf..0eca551477 100644
--- a/apps/v4/public/r/styles/new-york-v4/login-03.json
+++ b/apps/v4/public/r/styles/new-york-v4/login-03.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/login-03/page.tsx",
-      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york-v4/blocks/login-03/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <GalleryVerticalEnd className=\"size-4\" />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { LoginForm } from \"@/registry/new-york-v4/blocks/login-03/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <GalleryVerticalEnd className=\"size-4\" />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/new-york-v4/login-04.json b/apps/v4/public/r/styles/new-york-v4/login-04.json
index fe582c082a..c6209f88ab 100644
--- a/apps/v4/public/r/styles/new-york-v4/login-04.json
+++ b/apps/v4/public/r/styles/new-york-v4/login-04.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/login-05.json b/apps/v4/public/r/styles/new-york-v4/login-05.json
index e8490fac16..8b1efd15ad 100644
--- a/apps/v4/public/r/styles/new-york-v4/login-05.json
+++ b/apps/v4/public/r/styles/new-york-v4/login-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/new-york-v4/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/new-york-v4/menubar.json b/apps/v4/public/r/styles/new-york-v4/menubar.json
index 4357954a61..5000cd21ed 100644
--- a/apps/v4/public/r/styles/new-york-v4/menubar.json
+++ b/apps/v4/public/r/styles/new-york-v4/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\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        \"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs\",\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        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\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-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg\",\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 { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\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-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs\",\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-sm px-2 py-1 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\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          \"z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=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        \"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <MenubarPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\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-2 py-1.5 text-sm font-medium data-[inset]:pl-8\",\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\", 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\",\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 rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto h-4 w-4\" />\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        \"z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-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/new-york-v4/native-select.json b/apps/v4/public/r/styles/new-york-v4/native-select.json
index 84ca1c6a77..43b7ddbf19 100644
--- a/apps/v4/public/r/styles/new-york-v4/native-select.json
+++ b/apps/v4/public/r/styles/new-york-v4/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: Omit<React.ComponentProps<\"select\">, \"size\"> & { size?: \"sm\" | \"default\" }) {\n  return (\n    <div\n      className=\"group/native-select relative w-fit has-[select:disabled]:opacity-50\"\n      data-slot=\"native-select-wrapper\"\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className={cn(\n          \"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1\",\n          \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n          \"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n          className\n        )}\n        {...props}\n      />\n      <ChevronDownIcon\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: Omit<React.ComponentProps<\"select\">, \"size\"> & { size?: \"sm\" | \"default\" }) {\n  return (\n    <div\n      className=\"group/native-select relative w-fit has-[select:disabled]:opacity-50\"\n      data-slot=\"native-select-wrapper\"\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className={cn(\n          \"h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50\",\n          \"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n          \"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40\",\n          className\n        )}\n        {...props}\n      />\n      <ChevronDownIcon\n        className=\"pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/navigation-menu-demo.json b/apps/v4/public/r/styles/new-york-v4/navigation-menu-demo.json
index 8295ff05cf..1538d2269d 100644
--- a/apps/v4/public/r/styles/new-york-v4/navigation-menu-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/navigation-menu-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/navigation-menu-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { CircleCheckIcon, CircleHelpIcon, CircleIcon } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york-v4/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuDemo() {\n  const isMobile = useIsMobile()\n\n  return (\n    <NavigationMenu viewport={isMobile}>\n      <NavigationMenuList className=\"flex-wrap\">\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Home</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-4 no-underline outline-hidden transition-all duration-200 select-none focus:shadow-md md:p-6\"\n                    href=\"/\"\n                  >\n                    <div className=\"mb-2 text-lg font-medium sm:mt-4\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-muted-foreground text-sm leading-tight\">\n                      Beautifully designed components built with Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>\n            <Link href=\"/docs\">Docs</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem className=\"hidden md:block\">\n          <NavigationMenuTrigger>List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[300px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Components</div>\n                    <div className=\"text-muted-foreground\">\n                      Browse all components in the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Documentation</div>\n                    <div className=\"text-muted-foreground\">\n                      Learn how to use the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Blog</div>\n                    <div className=\"text-muted-foreground\">\n                      Read our latest blog posts.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem className=\"hidden md:block\">\n          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Components</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Documentation</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Blocks</Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem className=\"hidden md:block\">\n          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleHelpIcon />\n                    Backlog\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleIcon />\n                    To Do\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleCheckIcon />\n                    Done\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"text-sm leading-none font-medium\">{title}</div>\n          <p className=\"text-muted-foreground line-clamp-2 text-sm leading-snug\">\n            {children}\n          </p>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\nimport { CircleCheckIcon, CircleHelpIcon, CircleIcon } from \"lucide-react\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/new-york-v4/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuDemo() {\n  const isMobile = useIsMobile()\n\n  return (\n    <NavigationMenu viewport={isMobile}>\n      <NavigationMenuList className=\"flex-wrap\">\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Home</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]\">\n              <li className=\"row-span-3\">\n                <NavigationMenuLink asChild>\n                  <a\n                    className=\"flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b from-muted/50 to-muted p-4 no-underline outline-hidden transition-all duration-200 select-none focus:shadow-md md:p-6\"\n                    href=\"/\"\n                  >\n                    <div className=\"mb-2 text-lg font-medium sm:mt-4\">\n                      shadcn/ui\n                    </div>\n                    <p className=\"text-sm leading-tight text-muted-foreground\">\n                      Beautifully designed components built with Tailwind CSS.\n                    </p>\n                  </a>\n                </NavigationMenuLink>\n              </li>\n              <ListItem href=\"/docs\" title=\"Introduction\">\n                Re-usable components built using Radix UI and Tailwind CSS.\n              </ListItem>\n              <ListItem href=\"/docs/installation\" title=\"Installation\">\n                How to install dependencies and structure your app.\n              </ListItem>\n              <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                Styles for headings, paragraphs, lists...etc\n              </ListItem>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid gap-2 sm:w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n              {components.map((component) => (\n                <ListItem\n                  key={component.title}\n                  title={component.title}\n                  href={component.href}\n                >\n                  {component.description}\n                </ListItem>\n              ))}\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem>\n          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>\n            <Link href=\"/docs\">Docs</Link>\n          </NavigationMenuLink>\n        </NavigationMenuItem>\n        <NavigationMenuItem className=\"hidden md:block\">\n          <NavigationMenuTrigger>List</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[300px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Components</div>\n                    <div className=\"text-muted-foreground\">\n                      Browse all components in the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Documentation</div>\n                    <div className=\"text-muted-foreground\">\n                      Learn how to use the library.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">\n                    <div className=\"font-medium\">Blog</div>\n                    <div className=\"text-muted-foreground\">\n                      Read our latest blog posts.\n                    </div>\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem className=\"hidden md:block\">\n          <NavigationMenuTrigger>Simple</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Components</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Documentation</Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\">Blocks</Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n        <NavigationMenuItem className=\"hidden md:block\">\n          <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n          <NavigationMenuContent>\n            <ul className=\"grid w-[200px] gap-4\">\n              <li>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleHelpIcon />\n                    Backlog\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleIcon />\n                    To Do\n                  </Link>\n                </NavigationMenuLink>\n                <NavigationMenuLink asChild>\n                  <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                    <CircleCheckIcon />\n                    Done\n                  </Link>\n                </NavigationMenuLink>\n              </li>\n            </ul>\n          </NavigationMenuContent>\n        </NavigationMenuItem>\n      </NavigationMenuList>\n    </NavigationMenu>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"text-sm leading-none font-medium\">{title}</div>\n          <p className=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n            {children}\n          </p>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/navigation-menu.json b/apps/v4/public/r/styles/new-york-v4/navigation-menu.json
index e1727976e8..895989e862 100644
--- a/apps/v4/public/r/styles/new-york-v4/navigation-menu.json
+++ b/apps/v4/public/r/styles/new-york-v4/navigation-menu.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\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-1\",\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 inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1\"\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      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto\",\n        \"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 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-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none\",\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 bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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 { ChevronDownIcon } from \"lucide-react\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\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-1\",\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 inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\"\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      <ChevronDownIcon\n        className=\"relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]: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 pr-2.5 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 md:absolute md:w-auto\",\n        \"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-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-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-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\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-tl-sm 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/new-york-v4/popover-demo.json b/apps/v4/public/r/styles/new-york-v4/popover-demo.json
index 8767bc4fe4..50f3cf0164 100644
--- a/apps/v4/public/r/styles/new-york-v4/popover-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/popover-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/popover-demo.tsx",
-      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"leading-none font-medium\">Dimensions</h4>\n            <p className=\"text-muted-foreground text-sm\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\n\nexport default function PopoverDemo() {\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant=\"outline\">Open popover</Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-80\">\n        <div className=\"grid gap-4\">\n          <div className=\"space-y-2\">\n            <h4 className=\"leading-none font-medium\">Dimensions</h4>\n            <p className=\"text-sm text-muted-foreground\">\n              Set the dimensions for the layer.\n            </p>\n          </div>\n          <div className=\"grid gap-2\">\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"width\">Width</Label>\n              <Input\n                id=\"width\"\n                defaultValue=\"100%\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxWidth\">Max. width</Label>\n              <Input\n                id=\"maxWidth\"\n                defaultValue=\"300px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"height\">Height</Label>\n              <Input\n                id=\"height\"\n                defaultValue=\"25px\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n            <div className=\"grid grid-cols-3 items-center gap-4\">\n              <Label htmlFor=\"maxHeight\">Max. height</Label>\n              <Input\n                id=\"maxHeight\"\n                defaultValue=\"none\"\n                className=\"col-span-2 h-8\"\n              />\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/popover.json b/apps/v4/public/r/styles/new-york-v4/popover.json
index 5612761aca..b744d27759 100644
--- a/apps/v4/public/r/styles/new-york-v4/popover.json
+++ b/apps/v4/public/r/styles/new-york-v4/popover.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverAnchor,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverAnchor,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/progress.json b/apps/v4/public/r/styles/new-york-v4/progress.json
index 070fe2376d..a3016a04d2 100644
--- a/apps/v4/public/r/styles/new-york-v4/progress.json
+++ b/apps/v4/public/r/styles/new-york-v4/progress.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary h-full w-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative h-2 w-full overflow-hidden rounded-full bg-primary/20\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"h-full w-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/radio-group.json b/apps/v4/public/r/styles/new-york-v4/radio-group.json
index c32cdcbddf..11c30f0710 100644
--- a/apps/v4/public/r/styles/new-york-v4/radio-group.json
+++ b/apps/v4/public/r/styles/new-york-v4/radio-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CircleIcon } from \"lucide-react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon className=\"fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CircleIcon } from \"lucide-react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/resizable.json b/apps/v4/public/r/styles/new-york-v4/resizable.json
index 545a92269d..cf06ac176d 100644
--- a/apps/v4/public/r/styles/new-york-v4/resizable.json
+++ b/apps/v4/public/r/styles/new-york-v4/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border\">\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json b/apps/v4/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json
index 8a0af64aba..7ff08bcf91 100644
--- a/apps/v4/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/scroll-area-horizontal-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/new-york-v4/ui/scroll-area\"\n\nexport interface Artwork {\n  artist: string\n  art: string\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-96 rounded-md border whitespace-nowrap\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <Image\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n              Photo by{\" \"}\n              <span className=\"text-foreground font-semibold\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport { ScrollArea, ScrollBar } from \"@/registry/new-york-v4/ui/scroll-area\"\n\nexport interface Artwork {\n  artist: string\n  art: string\n}\n\nexport const works: Artwork[] = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyavko\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n]\n\nexport default function ScrollAreaHorizontalDemo() {\n  return (\n    <ScrollArea className=\"w-96 rounded-md border whitespace-nowrap\">\n      <div className=\"flex w-max space-x-4 p-4\">\n        {works.map((artwork) => (\n          <figure key={artwork.artist} className=\"shrink-0\">\n            <div className=\"overflow-hidden rounded-md\">\n              <Image\n                src={artwork.art}\n                alt={`Photo by ${artwork.artist}`}\n                className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                width={300}\n                height={400}\n              />\n            </div>\n            <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n              Photo by{\" \"}\n              <span className=\"font-semibold text-foreground\">\n                {artwork.artist}\n              </span>\n            </figcaption>\n          </figure>\n        ))}\n      </div>\n      <ScrollBar orientation=\"horizontal\" />\n    </ScrollArea>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/scroll-area.json b/apps/v4/public/r/styles/new-york-v4/scroll-area.json
index f1d478eb1a..3de1c279b7 100644
--- a/apps/v4/public/r/styles/new-york-v4/scroll-area.json
+++ b/apps/v4/public/r/styles/new-york-v4/scroll-area.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none\",\n        orientation === \"vertical\" &&\n          \"h-full w-2.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n          \"h-2.5 flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none\",\n        orientation === \"vertical\" &&\n          \"h-full w-2.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n          \"h-2.5 flex-col border-t border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/select.json b/apps/v4/public/r/styles/new-york-v4/select.json
index dc8726d023..ff1369b6b1 100644
--- a/apps/v4/public/r/styles/new-york-v4/select.json
+++ b/apps/v4/public/r/styles/new-york-v4/select.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_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        <ChevronDownIcon className=\"size-4 opacity-50\" />\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        className={cn(\n          \"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\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          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\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        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\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 { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\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-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"size-4 opacity-50\" />\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        className={cn(\n          \"relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-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          className={cn(\n            \"p-1\",\n            position === \"popper\" &&\n              \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent 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 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"select-item-indicator\"\n        className=\"absolute right-2 flex size-3.5 items-center justify-center\"\n      >\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\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(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon className=\"size-4\" />\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        \"flex cursor-default items-center justify-center py-1\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon className=\"size-4\" />\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/new-york-v4/separator-demo.json b/apps/v4/public/r/styles/new-york-v4/separator-demo.json
index 8fa75f1f52..93a278703b 100644
--- a/apps/v4/public/r/styles/new-york-v4/separator-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/separator-demo.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/separator-demo.tsx",
-      "content": "import { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm leading-none font-medium\">Radix Primitives</h4>\n        <p className=\"text-muted-foreground text-sm\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { Separator } from \"@/registry/new-york-v4/ui/separator\"\n\nexport default function SeparatorDemo() {\n  return (\n    <div>\n      <div className=\"space-y-1\">\n        <h4 className=\"text-sm leading-none font-medium\">Radix Primitives</h4>\n        <p className=\"text-sm text-muted-foreground\">\n          An open-source UI component library.\n        </p>\n      </div>\n      <Separator className=\"my-4\" />\n      <div className=\"flex h-5 items-center space-x-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/separator.json b/apps/v4/public/r/styles/new-york-v4/separator.json
index 912d276a03..48f95e98ca 100644
--- a/apps/v4/public/r/styles/new-york-v4/separator.json
+++ b/apps/v4/public/r/styles/new-york-v4/separator.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sheet.json b/apps/v4/public/r/styles/new-york-v4/sheet.json
index 0bc1d0026c..eccbb140da 100644
--- a/apps/v4/public/r/styles/new-york-v4/sheet.json
+++ b/apps/v4/public/r/styles/new-york-v4/sheet.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm\",\n          side === \"left\" &&\n            \"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm\",\n          side === \"top\" &&\n            \"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b\",\n          side === \"bottom\" &&\n            \"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none\">\n            <XIcon className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500\",\n          side === \"right\" &&\n            \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n          side === \"left\" &&\n            \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n          side === \"top\" &&\n            \"inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n          side === \"bottom\" &&\n            \"inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close className=\"absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary\">\n            <XIcon className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"font-semibold text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-01.json b/apps/v4/public/r/styles/new-york-v4/sidebar-01.json
index 4ed8897bcd..f948da285f 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-01.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-01.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -28,7 +28,7 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-02.json b/apps/v4/public/r/styles/new-york-v4/sidebar-02.json
index 4b4af5d9df..c111161135 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-02.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport { ChevronRight } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/new-york-v4/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -28,7 +28,7 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <GalleryVerticalEnd className=\"size-4\" />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && <Check className=\"ml-auto\" />}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-03.json b/apps/v4/public/r/styles/new-york-v4/sidebar-03.json
index 2d2a6d9784..aa118ad880 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-03.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-03.json
@@ -9,13 +9,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-04.json b/apps/v4/public/r/styles/new-york-v4/sidebar-04.json
index 3ff9abfb5a..cf9dfe87a5 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-04.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-04.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-05.json b/apps/v4/public/r/styles/new-york-v4/sidebar-05.json
index e000f661f1..03fa3da94b 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-05.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-05.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                      <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd, Minus, Plus } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <Plus className=\"ml-auto group-data-[state=open]/collapsible:hidden\" />\n                      <Minus className=\"ml-auto group-data-[state=closed]/collapsible:hidden\" />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-06.json b/apps/v4/public/r/styles/new-york-v4/sidebar-06.json
index 48ebda9245..2b6a810f61 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-06.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-06.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <GalleryVerticalEnd className=\"size-4\" />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -28,7 +28,7 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { SidebarInput } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button\n              className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\"\n              size=\"sm\"\n            >\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { SidebarInput } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button\n              className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\"\n              size=\"sm\"\n            >\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-07.json b/apps/v4/public/r/styles/new-york-v4/sidebar-07.json
index 2112edb71a..060b64f7fd 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-07.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-07.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -39,7 +39,7 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  <team.logo className=\"size-3.5 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <ChevronsUpDown className=\"ml-auto\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  <team.logo className=\"size-3.5 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-08.json b/apps/v4/public/r/styles/new-york-v4/sidebar-08.json
index 9a4d52ae05..fe4057f540 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-08.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-08.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-09.json b/apps/v4/public/r/styles/new-york-v4/sidebar-09.json
index 52dec16c18..bd3f3f4ee1 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-09.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-09.json
@@ -15,13 +15,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\n\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArchiveX, Command, File, Inbox, Send, Trash2 } from \"lucide-react\"\n\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\nimport { Switch } from \"@/registry/new-york-v4/ui/switch\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: Inbox,\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: File,\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: Send,\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: ArchiveX,\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: Trash2,\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <Command className=\"size-4\" />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      <item.icon />\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-10.json b/apps/v4/public/r/styles/new-york-v4/sidebar-10.json
index ad319a82be..fd89a7ae3e 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-10.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-10.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/new-york-v4/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -24,7 +24,7 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: Settings2,\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: Link,\n    },\n    {\n      label: \"Duplicate\",\n      icon: Copy,\n    },\n    {\n      label: \"Move to\",\n      icon: CornerUpRight,\n    },\n    {\n      label: \"Move to Trash\",\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: CornerUpLeft,\n    },\n    {\n      label: \"View analytics\",\n      icon: LineChart,\n    },\n    {\n      label: \"Version History\",\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: \"Show delete pages\",\n      icon: Trash,\n    },\n    {\n      label: \"Notifications\",\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: ArrowUp,\n    },\n    {\n      label: \"Export\",\n      icon: ArrowDown,\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"data-[state=open]:bg-accent h-7 w-7\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ArrowDown,\n  ArrowUp,\n  Bell,\n  Copy,\n  CornerUpLeft,\n  CornerUpRight,\n  FileText,\n  GalleryVerticalEnd,\n  LineChart,\n  Link,\n  MoreHorizontal,\n  Settings2,\n  Star,\n  Trash,\n  Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: Settings2,\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: FileText,\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: Link,\n    },\n    {\n      label: \"Duplicate\",\n      icon: Copy,\n    },\n    {\n      label: \"Move to\",\n      icon: CornerUpRight,\n    },\n    {\n      label: \"Move to Trash\",\n      icon: Trash2,\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: CornerUpLeft,\n    },\n    {\n      label: \"View analytics\",\n      icon: LineChart,\n    },\n    {\n      label: \"Version History\",\n      icon: GalleryVerticalEnd,\n    },\n    {\n      label: \"Show delete pages\",\n      icon: Trash,\n    },\n    {\n      label: \"Notifications\",\n      icon: Bell,\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: ArrowUp,\n    },\n    {\n      label: \"Export\",\n      icon: ArrowDown,\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <Star />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <MoreHorizontal />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            <item.icon /> <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -44,12 +44,12 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-11.json b/apps/v4/public/r/styles/new-york-v4/sidebar-11.json
index fb7e422283..8a64e815b3 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-11.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-11.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-12.json b/apps/v4/public/r/styles/new-york-v4/sidebar-12.json
index 78d67a0daa..70ce4d805f 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-12.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-12.json
@@ -14,23 +14,23 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-[orientation=vertical]:h-4\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york-v4/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york-v4/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york-v4/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york-v4/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx",
-      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx",
-      "content": "import { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "import { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell]]:w-[33px] [&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-13.json b/apps/v4/public/r/styles/new-york-v4/sidebar-13.json
index 86f858e236..c7fab7ff6e 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-13.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-13.json
@@ -17,7 +17,7 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Bell,\n  Check,\n  Globe,\n  Home,\n  Keyboard,\n  Link,\n  Lock,\n  Menu,\n  MessageCircle,\n  Paintbrush,\n  Settings,\n  Video,\n} from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/new-york-v4/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  nav: [\n    { name: \"Notifications\", icon: Bell },\n    { name: \"Navigation\", icon: Menu },\n    { name: \"Home\", icon: Home },\n    { name: \"Appearance\", icon: Paintbrush },\n    { name: \"Messages & media\", icon: MessageCircle },\n    { name: \"Language & region\", icon: Globe },\n    { name: \"Accessibility\", icon: Keyboard },\n    { name: \"Mark as read\", icon: Check },\n    { name: \"Audio & video\", icon: Video },\n    { name: \"Connected accounts\", icon: Link },\n    { name: \"Privacy & visibility\", icon: Lock },\n    { name: \"Advanced\", icon: Settings },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            <item.icon />\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-14.json b/apps/v4/public/r/styles/new-york-v4/sidebar-14.json
index c2a29b2720..f852c0f0aa 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-14.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-14.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-15.json b/apps/v4/public/r/styles/new-york-v4/sidebar-15.json
index 6a6f9bfcef..6754038ebe 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-15.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-15.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-[orientation=vertical]:h-4\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx",
-      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport { Check, ChevronRight } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name} className=\"py-0\">\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <ChevronRight className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <Check className=\"hidden size-3 group-data-[active=true]/calendar-item:block\" />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx",
-      "content": "import { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "import { Calendar } from \"@/registry/new-york-v4/ui/calendar\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function DatePicker() {\n  return (\n    <SidebarGroup className=\"px-0\">\n      <SidebarGroupContent>\n        <Calendar className=\"[&_[role=gridcell]]:w-[33px] [&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "import { ChevronRight, MoreHorizontal, Plus } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <ChevronRight />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <Plus />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <MoreHorizontal />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -61,12 +61,12 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york-v4/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york-v4/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport { Plus } from \"lucide-react\"\n\nimport { Calendars } from \"@/registry/new-york-v4/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/new-york-v4/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <Plus />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Plus } from \"lucide-react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ElementType\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                <activeTeam.logo className=\"size-3\" />\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <ChevronDown className=\"opacity-50\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-16.json b/apps/v4/public/r/styles/new-york-v4/sidebar-16.json
index 9c49ed0791..3e1a7db4e1 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-16.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-16.json
@@ -15,13 +15,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/new-york-v4/blocks/sidebar-16/components/site-header\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/new-york-v4/blocks/sidebar-16/components/site-header\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  BookOpen,\n  Bot,\n  Command,\n  Frame,\n  LifeBuoy,\n  Map,\n  PieChart,\n  Send,\n  Settings2,\n  SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/new-york-v4/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: Bot,\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: BookOpen,\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: Settings2,\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: LifeBuoy,\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: Send,\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: Frame,\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: PieChart,\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: Map,\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <Command className=\"size-4\" />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -51,7 +51,7 @@
     },
     {
       "path": "registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport { useSidebar } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <SidebarIcon />\n        </Button>\n        <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport { useSidebar } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <SidebarIcon />\n        </Button>\n        <Separator orientation=\"vertical\" className=\"mr-2 h-4\" />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible.json b/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible.json
index b68e3cd314..2bb3453fba 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar-group-collapsible.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/internal/sidebar-group-collapsible.tsx",
-      "content": "\"use client\"\n\nimport { ChevronDownIcon, LifeBuoyIcon, SendIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <Collapsible defaultOpen className=\"group/collapsible\">\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  Help\n                  <ChevronDownIcon className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <LifeBuoyIcon />\n                        Support\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <SendIcon />\n                        Feedback\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { ChevronDownIcon, LifeBuoyIcon, SendIcon } from \"lucide-react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york-v4/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport default function AppSidebar() {\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarContent>\n          <Collapsible defaultOpen className=\"group/collapsible\">\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  Help\n                  <ChevronDownIcon className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180\" />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <LifeBuoyIcon />\n                        Support\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                    <SidebarMenuItem>\n                      <SidebarMenuButton>\n                        <SendIcon />\n                        Feedback\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        </SidebarContent>\n      </Sidebar>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar.json b/apps/v4/public/r/styles/new-york-v4/sidebar.json
index 10e78fe574..21c5a35444 100644
--- a/apps/v4/public/r/styles/new-york-v4/sidebar.json
+++ b/apps/v4/public/r/styles/new-york-v4/sidebar.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { PanelLeftIcon } from \"lucide-react\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/new-york-v4/ui/sheet\"\nimport { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\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      <TooltipProvider delayDuration={0}>\n        <div\n          data-slot=\"sidebar-wrapper\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH,\n              \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n              ...style,\n            } as React.CSSProperties\n          }\n          className={cn(\n            \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </TooltipProvider>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\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\"\n      className={cn(\"size-7\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col\",\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\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-1\", 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 flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] 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 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\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-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5\",\n        \"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        \"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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\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 { PanelLeftIcon } from \"lucide-react\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/new-york-v4/ui/sheet\"\nimport { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/registry/new-york-v4/ui/tooltip\"\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      <TooltipProvider delayDuration={0}>\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      </TooltipProvider>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\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          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        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n          side === \"left\"\n            ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n            : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\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 h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm\"\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\"\n      className={cn(\"size-7\", className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <PanelLeftIcon />\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 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex\",\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\",\n        \"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\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(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-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-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\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-1\", 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 flex w-full items-center gap-2 overflow-hidden rounded-md p-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-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\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-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:absolute after:-inset-2 md:after:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const width = React.useMemo(() => {\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\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\",\n        \"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-md px-2 text-sidebar-foreground ring-sidebar-ring outline-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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        size === \"sm\" && \"text-xs\",\n        size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\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/new-york-v4/signup-02.json b/apps/v4/public/r/styles/new-york-v4/signup-02.json
index a847556d64..9510c6142e 100644
--- a/apps/v4/public/r/styles/new-york-v4/signup-02.json
+++ b/apps/v4/public/r/styles/new-york-v4/signup-02.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/signup-02/page.tsx",
-      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { SignupForm } from \"@/registry/new-york-v4/blocks/signup-02/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <GalleryVerticalEnd className=\"size-4\" />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { SignupForm } from \"@/registry/new-york-v4/blocks/signup-02/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <GalleryVerticalEnd className=\"size-4\" />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input id=\"password\" type=\"password\" required />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input id=\"confirm-password\" type=\"password\" required />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator>Or continue with</FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input id=\"password\" type=\"password\" required />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input id=\"confirm-password\" type=\"password\" required />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator>Or continue with</FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/signup-03.json b/apps/v4/public/r/styles/new-york-v4/signup-03.json
index 11654ae3e7..e64ec19d06 100644
--- a/apps/v4/public/r/styles/new-york-v4/signup-03.json
+++ b/apps/v4/public/r/styles/new-york-v4/signup-03.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/signup-03/page.tsx",
-      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { SignupForm } from \"@/registry/new-york-v4/blocks/signup-03/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <GalleryVerticalEnd className=\"size-4\" />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { GalleryVerticalEnd } from \"lucide-react\"\n\nimport { SignupForm } from \"@/registry/new-york-v4/blocks/signup-03/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <GalleryVerticalEnd className=\"size-4\" />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/new-york-v4/signup-04.json b/apps/v4/public/r/styles/new-york-v4/signup-04.json
index 8d1f8ef1fc..aa29a34efa 100644
--- a/apps/v4/public/r/styles/new-york-v4/signup-04.json
+++ b/apps/v4/public/r/styles/new-york-v4/signup-04.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/new-york-v4/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/new-york-v4/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/new-york-v4/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/new-york-v4/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Card, CardContent } from \"@/registry/new-york-v4/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/new-york-v4/ui/field\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/signup-05.json b/apps/v4/public/r/styles/new-york-v4/signup-05.json
index b3483c5210..566f9d8e82 100644
--- a/apps/v4/public/r/styles/new-york-v4/signup-05.json
+++ b/apps/v4/public/r/styles/new-york-v4/signup-05.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/new-york-v4/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/new-york-v4/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/new-york-v4/skeleton.json b/apps/v4/public/r/styles/new-york-v4/skeleton.json
index f4ce1190e5..c3fb6e1ea6 100644
--- a/apps/v4/public/r/styles/new-york-v4/skeleton.json
+++ b/apps/v4/public/r/styles/new-york-v4/skeleton.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-accent animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-accent\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/slider.json b/apps/v4/public/r/styles/new-york-v4/slider.json
index de101a56dd..170ce108a4 100644
--- a/apps/v4/public/r/styles/new-york-v4/slider.json
+++ b/apps/v4/public/r/styles/new-york-v4/slider.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(\n            \"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className={cn(\n          \"relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5\"\n        )}\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className={cn(\n            \"absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\"\n          )}\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/switch.json b/apps/v4/public/r/styles/new-york-v4/switch.json
index 6d99d98da8..2262b85e62 100644
--- a/apps/v4/public/r/styles/new-york-v4/switch.json
+++ b/apps/v4/public/r/styles/new-york-v4/switch.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/table.json b/apps/v4/public/r/styles/new-york-v4/table.json
index 5fcd65eda7..2ad5f1e9a3 100644
--- a/apps/v4/public/r/styles/new-york-v4/table.json
+++ b/apps/v4/public/r/styles/new-york-v4/table.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/tabs.json b/apps/v4/public/r/styles/new-york-v4/tabs.json
index 094295d1e2..f6d48c9330 100644
--- a/apps/v4/public/r/styles/new-york-v4/tabs.json
+++ b/apps/v4/public/r/styles/new-york-v4/tabs.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/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 \"@/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      orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_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-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent\",\n        \"data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=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 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 \"@/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      orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-[orientation=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 rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none\",\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-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start 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 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none 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-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent\",\n        \"data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=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 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/new-york-v4/textarea-with-text.json b/apps/v4/public/r/styles/new-york-v4/textarea-with-text.json
index e3a8cbda32..46bd6637c4 100644
--- a/apps/v4/public/r/styles/new-york-v4/textarea-with-text.json
+++ b/apps/v4/public/r/styles/new-york-v4/textarea-with-text.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/textarea-with-text.tsx",
-      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaWithText() {\n  return (\n    <div className=\"grid w-full gap-3\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n      <p className=\"text-muted-foreground text-sm\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  )\n}\n",
+      "content": "import { Label } from \"@/registry/new-york-v4/ui/label\"\nimport { Textarea } from \"@/registry/new-york-v4/ui/textarea\"\n\nexport default function TextareaWithText() {\n  return (\n    <div className=\"grid w-full gap-3\">\n      <Label htmlFor=\"message-2\">Your Message</Label>\n      <Textarea placeholder=\"Type your message here.\" id=\"message-2\" />\n      <p className=\"text-sm text-muted-foreground\">\n        Your message will be copied to the support team.\n      </p>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/textarea.json b/apps/v4/public/r/styles/new-york-v4/textarea.json
index f18e43f860..dba738e6c2 100644
--- a/apps/v4/public/r/styles/new-york-v4/textarea.json
+++ b/apps/v4/public/r/styles/new-york-v4/textarea.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/toggle.json b/apps/v4/public/r/styles/new-york-v4/toggle.json
index c0bef02872..ec675c4aa1 100644
--- a/apps/v4/public/r/styles/new-york-v4/toggle.json
+++ b/apps/v4/public/r/styles/new-york-v4/toggle.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/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 \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant,\n  size,\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 \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground 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:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 min-w-9 px-2\",\n        sm: \"h-8 min-w-8 px-1.5\",\n        lg: \"h-10 min-w-10 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant,\n  size,\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/new-york-v4/tooltip.json b/apps/v4/public/r/styles/new-york-v4/tooltip.json
index f2322c68a3..37593cb498 100644
--- a/apps/v4/public/r/styles/new-york-v4/tooltip.json
+++ b/apps/v4/public/r/styles/new-york-v4/tooltip.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-demo.json b/apps/v4/public/r/styles/new-york-v4/typography-demo.json
index d5e70c3d47..28be842cd1 100644
--- a/apps/v4/public/r/styles/new-york-v4/typography-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/typography-demo.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/typography-demo.tsx",
-      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight text-balance\">\n        Taxing Laughter: The Joke Tax Chronicles\n      </h1>\n      <p className=\"text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King&apos;s Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"text-primary font-medium underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so\n        it&apos;s only fair that they should pay for the privilege.&quot;\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king&apos;s subjects were not amused. They grumbled and complained,\n        but the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king&apos;s\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester&apos;s Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king&apos;s pillow, in his\n        soup, even in the royal toilet. The king was furious, but he\n        couldn&apos;t seem to stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn&apos;t help but laugh.\n        And once they started laughing, they couldn&apos;t stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People&apos;s Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King&apos;s Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People&apos;s happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"even:bg-muted m-0 border-t p-0\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
+      "content": "export default function TypographyDemo() {\n  return (\n    <div>\n      <h1 className=\"scroll-m-20 text-4xl font-extrabold tracking-tight text-balance\">\n        Taxing Laughter: The Joke Tax Chronicles\n      </h1>\n      <p className=\"text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6\">\n        Once upon a time, in a far-off land, there was a very lazy king who\n        spent all day lounging on his throne. One day, his advisors came to him\n        with a problem: the kingdom was running out of money.\n      </p>\n      <h2 className=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\">\n        The King&apos;s Plan\n      </h2>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king thought long and hard, and finally came up with{\" \"}\n        <a\n          href=\"#\"\n          className=\"font-medium text-primary underline underline-offset-4\"\n        >\n          a brilliant plan\n        </a>\n        : he would tax the jokes in the kingdom.\n      </p>\n      <blockquote className=\"mt-6 border-l-2 pl-6 italic\">\n        &quot;After all,&quot; he said, &quot;everyone enjoys a good joke, so\n        it&apos;s only fair that they should pay for the privilege.&quot;\n      </blockquote>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The Joke Tax\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king&apos;s subjects were not amused. They grumbled and complained,\n        but the king was firm:\n      </p>\n      <ul className=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n        <li>1st level of puns: 5 gold coins</li>\n        <li>2nd level of jokes: 10 gold coins</li>\n        <li>3rd level of one-liners : 20 gold coins</li>\n      </ul>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        As a result, people stopped telling jokes, and the kingdom fell into a\n        gloom. But there was one person who refused to let the king&apos;s\n        foolishness get him down: a court jester named Jokester.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        Jokester&apos;s Revolt\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        Jokester began sneaking into the castle in the middle of the night and\n        leaving jokes all over the place: under the king&apos;s pillow, in his\n        soup, even in the royal toilet. The king was furious, but he\n        couldn&apos;t seem to stop Jokester.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        And then, one day, the people of the kingdom discovered that the jokes\n        left by Jokester were so funny that they couldn&apos;t help but laugh.\n        And once they started laughing, they couldn&apos;t stop.\n      </p>\n      <h3 className=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n        The People&apos;s Rebellion\n      </h3>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The people of the kingdom, feeling uplifted by the laughter, started to\n        tell jokes and puns again, and soon the entire kingdom was in on the\n        joke.\n      </p>\n      <div className=\"my-6 w-full overflow-y-auto\">\n        <table className=\"w-full\">\n          <thead>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                King&apos;s Treasury\n              </th>\n              <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n                People&apos;s happiness\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Empty\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Overflowing\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Modest\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Satisfied\n              </td>\n            </tr>\n            <tr className=\"m-0 border-t p-0 even:bg-muted\">\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Full\n              </td>\n              <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n                Ecstatic\n              </td>\n            </tr>\n          </tbody>\n        </table>\n      </div>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The king, seeing how much happier his subjects were, realized the error\n        of his ways and repealed the joke tax. Jokester was declared a hero, and\n        the kingdom lived happily ever after.\n      </p>\n      <p className=\"leading-7 [&:not(:first-child)]:mt-6\">\n        The moral of the story is: never underestimate the power of a good laugh\n        and always be careful of bad ideas.\n      </p>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-inline-code.json b/apps/v4/public/r/styles/new-york-v4/typography-inline-code.json
index 3528f1a037..2413fc9585 100644
--- a/apps/v4/public/r/styles/new-york-v4/typography-inline-code.json
+++ b/apps/v4/public/r/styles/new-york-v4/typography-inline-code.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/typography-inline-code.tsx",
-      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
+      "content": "export default function TypographyInlineCode() {\n  return (\n    <code className=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\">\n      @radix-ui/react-alert-dialog\n    </code>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-lead.json b/apps/v4/public/r/styles/new-york-v4/typography-lead.json
index 41622c51dc..499cde3dc2 100644
--- a/apps/v4/public/r/styles/new-york-v4/typography-lead.json
+++ b/apps/v4/public/r/styles/new-york-v4/typography-lead.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/typography-lead.tsx",
-      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-muted-foreground text-xl\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
+      "content": "export default function TypographyLead() {\n  return (\n    <p className=\"text-xl text-muted-foreground\">\n      A modal dialog that interrupts the user with important content and expects\n      a response.\n    </p>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-muted.json b/apps/v4/public/r/styles/new-york-v4/typography-muted.json
index 0da0cf5503..c90fd011ba 100644
--- a/apps/v4/public/r/styles/new-york-v4/typography-muted.json
+++ b/apps/v4/public/r/styles/new-york-v4/typography-muted.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/typography-muted.tsx",
-      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-muted-foreground text-sm\">Enter your email address.</p>\n  )\n}\n",
+      "content": "export default function TypographyMuted() {\n  return (\n    <p className=\"text-sm text-muted-foreground\">Enter your email address.</p>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/typography-table.json b/apps/v4/public/r/styles/new-york-v4/typography-table.json
index 5a9c33eb89..3861484cca 100644
--- a/apps/v4/public/r/styles/new-york-v4/typography-table.json
+++ b/apps/v4/public/r/styles/new-york-v4/typography-table.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/typography-table.tsx",
-      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King&apos;s Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People&apos;s happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"even:bg-muted m-0 border-t p-0\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
+      "content": "export default function TypographyTable() {\n  return (\n    <div className=\"my-6 w-full overflow-y-auto\">\n      <table className=\"w-full\">\n        <thead>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              King&apos;s Treasury\n            </th>\n            <th className=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\">\n              People&apos;s happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Empty\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Overflowing\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Modest\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Satisfied\n            </td>\n          </tr>\n          <tr className=\"m-0 border-t p-0 even:bg-muted\">\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Full\n            </td>\n            <td className=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\">\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/accordion-example.json b/apps/v4/public/r/styles/radix-lyra/accordion-example.json
index d40a63dd32..155a825e53 100644
--- a/apps/v4/public/r/styles/radix-lyra/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-lyra/ui/accordion\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-lyra/ui/accordion\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/accordion.json b/apps/v4/public/r/styles/radix-lyra/accordion.json
index 87634341f0..9fc9d1d3cd 100644
--- a/apps/v4/public/r/styles/radix-lyra/accordion.json
+++ b/apps/v4/public/r/styles/radix-lyra/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-none border border-transparent py-2.5 text-left text-xs font-medium transition-all outline-none hover:underline focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-xs\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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 rounded-none border border-transparent py-2.5 text-left text-xs font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:after:border-ring 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-xs 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-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/alert-dialog.json b/apps/v4/public/r/styles/radix-lyra/alert-dialog.json
index 55f1caf3da..c204f25aee 100644
--- a/apps/v4/public/r/styles/radix-lyra/alert-dialog.json
+++ b/apps/v4/public/r/styles/radix-lyra/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-none sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-10 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/alert.json b/apps/v4/public/r/styles/radix-lyra/alert.json
index ad7f7e323c..8e74002cc3 100644
--- a/apps/v4/public/r/styles/radix-lyra/alert.json
+++ b/apps/v4/public/r/styles/radix-lyra/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\n        \"absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-none border px-2.5 py-2 text-left text-xs has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\n        \"absolute top-[calc(--spacing(1.25))] right-[calc(--spacing(1.25))]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-lyra/aspect-ratio-example.json
index 236e8912df..41d6183e3c 100644
--- a/apps/v4/public/r/styles/radix-lyra/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { AspectRatio } from \"@/registry/radix-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { AspectRatio } from \"@/registry/radix-lyra/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/aspect-ratio.json b/apps/v4/public/r/styles/radix-lyra/aspect-ratio.json
index 3a8f195564..1832974b92 100644
--- a/apps/v4/public/r/styles/radix-lyra/aspect-ratio.json
+++ b/apps/v4/public/r/styles/radix-lyra/aspect-ratio.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/avatar.json b/apps/v4/public/r/styles/radix-lyra/avatar.json
index 26413492d7..2f7c9c2b31 100644
--- a/apps/v4/public/r/styles/radix-lyra/avatar.json
+++ b/apps/v4/public/r/styles/radix-lyra/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-xs ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/badge.json b/apps/v4/public/r/styles/radix-lyra/badge.json
index 9a686aa980..6e7aedf60b 100644
--- a/apps/v4/public/r/styles/radix-lyra/badge.json
+++ b/apps/v4/public/r/styles/radix-lyra/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/badge.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-none border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-none border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/breadcrumb.json b/apps/v4/public/r/styles/radix-lyra/breadcrumb.json
index f44027c47a..c4c4a949c9 100644
--- a/apps/v4/public/r/styles/radix-lyra/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-lyra/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs wrap-break-word\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-xs wrap-break-word text-muted-foreground\",\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\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/button-group.json b/apps/v4/public/r/styles/radix-lyra/button-group.json
index 3b91f90547..3c1921ddd1 100644
--- a/apps/v4/public/r/styles/radix-lyra/button-group.json
+++ b/apps/v4/public/r/styles/radix-lyra/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"bg-muted flex items-center gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch rounded-none *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-none border bg-muted px-2.5 text-xs font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/button.json b/apps/v4/public/r/styles/radix-lyra/button.json
index 5921103219..6d4ccfcfbb 100644
--- a/apps/v4/public/r/styles/radix-lyra/button.json
+++ b/apps/v4/public/r/styles/radix-lyra/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary:\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-none\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 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 [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\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-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-none px-2.5 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-none [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-none\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/calendar-example.json b/apps/v4/public/r/styles/radix-lyra/calendar-example.json
index 720392f3b4..83fa26a131 100644
--- a/apps/v4/public/r/styles/radix-lyra/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-lyra/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-lyra/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/calendar.json b/apps/v4/public/r/styles/radix-lyra/calendar.json
index 6e61a8f463..e18cf0aa9d 100644
--- a/apps/v4/public/r/styles/radix-lyra/calendar.json
+++ b/apps/v4/public/r/styles/radix-lyra/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-2 [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-2 [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/card-example.json b/apps/v4/public/r/styles/radix-lyra/card-example.json
index 208dec489a..6e5bd0f5d7 100644
--- a/apps/v4/public/r/styles/radix-lyra/card-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center style-nova:mt-2\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/card.json b/apps/v4/public/r/styles/radix-lyra/card.json
index 818ed15278..6d67d6749b 100644
--- a/apps/v4/public/r/styles/radix-lyra/card.json
+++ b/apps/v4/public/r/styles/radix-lyra/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-none py-4 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-sm font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-none border-t p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-4 overflow-hidden rounded-none bg-card py-4 text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-none px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-sm font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-none border-t p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/cards.json b/apps/v4/public/r/styles/radix-lyra/cards.json
new file mode 100644
index 0000000000..8114136c31
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/cards.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cards",
+  "title": "Cards",
+  "registryDependencies": [
+    "alert-dialog",
+    "avatar",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "combobox",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "label",
+    "popover",
+    "radio-group",
+    "select",
+    "separator",
+    "sheet",
+    "slider",
+    "spinner",
+    "switch",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-lyra/blocks/cards.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-lyra/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-lyra/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\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 { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-lyra/ui/sheet\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Spinner } from \"@/registry/radix-lyra/ui/spinner\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/carousel.json b/apps/v4/public/r/styles/radix-lyra/carousel.json
index f942430b20..d9eb7b5910 100644
--- a/apps/v4/public/r/styles/radix-lyra/carousel.json
+++ b/apps/v4/public/r/styles/radix-lyra/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/chart-example.json b/apps/v4/public/r/styles/radix-lyra/chart-example.json
index 0a33abec33..9ba67917ba 100644
--- a/apps/v4/public/r/styles/radix-lyra/chart-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/chart.json b/apps/v4/public/r/styles/radix-lyra/chart.json
index d83a445bce..880b88b1bd 100644
--- a/apps/v4/public/r/styles/radix-lyra/chart.json
+++ b/apps/v4/public/r/styles/radix-lyra/chart.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-none border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/chatgpt.json b/apps/v4/public/r/styles/radix-lyra/chatgpt.json
deleted file mode 100644
index d5e5ce94c8..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-lyra/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-lyra/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                    remixicon=\"RiAttachmentLine\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                    remixicon=\"RiSparklingLine\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                    remixicon=\"RiMagicLine\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                        remixicon=\"RiHand\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                        remixicon=\"RiBookOpenLine\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                        remixicon=\"RiGlobeLine\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                        remixicon=\"RiPencilLine\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          remixicon=\"RiFolderLine\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        remixicon=\"RiCheckboxCircleLine\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/checkbox.json b/apps/v4/public/r/styles/radix-lyra/checkbox.json
index 04e6f67b6f..84eb8169f0 100644
--- a/apps/v4/public/r/styles/radix-lyra/checkbox.json
+++ b/apps/v4/public/r/styles/radix-lyra/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-none border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-none border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/collapsible-example.json b/apps/v4/public/r/styles/radix-lyra/collapsible-example.json
index 2f830e6dc9..8d0c4ce2a8 100644
--- a/apps/v4/public/r/styles/radix-lyra/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/collapsible-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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/collapsible.json b/apps/v4/public/r/styles/radix-lyra/collapsible.json
index 177a23d395..5f4fd59280 100644
--- a/apps/v4/public/r/styles/radix-lyra/collapsible.json
+++ b/apps/v4/public/r/styles/radix-lyra/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/combobox-example.json b/apps/v4/public/r/styles/radix-lyra/combobox-example.json
index d6bd3f66ce..25006eff32 100644
--- a/apps/v4/public/r/styles/radix-lyra/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-lyra/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-lyra/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/combobox.json b/apps/v4/public/r/styles/radix-lyra/combobox.json
index f2619ba9b2..8cd6671023 100644
--- a/apps/v4/public/r/styles/radix-lyra/combobox.json
+++ b/apps/v4/public/r/styles/radix-lyra/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-4\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs 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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\",\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-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-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 overflow-y-auto overscroll-contain 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 rounded-none py-2 pr-8 pl-2 text-xs 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(\"px-2 py-2 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-xs 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 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-8 flex-wrap items-center gap-1 rounded-none border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:border-ring focus-within:ring-1 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-1 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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.25))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/command.json b/apps/v4/public/r/styles/radix-lyra/command.json
index 8a910af431..708ba7cb1e 100644
--- a/apps/v4/public/r/styles/radix-lyra/command.json
+++ b/apps/v4/public/r/styles/radix-lyra/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-none p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-0 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-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs\",\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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_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=\"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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\",\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-lyra/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-none 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-none p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"border-b pb-0\">\n      <InputGroup className=\"h-8 border-none border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-0 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-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:text-muted-foreground\",\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(\"-mx-1 h-px bg-border\", 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-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/component-example.json b/apps/v4/public/r/styles/radix-lyra/component-example.json
index af32f23a07..88a760890e 100644
--- a/apps/v4/public/r/styles/radix-lyra/component-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-lyra/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-lyra/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/context-menu.json b/apps/v4/public/r/styles/radix-lyra/context-menu.json
index 8143ba97ac..ad0135e9c6 100644
--- a/apps/v4/public/r/styles/radix-lyra/context-menu.json
+++ b/apps/v4/public/r/styles/radix-lyra/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none shadow-md ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none data-inset:pl-7 [&_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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-none border shadow-lg duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\",\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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-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-[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 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-none border bg-popover text-popover-foreground shadow-lg 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 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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-2 py-2 text-xs text-muted-foreground data-inset:pl-7\",\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 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/dashboard-01.json b/apps/v4/public/r/styles/radix-lyra/dashboard-01.json
index 8e7db3cfab..2d3cb3a308 100644
--- a/apps/v4/public/r/styles/radix-lyra/dashboard-01.json
+++ b/apps/v4/public/r/styles/radix-lyra/dashboard-01.json
@@ -57,17 +57,17 @@
     },
     {
       "path": "registry/radix-lyra/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-lyra/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-lyra/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"data-[state=open]:bg-muted text-muted-foreground flex size-8\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-lyra/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-lyra/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-lyra/blocks/dashboard-01/components/nav-documents.tsx",
-      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"data-[state=open]:bg-accent rounded-sm\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-lyra/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/radix-lyra/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-lyra/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-lyra/demo.json b/apps/v4/public/r/styles/radix-lyra/demo.json
new file mode 100644
index 0000000000..a26eec0bec
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-lyra/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/dialog-example.json b/apps/v4/public/r/styles/radix-lyra/dialog-example.json
index d091a70e86..952e7e4cd0 100644
--- a/apps/v4/public/r/styles/radix-lyra/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/dialog.json b/apps/v4/public/r/styles/radix-lyra/dialog.json
index 75ee4c7961..780e14d16f 100644
--- a/apps/v4/public/r/styles/radix-lyra/dialog.json
+++ b/apps/v4/public/r/styles/radix-lyra/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none p-4 text-xs/relaxed ring-1 duration-100 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-background p-4 text-xs/relaxed ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/direction.json b/apps/v4/public/r/styles/radix-lyra/direction.json
index d6755b2053..daa024a9c6 100644
--- a/apps/v4/public/r/styles/radix-lyra/direction.json
+++ b/apps/v4/public/r/styles/radix-lyra/direction.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+      "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/drawer-example.json b/apps/v4/public/r/styles/radix-lyra/drawer-example.json
index df086c0e59..37a14ec2bb 100644
--- a/apps/v4/public/r/styles/radix-lyra/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-lyra/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-lyra/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/drawer.json b/apps/v4/public/r/styles/radix-lyra/drawer.json
index d23919497c..5dc9ce8266 100644
--- a/apps/v4/public/r/styles/radix-lyra/drawer.json
+++ b/apps/v4/public/r/styles/radix-lyra/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-xs/relaxed data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-none data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-none data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-none data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-none data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-none bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json
index 212e1e1f4e..6a3d879812 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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json b/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json
index 10db571a42..5376d78739 100644
--- a/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none shadow-md ring-1 duration-100 data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\",\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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none data-inset:pl-7 [&_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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-none shadow-lg ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-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-[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 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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-2 py-2 text-xs text-muted-foreground data-inset:pl-7\",\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 h-px bg-border\", 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-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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 z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/elevenlabs.json b/apps/v4/public/r/styles/radix-lyra/elevenlabs.json
deleted file mode 100644
index 4d7139ad74..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-lyra/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/empty.json b/apps/v4/public/r/styles/radix-lyra/empty.json
index 6808e29b8d..d658725fe9 100644
--- a/apps/v4/public/r/styles/radix-lyra/empty.json
+++ b/apps/v4/public/r/styles/radix-lyra/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-none border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-none [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-xs text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-none border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-none bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-xs text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/example.json b/apps/v4/public/r/styles/radix-lyra/example.json
index 70d4a142ee..5384d66e3d 100644
--- a/apps/v4/public/r/styles/radix-lyra/example.json
+++ b/apps/v4/public/r/styles/radix-lyra/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/field.json b/apps/v4/public/r/styles/radix-lyra/field.json
index 734b5f8fa0..00069e8645 100644
--- a/apps/v4/public/r/styles/radix-lyra/field.json
+++ b/apps/v4/public/r/styles/radix-lyra/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-xs/relaxed leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-xs font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/font-dm-sans.json b/apps/v4/public/r/styles/radix-lyra/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/radix-lyra/font-dm-sans.json
+++ b/apps/v4/public/r/styles/radix-lyra/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-lyra/font-geist-sans.json b/apps/v4/public/r/styles/radix-lyra/font-geist-sans.json
deleted file mode 100644
index a60a347fd3..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/font-geist-sans.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
-  "type": "registry:font",
-  "font": {
-    "family": "'Geist Variable', sans-serif",
-    "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
-    "subsets": [
-      "latin"
-    ]
-  }
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/font-jetbrains-mono.json b/apps/v4/public/r/styles/radix-lyra/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/radix-lyra/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/radix-lyra/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/radix-lyra/font-lora.json b/apps/v4/public/r/styles/radix-lyra/font-lora.json
new file mode 100644
index 0000000000..cacd01a3f0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/font-lora.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-lora",
+  "title": "Lora",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/font-merriweather.json b/apps/v4/public/r/styles/radix-lyra/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/font-noto-serif.json b/apps/v4/public/r/styles/radix-lyra/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/font-outfit.json b/apps/v4/public/r/styles/radix-lyra/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/radix-lyra/font-outfit.json
+++ b/apps/v4/public/r/styles/radix-lyra/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-lyra/font-playfair-display.json b/apps/v4/public/r/styles/radix-lyra/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/font-public-sans.json b/apps/v4/public/r/styles/radix-lyra/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/radix-lyra/font-public-sans.json
+++ b/apps/v4/public/r/styles/radix-lyra/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-lyra/font-raleway.json b/apps/v4/public/r/styles/radix-lyra/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/radix-lyra/font-raleway.json
+++ b/apps/v4/public/r/styles/radix-lyra/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-lyra/font-roboto-slab.json b/apps/v4/public/r/styles/radix-lyra/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/font-roboto.json b/apps/v4/public/r/styles/radix-lyra/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/radix-lyra/font-roboto.json
+++ b/apps/v4/public/r/styles/radix-lyra/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-lyra/github.json b/apps/v4/public/r/styles/radix-lyra/github.json
deleted file mode 100644
index 176a53a13a..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-lyra/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\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 { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/radix-lyra/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-lyra/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\nimport { NativeSelect } from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport { Spinner } from \"@/registry/radix-lyra/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                              remixicon=\"RiMoreLine\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                          remixicon=\"RiBox1Line\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                          remixicon=\"RiFlashlightLine\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                          remixicon=\"RiHardDriveLine\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                          remixicon=\"RiShareLine\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n                remixicon=\"RiUploadLine\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                    remixicon=\"RiUploadCloudLine\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                              remixicon=\"RiGitBranchLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                              remixicon=\"RiRobotLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                          remixicon=\"RiSendPlaneLine\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                        remixicon=\"RiHomeLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                        remixicon=\"RiCircleLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                        remixicon=\"RiGitBranchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                        remixicon=\"RiGridLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                        remixicon=\"RiHardDriveLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                        remixicon=\"RiRobotLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                        remixicon=\"RiSparklingLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                        remixicon=\"RiShoppingBagLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                        remixicon=\"RiLinksLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/hover-card-example.json b/apps/v4/public/r/styles/radix-lyra/hover-card-example.json
index 7b6dd7f19c..bf26280e03 100644
--- a/apps/v4/public/r/styles/radix-lyra/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-lyra/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-lyra/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/hover-card.json b/apps/v4/public/r/styles/radix-lyra/hover-card.json
index 2ea3d3c7e4..cf2eaeb545 100644
--- a/apps/v4/public/r/styles/radix-lyra/hover-card.json
+++ b/apps/v4/public/r/styles/radix-lyra/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-none p-2.5 text-xs/relaxed shadow-md ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-none bg-popover p-2.5 text-xs/relaxed text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/index.json b/apps/v4/public/r/styles/radix-lyra/index.json
new file mode 100644
index 0000000000..69f13cef90
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/input-group-example.json b/apps/v4/public/r/styles/radix-lyra/input-group-example.json
index e1d2a4d048..0d9018dc17 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-lyra/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-lyra/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport { Spinner } from \"@/registry/radix-lyra/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-lyra/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-lyra/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport { Spinner } from \"@/registry/radix-lyra/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/input-group.json b/apps/v4/public/r/styles/radix-lyra/input-group.json
index 06b247e94d..e2b2e2efa1 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-group.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-none border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-none p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-xs [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-none border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\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-1.5 text-xs font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\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 text-xs shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"gap-1\",\n        \"icon-xs\": \"size-6 rounded-none p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-7 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-xs 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 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/input-otp-example.json b/apps/v4/public/r/styles/radix-lyra/input-otp-example.json
index 8116d520ab..ef2901e493 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/input-otp.json b/apps/v4/public/r/styles/radix-lyra/input-otp.json
index c7aa35125a..45a2660232 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-otp.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-none has-aria-invalid:ring-1\",\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none data-[active=true]:z-10 data-[active=true]:ring-1\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-lyra/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 rounded-none has-aria-invalid:border-destructive has-aria-invalid:ring-1 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-8 items-center justify-center border-y border-r border-input text-xs transition-all outline-none first:rounded-none first:border-l last:rounded-none aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-1 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/input.json b/apps/v4/public/r/styles/radix-lyra/input.json
index 836b8f7469..bc6446029a 100644
--- a/apps/v4/public/r/styles/radix-lyra/input.json
+++ b/apps/v4/public/r/styles/radix-lyra/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-none border bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 md:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-none border border-input bg-transparent px-2.5 py-1 text-xs transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/item-example.json b/apps/v4/public/r/styles/radix-lyra/item-example.json
index 0d740ef314..57b2e90479 100644
--- a/apps/v4/public/r/styles/radix-lyra/item-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/item.json b/apps/v4/public/r/styles/radix-lyra/item.json
index cdf4bdf5af..b4e140ef5c 100644
--- a/apps/v4/public/r/styles/radix-lyra/item.json
+++ b/apps/v4/public/r/styles/radix-lyra/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-none border text-xs w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-xs font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-xs/relaxed font-normal group-data-[size=xs]/item:text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-none border text-xs transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-xs font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-xs/relaxed font-normal text-muted-foreground group-data-[size=xs]/item:text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/kbd.json b/apps/v4/public/r/styles/radix-lyra/kbd.json
index 84360ccdea..ade8ec780f 100644
--- a/apps/v4/public/r/styles/radix-lyra/kbd.json
+++ b/apps/v4/public/r/styles/radix-lyra/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-none px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-none bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/label.json b/apps/v4/public/r/styles/radix-lyra/label.json
index 3be584f341..552172d80c 100644
--- a/apps/v4/public/r/styles/radix-lyra/label.json
+++ b/apps/v4/public/r/styles/radix-lyra/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/login-02.json b/apps/v4/public/r/styles/radix-lyra/login-02.json
index 053b816ec8..fbb1231027 100644
--- a/apps/v4/public/r/styles/radix-lyra/login-02.json
+++ b/apps/v4/public/r/styles/radix-lyra/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-lyra/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-lyra/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/login-03.json b/apps/v4/public/r/styles/radix-lyra/login-03.json
index 00c7d3b762..1acc4bfbff 100644
--- a/apps/v4/public/r/styles/radix-lyra/login-03.json
+++ b/apps/v4/public/r/styles/radix-lyra/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-lyra/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-lyra/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-lyra/login-04.json b/apps/v4/public/r/styles/radix-lyra/login-04.json
index b1651af12e..79d7b93a1f 100644
--- a/apps/v4/public/r/styles/radix-lyra/login-04.json
+++ b/apps/v4/public/r/styles/radix-lyra/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-lyra/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-lyra/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/login-05.json b/apps/v4/public/r/styles/radix-lyra/login-05.json
index b43c27b9fc..b367a4205b 100644
--- a/apps/v4/public/r/styles/radix-lyra/login-05.json
+++ b/apps/v4/public/r/styles/radix-lyra/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-lyra/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-lyra/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-lyra/menubar.json b/apps/v4/public/r/styles/radix-lyra/menubar.json
index d144c35741..27de2f184d 100644
--- a/apps/v4/public/r/styles/radix-lyra/menubar.json
+++ b/apps/v4/public/r/styles/radix-lyra/menubar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-8 items-center gap-0.5 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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none shadow-md ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-28 pl-8 text-xs outline-hidden select-none data-disabled:pointer-events-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-none py-2 pr-2 pl-8 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 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(\"px-2 py-2 text-xs data-inset:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-none select-none data-inset:pl-8 [&_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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none shadow-lg ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-8 items-center gap-0.5 rounded-none border bg-background 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-1.5 py-[calc(--spacing(0.8))] text-xs 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 z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover 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 rounded-none px-2 py-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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 rounded-none py-2 pr-28 pl-8 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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-1.5 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 rounded-none py-2 pr-2 pl-8 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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-1.5 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(\"px-2 py-2 text-xs data-inset:pl-8\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", 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-2 py-2 text-xs outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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 z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/native-select.json b/apps/v4/public/r/styles/radix-lyra/native-select.json
index b94e7af4a4..2f09bfb9c1 100644
--- a/apps/v4/public/r/styles/radix-lyra/native-select.json
+++ b/apps/v4/public/r/styles/radix-lyra/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-none border bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors outline-none select-none focus-visible:ring-1 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-1 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/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-8 w-full min-w-0 appearance-none rounded-none border border-input bg-transparent py-1 pr-8 pl-2.5 text-xs transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-none data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-2.5 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({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json b/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json
index df3ed9e8bb..5d9ec0b40a 100644
--- a/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-lyra/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-lyra/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/navigation-menu.json b/apps/v4/public/r/styles/radix-lyra/navigation-menu.json
index c9217f6654..7d445a3a0b 100644
--- a/apps/v4/public/r/styles/radix-lyra/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-lyra/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 top-0 left-0 w-full p-1 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:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-none shadow ring-1 duration-100 md:w-(--radix-navigation-menu-viewport-width)\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-none 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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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 bg-background px-2.5 py-1.5 text-xs font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 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-1 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 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 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-95\",\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-2 rounded-none p-2 text-xs transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-active:bg-muted/50 data-active:hover:bg-muted data-active:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/otp-01.json b/apps/v4/public/r/styles/radix-lyra/otp-01.json
deleted file mode 100644
index 2fead50057..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-lyra/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-lyra/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-lyra/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/otp-02.json b/apps/v4/public/r/styles/radix-lyra/otp-02.json
deleted file mode 100644
index ae92e43aa1..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-lyra/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-lyra/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-lyra/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/otp-03.json b/apps/v4/public/r/styles/radix-lyra/otp-03.json
deleted file mode 100644
index fdf4821314..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-lyra/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/radix-lyra/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-lyra/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/otp-04.json b/apps/v4/public/r/styles/radix-lyra/otp-04.json
deleted file mode 100644
index b9b036af05..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-lyra/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-lyra/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-lyra/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/otp-05.json b/apps/v4/public/r/styles/radix-lyra/otp-05.json
deleted file mode 100644
index 391fd5ed66..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-lyra/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-lyra/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-lyra/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/pagination.json b/apps/v4/public/r/styles/radix-lyra/pagination.json
index 59afa7f324..f37291c252 100644
--- a/apps/v4/public/r/styles/radix-lyra/pagination.json
+++ b/apps/v4/public/r/styles/radix-lyra/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/popover.json b/apps/v4/public/r/styles/radix-lyra/popover.json
index f0b8ad65e4..430fe7e1f3 100644
--- a/apps/v4/public/r/styles/radix-lyra/popover.json
+++ b/apps/v4/public/r/styles/radix-lyra/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-none p-2.5 text-xs shadow-md ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-none bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/preview.json b/apps/v4/public/r/styles/radix-lyra/preview.json
index 86741638a0..520fc232f8 100644
--- a/apps/v4/public/r/styles/radix-lyra/preview.json
+++ b/apps/v4/public/r/styles/radix-lyra/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -32,8 +32,8 @@
   ],
   "files": [
     {
-      "path": "registry/radix-lyra/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-lyra/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-lyra/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-lyra/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-lyra/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\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 { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-lyra/ui/sheet\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Spinner } from \"@/registry/radix-lyra/ui/spinner\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/radix-lyra/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-lyra/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-lyra/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-lyra/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-lyra/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-lyra/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-lyra/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-lyra/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-lyra/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-lyra/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-lyra/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-lyra/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-lyra/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-lyra/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-lyra/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-lyra/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-lyra/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-lyra/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-lyra/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-lyra/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-lyra/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-lyra/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-lyra/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-lyra/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-lyra/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-lyra/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-lyra/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-lyra/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-lyra/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-lyra/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-lyra/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-lyra/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-lyra/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/progress-example.json b/apps/v4/public/r/styles/radix-lyra/progress-example.json
index 0a594c3b95..aab8babbda 100644
--- a/apps/v4/public/r/styles/radix-lyra/progress-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/progress-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 { Field, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { Progress } from \"@/registry/radix-lyra/ui/progress\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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 { Field, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { Progress } from \"@/registry/radix-lyra/ui/progress\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/progress.json b/apps/v4/public/r/styles/radix-lyra/progress.json
index cbe9f05c06..c091bcfb84 100644
--- a/apps/v4/public/r/styles/radix-lyra/progress.json
+++ b/apps/v4/public/r/styles/radix-lyra/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-none\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary size-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative flex h-1 w-full items-center overflow-x-hidden rounded-none bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"size-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/radio-group.json b/apps/v4/public/r/styles/radix-lyra/radio-group.json
index d36d86828f..3e3a1c305f 100644
--- a/apps/v4/public/r/styles/radix-lyra/radio-group.json
+++ b/apps/v4/public/r/styles/radix-lyra/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/registry.json b/apps/v4/public/r/styles/radix-lyra/registry.json
index 7bd01817e4..a47dd893fc 100644
--- a/apps/v4/public/r/styles/radix-lyra/registry.json
+++ b/apps/v4/public/r/styles/radix-lyra/registry.json
@@ -2,6 +2,48 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +52,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +69,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +86,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +103,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +120,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +137,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +153,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +169,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +186,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +204,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +221,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +239,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -137,6 +257,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -147,6 +273,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -157,6 +290,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -169,6 +309,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -181,6 +328,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -191,6 +345,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -202,6 +363,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -213,6 +381,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -223,6 +398,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -233,6 +415,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -244,6 +432,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -258,6 +452,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -268,6 +469,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -279,6 +486,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -290,6 +503,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -301,6 +521,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -311,6 +537,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -321,6 +554,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -331,6 +571,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -342,6 +589,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -352,6 +605,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -362,6 +622,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -372,6 +639,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -383,6 +657,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -393,6 +674,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -403,6 +691,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -413,6 +708,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -424,6 +726,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -443,6 +752,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -453,6 +768,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -463,6 +784,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -474,6 +802,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -484,6 +819,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -494,6 +835,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -504,6 +852,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -514,6 +868,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -524,6 +885,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -534,6 +901,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -545,6 +919,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -555,6 +936,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -566,6 +954,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -576,6 +970,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -586,6 +986,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+          "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1464,6 +1870,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-lyra/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1512,7 +1945,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1543,110 +1976,7 @@
       ],
       "files": [
         {
-          "path": "registry/radix-lyra/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/radix-lyra/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-lyra/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-lyra/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-lyra/blocks/chatgpt.tsx",
+          "path": "registry/radix-lyra/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2551,7 +2881,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2563,7 +2893,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2575,7 +2905,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2587,7 +2917,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2599,7 +2929,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2614,7 +2944,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2629,6 +2959,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-lyra/resizable.json b/apps/v4/public/r/styles/radix-lyra/resizable.json
index f4d4546e87..e10b27ec8a 100644
--- a/apps/v4/public/r/styles/radix-lyra/resizable.json
+++ b/apps/v4/public/r/styles/radix-lyra/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-none\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-none bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/scroll-area-example.json b/apps/v4/public/r/styles/radix-lyra/scroll-area-example.json
index 9824072831..d0aab15bce 100644
--- a/apps/v4/public/r/styles/radix-lyra/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-lyra/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-lyra/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/scroll-area.json b/apps/v4/public/r/styles/radix-lyra/scroll-area.json
index 2891fda131..89bf205ae7 100644
--- a/apps/v4/public/r/styles/radix-lyra/scroll-area.json
+++ b/apps/v4/public/r/styles/radix-lyra/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-none\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-none bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/select.json b/apps/v4/public/r/styles/radix-lyra/select.json
index 56835732c1..0506a7060f 100644
--- a/apps/v4/public/r/styles/radix-lyra/select.json
+++ b/apps/v4/public/r/styles/radix-lyra/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"text-muted-foreground pointer-events-none size-4\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target 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 shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-2 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"bg-popover z-10 flex cursor-default items-center justify-center 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        \"bg-popover z-10 flex cursor-default items-center justify-center 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-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-none border border-input bg-transparent py-2 pr-2 pl-2.5 text-xs whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *: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:bg-input/30 dark:hover:bg-input/50 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        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 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(\"px-2 py-2 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-2 text-xs 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(\"pointer-events-none -mx-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/separator-example.json b/apps/v4/public/r/styles/radix-lyra/separator-example.json
index 1d130f617d..8b376114c8 100644
--- a/apps/v4/public/r/styles/radix-lyra/separator-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/separator.json b/apps/v4/public/r/styles/radix-lyra/separator.json
index ce9ac2b8dc..c9c2d98737 100644
--- a/apps/v4/public/r/styles/radix-lyra/separator.json
+++ b/apps/v4/public/r/styles/radix-lyra/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/sheet-example.json b/apps/v4/public/r/styles/radix-lyra/sheet-example.json
index 58d60adb18..0455ee31dc 100644
--- a/apps/v4/public/r/styles/radix-lyra/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-lyra/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-lyra/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sheet.json b/apps/v4/public/r/styles/radix-lyra/sheet.json
index 2cf17abd8f..a29155d28a 100644
--- a/apps/v4/public/r/styles/radix-lyra/sheet.json
+++ b/apps/v4/public/r/styles/radix-lyra/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-3 right-3\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 text-xs/relaxed duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col bg-background bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-3 right-3\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-01.json b/apps/v4/public/r/styles/radix-lyra/sidebar-01.json
index 26d7c0a7f6..222e79fc07 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-01.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-02.json b/apps/v4/public/r/styles/radix-lyra/sidebar-02.json
index 1c9c5c60bc..0abaad8b6a 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-02.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-lyra/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-lyra/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-lyra/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-lyra/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-03.json b/apps/v4/public/r/styles/radix-lyra/sidebar-03.json
index ce20b5c0a3..1856077b21 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-03.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-04.json b/apps/v4/public/r/styles/radix-lyra/sidebar-04.json
index d26cb70b90..039d011374 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-04.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-05.json b/apps/v4/public/r/styles/radix-lyra/sidebar-05.json
index c595db743f..d06274ac46 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-05.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-lyra/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-lyra/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-06.json b/apps/v4/public/r/styles/radix-lyra/sidebar-06.json
index bf2a1c4381..a2b5f36112 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-06.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-lyra/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-lyra/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-lyra/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-lyra/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-07.json b/apps/v4/public/r/styles/radix-lyra/sidebar-07.json
index b64286dc6a..234e5d9add 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-07.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-08.json b/apps/v4/public/r/styles/radix-lyra/sidebar-08.json
index cd5bae6b73..fcbf88dd78 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-08.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-lyra/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-lyra/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-lyra/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-lyra/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-lyra/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-lyra/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-09.json b/apps/v4/public/r/styles/radix-lyra/sidebar-09.json
index ec7caeb0d2..09ba78fa45 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-09.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-09.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-10.json b/apps/v4/public/r/styles/radix-lyra/sidebar-10.json
index ffcce9de14..c714e44c69 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-10.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-lyra/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-lyra/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"data-[state=open]:bg-accent h-7 w-7\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-11.json b/apps/v4/public/r/styles/radix-lyra/sidebar-11.json
index e8a3946f28..dcc989b1d3 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-11.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-12.json b/apps/v4/public/r/styles/radix-lyra/sidebar-12.json
index 036927e77b..109221b34a 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-12.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-lyra/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-lyra/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-lyra/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-lyra/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-13.json b/apps/v4/public/r/styles/radix-lyra/sidebar-13.json
index 1e89c4afcf..4cc1cf53f9 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-13.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-14.json b/apps/v4/public/r/styles/radix-lyra/sidebar-14.json
index 3500106c34..f07108eee8 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-14.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-15.json b/apps/v4/public/r/styles/radix-lyra/sidebar-15.json
index 3cbc97b13e..5fdaa07cdd 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-15.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/radix-lyra/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-lyra/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/radix-lyra/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-lyra/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-screen w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-lyra/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-lyra/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-lyra/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-lyra/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-16.json b/apps/v4/public/r/styles/radix-lyra/sidebar-16.json
index 42faa1d0ff..5468ebf94e 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-16.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-lyra/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-lyra/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-lyra/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-lyra/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-lyra/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-lyra/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-lyra/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-lyra/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-lyra/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-lyra/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-lyra/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-lyra/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-lyra/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-lyra/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-example.json b/apps/v4/public/r/styles/radix-lyra/sidebar-example.json
index a080a4429c..806d59deda 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-lyra/sidebar-floating-example.json
index e11147f884..7ac628c611 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-lyra/sidebar-icon-example.json
index bef5ed7157..6d2a5abfbf 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-lyra/sidebar-inset-example.json
index 9a61126c02..7e86d1ae32 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-lyra/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar.json b/apps/v4/public/r/styles/radix-lyra/sidebar.json
index 17ae408c7d..44453a1b7c 100644
--- a/apps/v4/public/r/styles/radix-lyra/sidebar.json
+++ b/apps/v4/public/r/styles/radix-lyra/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-lyra/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-lyra/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-lyra/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col 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(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-none px-2 text-xs 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        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 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-xs\", 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\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-none p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden 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 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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        \"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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-xs data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-lyra/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-lyra/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-lyra/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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-2 text-xs 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-xs\", 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\", 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 p-2 text-left text-xs 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-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"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-1.5 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-2 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-xs data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/signup-02.json b/apps/v4/public/r/styles/radix-lyra/signup-02.json
index a4674f5a21..c08fa1e06b 100644
--- a/apps/v4/public/r/styles/radix-lyra/signup-02.json
+++ b/apps/v4/public/r/styles/radix-lyra/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-lyra/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-lyra/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/signup-03.json b/apps/v4/public/r/styles/radix-lyra/signup-03.json
index 30fcd04d52..9f40f37d0e 100644
--- a/apps/v4/public/r/styles/radix-lyra/signup-03.json
+++ b/apps/v4/public/r/styles/radix-lyra/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-lyra/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-lyra/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-lyra/signup-04.json b/apps/v4/public/r/styles/radix-lyra/signup-04.json
index 106e9d4e17..c977f338fb 100644
--- a/apps/v4/public/r/styles/radix-lyra/signup-04.json
+++ b/apps/v4/public/r/styles/radix-lyra/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-lyra/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-lyra/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-lyra/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/signup-05.json b/apps/v4/public/r/styles/radix-lyra/signup-05.json
index 45162a6195..8324af0630 100644
--- a/apps/v4/public/r/styles/radix-lyra/signup-05.json
+++ b/apps/v4/public/r/styles/radix-lyra/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-lyra/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-lyra/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-lyra/skeleton.json b/apps/v4/public/r/styles/radix-lyra/skeleton.json
index 7f738bd608..d0af6a6014 100644
--- a/apps/v4/public/r/styles/radix-lyra/skeleton.json
+++ b/apps/v4/public/r/styles/radix-lyra/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-none bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/slider-example.json b/apps/v4/public/r/styles/radix-lyra/slider-example.json
index 3f2f53be1d..00343e468b 100644
--- a/apps/v4/public/r/styles/radix-lyra/slider-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/slider-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 { Label } from \"@/registry/radix-lyra/ui/label\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/slider.json b/apps/v4/public/r/styles/radix-lyra/slider.json
index d6cfe9c69f..3f4f50f824 100644
--- a/apps/v4/public/r/styles/radix-lyra/slider.json
+++ b/apps/v4/public/r/styles/radix-lyra/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"bg-muted relative grow overflow-hidden rounded-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-ring ring-ring/50 relative block size-3 shrink-0 rounded-none border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-1 focus-visible:ring-1 focus-visible:outline-hidden active:ring-1 disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-none bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"relative block size-3 shrink-0 rounded-none border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-1 focus-visible:ring-1 focus-visible:outline-hidden active:ring-1 disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/sonner.json b/apps/v4/public/r/styles/radix-lyra/sonner.json
index 4759bfebcc..cf518845ff 100644
--- a/apps/v4/public/r/styles/radix-lyra/sonner.json
+++ b/apps/v4/public/r/styles/radix-lyra/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/spinner.json b/apps/v4/public/r/styles/radix-lyra/spinner.json
index 7739714f1f..c275ef842b 100644
--- a/apps/v4/public/r/styles/radix-lyra/spinner.json
+++ b/apps/v4/public/r/styles/radix-lyra/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/style.json b/apps/v4/public/r/styles/radix-lyra/style.json
new file mode 100644
index 0000000000..9d8bb6576c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-lyra/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/switch.json b/apps/v4/public/r/styles/radix-lyra/switch.json
index af060250ed..89fd9c6b8b 100644
--- a/apps/v4/public/r/styles/radix-lyra/switch.json
+++ b/apps/v4/public/r/styles/radix-lyra/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-1 aria-invalid:ring-1 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/table.json b/apps/v4/public/r/styles/radix-lyra/table.json
index 25d04afb6c..d3c41ab49c 100644
--- a/apps/v4/public/r/styles/radix-lyra/table.json
+++ b/apps/v4/public/r/styles/radix-lyra/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-xs\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-xs\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/tabs-example.json b/apps/v4/public/r/styles/radix-lyra/tabs-example.json
index ce6c076a1b..2c67620b2a 100644
--- a/apps/v4/public/r/styles/radix-lyra/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/tabs.json b/apps/v4/public/r/styles/radix-lyra/tabs.json
index 82f9ad388a..7666826e20 100644
--- a/apps/v4/public/r/styles/radix-lyra/tabs.json
+++ b/apps/v4/public/r/styles/radix-lyra/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-none p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-xs/relaxed outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-none p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\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-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] 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 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-xs/relaxed outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/textarea.json b/apps/v4/public/r/styles/radix-lyra/textarea.json
index aaf4fdd462..8925d1d77b 100644
--- a/apps/v4/public/r/styles/radix-lyra/textarea.json
+++ b/apps/v4/public/r/styles/radix-lyra/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-none border bg-transparent px-2.5 py-2 text-xs transition-colors outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-1 md:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-none border border-input bg-transparent px-2.5 py-2 text-xs transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 md:text-xs dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/toggle-group-example.json b/apps/v4/public/r/styles/radix-lyra/toggle-group-example.json
index c4752ad109..7661e3511b 100644
--- a/apps/v4/public/r/styles/radix-lyra/toggle-group-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-lyra/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-lyra/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/toggle-group.json b/apps/v4/public/r/styles/radix-lyra/toggle-group.json
index effe8a171a..49aade3a8f 100644
--- a/apps/v4/public/r/styles/radix-lyra/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-lyra/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-lyra/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-none data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-none\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-lyra/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-none data-[size=sm]:rounded-none data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/toggle.json b/apps/v4/public/r/styles/radix-lyra/toggle.json
index 827e8e2ab6..3effe10644 100644
--- a/apps/v4/public/r/styles/radix-lyra/toggle.json
+++ b/apps/v4/public/r/styles/radix-lyra/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-none text-xs font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent\",\n      },\n      size: {\n        default: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-none px-1.5\",\n        lg: \"h-9 min-w-9 px-2.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-lyra/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-none text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]: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: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-none px-1.5\",\n        lg: \"h-9 min-w-9 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/tooltip-example.json b/apps/v4/public/r/styles/radix-lyra/tooltip-example.json
index 5fffeb5df6..e11822db91 100644
--- a/apps/v4/public/r/styles/radix-lyra/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Kbd } from \"@/registry/radix-lyra/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/tooltip.json b/apps/v4/public/r/styles/radix-lyra/tooltip.json
index e7fd9e37ab..fbc0266670 100644
--- a/apps/v4/public/r/styles/radix-lyra/tooltip.json
+++ b/apps/v4/public/r/styles/radix-lyra/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-none px-3 py-1.5 text-xs\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-none bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-lyra/vercel.json b/apps/v4/public/r/styles/radix-lyra/vercel.json
deleted file mode 100644
index 3678c280ab..0000000000
--- a/apps/v4/public/r/styles/radix-lyra/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-lyra/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-lyra/ui/alert\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Calendar } from \"@/registry/radix-lyra/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-lyra/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/radix-lyra/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/accordion-example.json b/apps/v4/public/r/styles/radix-maia/accordion-example.json
index 0f5bf72428..b5a910582a 100644
--- a/apps/v4/public/r/styles/radix-maia/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-maia/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-maia/ui/accordion\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-maia/ui/accordion\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/accordion.json b/apps/v4/public/r/styles/radix-maia/accordion.json
index b8657e14f6..11b009397f 100644
--- a/apps/v4/public/r/styles/radix-maia/accordion.json
+++ b/apps/v4/public/r/styles/radix-maia/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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(\n        \"flex w-full flex-col overflow-hidden rounded-2xl border\",\n        className\n      )}\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(\"data-open:bg-muted/50 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          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden px-4 text-sm\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/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(\n        \"flex w-full flex-col overflow-hidden rounded-2xl border\",\n        className\n      )}\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 data-open:bg-muted/50\", 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 border border-transparent p-4 text-left text-sm font-medium transition-all outline-none hover:underline 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 px-4 text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/alert-dialog.json b/apps/v4/public/r/styles/radix-maia/alert-dialog.json
index 58c4fd2aac..b8679b6739 100644
--- a/apps/v4/public/r/styles/radix-maia/alert-dialog.json
+++ b/apps/v4/public/r/styles/radix-maia/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/5 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-full sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-background p-6 ring-1 ring-foreground/5 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-16 items-center justify-center rounded-full bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/alert.json b/apps/v4/public/r/styles/radix-maia/alert.json
index b863502e67..617e8ae739 100644
--- a/apps/v4/public/r/styles/radix-maia/alert.json
+++ b/apps/v4/public/r/styles/radix-maia/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-maia/aspect-ratio-example.json
index d23ced84c8..79ede86c55 100644
--- a/apps/v4/public/r/styles/radix-maia/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-maia/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { AspectRatio } from \"@/registry/radix-maia/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { AspectRatio } from \"@/registry/radix-maia/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/aspect-ratio.json b/apps/v4/public/r/styles/radix-maia/aspect-ratio.json
index 728d6d66db..221dedbf6f 100644
--- a/apps/v4/public/r/styles/radix-maia/aspect-ratio.json
+++ b/apps/v4/public/r/styles/radix-maia/aspect-ratio.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/avatar.json b/apps/v4/public/r/styles/radix-maia/avatar.json
index c4cae41957..fa8d5989db 100644
--- a/apps/v4/public/r/styles/radix-maia/avatar.json
+++ b/apps/v4/public/r/styles/radix-maia/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/badge.json b/apps/v4/public/r/styles/radix-maia/badge.json
index 34c7c2ed54..b508417191 100644
--- a/apps/v4/public/r/styles/radix-maia/badge.json
+++ b/apps/v4/public/r/styles/radix-maia/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/badge.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/30\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border bg-input/30 text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/breadcrumb.json b/apps/v4/public/r/styles/radix-maia/breadcrumb.json
index 172664618a..0af9cedfcf 100644
--- a/apps/v4/public/r/styles/radix-maia/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-maia/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word 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(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"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-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/button-group.json b/apps/v4/public/r/styles/radix-maia/button-group.json
index 178baf9460..b230d663e6 100644
--- a/apps/v4/public/r/styles/radix-maia/button-group.json
+++ b/apps/v4/public/r/styles/radix-maia/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"bg-muted flex items-center gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-4xl border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/button.json b/apps/v4/public/r/styles/radix-maia/button.json
index be70671ae9..bb1736909b 100644
--- a/apps/v4/public/r/styles/radix-maia/button.json
+++ b/apps/v4/public/r/styles/radix-maia/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n        xs: \"h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] 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-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\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-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5\",\n        xs: \"h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        lg: \"h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/calendar-example.json b/apps/v4/public/r/styles/radix-maia/calendar-example.json
index d3e41dc5ab..fefc7b5b81 100644
--- a/apps/v4/public/r/styles/radix-maia/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-maia/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-maia/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-maia/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/calendar.json b/apps/v4/public/r/styles/radix-maia/calendar.json
index 9f591ca3a2..75e0da5da7 100644
--- a/apps/v4/public/r/styles/radix-maia/calendar.json
+++ b/apps/v4/public/r/styles/radix-maia/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/card-example.json b/apps/v4/public/r/styles/radix-maia/card-example.json
index 4510de9d26..e455545d48 100644
--- a/apps/v4/public/r/styles/radix-maia/card-example.json
+++ b/apps/v4/public/r/styles/radix-maia/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center style-nova:mt-2\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/card.json b/apps/v4/public/r/styles/radix-maia/card.json
index c40130e91f..531d8d7c06 100644
--- a/apps/v4/public/r/styles/radix-maia/card.json
+++ b/apps/v4/public/r/styles/radix-maia/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-2xl py-6 text-sm ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-2xl bg-card py-6 text-sm text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-2 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/cards.json b/apps/v4/public/r/styles/radix-maia/cards.json
new file mode 100644
index 0000000000..a197a018aa
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/cards.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cards",
+  "title": "Cards",
+  "registryDependencies": [
+    "alert-dialog",
+    "avatar",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "combobox",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "label",
+    "popover",
+    "radio-group",
+    "select",
+    "separator",
+    "sheet",
+    "slider",
+    "spinner",
+    "switch",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-maia/blocks/cards.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-maia/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-maia/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\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 { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-maia/ui/sheet\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Spinner } from \"@/registry/radix-maia/ui/spinner\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/carousel.json b/apps/v4/public/r/styles/radix-maia/carousel.json
index 43adac6b4f..14c684ec43 100644
--- a/apps/v4/public/r/styles/radix-maia/carousel.json
+++ b/apps/v4/public/r/styles/radix-maia/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/chart-example.json b/apps/v4/public/r/styles/radix-maia/chart-example.json
index f50572097e..0223e31a7f 100644
--- a/apps/v4/public/r/styles/radix-maia/chart-example.json
+++ b/apps/v4/public/r/styles/radix-maia/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/chart.json b/apps/v4/public/r/styles/radix-maia/chart.json
index e8fe3a2335..efde1cf26e 100644
--- a/apps/v4/public/r/styles/radix-maia/chart.json
+++ b/apps/v4/public/r/styles/radix-maia/chart.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/chatgpt.json b/apps/v4/public/r/styles/radix-maia/chatgpt.json
deleted file mode 100644
index 9d11260a5f..0000000000
--- a/apps/v4/public/r/styles/radix-maia/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-maia/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-maia/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                    remixicon=\"RiAttachmentLine\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                    remixicon=\"RiSparklingLine\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                    remixicon=\"RiMagicLine\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                        remixicon=\"RiHand\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                        remixicon=\"RiBookOpenLine\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                        remixicon=\"RiGlobeLine\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                        remixicon=\"RiPencilLine\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          remixicon=\"RiFolderLine\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        remixicon=\"RiCheckboxCircleLine\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/checkbox.json b/apps/v4/public/r/styles/radix-maia/checkbox.json
index ebf8a98986..1c18f1b185 100644
--- a/apps/v4/public/r/styles/radix-maia/checkbox.json
+++ b/apps/v4/public/r/styles/radix-maia/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[6px] border transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[6px] border border-input transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/collapsible-example.json b/apps/v4/public/r/styles/radix-maia/collapsible-example.json
index d0d257db74..c45987f142 100644
--- a/apps/v4/public/r/styles/radix-maia/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-maia/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/collapsible-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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/collapsible.json b/apps/v4/public/r/styles/radix-maia/collapsible.json
index 465229ba26..44627fe5d5 100644
--- a/apps/v4/public/r/styles/radix-maia/collapsible.json
+++ b/apps/v4/public/r/styles/radix-maia/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/combobox-example.json b/apps/v4/public/r/styles/radix-maia/combobox-example.json
index 3945598d77..3415d7f1a4 100644
--- a/apps/v4/public/r/styles/radix-maia/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-maia/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-maia/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-maia/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/combobox.json b/apps/v4/public/r/styles/radix-maia/combobox.json
index d7113b14e9..e4d77dba00 100644
--- a/apps/v4/public/r/styles/radix-maia/combobox.json
+++ b/apps/v4/public/r/styles/radix-maia/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-4\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm 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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\",\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-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-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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-2xl bg-popover text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 overflow-y-auto overscroll-contain p-1 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-xl 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(\"px-3.5 py-2.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\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 my-1 h-px bg-border/50\", 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-9 flex-wrap items-center gap-1.5 rounded-4xl border border-input bg-input/30 bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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-4xl bg-muted-foreground/10 px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/command.json b/apps/v4/public/r/styles/radix-maia/command.json
index 7a40510ab9..482e086e3b 100644
--- a/apps/v4/public/r/styles/radix-maia/command.json
+++ b/apps/v4/public/r/styles/radix-maia/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-4xl p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\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(\"bg-border/50 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_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=\"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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\",\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-maia/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-4xl bg-popover p-1 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-4xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-9 bg-input/30\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\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-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/component-example.json b/apps/v4/public/r/styles/radix-maia/component-example.json
index 5e1929b36c..fe6abc9ba8 100644
--- a/apps/v4/public/r/styles/radix-maia/component-example.json
+++ b/apps/v4/public/r/styles/radix-maia/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-maia/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-maia/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/context-menu.json b/apps/v4/public/r/styles/radix-maia/context-menu.json
index 1aa8fd7d4c..455cbade02 100644
--- a/apps/v4/public/r/styles/radix-maia/context-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground cn-menu-target 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-2xl p-1 shadow-2xl ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center rounded-xl px-3 py-2 text-sm outline-hidden select-none data-inset:pl-9.5 [&_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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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        \"text-muted-foreground px-3 py-2.5 text-xs 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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"cn-menu-target 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-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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-xl 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-xl 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 z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 rounded-xl 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 rounded-sm py-1.5 pr-8 pl-2 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.5 text-xs text-muted-foreground 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 my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/dashboard-01.json b/apps/v4/public/r/styles/radix-maia/dashboard-01.json
index 5273dbbb57..fa13b3a97f 100644
--- a/apps/v4/public/r/styles/radix-maia/dashboard-01.json
+++ b/apps/v4/public/r/styles/radix-maia/dashboard-01.json
@@ -57,17 +57,17 @@
     },
     {
       "path": "registry/radix-maia/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-maia/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-maia/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"data-[state=open]:bg-muted text-muted-foreground flex size-8\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-maia/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-maia/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-maia/blocks/dashboard-01/components/nav-documents.tsx",
-      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"data-[state=open]:bg-accent rounded-sm\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-maia/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/radix-maia/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-maia/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-maia/demo.json b/apps/v4/public/r/styles/radix-maia/demo.json
new file mode 100644
index 0000000000..fcf311cde5
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-maia/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/dialog-example.json b/apps/v4/public/r/styles/radix-maia/dialog-example.json
index 38476073b3..87d6bb2b49 100644
--- a/apps/v4/public/r/styles/radix-maia/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-maia/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/dialog.json b/apps/v4/public/r/styles/radix-maia/dialog.json
index e87549e57c..4af365d2f1 100644
--- a/apps/v4/public/r/styles/radix-maia/dialog.json
+++ b/apps/v4/public/r/styles/radix-maia/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/5 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-4xl bg-background p-6 text-sm ring-1 ring-foreground/5 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/direction.json b/apps/v4/public/r/styles/radix-maia/direction.json
index 0b077b1688..51516671e0 100644
--- a/apps/v4/public/r/styles/radix-maia/direction.json
+++ b/apps/v4/public/r/styles/radix-maia/direction.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+      "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/drawer-example.json b/apps/v4/public/r/styles/radix-maia/drawer-example.json
index 8d030f4969..5ee9f749ee 100644
--- a/apps/v4/public/r/styles/radix-maia/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-maia/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-maia/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-maia/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/drawer.json b/apps/v4/public/r/styles/radix-maia/drawer.json
index 9945a6dd64..0f8c06ea58 100644
--- a/apps/v4/public/r/styles/radix-maia/drawer.json
+++ b/apps/v4/public/r/styles/radix-maia/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background before:border-border group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-4 text-sm before:absolute before:inset-2 before:-z-10 before:rounded-4xl before:border before:border-border before:bg-background data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json
index a04ebff9ad..9ccd92614c 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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/dropdown-menu.json b/apps/v4/public/r/styles/radix-maia/dropdown-menu.json
index 0d9715e61c..881bbaa9eb 100644
--- a/apps/v4/public/r/styles/radix-maia/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground cn-menu-target 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-2xl p-1 shadow-2xl ring-1 duration-100 data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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        \"text-muted-foreground px-3 py-2.5 text-xs 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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-inset:pl-9.5 [&_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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground cn-menu-target z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-2xl p-1 shadow-2xl ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"cn-menu-target 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-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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-xl 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-xl 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-xl 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.5 text-xs text-muted-foreground 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 my-1 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-xl 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 z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/elevenlabs.json b/apps/v4/public/r/styles/radix-maia/elevenlabs.json
deleted file mode 100644
index f4106fd512..0000000000
--- a/apps/v4/public/r/styles/radix-maia/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-maia/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/empty.json b/apps/v4/public/r/styles/radix-maia/empty.json
index bbad55abde..f0c785d4b5 100644
--- a/apps/v4/public/r/styles/radix-maia/empty.json
+++ b/apps/v4/public/r/styles/radix-maia/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/example.json b/apps/v4/public/r/styles/radix-maia/example.json
index 7c706b7163..dc811b2c69 100644
--- a/apps/v4/public/r/styles/radix-maia/example.json
+++ b/apps/v4/public/r/styles/radix-maia/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-maia/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/field.json b/apps/v4/public/r/styles/radix-maia/field.json
index ebc2873a97..e7822b20ce 100644
--- a/apps/v4/public/r/styles/radix-maia/field.json
+++ b/apps/v4/public/r/styles/radix-maia/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\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=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/font-dm-sans.json b/apps/v4/public/r/styles/radix-maia/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/radix-maia/font-dm-sans.json
+++ b/apps/v4/public/r/styles/radix-maia/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-maia/font-geist-sans.json b/apps/v4/public/r/styles/radix-maia/font-geist-sans.json
deleted file mode 100644
index a60a347fd3..0000000000
--- a/apps/v4/public/r/styles/radix-maia/font-geist-sans.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
-  "type": "registry:font",
-  "font": {
-    "family": "'Geist Variable', sans-serif",
-    "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
-    "subsets": [
-      "latin"
-    ]
-  }
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/font-jetbrains-mono.json b/apps/v4/public/r/styles/radix-maia/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/radix-maia/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/radix-maia/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/radix-maia/font-lora.json b/apps/v4/public/r/styles/radix-maia/font-lora.json
new file mode 100644
index 0000000000..cacd01a3f0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/font-lora.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-lora",
+  "title": "Lora",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/font-merriweather.json b/apps/v4/public/r/styles/radix-maia/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/font-noto-serif.json b/apps/v4/public/r/styles/radix-maia/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/font-outfit.json b/apps/v4/public/r/styles/radix-maia/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/radix-maia/font-outfit.json
+++ b/apps/v4/public/r/styles/radix-maia/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-maia/font-playfair-display.json b/apps/v4/public/r/styles/radix-maia/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/font-public-sans.json b/apps/v4/public/r/styles/radix-maia/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/radix-maia/font-public-sans.json
+++ b/apps/v4/public/r/styles/radix-maia/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-maia/font-raleway.json b/apps/v4/public/r/styles/radix-maia/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/radix-maia/font-raleway.json
+++ b/apps/v4/public/r/styles/radix-maia/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-maia/font-roboto-slab.json b/apps/v4/public/r/styles/radix-maia/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/font-roboto.json b/apps/v4/public/r/styles/radix-maia/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/radix-maia/font-roboto.json
+++ b/apps/v4/public/r/styles/radix-maia/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-maia/github.json b/apps/v4/public/r/styles/radix-maia/github.json
deleted file mode 100644
index 211cb7d49c..0000000000
--- a/apps/v4/public/r/styles/radix-maia/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-maia/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\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 { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/radix-maia/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-maia/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\nimport { NativeSelect } from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport { Spinner } from \"@/registry/radix-maia/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                              remixicon=\"RiMoreLine\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                          remixicon=\"RiBox1Line\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                          remixicon=\"RiFlashlightLine\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                          remixicon=\"RiHardDriveLine\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                          remixicon=\"RiShareLine\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n                remixicon=\"RiUploadLine\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                    remixicon=\"RiUploadCloudLine\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                              remixicon=\"RiGitBranchLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                              remixicon=\"RiRobotLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                          remixicon=\"RiSendPlaneLine\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                        remixicon=\"RiHomeLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                        remixicon=\"RiCircleLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                        remixicon=\"RiGitBranchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                        remixicon=\"RiGridLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                        remixicon=\"RiHardDriveLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                        remixicon=\"RiRobotLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                        remixicon=\"RiSparklingLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                        remixicon=\"RiShoppingBagLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                        remixicon=\"RiLinksLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/hover-card-example.json b/apps/v4/public/r/styles/radix-maia/hover-card-example.json
index 779d442ae9..de4aae8310 100644
--- a/apps/v4/public/r/styles/radix-maia/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-maia/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-maia/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-maia/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/hover-card.json b/apps/v4/public/r/styles/radix-maia/hover-card.json
index 4306022681..bb2fc51186 100644
--- a/apps/v4/public/r/styles/radix-maia/hover-card.json
+++ b/apps/v4/public/r/styles/radix-maia/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground z-50 w-72 origin-(--radix-hover-card-content-transform-origin) rounded-2xl p-4 text-sm shadow-2xl ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-72 origin-(--radix-hover-card-content-transform-origin) rounded-2xl bg-popover p-4 text-sm text-popover-foreground shadow-2xl ring-1 ring-foreground/5 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/index.json b/apps/v4/public/r/styles/radix-maia/index.json
new file mode 100644
index 0000000000..69f13cef90
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/input-group-example.json b/apps/v4/public/r/styles/radix-maia/input-group-example.json
index 2500c26658..4a26be2ec9 100644
--- a/apps/v4/public/r/styles/radix-maia/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-maia/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport { Spinner } from \"@/registry/radix-maia/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport { Spinner } from \"@/registry/radix-maia/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/input-group.json b/apps/v4/public/r/styles/radix-maia/input-group.json
index 3ebdb4df18..80ef54f436 100644
--- a/apps/v4/public/r/styles/radix-maia/input-group.json
+++ b/apps/v4/public/r/styles/radix-maia/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border transition-colors 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-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 rounded-4xl text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none 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-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-4xl border border-input bg-input/30 transition-colors 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-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-xl has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\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-4xl **: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\":\n          \"order-first pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3\",\n        \"block-end\":\n          \"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3\",\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-4xl text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/input-otp-example.json b/apps/v4/public/r/styles/radix-maia/input-otp-example.json
index 40ca7fd327..d2b3800ff0 100644
--- a/apps/v4/public/r/styles/radix-maia/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-maia/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/input-otp.json b/apps/v4/public/r/styles/radix-maia/input-otp.json
index b754aecd16..2796c69b03 100644
--- a/apps/v4/public/r/styles/radix-maia/input-otp.json
+++ b/apps/v4/public/r/styles/radix-maia/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-4xl has-aria-invalid:ring-[3px]\",\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        \"bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-9 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl data-[active=true]:z-10 data-[active=true]:ring-[3px]\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-maia/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 rounded-4xl has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-9 items-center justify-center border-y border-r border-input bg-input/30 text-sm transition-all outline-none first:rounded-l-4xl first:border-l last:rounded-r-4xl aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/input.json b/apps/v4/public/r/styles/radix-maia/input.json
index 6850fd45d6..a3d5f07574 100644
--- a/apps/v4/public/r/styles/radix-maia/input.json
+++ b/apps/v4/public/r/styles/radix-maia/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-4xl border px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-4xl border border-input bg-input/30 px-3 py-1 text-base transition-colors outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/item-example.json b/apps/v4/public/r/styles/radix-maia/item-example.json
index 846996e780..b971104776 100644
--- a/apps/v4/public/r/styles/radix-maia/item-example.json
+++ b/apps/v4/public/r/styles/radix-maia/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/item.json b/apps/v4/public/r/styles/radix-maia/item.json
index 87d1528fb8..6911d34ec7 100644
--- a/apps/v4/public/r/styles/radix-maia/item.json
+++ b/apps/v4/public/r/styles/radix-maia/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-2xl border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm font-normal [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-2xl border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-3.5 px-3.5 py-3\",\n        xs: \"gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/kbd.json b/apps/v4/public/r/styles/radix-maia/kbd.json
index d955367580..a7254d4722 100644
--- a/apps/v4/public/r/styles/radix-maia/kbd.json
+++ b/apps/v4/public/r/styles/radix-maia/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/label.json b/apps/v4/public/r/styles/radix-maia/label.json
index f108ecdf0f..479e676472 100644
--- a/apps/v4/public/r/styles/radix-maia/label.json
+++ b/apps/v4/public/r/styles/radix-maia/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/login-02.json b/apps/v4/public/r/styles/radix-maia/login-02.json
index 4a136dd8cd..fbd042b8b0 100644
--- a/apps/v4/public/r/styles/radix-maia/login-02.json
+++ b/apps/v4/public/r/styles/radix-maia/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-maia/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-maia/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/login-03.json b/apps/v4/public/r/styles/radix-maia/login-03.json
index cb086c6d33..29d3a9ddfd 100644
--- a/apps/v4/public/r/styles/radix-maia/login-03.json
+++ b/apps/v4/public/r/styles/radix-maia/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-maia/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-maia/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-maia/login-04.json b/apps/v4/public/r/styles/radix-maia/login-04.json
index 38d7784f73..0eaea24b12 100644
--- a/apps/v4/public/r/styles/radix-maia/login-04.json
+++ b/apps/v4/public/r/styles/radix-maia/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-maia/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-maia/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/login-05.json b/apps/v4/public/r/styles/radix-maia/login-05.json
index 44abb18267..971acea26c 100644
--- a/apps/v4/public/r/styles/radix-maia/login-05.json
+++ b/apps/v4/public/r/styles/radix-maia/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-maia/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-maia/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-maia/menubar.json b/apps/v4/public/r/styles/radix-maia/menubar.json
index e6081810b3..fd97218d8a 100644
--- a/apps/v4/public/r/styles/radix-maia/menubar.json
+++ b/apps/v4/public/r/styles/radix-maia/menubar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-9 items-center rounded-2xl 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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-xl px-2.5 py-1 text-sm font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 cn-menu-target z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-2xl p-1 shadow-2xl ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-2.5 rounded-xl px-3 py-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-inset:pl-9.5 [&_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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9.5 [&_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        \"text-muted-foreground px-3.5 py-2.5 text-xs 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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-xl px-3 py-2 text-sm outline-none select-none data-inset:pl-9.5 [&_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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-2xl p-1 shadow-2xl ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center rounded-2xl border bg-background 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-xl px-2.5 py-1 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 z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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-xl 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-xl 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-xl 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.5 text-xs text-muted-foreground 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-xl 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 z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-2xl bg-popover p-1 text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/native-select.json b/apps/v4/public/r/styles/radix-maia/native-select.json
index e0bfb6aa05..bc3da3b7f8 100644
--- a/apps/v4/public/r/styles/radix-maia/native-select.json
+++ b/apps/v4/public/r/styles/radix-maia/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/30 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-4xl border py-1 pr-8 pl-3 text-sm transition-colors outline-none select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-[3px] data-[size=sm]:h-8\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/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-9 w-full min-w-0 appearance-none rounded-4xl border border-input bg-input/30 py-1 pr-8 pl-3 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-3.5 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({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json b/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json
index 9c9e90d9a6..d176a88a9a 100644
--- a/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-maia/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-maia/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-maia/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/navigation-menu.json b/apps/v4/public/r/styles/radix-maia/navigation-menu.json
index d97fe31a18..85a37b8002 100644
--- a/apps/v4/public/r/styles/radix-maia/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 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-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/5 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 md:w-(--radix-navigation-menu-viewport-width)\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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-2xl bg-background px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 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-2xl group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/5 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-2xl bg-popover text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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-95\",\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-xl p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 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-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/otp-01.json b/apps/v4/public/r/styles/radix-maia/otp-01.json
deleted file mode 100644
index bbb05a46b0..0000000000
--- a/apps/v4/public/r/styles/radix-maia/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-maia/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-maia/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-maia/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/otp-02.json b/apps/v4/public/r/styles/radix-maia/otp-02.json
deleted file mode 100644
index b7fd31317d..0000000000
--- a/apps/v4/public/r/styles/radix-maia/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-maia/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-maia/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-maia/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/otp-03.json b/apps/v4/public/r/styles/radix-maia/otp-03.json
deleted file mode 100644
index 381788fb40..0000000000
--- a/apps/v4/public/r/styles/radix-maia/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-maia/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/radix-maia/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-maia/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/otp-04.json b/apps/v4/public/r/styles/radix-maia/otp-04.json
deleted file mode 100644
index 2fb8911fd2..0000000000
--- a/apps/v4/public/r/styles/radix-maia/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-maia/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-maia/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-maia/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/otp-05.json b/apps/v4/public/r/styles/radix-maia/otp-05.json
deleted file mode 100644
index 5207a28929..0000000000
--- a/apps/v4/public/r/styles/radix-maia/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-maia/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-maia/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-maia/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/pagination.json b/apps/v4/public/r/styles/radix-maia/pagination.json
index ec2260e5de..222c6df196 100644
--- a/apps/v4/public/r/styles/radix-maia/pagination.json
+++ b/apps/v4/public/r/styles/radix-maia/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/popover.json b/apps/v4/public/r/styles/radix-maia/popover.json
index a57bde7a5b..9eef0e13f0 100644
--- a/apps/v4/public/r/styles/radix-maia/popover.json
+++ b/apps/v4/public/r/styles/radix-maia/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-2xl p-4 text-sm shadow-2xl ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-2xl bg-popover p-4 text-sm text-popover-foreground shadow-2xl ring-1 ring-foreground/5 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/preview.json b/apps/v4/public/r/styles/radix-maia/preview.json
index a88bbbcded..4239aadd2d 100644
--- a/apps/v4/public/r/styles/radix-maia/preview.json
+++ b/apps/v4/public/r/styles/radix-maia/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -32,8 +32,8 @@
   ],
   "files": [
     {
-      "path": "registry/radix-maia/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-maia/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-maia/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-maia/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-maia/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\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 { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-maia/ui/sheet\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Spinner } from \"@/registry/radix-maia/ui/spinner\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/radix-maia/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-maia/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-maia/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-maia/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-maia/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-maia/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-maia/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-maia/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-maia/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-maia/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-maia/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-maia/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-maia/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-maia/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-maia/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-maia/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-maia/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-maia/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-maia/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-maia/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-maia/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-maia/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-maia/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-maia/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-maia/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-maia/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-maia/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-maia/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-maia/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-maia/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-maia/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-maia/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-maia/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/progress-example.json b/apps/v4/public/r/styles/radix-maia/progress-example.json
index 18926e30f6..5d08e07bd7 100644
--- a/apps/v4/public/r/styles/radix-maia/progress-example.json
+++ b/apps/v4/public/r/styles/radix-maia/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/progress-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 { Field, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { Progress } from \"@/registry/radix-maia/ui/progress\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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 { Field, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { Progress } from \"@/registry/radix-maia/ui/progress\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/progress.json b/apps/v4/public/r/styles/radix-maia/progress.json
index 1ee71264c6..a25af7530a 100644
--- a/apps/v4/public/r/styles/radix-maia/progress.json
+++ b/apps/v4/public/r/styles/radix-maia/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-muted relative flex h-3 w-full items-center overflow-x-hidden rounded-4xl\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary size-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative flex h-3 w-full items-center overflow-x-hidden rounded-4xl bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"size-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/radio-group.json b/apps/v4/public/r/styles/radix-maia/radio-group.json
index 61f6f2ae03..8d35efe6e7 100644
--- a/apps/v4/public/r/styles/radix-maia/radio-group.json
+++ b/apps/v4/public/r/styles/radix-maia/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/registry.json b/apps/v4/public/r/styles/radix-maia/registry.json
index 09a3f82041..f7292a2e44 100644
--- a/apps/v4/public/r/styles/radix-maia/registry.json
+++ b/apps/v4/public/r/styles/radix-maia/registry.json
@@ -2,6 +2,48 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +52,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +69,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +86,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +103,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +120,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +137,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +153,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +169,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +186,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +204,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +221,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +239,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -137,6 +257,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -147,6 +273,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -157,6 +290,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -169,6 +309,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -181,6 +328,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -191,6 +345,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -202,6 +363,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -213,6 +381,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -223,6 +398,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -233,6 +415,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -244,6 +432,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -258,6 +452,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -268,6 +469,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -279,6 +486,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -290,6 +503,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -301,6 +521,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -311,6 +537,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -321,6 +554,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -331,6 +571,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -342,6 +589,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -352,6 +605,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -362,6 +622,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -372,6 +639,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -383,6 +657,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -393,6 +674,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -403,6 +691,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -413,6 +708,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -424,6 +726,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -443,6 +752,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -453,6 +768,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -463,6 +784,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -474,6 +802,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -484,6 +819,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -494,6 +835,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -504,6 +852,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -514,6 +868,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -524,6 +885,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -534,6 +901,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -545,6 +919,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -555,6 +936,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -566,6 +954,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -576,6 +970,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -586,6 +986,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+          "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1464,6 +1870,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-maia/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1512,7 +1945,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1543,110 +1976,7 @@
       ],
       "files": [
         {
-          "path": "registry/radix-maia/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/radix-maia/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-maia/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-maia/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-maia/blocks/chatgpt.tsx",
+          "path": "registry/radix-maia/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2551,7 +2881,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2563,7 +2893,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2575,7 +2905,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2587,7 +2917,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2599,7 +2929,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2614,7 +2944,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2629,6 +2959,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-maia/resizable.json b/apps/v4/public/r/styles/radix-maia/resizable.json
index c30dedb1d7..383a874612 100644
--- a/apps/v4/public/r/styles/radix-maia/resizable.json
+++ b/apps/v4/public/r/styles/radix-maia/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/scroll-area-example.json b/apps/v4/public/r/styles/radix-maia/scroll-area-example.json
index 7c62b6665e..aadab7b443 100644
--- a/apps/v4/public/r/styles/radix-maia/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-maia/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-maia/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-maia/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/scroll-area.json b/apps/v4/public/r/styles/radix-maia/scroll-area.json
index f80888b100..d1e197e794 100644
--- a/apps/v4/public/r/styles/radix-maia/scroll-area.json
+++ b/apps/v4/public/r/styles/radix-maia/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/select.json b/apps/v4/public/r/styles/radix-maia/select.json
index e8fb777970..5490e741de 100644
--- a/apps/v4/public/r/styles/radix-maia/select.json
+++ b/apps/v4/public/r/styles/radix-maia/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-4xl border px-3 py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"text-muted-foreground pointer-events-none size-4\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 cn-menu-target 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-2xl shadow-2xl ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\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        \"bg-border/50 pointer-events-none -mx-1 my-1 h-px\",\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        \"bg-popover z-10 flex cursor-default items-center justify-center 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        \"bg-popover z-10 flex cursor-default items-center justify-center 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-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-4xl border border-input bg-input/30 px-3 py-2 text-sm whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *: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:hover:bg-input/50 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        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 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-2xl bg-popover text-popover-foreground shadow-2xl ring-1 ring-foreground/5 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(\"px-3 py-2.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-xl 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 my-1 h-px bg-border/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/separator-example.json b/apps/v4/public/r/styles/radix-maia/separator-example.json
index 15be1a0bc8..f3a159f34e 100644
--- a/apps/v4/public/r/styles/radix-maia/separator-example.json
+++ b/apps/v4/public/r/styles/radix-maia/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/separator.json b/apps/v4/public/r/styles/radix-maia/separator.json
index d5a7423400..3a9ee01f26 100644
--- a/apps/v4/public/r/styles/radix-maia/separator.json
+++ b/apps/v4/public/r/styles/radix-maia/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/sheet-example.json b/apps/v4/public/r/styles/radix-maia/sheet-example.json
index 2bcbeede73..af3d233cf6 100644
--- a/apps/v4/public/r/styles/radix-maia/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-maia/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-maia/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sheet.json b/apps/v4/public/r/styles/radix-maia/sheet.json
index cde00cdcf7..5e966b71d9 100644
--- a/apps/v4/public/r/styles/radix-maia/sheet.json
+++ b/apps/v4/public/r/styles/radix-maia/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-01.json b/apps/v4/public/r/styles/radix-maia/sidebar-01.json
index dfe848f3e3..895a29abe5 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-01.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-02.json b/apps/v4/public/r/styles/radix-maia/sidebar-02.json
index bccabcd610..528e0cbb21 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-02.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-maia/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-maia/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-maia/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-maia/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-03.json b/apps/v4/public/r/styles/radix-maia/sidebar-03.json
index 172bbc67f2..f25a17760a 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-03.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-04.json b/apps/v4/public/r/styles/radix-maia/sidebar-04.json
index d6e22c5187..407c7ed0be 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-04.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-05.json b/apps/v4/public/r/styles/radix-maia/sidebar-05.json
index b72802bb01..6088f7bda6 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-05.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-maia/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-maia/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-06.json b/apps/v4/public/r/styles/radix-maia/sidebar-06.json
index 59025f6e45..5221bb9d58 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-06.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-maia/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-maia/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-maia/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-maia/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-maia/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-maia/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-07.json b/apps/v4/public/r/styles/radix-maia/sidebar-07.json
index 6cf91b5cba..d1afbe9943 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-07.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-08.json b/apps/v4/public/r/styles/radix-maia/sidebar-08.json
index 4d5e8ed082..0e89b70852 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-08.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-maia/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-maia/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-maia/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-maia/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-maia/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-maia/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-09.json b/apps/v4/public/r/styles/radix-maia/sidebar-09.json
index 8c41c1999a..a8b030fbbb 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-09.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-09.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-10.json b/apps/v4/public/r/styles/radix-maia/sidebar-10.json
index c939fd7a16..5709c38a11 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-10.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-maia/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-maia/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"data-[state=open]:bg-accent h-7 w-7\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-11.json b/apps/v4/public/r/styles/radix-maia/sidebar-11.json
index 542c357fae..daa073c3f7 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-11.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-12.json b/apps/v4/public/r/styles/radix-maia/sidebar-12.json
index 703a889f33..19e8762a2f 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-12.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-maia/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-maia/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-maia/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-maia/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-13.json b/apps/v4/public/r/styles/radix-maia/sidebar-13.json
index 5896286e88..cce22fd10b 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-13.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-14.json b/apps/v4/public/r/styles/radix-maia/sidebar-14.json
index 81dbaa1e02..e0777ca48c 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-14.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-15.json b/apps/v4/public/r/styles/radix-maia/sidebar-15.json
index 58c4ded2fe..d17b310328 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-15.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/radix-maia/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-maia/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/radix-maia/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-maia/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-screen w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-maia/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-maia/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-maia/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-maia/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-16.json b/apps/v4/public/r/styles/radix-maia/sidebar-16.json
index 1a3b205250..5908cb4a66 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-16.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-maia/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-maia/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-maia/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-maia/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-maia/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-maia/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-maia/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-maia/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-maia/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-maia/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-maia/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-maia/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-maia/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-maia/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-maia/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-example.json b/apps/v4/public/r/styles/radix-maia/sidebar-example.json
index 522f7accfb..5d9c97c434 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-maia/sidebar-floating-example.json
index 23cb0a8033..6ab2d6a06b 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-maia/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-maia/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-maia/sidebar-icon-example.json
index 19e1384eef..8f99a5a634 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-maia/sidebar-inset-example.json
index ce18bedc53..4f5e9e8821 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-maia/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/sidebar.json b/apps/v4/public/r/styles/radix-maia/sidebar.json
index 13d7614e3f..8afe95c5be 100644
--- a/apps/v4/public/r/styles/radix-maia/sidebar.json
+++ b/apps/v4/public/r/styles/radix-maia/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-maia/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-maia/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-maia/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\n        \"flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]\",\n        className\n      )}\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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:var(--radius-xl)] 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        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium 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        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 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-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-lg px-3 py-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-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        \"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 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden 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 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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        \"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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-maia/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-maia/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-maia/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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-lg 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-xl 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(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\n        \"flex flex-col gap-2 p-2 [--radius:var(--radius-xl)]\",\n        className\n      )}\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:var(--radius-xl)] 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-md px-2 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-md 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-1\", 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-lg 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-md 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-md 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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\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-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/signup-02.json b/apps/v4/public/r/styles/radix-maia/signup-02.json
index 1167884753..c99c02b10a 100644
--- a/apps/v4/public/r/styles/radix-maia/signup-02.json
+++ b/apps/v4/public/r/styles/radix-maia/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-maia/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-maia/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/signup-03.json b/apps/v4/public/r/styles/radix-maia/signup-03.json
index 277f25188d..3455e2b4e2 100644
--- a/apps/v4/public/r/styles/radix-maia/signup-03.json
+++ b/apps/v4/public/r/styles/radix-maia/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-maia/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-maia/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-maia/signup-04.json b/apps/v4/public/r/styles/radix-maia/signup-04.json
index cd221e84d9..80aae16ba9 100644
--- a/apps/v4/public/r/styles/radix-maia/signup-04.json
+++ b/apps/v4/public/r/styles/radix-maia/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-maia/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-maia/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-maia/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/signup-05.json b/apps/v4/public/r/styles/radix-maia/signup-05.json
index f052fb55f6..8b1c69cd98 100644
--- a/apps/v4/public/r/styles/radix-maia/signup-05.json
+++ b/apps/v4/public/r/styles/radix-maia/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-maia/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-maia/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-maia/skeleton.json b/apps/v4/public/r/styles/radix-maia/skeleton.json
index a0face1821..5af31c65c0 100644
--- a/apps/v4/public/r/styles/radix-maia/skeleton.json
+++ b/apps/v4/public/r/styles/radix-maia/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-xl\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-xl bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/slider-example.json b/apps/v4/public/r/styles/radix-maia/slider-example.json
index 49fcf783cb..a4037741ed 100644
--- a/apps/v4/public/r/styles/radix-maia/slider-example.json
+++ b/apps/v4/public/r/styles/radix-maia/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/slider-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 { Label } from \"@/registry/radix-maia/ui/label\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/slider.json b/apps/v4/public/r/styles/radix-maia/slider.json
index 98928817ee..4e5592ce57 100644
--- a/apps/v4/public/r/styles/radix-maia/slider.json
+++ b/apps/v4/public/r/styles/radix-maia/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"bg-muted relative grow overflow-hidden rounded-4xl data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-4xl border bg-white shadow-sm transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-4xl bg-muted data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"block size-4 shrink-0 rounded-4xl border border-primary bg-white shadow-sm ring-ring/50 transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/sonner.json b/apps/v4/public/r/styles/radix-maia/sonner.json
index f1192e1696..5eb31c86fa 100644
--- a/apps/v4/public/r/styles/radix-maia/sonner.json
+++ b/apps/v4/public/r/styles/radix-maia/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/spinner.json b/apps/v4/public/r/styles/radix-maia/spinner.json
index a9d631789a..d9461a66c1 100644
--- a/apps/v4/public/r/styles/radix-maia/spinner.json
+++ b/apps/v4/public/r/styles/radix-maia/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/style.json b/apps/v4/public/r/styles/radix-maia/style.json
new file mode 100644
index 0000000000..9d8bb6576c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-maia/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/switch.json b/apps/v4/public/r/styles/radix-maia/switch.json
index 8ec3d23934..e4b3f1686f 100644
--- a/apps/v4/public/r/styles/radix-maia/switch.json
+++ b/apps/v4/public/r/styles/radix-maia/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/table.json b/apps/v4/public/r/styles/radix-maia/table.json
index f6f4cc2fd5..c45d87b8ca 100644
--- a/apps/v4/public/r/styles/radix-maia/table.json
+++ b/apps/v4/public/r/styles/radix-maia/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-12 px-3 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-12 px-3 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/tabs-example.json b/apps/v4/public/r/styles/radix-maia/tabs-example.json
index 1e00dc65d3..dd75a776f4 100644
--- a/apps/v4/public/r/styles/radix-maia/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-maia/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/tabs.json b/apps/v4/public/r/styles/radix-maia/tabs.json
index 5b5e4ebf99..590ad87145 100644
--- a/apps/v4/public/r/styles/radix-maia/tabs.json
+++ b/apps/v4/public/r/styles/radix-maia/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"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-maia/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-4xl p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none\",\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-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 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 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/textarea.json b/apps/v4/public/r/styles/radix-maia/textarea.json
index 5e93496060..6db3137e29 100644
--- a/apps/v4/public/r/styles/radix-maia/textarea.json
+++ b/apps/v4/public/r/styles/radix-maia/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full resize-none rounded-xl border px-3 py-3 text-base transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full resize-none rounded-xl border border-input bg-input/30 px-3 py-3 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/toggle-group-example.json b/apps/v4/public/r/styles/radix-maia/toggle-group-example.json
index 082fc0fd64..9f4769112d 100644
--- a/apps/v4/public/r/styles/radix-maia/toggle-group-example.json
+++ b/apps/v4/public/r/styles/radix-maia/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-maia/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-maia/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/toggle-group.json b/apps/v4/public/r/styles/radix-maia/toggle-group.json
index 76713fc031..b1c77ef9f4 100644
--- a/apps/v4/public/r/styles/radix-maia/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-maia/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-maia/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:rounded-4xl\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"data-[state=on]:bg-muted shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-4xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-4xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-xl group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-maia/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-4xl data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-4xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-4xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-xl data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/toggle.json b/apps/v4/public/r/styles/radix-maia/toggle.json
index 98eb081e06..b69121f1c1 100644
--- a/apps/v4/public/r/styles/radix-maia/toggle.json
+++ b/apps/v4/public/r/styles/radix-maia/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-4xl text-sm font-medium transition-colors [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent\",\n      },\n      size: {\n        default: \"h-9 min-w-9 rounded-[min(var(--radius-2xl),12px)] px-2.5\",\n        sm: \"h-8 min-w-8 px-3\",\n        lg: \"h-10 min-w-10 px-2.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-maia/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-4xl text-sm font-medium whitespace-nowrap transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 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: \"h-9 min-w-9 rounded-[min(var(--radius-2xl),12px)] px-2.5\",\n        sm: \"h-8 min-w-8 px-3\",\n        lg: \"h-10 min-w-10 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/tooltip-example.json b/apps/v4/public/r/styles/radix-maia/tooltip-example.json
index b1048c339d..34566ccaf4 100644
--- a/apps/v4/public/r/styles/radix-maia/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-maia/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Kbd } from \"@/registry/radix-maia/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/tooltip.json b/apps/v4/public/r/styles/radix-maia/tooltip.json
index f6cd66a4a8..9946e7d3ef 100644
--- a/apps/v4/public/r/styles/radix-maia/tooltip.json
+++ b/apps/v4/public/r/styles/radix-maia/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-2xl bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-4xl data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-maia/vercel.json b/apps/v4/public/r/styles/radix-maia/vercel.json
deleted file mode 100644
index 0303535b42..0000000000
--- a/apps/v4/public/r/styles/radix-maia/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-maia/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-maia/ui/alert\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Calendar } from \"@/registry/radix-maia/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-maia/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/radix-maia/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/accordion-example.json b/apps/v4/public/r/styles/radix-mira/accordion-example.json
index 570f88146a..73e49f44d3 100644
--- a/apps/v4/public/r/styles/radix-mira/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-mira/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-mira/ui/accordion\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-mira/ui/accordion\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/accordion.json b/apps/v4/public/r/styles/radix-mira/accordion.json
index 42d80df56b..680330b116 100644
--- a/apps/v4/public/r/styles/radix-mira/accordion.json
+++ b/apps/v4/public/r/styles/radix-mira/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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(\n        \"flex w-full flex-col overflow-hidden rounded-md border\",\n        className\n      )}\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(\"data-open:bg-muted/50 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          \"**:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-2 text-left text-xs/relaxed font-medium transition-all outline-none hover:underline disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden px-2 text-xs/relaxed\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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(\n        \"flex w-full flex-col overflow-hidden rounded-md border\",\n        className\n      )}\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 data-open:bg-muted/50\", 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 border border-transparent p-2 text-left text-xs/relaxed font-medium transition-all outline-none hover:underline 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 px-2 text-xs/relaxed data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/alert-dialog.json b/apps/v4/public/r/styles/radix-mira/alert-dialog.json
index a5b830a5d5..d176cb5270 100644
--- a/apps/v4/public/r/styles/radix-mira/alert-dialog.json
+++ b/apps/v4/public/r/styles/radix-mira/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-8 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-8 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/alert.json b/apps/v4/public/r/styles/radix-mira/alert.json
index 05bee1147b..56633efffe 100644
--- a/apps/v4/public/r/styles/radix-mira/alert.json
+++ b/apps/v4/public/r/styles/radix-mira/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-xs/relaxed text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-1.5 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-1.5 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-mira/aspect-ratio-example.json
index 6207abcfbe..fd3cd41a77 100644
--- a/apps/v4/public/r/styles/radix-mira/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-mira/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { AspectRatio } from \"@/registry/radix-mira/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { AspectRatio } from \"@/registry/radix-mira/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/aspect-ratio.json b/apps/v4/public/r/styles/radix-mira/aspect-ratio.json
index d2c2eacace..590ccc11b9 100644
--- a/apps/v4/public/r/styles/radix-mira/aspect-ratio.json
+++ b/apps/v4/public/r/styles/radix-mira/aspect-ratio.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/avatar.json b/apps/v4/public/r/styles/radix-mira/avatar.json
index dba71ac13d..e0f90b1079 100644
--- a/apps/v4/public/r/styles/radix-mira/avatar.json
+++ b/apps/v4/public/r/styles/radix-mira/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-xs/relaxed ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs/relaxed text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/badge.json b/apps/v4/public/r/styles/radix-mira/badge.json
index f262d835e2..4a9fe51438 100644
--- a/apps/v4/public/r/styles/radix-mira/badge.json
+++ b/apps/v4/public/r/styles/radix-mira/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/badge.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-2.5!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border bg-input/20 text-foreground dark:bg-input/30 [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/breadcrumb.json b/apps/v4/public/r/styles/radix-mira/breadcrumb.json
index 0b0e98c2f1..64dda44ae8 100644
--- a/apps/v4/public/r/styles/radix-mira/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-mira/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-xs/relaxed wrap-break-word\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-4 items-center justify-center [&>svg]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-xs/relaxed wrap-break-word text-muted-foreground\",\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\", 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-4 items-center justify-center [&>svg]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/button-group.json b/apps/v4/public/r/styles/radix-mira/button-group.json
index 35b5fa6cda..47e3684727 100644
--- a/apps/v4/public/r/styles/radix-mira/button-group.json
+++ b/apps/v4/public/r/styles/radix-mira/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"bg-muted flex items-center gap-2 rounded-md border px-2.5 text-xs/relaxed font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-md border bg-muted px-2.5 text-xs/relaxed font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/button.json b/apps/v4/public/r/styles/radix-mira/button.json
index 15ac0b65c9..03ffaf7a4f 100644
--- a/apps/v4/public/r/styles/radix-mira/button.json
+++ b/apps/v4/public/r/styles/radix-mira/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/button.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n        sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n        icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n        \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 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 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark: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-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n        sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n        icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n        \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/calendar-example.json b/apps/v4/public/r/styles/radix-mira/calendar-example.json
index d25b74eac9..e098ed1007 100644
--- a/apps/v4/public/r/styles/radix-mira/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-mira/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-mira/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-mira/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/calendar.json b/apps/v4/public/r/styles/radix-mira/calendar.json
index 5a773c81e4..945190bb07 100644
--- a/apps/v4/public/r/styles/radix-mira/calendar.json
+++ b/apps/v4/public/r/styles/radix-mira/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/card-example.json b/apps/v4/public/r/styles/radix-mira/card-example.json
index 00134b33db..fc4d6ac414 100644
--- a/apps/v4/public/r/styles/radix-mira/card-example.json
+++ b/apps/v4/public/r/styles/radix-mira/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center style-nova:mt-2\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/card.json b/apps/v4/public/r/styles/radix-mira/card.json
index 4bbf12a4fd..9c9eb039ee 100644
--- a/apps/v4/public/r/styles/radix-mira/card.json
+++ b/apps/v4/public/r/styles/radix-mira/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-lg py-4 text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-4 overflow-hidden rounded-lg bg-card py-4 text-xs/relaxed text-card-foreground ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/cards.json b/apps/v4/public/r/styles/radix-mira/cards.json
new file mode 100644
index 0000000000..0b438efbe3
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/cards.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cards",
+  "title": "Cards",
+  "registryDependencies": [
+    "alert-dialog",
+    "avatar",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "combobox",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "label",
+    "popover",
+    "radio-group",
+    "select",
+    "separator",
+    "sheet",
+    "slider",
+    "spinner",
+    "switch",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-mira/blocks/cards.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-mira/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-mira/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\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 { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-mira/ui/sheet\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Spinner } from \"@/registry/radix-mira/ui/spinner\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/carousel.json b/apps/v4/public/r/styles/radix-mira/carousel.json
index d8085f8130..6f67b0890f 100644
--- a/apps/v4/public/r/styles/radix-mira/carousel.json
+++ b/apps/v4/public/r/styles/radix-mira/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/chart-example.json b/apps/v4/public/r/styles/radix-mira/chart-example.json
index b06b5938d5..ce653be46b 100644
--- a/apps/v4/public/r/styles/radix-mira/chart-example.json
+++ b/apps/v4/public/r/styles/radix-mira/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/chart.json b/apps/v4/public/r/styles/radix-mira/chart.json
index 1eb357b3b7..933164b334 100644
--- a/apps/v4/public/r/styles/radix-mira/chart.json
+++ b/apps/v4/public/r/styles/radix-mira/chart.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs/relaxed shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs/relaxed shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/chatgpt.json b/apps/v4/public/r/styles/radix-mira/chatgpt.json
deleted file mode 100644
index a2d2fc83dd..0000000000
--- a/apps/v4/public/r/styles/radix-mira/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-mira/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-mira/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                    remixicon=\"RiAttachmentLine\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                    remixicon=\"RiSparklingLine\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                    remixicon=\"RiMagicLine\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                        remixicon=\"RiHand\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                        remixicon=\"RiBookOpenLine\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                        remixicon=\"RiGlobeLine\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                        remixicon=\"RiPencilLine\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          remixicon=\"RiFolderLine\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        remixicon=\"RiCheckboxCircleLine\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/checkbox.json b/apps/v4/public/r/styles/radix-mira/checkbox.json
index 97da711380..560bd114cd 100644
--- a/apps/v4/public/r/styles/radix-mira/checkbox.json
+++ b/apps/v4/public/r/styles/radix-mira/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/collapsible-example.json b/apps/v4/public/r/styles/radix-mira/collapsible-example.json
index 3d240ccbdf..8256060050 100644
--- a/apps/v4/public/r/styles/radix-mira/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-mira/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/collapsible-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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/collapsible.json b/apps/v4/public/r/styles/radix-mira/collapsible.json
index df64c1674b..a167ef1fa2 100644
--- a/apps/v4/public/r/styles/radix-mira/collapsible.json
+++ b/apps/v4/public/r/styles/radix-mira/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/combobox-example.json b/apps/v4/public/r/styles/radix-mira/combobox-example.json
index 97a800c99f..4126b94f1f 100644
--- a/apps/v4/public/r/styles/radix-mira/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-mira/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-mira/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-mira/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/combobox.json b/apps/v4/public/r/styles/radix-mira/combobox.json
index ff6117e21b..6d94a06cae 100644
--- a/apps/v4/public/r/styles/radix-mira/combobox.json
+++ b/apps/v4/public/r/styles/radix-mira/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-3.5\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-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 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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed 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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-2 has-aria-invalid:ring-2 has-data-[slot=combobox-chip]:px-1\",\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-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-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-3.5\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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-lg 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:bg-input/20 *:data-[slot=input-group]:shadow-none dark:bg-popover 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 overflow-y-auto overscroll-contain p-1 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 min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed 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 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-xs/relaxed 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 my-1 h-px bg-border/50\", 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-7 flex-wrap items-center gap-1 rounded-md border border-input bg-input/20 bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30 has-aria-invalid:border-destructive has-aria-invalid:ring-2 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] bg-muted-foreground/10 px-1.5 text-xs/relaxed font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/command.json b/apps/v4/public/r/styles/radix-mira/command.json
index ca03437cd3..72e18b2f55 100644
--- a/apps/v4/public/r/styles/radix-mira/command.json
+++ b/apps/v4/public/r/styles/radix-mira/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-3.5 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none in-data-[slot=dialog-content]:rounded-md data-[disabled=true]:pointer-events-none data-[disabled=true]: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      <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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\",\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-mira/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-xl bg-popover p-1 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! bg-input/20 dark:bg-input/30\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-3.5 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\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(\"-mx-1 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 min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none in-data-[slot=dialog-content]:rounded-md 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-[0.625rem] tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/component-example.json b/apps/v4/public/r/styles/radix-mira/component-example.json
index 924eccc964..b5c8661ea8 100644
--- a/apps/v4/public/r/styles/radix-mira/component-example.json
+++ b/apps/v4/public/r/styles/radix-mira/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-mira/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-mira/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/context-menu.json b/apps/v4/public/r/styles/radix-mira/context-menu.json
index 581bb96d2a..9ef4ddb1bb 100644
--- a/apps/v4/public/r/styles/radix-mira/context-menu.json
+++ b/apps/v4/public/r/styles/radix-mira/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/context-menu-item relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none data-inset:pl-7.5 [&_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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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 flex items-center justify-center\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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 flex items-center justify-center\">\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        \"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\",\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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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 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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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 z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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 flex items-center justify-center\">\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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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 flex items-center justify-center\">\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-2 py-1.5 text-xs text-muted-foreground data-inset:pl-7.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 my-1 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-[0.625rem] tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/dashboard-01.json b/apps/v4/public/r/styles/radix-mira/dashboard-01.json
index af489cc662..287cfc3e8e 100644
--- a/apps/v4/public/r/styles/radix-mira/dashboard-01.json
+++ b/apps/v4/public/r/styles/radix-mira/dashboard-01.json
@@ -57,17 +57,17 @@
     },
     {
       "path": "registry/radix-mira/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-mira/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"data-[state=open]:bg-muted text-muted-foreground flex size-8\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-mira/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-mira/blocks/dashboard-01/components/nav-documents.tsx",
-      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"data-[state=open]:bg-accent rounded-sm\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-mira/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/radix-mira/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-mira/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-mira/demo.json b/apps/v4/public/r/styles/radix-mira/demo.json
new file mode 100644
index 0000000000..972f2af6bf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-mira/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/dialog-example.json b/apps/v4/public/r/styles/radix-mira/dialog-example.json
index a6c04eb5ef..171dc45b5b 100644
--- a/apps/v4/public/r/styles/radix-mira/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-mira/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/dialog.json b/apps/v4/public/r/styles/radix-mira/dialog.json
index d9de59ce89..ce6f363df8 100644
--- a/apps/v4/public/r/styles/radix-mira/dialog.json
+++ b/apps/v4/public/r/styles/radix-mira/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-xs/relaxed ring-1 duration-100 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-xs/relaxed *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-xs/relaxed ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/direction.json b/apps/v4/public/r/styles/radix-mira/direction.json
index 6f84684f7a..696fa5430b 100644
--- a/apps/v4/public/r/styles/radix-mira/direction.json
+++ b/apps/v4/public/r/styles/radix-mira/direction.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+      "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/drawer-example.json b/apps/v4/public/r/styles/radix-mira/drawer-example.json
index 4701e1c5b6..4f7a237c33 100644
--- a/apps/v4/public/r/styles/radix-mira/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-mira/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-mira/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-mira/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/drawer.json b/apps/v4/public/r/styles/radix-mira/drawer.json
index bd2b69701c..3f56acdf95 100644
--- a/apps/v4/public/r/styles/radix-mira/drawer.json
+++ b/apps/v4/public/r/styles/radix-mira/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"before:bg-background before:border-border group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl before:border before:border-border before:bg-background data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json
index 1c39496e30..facd5b7146 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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/dropdown-menu.json b/apps/v4/public/r/styles/radix-mira/dropdown-menu.json
index efa25750ff..f6969786b0 100644
--- a/apps/v4/public/r/styles/radix-mira/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-mira/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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        \"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none data-inset:pl-7.5 [&_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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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-2 py-1.5 text-xs text-muted-foreground data-inset:pl-7.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 my-1 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-[0.625rem] 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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/elevenlabs.json b/apps/v4/public/r/styles/radix-mira/elevenlabs.json
deleted file mode 100644
index beeefc827b..0000000000
--- a/apps/v4/public/r/styles/radix-mira/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-mira/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/empty.json b/apps/v4/public/r/styles/radix-mira/empty.json
index 80cfabfef1..f7e8977b2c 100644
--- a/apps/v4/public/r/styles/radix-mira/empty.json
+++ b/apps/v4/public/r/styles/radix-mira/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-xs/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/example.json b/apps/v4/public/r/styles/radix-mira/example.json
index 0002500a19..f5185377ab 100644
--- a/apps/v4/public/r/styles/radix-mira/example.json
+++ b/apps/v4/public/r/styles/radix-mira/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-mira/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/field.json b/apps/v4/public/r/styles/radix-mira/field.json
index e358b11953..547fd2f369 100644
--- a/apps/v4/public/r/styles/radix-mira/field.json
+++ b/apps/v4/public/r/styles/radix-mira/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-xs/relaxed leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-xs/relaxed font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-xs/relaxed leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-xs/relaxed font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/font-dm-sans.json b/apps/v4/public/r/styles/radix-mira/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/radix-mira/font-dm-sans.json
+++ b/apps/v4/public/r/styles/radix-mira/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-mira/font-geist-sans.json b/apps/v4/public/r/styles/radix-mira/font-geist-sans.json
deleted file mode 100644
index a60a347fd3..0000000000
--- a/apps/v4/public/r/styles/radix-mira/font-geist-sans.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
-  "type": "registry:font",
-  "font": {
-    "family": "'Geist Variable', sans-serif",
-    "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
-    "subsets": [
-      "latin"
-    ]
-  }
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/font-jetbrains-mono.json b/apps/v4/public/r/styles/radix-mira/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/radix-mira/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/radix-mira/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/radix-mira/font-lora.json b/apps/v4/public/r/styles/radix-mira/font-lora.json
new file mode 100644
index 0000000000..cacd01a3f0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/font-lora.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-lora",
+  "title": "Lora",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/font-merriweather.json b/apps/v4/public/r/styles/radix-mira/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/font-noto-serif.json b/apps/v4/public/r/styles/radix-mira/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/font-outfit.json b/apps/v4/public/r/styles/radix-mira/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/radix-mira/font-outfit.json
+++ b/apps/v4/public/r/styles/radix-mira/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-mira/font-playfair-display.json b/apps/v4/public/r/styles/radix-mira/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/font-public-sans.json b/apps/v4/public/r/styles/radix-mira/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/radix-mira/font-public-sans.json
+++ b/apps/v4/public/r/styles/radix-mira/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-mira/font-raleway.json b/apps/v4/public/r/styles/radix-mira/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/radix-mira/font-raleway.json
+++ b/apps/v4/public/r/styles/radix-mira/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-mira/font-roboto-slab.json b/apps/v4/public/r/styles/radix-mira/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/font-roboto.json b/apps/v4/public/r/styles/radix-mira/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/radix-mira/font-roboto.json
+++ b/apps/v4/public/r/styles/radix-mira/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-mira/github.json b/apps/v4/public/r/styles/radix-mira/github.json
deleted file mode 100644
index 4399bb38c4..0000000000
--- a/apps/v4/public/r/styles/radix-mira/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-mira/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\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 { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/radix-mira/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-mira/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\nimport { NativeSelect } from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport { Spinner } from \"@/registry/radix-mira/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                              remixicon=\"RiMoreLine\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                          remixicon=\"RiBox1Line\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                          remixicon=\"RiFlashlightLine\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                          remixicon=\"RiHardDriveLine\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                          remixicon=\"RiShareLine\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n                remixicon=\"RiUploadLine\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                    remixicon=\"RiUploadCloudLine\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                              remixicon=\"RiGitBranchLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                              remixicon=\"RiRobotLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                          remixicon=\"RiSendPlaneLine\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                        remixicon=\"RiHomeLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                        remixicon=\"RiCircleLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                        remixicon=\"RiGitBranchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                        remixicon=\"RiGridLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                        remixicon=\"RiHardDriveLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                        remixicon=\"RiRobotLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                        remixicon=\"RiSparklingLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                        remixicon=\"RiShoppingBagLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                        remixicon=\"RiLinksLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/hover-card-example.json b/apps/v4/public/r/styles/radix-mira/hover-card-example.json
index 1426cb50a9..5379fef240 100644
--- a/apps/v4/public/r/styles/radix-mira/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-mira/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-mira/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-mira/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/hover-card.json b/apps/v4/public/r/styles/radix-mira/hover-card.json
index cadeaee18f..a6cb097ec9 100644
--- a/apps/v4/public/r/styles/radix-mira/hover-card.json
+++ b/apps/v4/public/r/styles/radix-mira/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground z-50 w-72 origin-(--radix-hover-card-content-transform-origin) rounded-lg p-2.5 text-xs/relaxed shadow-md ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-72 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-xs/relaxed text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/index.json b/apps/v4/public/r/styles/radix-mira/index.json
new file mode 100644
index 0000000000..69f13cef90
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/input-group-example.json b/apps/v4/public/r/styles/radix-mira/input-group-example.json
index e5d3d2a8d4..7234a35c8d 100644
--- a/apps/v4/public/r/styles/radix-mira/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-mira/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-mira/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport { Spinner } from \"@/registry/radix-mira/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-mira/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport { Spinner } from \"@/registry/radix-mira/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/input-group.json b/apps/v4/public/r/styles/radix-mira/input-group.json
index 76849647e3..4746259961 100644
--- a/apps/v4/public/r/styles/radix-mira/input-group.json
+++ b/apps/v4/public/r/styles/radix-mira/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 group/input-group relative flex h-7 w-full min-w-0 items-center rounded-md border transition-colors 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-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-2 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-xs/relaxed [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none 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-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-7 w-full min-w-0 items-center rounded-md border border-input bg-input/20 transition-colors 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-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-1 py-2 text-xs/relaxed font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\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-md text-xs/relaxed shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"gap-1\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-7 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-xs/relaxed 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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/input-otp-example.json b/apps/v4/public/r/styles/radix-mira/input-otp-example.json
index 2131ad9f01..dcbd03ee03 100644
--- a/apps/v4/public/r/styles/radix-mira/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-mira/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/input-otp.json b/apps/v4/public/r/styles/radix-mira/input-otp.json
index ad90931274..48e362a741 100644
--- a/apps/v4/public/r/styles/radix-mira/input-otp.json
+++ b/apps/v4/public/r/styles/radix-mira/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-md has-aria-invalid:ring-2\",\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        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-7 items-center justify-center border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-2\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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 rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-2 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-7 items-center justify-center border-y border-r border-input bg-input/20 text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-2 data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/input.json b/apps/v4/public/r/styles/radix-mira/input.json
index e957a06a06..8448194d72 100644
--- a/apps/v4/public/r/styles/radix-mira/input.json
+++ b/apps/v4/public/r/styles/radix-mira/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-7 w-full min-w-0 rounded-md border px-2 py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium focus-visible:ring-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 md:text-xs/relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-7 w-full min-w-0 rounded-md border border-input bg-input/20 px-2 py-0.5 text-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-xs/relaxed file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/item-example.json b/apps/v4/public/r/styles/radix-mira/item-example.json
index c5d6a0ba2a..626876aa63 100644
--- a/apps/v4/public/r/styles/radix-mira/item-example.json
+++ b/apps/v4/public/r/styles/radix-mira/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/item.json b/apps/v4/public/r/styles/radix-mira/item.json
index 4c73b93cd8..db31f5a441 100644
--- a/apps/v4/public/r/styles/radix-mira/item.json
+++ b/apps/v4/public/r/styles/radix-mira/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-xs/relaxed font-normal [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-md border text-xs/relaxed transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0.5 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-xs/relaxed font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/kbd.json b/apps/v4/public/r/styles/radix-mira/kbd.json
index b9116f4b26..ca1ba4540c 100644
--- a/apps/v4/public/r/styles/radix-mira/kbd.json
+++ b/apps/v4/public/r/styles/radix-mira/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-[0.625rem] font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs bg-muted px-1 font-sans text-[0.625rem] font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/label.json b/apps/v4/public/r/styles/radix-mira/label.json
index e1e26e823c..e370d545e0 100644
--- a/apps/v4/public/r/styles/radix-mira/label.json
+++ b/apps/v4/public/r/styles/radix-mira/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/login-02.json b/apps/v4/public/r/styles/radix-mira/login-02.json
index 53a3951d55..d7e1731bb9 100644
--- a/apps/v4/public/r/styles/radix-mira/login-02.json
+++ b/apps/v4/public/r/styles/radix-mira/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-mira/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-mira/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/login-03.json b/apps/v4/public/r/styles/radix-mira/login-03.json
index 7d2b46f3a6..28422615fc 100644
--- a/apps/v4/public/r/styles/radix-mira/login-03.json
+++ b/apps/v4/public/r/styles/radix-mira/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-mira/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-mira/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-mira/login-04.json b/apps/v4/public/r/styles/radix-mira/login-04.json
index e6c01b5592..a76f3773b8 100644
--- a/apps/v4/public/r/styles/radix-mira/login-04.json
+++ b/apps/v4/public/r/styles/radix-mira/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-mira/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-mira/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/login-05.json b/apps/v4/public/r/styles/radix-mira/login-05.json
index b547ff9998..76a17d649c 100644
--- a/apps/v4/public/r/styles/radix-mira/login-05.json
+++ b/apps/v4/public/r/styles/radix-mira/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-mira/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-mira/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-mira/menubar.json b/apps/v4/public/r/styles/radix-mira/menubar.json
index 867f059f53..a364b3f412 100644
--- a/apps/v4/public/r/styles/radix-mira/menubar.json
+++ b/apps/v4/public/r/styles/radix-mira/menubar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-9 items-center rounded-lg 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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs outline-hidden select-none data-disabled:pointer-events-none data-inset:pl-7.5 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7.5 [&_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-2 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        \"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.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(\"bg-border/50 -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-none select-none data-inset:pl-7.5 [&_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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center rounded-lg border bg-background 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-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed 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 z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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-2 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 min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.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-2 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-2 py-1.5 text-xs text-muted-foreground data-inset:pl-7.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-[0.625rem] 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 min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-none select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.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 z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/native-select.json b/apps/v4/public/r/styles/radix-mira/native-select.json
index 7c52a0a3e2..35734dc8e9 100644
--- a/apps/v4/public/r/styles/radix-mira/native-select.json
+++ b/apps/v4/public/r/styles/radix-mira/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors outline-none select-none focus-visible:ring-2 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-2 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem]\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-1.5 size-3.5 -translate-y-1/2 select-none group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))]\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-7 w-full min-w-0 appearance-none rounded-md border border-input bg-input/20 py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-1.5 size-3.5 -translate-y-1/2 text-muted-foreground select-none group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))]\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json b/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json
index 3839292668..e928e258bc 100644
--- a/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-mira/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-mira/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-mira/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/navigation-menu.json b/apps/v4/public/r/styles/radix-mira/navigation-menu.json
index 8fa6302b1b..c1e3cb7ad3 100644
--- a/apps/v4/public/r/styles/radix-mira/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-mira/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-2 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 top-0 left-0 w-full p-1.5 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-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-xl shadow-md ring-1 duration-100 md:w-(--radix-navigation-menu-viewport-width)\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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-md bg-background px-2.5 py-1.5 text-xs/relaxed 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-1.5 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-xl 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-xl 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-95\",\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-lg p-2 text-xs/relaxed transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 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-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/otp-01.json b/apps/v4/public/r/styles/radix-mira/otp-01.json
deleted file mode 100644
index d483b41af8..0000000000
--- a/apps/v4/public/r/styles/radix-mira/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-mira/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-mira/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-mira/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/otp-02.json b/apps/v4/public/r/styles/radix-mira/otp-02.json
deleted file mode 100644
index 7580f6ba3a..0000000000
--- a/apps/v4/public/r/styles/radix-mira/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-mira/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-mira/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-mira/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/otp-03.json b/apps/v4/public/r/styles/radix-mira/otp-03.json
deleted file mode 100644
index f925adc26b..0000000000
--- a/apps/v4/public/r/styles/radix-mira/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-mira/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/radix-mira/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-mira/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/otp-04.json b/apps/v4/public/r/styles/radix-mira/otp-04.json
deleted file mode 100644
index 7f5211ebf6..0000000000
--- a/apps/v4/public/r/styles/radix-mira/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-mira/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-mira/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-mira/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/otp-05.json b/apps/v4/public/r/styles/radix-mira/otp-05.json
deleted file mode 100644
index 518a59c0e3..0000000000
--- a/apps/v4/public/r/styles/radix-mira/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-mira/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-mira/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-mira/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/pagination.json b/apps/v4/public/r/styles/radix-mira/pagination.json
index d81467ac01..56c1f71d52 100644
--- a/apps/v4/public/r/styles/radix-mira/pagination.json
+++ b/apps/v4/public/r/styles/radix-mira/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/popover.json b/apps/v4/public/r/styles/radix-mira/popover.json
index ab94c949c0..2ab1a9653e 100644
--- a/apps/v4/public/r/styles/radix-mira/popover.json
+++ b/apps/v4/public/r/styles/radix-mira/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-lg p-2.5 text-xs shadow-md ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-lg bg-popover p-2.5 text-xs text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/preview.json b/apps/v4/public/r/styles/radix-mira/preview.json
index d02a7f5b31..6ebe3d6939 100644
--- a/apps/v4/public/r/styles/radix-mira/preview.json
+++ b/apps/v4/public/r/styles/radix-mira/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -32,8 +32,8 @@
   ],
   "files": [
     {
-      "path": "registry/radix-mira/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-mira/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-mira/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-mira/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-mira/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\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 { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-mira/ui/sheet\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Spinner } from \"@/registry/radix-mira/ui/spinner\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/radix-mira/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-mira/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-mira/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-mira/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-mira/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-mira/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-mira/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-mira/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-mira/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-mira/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-mira/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-mira/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-mira/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-mira/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-mira/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-mira/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-mira/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-mira/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-mira/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-mira/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-mira/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-mira/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-mira/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-mira/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-mira/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-mira/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-mira/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-mira/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-mira/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-mira/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-mira/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-mira/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-mira/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/progress-example.json b/apps/v4/public/r/styles/radix-mira/progress-example.json
index da90bcbe69..7765bab5fa 100644
--- a/apps/v4/public/r/styles/radix-mira/progress-example.json
+++ b/apps/v4/public/r/styles/radix-mira/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/progress-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 { Field, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { Progress } from \"@/registry/radix-mira/ui/progress\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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 { Field, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { Progress } from \"@/registry/radix-mira/ui/progress\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/progress.json b/apps/v4/public/r/styles/radix-mira/progress.json
index cd673d97d8..6373db064c 100644
--- a/apps/v4/public/r/styles/radix-mira/progress.json
+++ b/apps/v4/public/r/styles/radix-mira/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-md\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary size-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative flex h-1 w-full items-center overflow-x-hidden rounded-md bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"size-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/radio-group.json b/apps/v4/public/r/styles/radix-mira/radio-group.json
index db4b445125..c4b07456b1 100644
--- a/apps/v4/public/r/styles/radix-mira/radio-group.json
+++ b/apps/v4/public/r/styles/radix-mira/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/registry.json b/apps/v4/public/r/styles/radix-mira/registry.json
index 857a047fdd..08f2722d9f 100644
--- a/apps/v4/public/r/styles/radix-mira/registry.json
+++ b/apps/v4/public/r/styles/radix-mira/registry.json
@@ -2,6 +2,48 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +52,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +69,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +86,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +103,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +120,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +137,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +153,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +169,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +186,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +204,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +221,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +239,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -137,6 +257,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -147,6 +273,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -157,6 +290,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -169,6 +309,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -181,6 +328,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -191,6 +345,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -202,6 +363,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -213,6 +381,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -223,6 +398,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -233,6 +415,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -244,6 +432,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -258,6 +452,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -268,6 +469,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -279,6 +486,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -290,6 +503,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -301,6 +521,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -311,6 +537,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -321,6 +554,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -331,6 +571,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -342,6 +589,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -352,6 +605,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -362,6 +622,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -372,6 +639,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -383,6 +657,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -393,6 +674,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -403,6 +691,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -413,6 +708,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -424,6 +726,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -443,6 +752,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -453,6 +768,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -463,6 +784,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -474,6 +802,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -484,6 +819,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -494,6 +835,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -504,6 +852,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -514,6 +868,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -524,6 +885,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -534,6 +901,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -545,6 +919,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -555,6 +936,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -566,6 +954,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -576,6 +970,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -586,6 +986,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+          "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1464,6 +1870,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-mira/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1512,7 +1945,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1543,110 +1976,7 @@
       ],
       "files": [
         {
-          "path": "registry/radix-mira/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/radix-mira/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-mira/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-mira/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-mira/blocks/chatgpt.tsx",
+          "path": "registry/radix-mira/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2551,7 +2881,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2563,7 +2893,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2575,7 +2905,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2587,7 +2917,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2599,7 +2929,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2614,7 +2944,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2629,6 +2959,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-mira/resizable.json b/apps/v4/public/r/styles/radix-mira/resizable.json
index 1e8311cbed..92248a6a3c 100644
--- a/apps/v4/public/r/styles/radix-mira/resizable.json
+++ b/apps/v4/public/r/styles/radix-mira/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/scroll-area-example.json b/apps/v4/public/r/styles/radix-mira/scroll-area-example.json
index 49e41ba3a7..638fcb7f9f 100644
--- a/apps/v4/public/r/styles/radix-mira/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-mira/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-mira/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-mira/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/scroll-area.json b/apps/v4/public/r/styles/radix-mira/scroll-area.json
index 8209c087ff..d47f526731 100644
--- a/apps/v4/public/r/styles/radix-mira/scroll-area.json
+++ b/apps/v4/public/r/styles/radix-mira/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/select.json b/apps/v4/public/r/styles/radix-mira/select.json
index a0a79d6d45..51a3369d87 100644
--- a/apps/v4/public/r/styles/radix-mira/select.json
+++ b/apps/v4/public/r/styles/radix-mira/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-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=\"text-muted-foreground pointer-events-none size-3.5\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-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 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        \"bg-border/50 pointer-events-none -mx-1 my-1 h-px\",\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        \"bg-popover z-10 flex cursor-default items-center justify-center 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        \"bg-popover z-10 flex cursor-default items-center justify-center 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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-input/20 px-2 py-1.5 text-xs/relaxed whitespace-nowrap transition-colors outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-7 data-[size=sm]:h-6 *: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:bg-input/30 dark:hover:bg-input/50 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        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 relative z-50 max-h-(--radix-select-content-available-height) min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex min-h-7 w-full cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed 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 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 my-1 h-px bg-border/50\",\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"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/separator-example.json b/apps/v4/public/r/styles/radix-mira/separator-example.json
index 54ce30e01e..b9d7cbe4e5 100644
--- a/apps/v4/public/r/styles/radix-mira/separator-example.json
+++ b/apps/v4/public/r/styles/radix-mira/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/separator.json b/apps/v4/public/r/styles/radix-mira/separator.json
index c1ddcf4b13..a81245eaf3 100644
--- a/apps/v4/public/r/styles/radix-mira/separator.json
+++ b/apps/v4/public/r/styles/radix-mira/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/sheet-example.json b/apps/v4/public/r/styles/radix-mira/sheet-example.json
index dc1053510e..4b3ce52342 100644
--- a/apps/v4/public/r/styles/radix-mira/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-mira/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-mira/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sheet.json b/apps/v4/public/r/styles/radix-mira/sheet.json
index 6c249ecca0..46e0bef23e 100644
--- a/apps/v4/public/r/styles/radix-mira/sheet.json
+++ b/apps/v4/public/r/styles/radix-mira/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-sm font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/80 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col bg-background bg-clip-padding text-xs/relaxed shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-sm font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-xs/relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-01.json b/apps/v4/public/r/styles/radix-mira/sidebar-01.json
index c7d147caf4..e19e372da1 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-01.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-02.json b/apps/v4/public/r/styles/radix-mira/sidebar-02.json
index 7753b3d446..4d608efa67 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-02.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-mira/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-mira/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-mira/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-mira/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-03.json b/apps/v4/public/r/styles/radix-mira/sidebar-03.json
index 34dfbd8f21..5e1f9a929b 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-03.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-04.json b/apps/v4/public/r/styles/radix-mira/sidebar-04.json
index 82420821fc..cddb3fcaa2 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-04.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-05.json b/apps/v4/public/r/styles/radix-mira/sidebar-05.json
index 46d3a5419e..7a6ff41c72 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-05.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-mira/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-mira/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-06.json b/apps/v4/public/r/styles/radix-mira/sidebar-06.json
index a34daf1406..de712b1951 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-06.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-mira/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-mira/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-mira/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-mira/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-mira/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-mira/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-07.json b/apps/v4/public/r/styles/radix-mira/sidebar-07.json
index ba0d9aa0f8..9e4286b8b7 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-07.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-08.json b/apps/v4/public/r/styles/radix-mira/sidebar-08.json
index 91446d98d6..5f7548ccff 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-08.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-mira/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-mira/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-mira/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-mira/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-mira/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-mira/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-09.json b/apps/v4/public/r/styles/radix-mira/sidebar-09.json
index a3a86ccb04..bbb0bc5de6 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-09.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-09.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-10.json b/apps/v4/public/r/styles/radix-mira/sidebar-10.json
index bcbaacdf00..3b4fd82c40 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-10.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-mira/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-mira/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"data-[state=open]:bg-accent h-7 w-7\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-11.json b/apps/v4/public/r/styles/radix-mira/sidebar-11.json
index f333b57faf..6930797a7c 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-11.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-12.json b/apps/v4/public/r/styles/radix-mira/sidebar-12.json
index a3b52804e5..e3bfd66309 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-12.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-mira/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-mira/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-mira/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-mira/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-13.json b/apps/v4/public/r/styles/radix-mira/sidebar-13.json
index 865ab36174..e5cae25f37 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-13.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-14.json b/apps/v4/public/r/styles/radix-mira/sidebar-14.json
index d645def4ac..037f1d6b2e 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-14.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-15.json b/apps/v4/public/r/styles/radix-mira/sidebar-15.json
index 9f925ecf7e..7129bf151c 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-15.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/radix-mira/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-mira/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/radix-mira/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-mira/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-screen w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-mira/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-mira/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-mira/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-mira/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-16.json b/apps/v4/public/r/styles/radix-mira/sidebar-16.json
index e7b239602f..fe0e559c7c 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-16.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-mira/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-mira/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-mira/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-mira/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-mira/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-mira/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-mira/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-mira/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-mira/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-mira/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-mira/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-mira/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-mira/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-mira/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-mira/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-example.json b/apps/v4/public/r/styles/radix-mira/sidebar-example.json
index 60623cb3cd..aa9b0c125f 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-mira/sidebar-floating-example.json
index 1b5ca9fc99..26fefae405 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-mira/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-mira/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-mira/sidebar-icon-example.json
index 7f2d3fc90d..c11a7218f6 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-mira/sidebar-inset-example.json
index 571703a0c2..719d800c8a 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-mira/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/sidebar.json b/apps/v4/public/r/styles/radix-mira/sidebar.json
index 0c821a372e..bcff879107 100644
--- a/apps/v4/public/r/styles/radix-mira/sidebar.json
+++ b/apps/v4/public/r/styles/radix-mira/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-mira/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-mira/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-mira/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\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        \"bg-muted/20 dark:bg-muted/30 border-input h-8 w-full\",\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\", 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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"relative flex w-full min-w-0 flex-col px-2 py-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs 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        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 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-xs\", 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-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-[calc(var(--radius-sm)-2px)] p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden 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 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-[calc(var(--radius-sm)-2px)] px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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        \"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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-xs data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-mira/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-mira/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-mira/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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-lg 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-xl 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-muted/20 dark:bg-muted/30\",\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\", 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-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\n        \"relative flex w-full min-w-0 flex-col px-2 py-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs 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-md 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-xs\", 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-px\", 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-[calc(var(--radius-sm)+2px)] p-2 text-left text-xs 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-8 text-xs\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-xs group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-[calc(var(--radius-sm)-2px)] 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-1.5 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-[calc(var(--radius-sm)-2px)] 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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\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-md px-2 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-xs data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/signup-02.json b/apps/v4/public/r/styles/radix-mira/signup-02.json
index b8a7633d22..7a0c701ecb 100644
--- a/apps/v4/public/r/styles/radix-mira/signup-02.json
+++ b/apps/v4/public/r/styles/radix-mira/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-mira/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-mira/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/signup-03.json b/apps/v4/public/r/styles/radix-mira/signup-03.json
index d43ac79817..f3701e705b 100644
--- a/apps/v4/public/r/styles/radix-mira/signup-03.json
+++ b/apps/v4/public/r/styles/radix-mira/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-mira/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-mira/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-mira/signup-04.json b/apps/v4/public/r/styles/radix-mira/signup-04.json
index 9efa228aef..1f3544f4e5 100644
--- a/apps/v4/public/r/styles/radix-mira/signup-04.json
+++ b/apps/v4/public/r/styles/radix-mira/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-mira/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-mira/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-mira/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/signup-05.json b/apps/v4/public/r/styles/radix-mira/signup-05.json
index 5405551697..78e280da6c 100644
--- a/apps/v4/public/r/styles/radix-mira/signup-05.json
+++ b/apps/v4/public/r/styles/radix-mira/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-mira/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-mira/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-mira/skeleton.json b/apps/v4/public/r/styles/radix-mira/skeleton.json
index 9a774e8fca..92c74cd1cb 100644
--- a/apps/v4/public/r/styles/radix-mira/skeleton.json
+++ b/apps/v4/public/r/styles/radix-mira/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/slider-example.json b/apps/v4/public/r/styles/radix-mira/slider-example.json
index 3314bccac7..0ebc4925ee 100644
--- a/apps/v4/public/r/styles/radix-mira/slider-example.json
+++ b/apps/v4/public/r/styles/radix-mira/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/slider-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 { Label } from \"@/registry/radix-mira/ui/label\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/slider.json b/apps/v4/public/r/styles/radix-mira/slider.json
index 810a9ab3a5..a137f79020 100644
--- a/apps/v4/public/r/styles/radix-mira/slider.json
+++ b/apps/v4/public/r/styles/radix-mira/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"bg-muted relative grow overflow-hidden rounded-md data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary ring-ring/30 block size-4 shrink-0 rounded-md border bg-white shadow-sm transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-md bg-muted data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"block size-4 shrink-0 rounded-md border border-primary bg-white shadow-sm ring-ring/30 transition-colors select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/sonner.json b/apps/v4/public/r/styles/radix-mira/sonner.json
index e1cc11b15d..1e9e09fc4c 100644
--- a/apps/v4/public/r/styles/radix-mira/sonner.json
+++ b/apps/v4/public/r/styles/radix-mira/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/spinner.json b/apps/v4/public/r/styles/radix-mira/spinner.json
index 70da790a69..71f45dabeb 100644
--- a/apps/v4/public/r/styles/radix-mira/spinner.json
+++ b/apps/v4/public/r/styles/radix-mira/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/style.json b/apps/v4/public/r/styles/radix-mira/style.json
new file mode 100644
index 0000000000..9d8bb6576c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-mira/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/switch.json b/apps/v4/public/r/styles/radix-mira/switch.json
index 8ef7104483..1cf7a11151 100644
--- a/apps/v4/public/r/styles/radix-mira/switch.json
+++ b/apps/v4/public/r/styles/radix-mira/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-2 aria-invalid:ring-2 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/table.json b/apps/v4/public/r/styles/radix-mira/table.json
index 8fc4b2f8cc..6fd81fefd7 100644
--- a/apps/v4/public/r/styles/radix-mira/table.json
+++ b/apps/v4/public/r/styles/radix-mira/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-xs\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-xs\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/tabs-example.json b/apps/v4/public/r/styles/radix-mira/tabs-example.json
index 53c8fe8b7c..6b8e1432a8 100644
--- a/apps/v4/public/r/styles/radix-mira/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-mira/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/tabs.json b/apps/v4/public/r/styles/radix-mira/tabs.json
index 1151f4a6ae..fa03d9ca0a 100644
--- a/apps/v4/public/r/styles/radix-mira/tabs.json
+++ b/apps/v4/public/r/styles/radix-mira/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-xs/relaxed outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\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-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:py-[calc(--spacing(1.25))] 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 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-xs/relaxed outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/textarea.json b/apps/v4/public/r/styles/radix-mira/textarea.json
index 0547221cf7..9d1fe10bfc 100644
--- a/apps/v4/public/r/styles/radix-mira/textarea.json
+++ b/apps/v4/public/r/styles/radix-mira/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full resize-none rounded-md border px-2 py-2 text-sm transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-2 md:text-xs/relaxed\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full resize-none rounded-md border border-input bg-input/20 px-2 py-2 text-sm transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-xs/relaxed dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/toggle-group-example.json b/apps/v4/public/r/styles/radix-mira/toggle-group-example.json
index bd6251220a..5765549269 100644
--- a/apps/v4/public/r/styles/radix-mira/toggle-group-example.json
+++ b/apps/v4/public/r/styles/radix-mira/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-mira/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-mira/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/toggle-group.json b/apps/v4/public/r/styles/radix-mira/toggle-group.json
index 88eed07eaf..829efc642a 100644
--- a/apps/v4/public/r/styles/radix-mira/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-mira/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-mira/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),8px)]\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-mira/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/toggle.json b/apps/v4/public/r/styles/radix-mira/toggle.json
index 25debef2a6..f048dc6f90 100644
--- a/apps/v4/public/r/styles/radix-mira/toggle.json
+++ b/apps/v4/public/r/styles/radix-mira/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-md text-xs font-medium transition-all [&_svg:not([class*='size-'])]:size-3.5 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent\",\n      },\n      size: {\n        default: \"h-7 min-w-7 px-2\",\n        sm: \"h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-1.5 text-[0.625rem] [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 min-w-8 px-2\",\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-mira/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-md text-xs font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]: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: \"h-7 min-w-7 px-2\",\n        sm: \"h-6 min-w-6 rounded-[min(var(--radius-md),8px)] px-1.5 text-[0.625rem] [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 min-w-8 px-2\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/tooltip-example.json b/apps/v4/public/r/styles/radix-mira/tooltip-example.json
index fa89c2ecb5..9d1d638af2 100644
--- a/apps/v4/public/r/styles/radix-mira/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-mira/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Kbd } from \"@/registry/radix-mira/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/tooltip.json b/apps/v4/public/r/styles/radix-mira/tooltip.json
index 49650112bf..7b4a1ce8e9 100644
--- a/apps/v4/public/r/styles/radix-mira/tooltip.json
+++ b/apps/v4/public/r/styles/radix-mira/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-mira/vercel.json b/apps/v4/public/r/styles/radix-mira/vercel.json
deleted file mode 100644
index 24c62f404c..0000000000
--- a/apps/v4/public/r/styles/radix-mira/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-mira/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-mira/ui/alert\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Calendar } from \"@/registry/radix-mira/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-mira/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/radix-mira/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/accordion-example.json b/apps/v4/public/r/styles/radix-nova/accordion-example.json
index 65854fe1d9..e0be518ecc 100644
--- a/apps/v4/public/r/styles/radix-nova/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-nova/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-nova/ui/accordion\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-nova/ui/accordion\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/accordion.json b/apps/v4/public/r/styles/radix-nova/accordion.json
index 46694507be..7c1aae02f2 100644
--- a/apps/v4/public/r/styles/radix-nova/accordion.json
+++ b/apps/v4/public/r/styles/radix-nova/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring 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-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/alert-dialog.json b/apps/v4/public/r/styles/radix-nova/alert-dialog.json
index 7cf9c4670b..8418034c7a 100644
--- a/apps/v4/public/r/styles/radix-nova/alert-dialog.json
+++ b/apps/v4/public/r/styles/radix-nova/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/alert.json b/apps/v4/public/r/styles/radix-nova/alert.json
index d900ab1c9b..6cfc3272b2 100644
--- a/apps/v4/public/r/styles/radix-nova/alert.json
+++ b/apps/v4/public/r/styles/radix-nova/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2 right-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-nova/aspect-ratio-example.json
index 89f310d16f..e1472df069 100644
--- a/apps/v4/public/r/styles/radix-nova/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-nova/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { AspectRatio } from \"@/registry/radix-nova/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { AspectRatio } from \"@/registry/radix-nova/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/aspect-ratio.json b/apps/v4/public/r/styles/radix-nova/aspect-ratio.json
index 3e51e51f5b..c9c8a8078c 100644
--- a/apps/v4/public/r/styles/radix-nova/aspect-ratio.json
+++ b/apps/v4/public/r/styles/radix-nova/aspect-ratio.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/avatar.json b/apps/v4/public/r/styles/radix-nova/avatar.json
index 5e2d77c33e..bbe5fab17e 100644
--- a/apps/v4/public/r/styles/radix-nova/avatar.json
+++ b/apps/v4/public/r/styles/radix-nova/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/badge.json b/apps/v4/public/r/styles/radix-nova/badge.json
index 087d31585f..65980a69b6 100644
--- a/apps/v4/public/r/styles/radix-nova/badge.json
+++ b/apps/v4/public/r/styles/radix-nova/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/badge.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/breadcrumb.json b/apps/v4/public/r/styles/radix-nova/breadcrumb.json
index 4c5b685d2c..0ae5d337de 100644
--- a/apps/v4/public/r/styles/radix-nova/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-nova/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground\",\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\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/button-group.json b/apps/v4/public/r/styles/radix-nova/button-group.json
index 708aeaea9c..321783be7c 100644
--- a/apps/v4/public/r/styles/radix-nova/button-group.json
+++ b/apps/v4/public/r/styles/radix-nova/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"bg-muted flex items-center gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/button.json b/apps/v4/public/r/styles/radix-nova/button.json
index fe31197037..925e2620a5 100644
--- a/apps/v4/public/r/styles/radix-nova/button.json
+++ b/apps/v4/public/r/styles/radix-nova/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/button.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary:\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 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 [a]:hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\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-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/calendar-example.json b/apps/v4/public/r/styles/radix-nova/calendar-example.json
index 76aaa9fd7e..3872fa932f 100644
--- a/apps/v4/public/r/styles/radix-nova/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-nova/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-nova/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-nova/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/calendar.json b/apps/v4/public/r/styles/radix-nova/calendar.json
index ef9379fc1f..1c8004edab 100644
--- a/apps/v4/public/r/styles/radix-nova/calendar.json
+++ b/apps/v4/public/r/styles/radix-nova/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/card-example.json b/apps/v4/public/r/styles/radix-nova/card-example.json
index 65ecd38ec4..26bd30d3eb 100644
--- a/apps/v4/public/r/styles/radix-nova/card-example.json
+++ b/apps/v4/public/r/styles/radix-nova/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center style-nova:mt-2\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/card.json b/apps/v4/public/r/styles/radix-nova/card.json
index 571ab7ada0..fa90a99841 100644
--- a/apps/v4/public/r/styles/radix-nova/card.json
+++ b/apps/v4/public/r/styles/radix-nova/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"bg-muted/50 flex items-center rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4 group-data-[size=sm]/card:px-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/card:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/cards.json b/apps/v4/public/r/styles/radix-nova/cards.json
new file mode 100644
index 0000000000..2db2fe42f8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/cards.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cards",
+  "title": "Cards",
+  "registryDependencies": [
+    "alert-dialog",
+    "avatar",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "combobox",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "label",
+    "popover",
+    "radio-group",
+    "select",
+    "separator",
+    "sheet",
+    "slider",
+    "spinner",
+    "switch",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-nova/blocks/cards.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-nova/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-nova/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\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 { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-nova/ui/sheet\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Spinner } from \"@/registry/radix-nova/ui/spinner\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/carousel.json b/apps/v4/public/r/styles/radix-nova/carousel.json
index 908cc46600..c7c2b64bfc 100644
--- a/apps/v4/public/r/styles/radix-nova/carousel.json
+++ b/apps/v4/public/r/styles/radix-nova/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/chart-example.json b/apps/v4/public/r/styles/radix-nova/chart-example.json
index a1852be54c..fb344ea84d 100644
--- a/apps/v4/public/r/styles/radix-nova/chart-example.json
+++ b/apps/v4/public/r/styles/radix-nova/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/chart.json b/apps/v4/public/r/styles/radix-nova/chart.json
index a839366d35..be1b7ca155 100644
--- a/apps/v4/public/r/styles/radix-nova/chart.json
+++ b/apps/v4/public/r/styles/radix-nova/chart.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/chatgpt.json b/apps/v4/public/r/styles/radix-nova/chatgpt.json
deleted file mode 100644
index 43c1f4ef40..0000000000
--- a/apps/v4/public/r/styles/radix-nova/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-nova/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-nova/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                    remixicon=\"RiAttachmentLine\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                    remixicon=\"RiSparklingLine\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                    remixicon=\"RiMagicLine\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                        remixicon=\"RiHand\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                        remixicon=\"RiBookOpenLine\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                        remixicon=\"RiGlobeLine\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                        remixicon=\"RiPencilLine\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          remixicon=\"RiFolderLine\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        remixicon=\"RiCheckboxCircleLine\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/checkbox.json b/apps/v4/public/r/styles/radix-nova/checkbox.json
index 6824371f4f..ed7031c9b1 100644
--- a/apps/v4/public/r/styles/radix-nova/checkbox.json
+++ b/apps/v4/public/r/styles/radix-nova/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/collapsible-example.json b/apps/v4/public/r/styles/radix-nova/collapsible-example.json
index c9ddb7c229..a578e3a613 100644
--- a/apps/v4/public/r/styles/radix-nova/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-nova/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/collapsible-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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/collapsible.json b/apps/v4/public/r/styles/radix-nova/collapsible.json
index 682758d0a9..a8862c261a 100644
--- a/apps/v4/public/r/styles/radix-nova/collapsible.json
+++ b/apps/v4/public/r/styles/radix-nova/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/combobox-example.json b/apps/v4/public/r/styles/radix-nova/combobox-example.json
index b15cff0208..c2d55325a5 100644
--- a/apps/v4/public/r/styles/radix-nova/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-nova/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-nova/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-nova/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/combobox.json b/apps/v4/public/r/styles/radix-nova/combobox.json
index 8794238e6e..46a9fd1614 100644
--- a/apps/v4/public/r/styles/radix-nova/combobox.json
+++ b/apps/v4/public/r/styles/radix-nova/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-4\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm 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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1\",\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-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-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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-lg 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 overflow-y-auto overscroll-contain p-1 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 rounded-md py-1 pr-8 pl-1.5 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\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 my-1 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-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/command.json b/apps/v4/public/r/styles/radix-nova/command.json
index 119510f62a..85a51eccd1 100644
--- a/apps/v4/public/r/styles/radix-nova/command.json
+++ b/apps/v4/public/r/styles/radix-nova/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\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(\"bg-border -mx-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\",\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-nova/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\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(\"-mx-1 h-px bg-border\", 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-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/component-example.json b/apps/v4/public/r/styles/radix-nova/component-example.json
index 73af48c516..0337952a9a 100644
--- a/apps/v4/public/r/styles/radix-nova/component-example.json
+++ b/apps/v4/public/r/styles/radix-nova/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-nova/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-nova/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/context-menu.json b/apps/v4/public/r/styles/radix-nova/context-menu.json
index e2a48ca7ca..7ee3175737 100644
--- a/apps/v4/public/r/styles/radix-nova/context-menu.json
+++ b/apps/v4/public/r/styles/radix-nova/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border p-1 shadow-lg duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-lg border bg-popover p-1 text-popover-foreground shadow-lg 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-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\",\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 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/dashboard-01.json b/apps/v4/public/r/styles/radix-nova/dashboard-01.json
index ef1d26c7e0..1387326fee 100644
--- a/apps/v4/public/r/styles/radix-nova/dashboard-01.json
+++ b/apps/v4/public/r/styles/radix-nova/dashboard-01.json
@@ -57,17 +57,17 @@
     },
     {
       "path": "registry/radix-nova/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-nova/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-nova/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"data-[state=open]:bg-muted text-muted-foreground flex size-8\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-nova/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-nova/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-nova/blocks/dashboard-01/components/nav-documents.tsx",
-      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"data-[state=open]:bg-accent rounded-sm\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-nova/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/radix-nova/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-nova/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-nova/demo.json b/apps/v4/public/r/styles/radix-nova/demo.json
new file mode 100644
index 0000000000..f6695a123a
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-nova/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/dialog-example.json b/apps/v4/public/r/styles/radix-nova/dialog-example.json
index e7c5760240..99b40dc755 100644
--- a/apps/v4/public/r/styles/radix-nova/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-nova/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/dialog.json b/apps/v4/public/r/styles/radix-nova/dialog.json
index 9509dd3839..9c95d6ee06 100644
--- a/apps/v4/public/r/styles/radix-nova/dialog.json
+++ b/apps/v4/public/r/styles/radix-nova/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-2 right-2\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/direction.json b/apps/v4/public/r/styles/radix-nova/direction.json
index 4daf24743c..89af84998b 100644
--- a/apps/v4/public/r/styles/radix-nova/direction.json
+++ b/apps/v4/public/r/styles/radix-nova/direction.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+      "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/drawer-example.json b/apps/v4/public/r/styles/radix-nova/drawer-example.json
index b5103f3553..1bd6d0dc6c 100644
--- a/apps/v4/public/r/styles/radix-nova/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-nova/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-nova/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-nova/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/drawer.json b/apps/v4/public/r/styles/radix-nova/drawer.json
index cc3d651742..96acbfb0b2 100644
--- a/apps/v4/public/r/styles/radix-nova/drawer.json
+++ b/apps/v4/public/r/styles/radix-nova/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-0.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json
index fd970d3b93..fe9726a8a4 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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/dropdown-menu.json b/apps/v4/public/r/styles/radix-nova/dropdown-menu.json
index b7e1a072ef..0a9274453b 100644
--- a/apps/v4/public/r/styles/radix-nova/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-nova/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 duration-100 data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 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-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7\",\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 my-1 h-px bg-border\", 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-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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 z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/elevenlabs.json b/apps/v4/public/r/styles/radix-nova/elevenlabs.json
deleted file mode 100644
index 3f690ebcb4..0000000000
--- a/apps/v4/public/r/styles/radix-nova/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-nova/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/empty.json b/apps/v4/public/r/styles/radix-nova/empty.json
index 7c2399e68a..29b40959e5 100644
--- a/apps/v4/public/r/styles/radix-nova/empty.json
+++ b/apps/v4/public/r/styles/radix-nova/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-sm font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/example.json b/apps/v4/public/r/styles/radix-nova/example.json
index 5521c36175..7ac5390a4c 100644
--- a/apps/v4/public/r/styles/radix-nova/example.json
+++ b/apps/v4/public/r/styles/radix-nova/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-nova/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/field.json b/apps/v4/public/r/styles/radix-nova/field.json
index 66f90b1e16..f5382795fb 100644
--- a/apps/v4/public/r/styles/radix-nova/field.json
+++ b/apps/v4/public/r/styles/radix-nova/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\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=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-2 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/font-dm-sans.json b/apps/v4/public/r/styles/radix-nova/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/radix-nova/font-dm-sans.json
+++ b/apps/v4/public/r/styles/radix-nova/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-nova/font-geist-sans.json b/apps/v4/public/r/styles/radix-nova/font-geist-sans.json
deleted file mode 100644
index a60a347fd3..0000000000
--- a/apps/v4/public/r/styles/radix-nova/font-geist-sans.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
-  "type": "registry:font",
-  "font": {
-    "family": "'Geist Variable', sans-serif",
-    "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
-    "subsets": [
-      "latin"
-    ]
-  }
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/font-jetbrains-mono.json b/apps/v4/public/r/styles/radix-nova/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/radix-nova/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/radix-nova/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/radix-nova/font-lora.json b/apps/v4/public/r/styles/radix-nova/font-lora.json
new file mode 100644
index 0000000000..cacd01a3f0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/font-lora.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-lora",
+  "title": "Lora",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/font-merriweather.json b/apps/v4/public/r/styles/radix-nova/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/font-noto-serif.json b/apps/v4/public/r/styles/radix-nova/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/font-outfit.json b/apps/v4/public/r/styles/radix-nova/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/radix-nova/font-outfit.json
+++ b/apps/v4/public/r/styles/radix-nova/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-nova/font-playfair-display.json b/apps/v4/public/r/styles/radix-nova/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/font-public-sans.json b/apps/v4/public/r/styles/radix-nova/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/radix-nova/font-public-sans.json
+++ b/apps/v4/public/r/styles/radix-nova/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-nova/font-raleway.json b/apps/v4/public/r/styles/radix-nova/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/radix-nova/font-raleway.json
+++ b/apps/v4/public/r/styles/radix-nova/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-nova/font-roboto-slab.json b/apps/v4/public/r/styles/radix-nova/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/font-roboto.json b/apps/v4/public/r/styles/radix-nova/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/radix-nova/font-roboto.json
+++ b/apps/v4/public/r/styles/radix-nova/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-nova/github.json b/apps/v4/public/r/styles/radix-nova/github.json
deleted file mode 100644
index c9d78bce46..0000000000
--- a/apps/v4/public/r/styles/radix-nova/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-nova/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\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 { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/radix-nova/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-nova/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\nimport { NativeSelect } from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport { Spinner } from \"@/registry/radix-nova/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                              remixicon=\"RiMoreLine\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                          remixicon=\"RiBox1Line\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                          remixicon=\"RiFlashlightLine\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                          remixicon=\"RiHardDriveLine\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                          remixicon=\"RiShareLine\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n                remixicon=\"RiUploadLine\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                    remixicon=\"RiUploadCloudLine\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                              remixicon=\"RiGitBranchLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                              remixicon=\"RiRobotLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                          remixicon=\"RiSendPlaneLine\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                        remixicon=\"RiHomeLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                        remixicon=\"RiCircleLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                        remixicon=\"RiGitBranchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                        remixicon=\"RiGridLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                        remixicon=\"RiHardDriveLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                        remixicon=\"RiRobotLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                        remixicon=\"RiSparklingLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                        remixicon=\"RiShoppingBagLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                        remixicon=\"RiLinksLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/hover-card-example.json b/apps/v4/public/r/styles/radix-nova/hover-card-example.json
index 40c40f1436..98b80a6fc0 100644
--- a/apps/v4/public/r/styles/radix-nova/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-nova/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-nova/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-nova/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/hover-card.json b/apps/v4/public/r/styles/radix-nova/hover-card.json
index 24468b42ea..af36f6fd8b 100644
--- a/apps/v4/public/r/styles/radix-nova/hover-card.json
+++ b/apps/v4/public/r/styles/radix-nova/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/index.json b/apps/v4/public/r/styles/radix-nova/index.json
new file mode 100644
index 0000000000..69f13cef90
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/input-group-example.json b/apps/v4/public/r/styles/radix-nova/input-group-example.json
index b07e1c7522..7295f4d07c 100644
--- a/apps/v4/public/r/styles/radix-nova/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-nova/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-nova/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-nova/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport { Spinner } from \"@/registry/radix-nova/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-nova/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-nova/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport { Spinner } from \"@/registry/radix-nova/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/input-group.json b/apps/v4/public/r/styles/radix-nova/input-group.json
index bd0ab21c36..5b02f92418 100644
--- a/apps/v4/public/r/styles/radix-nova/input-group.json
+++ b/apps/v4/public/r/styles/radix-nova/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\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-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\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 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"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 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/input-otp-example.json b/apps/v4/public/r/styles/radix-nova/input-otp-example.json
index 4e4af27876..037b7b5827 100644
--- a/apps/v4/public/r/styles/radix-nova/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-nova/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/input-otp.json b/apps/v4/public/r/styles/radix-nova/input-otp.json
index db54915919..e933bdb204 100644
--- a/apps/v4/public/r/styles/radix-nova/input-otp.json
+++ b/apps/v4/public/r/styles/radix-nova/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3\",\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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 rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/input.json b/apps/v4/public/r/styles/radix-nova/input.json
index 8030ab2f3c..297e297c06 100644
--- a/apps/v4/public/r/styles/radix-nova/input.json
+++ b/apps/v4/public/r/styles/radix-nova/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/item-example.json b/apps/v4/public/r/styles/radix-nova/item-example.json
index bf8683930d..0916d093a5 100644
--- a/apps/v4/public/r/styles/radix-nova/item-example.json
+++ b/apps/v4/public/r/styles/radix-nova/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/item.json b/apps/v4/public/r/styles/radix-nova/item.json
index 9b90e4e545..5fce361f0e 100644
--- a/apps/v4/public/r/styles/radix-nova/item.json
+++ b/apps/v4/public/r/styles/radix-nova/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/kbd.json b/apps/v4/public/r/styles/radix-nova/kbd.json
index 1000444f08..596f500968 100644
--- a/apps/v4/public/r/styles/radix-nova/kbd.json
+++ b/apps/v4/public/r/styles/radix-nova/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/label.json b/apps/v4/public/r/styles/radix-nova/label.json
index c54133d924..07d81a5ddb 100644
--- a/apps/v4/public/r/styles/radix-nova/label.json
+++ b/apps/v4/public/r/styles/radix-nova/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/login-02.json b/apps/v4/public/r/styles/radix-nova/login-02.json
index f75b7936f1..6633129489 100644
--- a/apps/v4/public/r/styles/radix-nova/login-02.json
+++ b/apps/v4/public/r/styles/radix-nova/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-nova/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-nova/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/login-03.json b/apps/v4/public/r/styles/radix-nova/login-03.json
index f3c8d33d44..a7968b85b4 100644
--- a/apps/v4/public/r/styles/radix-nova/login-03.json
+++ b/apps/v4/public/r/styles/radix-nova/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-nova/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-nova/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-nova/login-04.json b/apps/v4/public/r/styles/radix-nova/login-04.json
index 53ca8b596e..3f60cbe0ed 100644
--- a/apps/v4/public/r/styles/radix-nova/login-04.json
+++ b/apps/v4/public/r/styles/radix-nova/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-nova/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-nova/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/login-05.json b/apps/v4/public/r/styles/radix-nova/login-05.json
index a302699477..cd3c2e7e3c 100644
--- a/apps/v4/public/r/styles/radix-nova/login-05.json
+++ b/apps/v4/public/r/styles/radix-nova/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-nova/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-nova/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-nova/menubar.json b/apps/v4/public/r/styles/radix-nova/menubar.json
index 478341ffa1..51536bfc3e 100644
--- a/apps/v4/public/r/styles/radix-nova/menubar.json
+++ b/apps/v4/public/r/styles/radix-nova/menubar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-8 items-center gap-0.5 rounded-lg border p-[3px]\",\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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-md ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-1.5 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-1.5 py-1 text-sm font-medium data-inset:pl-7\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg p-1 shadow-lg ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-8 items-center gap-0.5 rounded-lg border bg-background p-[3px]\",\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-sm px-1.5 py-[2px] 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 z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 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-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 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-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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-1.5 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-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 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-1.5 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-1.5 py-1 text-sm font-medium data-inset:pl-7\",\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\", 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-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 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 z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/native-select.json b/apps/v4/public/r/styles/radix-nova/native-select.json
index 2c624ed805..aa9f8cb30c 100644
--- a/apps/v4/public/r/styles/radix-nova/native-select.json
+++ b/apps/v4/public/r/styles/radix-nova/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-2.5 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({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json b/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json
index eb0aacbf3d..c3f00678a0 100644
--- a/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-nova/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-nova/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-nova/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/navigation-menu.json b/apps/v4/public/r/styles/radix-nova/navigation-menu.json
index e1ced69b71..e69f7feb77 100644
--- a/apps/v4/public/r/styles/radix-nova/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-nova/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 top-0 left-0 w-full p-1 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-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-(--radix-navigation-menu-viewport-width)\",\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        \"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 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-1 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-lg group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow 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-lg bg-popover text-popover-foreground shadow 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-95\",\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-2 rounded-lg p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md data-active:bg-muted/50 data-active:hover:bg-muted data-active: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-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/otp-01.json b/apps/v4/public/r/styles/radix-nova/otp-01.json
deleted file mode 100644
index a2463f48c4..0000000000
--- a/apps/v4/public/r/styles/radix-nova/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-nova/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-nova/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-nova/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/otp-02.json b/apps/v4/public/r/styles/radix-nova/otp-02.json
deleted file mode 100644
index 973c7a2b60..0000000000
--- a/apps/v4/public/r/styles/radix-nova/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-nova/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-nova/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-nova/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/otp-03.json b/apps/v4/public/r/styles/radix-nova/otp-03.json
deleted file mode 100644
index 63c50ab216..0000000000
--- a/apps/v4/public/r/styles/radix-nova/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-nova/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/radix-nova/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-nova/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/otp-04.json b/apps/v4/public/r/styles/radix-nova/otp-04.json
deleted file mode 100644
index 68f868aefd..0000000000
--- a/apps/v4/public/r/styles/radix-nova/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-nova/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-nova/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-nova/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/otp-05.json b/apps/v4/public/r/styles/radix-nova/otp-05.json
deleted file mode 100644
index 5c4c35eb38..0000000000
--- a/apps/v4/public/r/styles/radix-nova/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-nova/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-nova/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-nova/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/pagination.json b/apps/v4/public/r/styles/radix-nova/pagination.json
index 5d9b59fe1a..7448f7970d 100644
--- a/apps/v4/public/r/styles/radix-nova/pagination.json
+++ b/apps/v4/public/r/styles/radix-nova/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/popover.json b/apps/v4/public/r/styles/radix-nova/popover.json
index e667eaddec..8fd4fa1bcf 100644
--- a/apps/v4/public/r/styles/radix-nova/popover.json
+++ b/apps/v4/public/r/styles/radix-nova/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-0.5 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-0.5 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/preview.json b/apps/v4/public/r/styles/radix-nova/preview.json
index 9163d10cc1..f9684617fe 100644
--- a/apps/v4/public/r/styles/radix-nova/preview.json
+++ b/apps/v4/public/r/styles/radix-nova/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -32,8 +32,8 @@
   ],
   "files": [
     {
-      "path": "registry/radix-nova/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-nova/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-nova/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-nova/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-nova/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\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 { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-nova/ui/sheet\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Spinner } from \"@/registry/radix-nova/ui/spinner\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/radix-nova/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-nova/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-nova/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-nova/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-nova/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-nova/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-nova/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-nova/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-nova/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-nova/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-nova/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-nova/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-nova/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-nova/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-nova/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-nova/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-nova/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-nova/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-nova/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-nova/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-nova/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-nova/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-nova/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-nova/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-nova/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-nova/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-nova/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-nova/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-nova/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-nova/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-nova/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-nova/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-nova/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/progress-example.json b/apps/v4/public/r/styles/radix-nova/progress-example.json
index be2b2d1045..8d0c93232a 100644
--- a/apps/v4/public/r/styles/radix-nova/progress-example.json
+++ b/apps/v4/public/r/styles/radix-nova/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/progress-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 { Field, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { Progress } from \"@/registry/radix-nova/ui/progress\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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 { Field, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { Progress } from \"@/registry/radix-nova/ui/progress\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/progress.json b/apps/v4/public/r/styles/radix-nova/progress.json
index c8e1b325b8..d23b39cc73 100644
--- a/apps/v4/public/r/styles/radix-nova/progress.json
+++ b/apps/v4/public/r/styles/radix-nova/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-muted relative flex h-1 w-full items-center overflow-x-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary size-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"size-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/radio-group.json b/apps/v4/public/r/styles/radix-nova/radio-group.json
index 1c1769e6f9..ed23631b1b 100644
--- a/apps/v4/public/r/styles/radix-nova/radio-group.json
+++ b/apps/v4/public/r/styles/radix-nova/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/registry.json b/apps/v4/public/r/styles/radix-nova/registry.json
index 5b47e72455..131d2b2b5a 100644
--- a/apps/v4/public/r/styles/radix-nova/registry.json
+++ b/apps/v4/public/r/styles/radix-nova/registry.json
@@ -2,6 +2,48 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +52,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +69,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +86,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +103,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +120,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +137,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +153,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +169,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +186,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +204,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +221,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +239,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -137,6 +257,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -147,6 +273,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -157,6 +290,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -169,6 +309,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -181,6 +328,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -191,6 +345,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -202,6 +363,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -213,6 +381,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -223,6 +398,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -233,6 +415,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -244,6 +432,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -258,6 +452,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -268,6 +469,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -279,6 +486,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -290,6 +503,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -301,6 +521,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -311,6 +537,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -321,6 +554,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -331,6 +571,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -342,6 +589,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -352,6 +605,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -362,6 +622,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -372,6 +639,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -383,6 +657,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -393,6 +674,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -403,6 +691,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -413,6 +708,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -424,6 +726,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -443,6 +752,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -453,6 +768,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -463,6 +784,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -474,6 +802,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -484,6 +819,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -494,6 +835,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -504,6 +852,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -514,6 +868,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -524,6 +885,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -534,6 +901,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -545,6 +919,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -555,6 +936,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -566,6 +954,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -576,6 +970,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -586,6 +986,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+          "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1464,6 +1870,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-nova/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1512,7 +1945,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1543,110 +1976,7 @@
       ],
       "files": [
         {
-          "path": "registry/radix-nova/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/radix-nova/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-nova/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-nova/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-nova/blocks/chatgpt.tsx",
+          "path": "registry/radix-nova/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2551,7 +2881,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2563,7 +2893,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2575,7 +2905,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2587,7 +2917,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2599,7 +2929,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2614,7 +2944,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2629,6 +2959,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-nova/resizable.json b/apps/v4/public/r/styles/radix-nova/resizable.json
index 594216491c..0d378d3d42 100644
--- a/apps/v4/public/r/styles/radix-nova/resizable.json
+++ b/apps/v4/public/r/styles/radix-nova/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/scroll-area-example.json b/apps/v4/public/r/styles/radix-nova/scroll-area-example.json
index f62b012fc2..732efaf6b1 100644
--- a/apps/v4/public/r/styles/radix-nova/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-nova/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-nova/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-nova/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/scroll-area.json b/apps/v4/public/r/styles/radix-nova/scroll-area.json
index 2863f7e998..40a9294d9a 100644
--- a/apps/v4/public/r/styles/radix-nova/scroll-area.json
+++ b/apps/v4/public/r/styles/radix-nova/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/select.json b/apps/v4/public/r/styles/radix-nova/select.json
index b35251bd49..6cea4b9773 100644
--- a/apps/v4/public/r/styles/radix-nova/select.json
+++ b/apps/v4/public/r/styles/radix-nova/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"text-muted-foreground pointer-events-none size-4\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target 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-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"bg-popover z-10 flex cursor-default items-center justify-center 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        \"bg-popover z-10 flex cursor-default items-center justify-center 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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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        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 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-lg 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(\"px-1.5 py-1 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none 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(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/separator-example.json b/apps/v4/public/r/styles/radix-nova/separator-example.json
index 3fff14422c..f632c5569e 100644
--- a/apps/v4/public/r/styles/radix-nova/separator-example.json
+++ b/apps/v4/public/r/styles/radix-nova/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/separator.json b/apps/v4/public/r/styles/radix-nova/separator.json
index 583a93f826..6b6d763a07 100644
--- a/apps/v4/public/r/styles/radix-nova/separator.json
+++ b/apps/v4/public/r/styles/radix-nova/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/sheet-example.json b/apps/v4/public/r/styles/radix-nova/sheet-example.json
index 054a92a30d..b4bed08302 100644
--- a/apps/v4/public/r/styles/radix-nova/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-nova/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-nova/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sheet.json b/apps/v4/public/r/styles/radix-nova/sheet.json
index adcd79ccd3..6649c16683 100644
--- a/apps/v4/public/r/styles/radix-nova/sheet.json
+++ b/apps/v4/public/r/styles/radix-nova/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-3 right-3\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground text-base font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-3 right-3\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-01.json b/apps/v4/public/r/styles/radix-nova/sidebar-01.json
index ecccee9135..4f6a72d0aa 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-01.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-02.json b/apps/v4/public/r/styles/radix-nova/sidebar-02.json
index 6ae62d7665..b5b60ae054 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-02.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-nova/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-nova/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-nova/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-nova/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-03.json b/apps/v4/public/r/styles/radix-nova/sidebar-03.json
index ff67afeec0..117f8dbd09 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-03.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-04.json b/apps/v4/public/r/styles/radix-nova/sidebar-04.json
index 4c972a7cfa..ad4261e1bd 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-04.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-05.json b/apps/v4/public/r/styles/radix-nova/sidebar-05.json
index d4358accad..0262da459c 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-05.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-nova/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-nova/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-06.json b/apps/v4/public/r/styles/radix-nova/sidebar-06.json
index 92d46f3f4f..b96fd674a7 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-06.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-nova/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-nova/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-nova/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-nova/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-nova/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-nova/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-07.json b/apps/v4/public/r/styles/radix-nova/sidebar-07.json
index b14ce3f781..aa91f14c29 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-07.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-08.json b/apps/v4/public/r/styles/radix-nova/sidebar-08.json
index 19f1329907..6859293ebe 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-08.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-nova/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-nova/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-nova/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-nova/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-nova/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-nova/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-09.json b/apps/v4/public/r/styles/radix-nova/sidebar-09.json
index b23b675a1d..42d896e803 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-09.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-09.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-10.json b/apps/v4/public/r/styles/radix-nova/sidebar-10.json
index 6c307159a5..79aa0c5769 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-10.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-nova/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-nova/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"data-[state=open]:bg-accent h-7 w-7\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-11.json b/apps/v4/public/r/styles/radix-nova/sidebar-11.json
index 9beaec58ff..838446e668 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-11.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-12.json b/apps/v4/public/r/styles/radix-nova/sidebar-12.json
index 23c7353b8a..b3392e9b5a 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-12.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-nova/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-nova/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-nova/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-nova/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-13.json b/apps/v4/public/r/styles/radix-nova/sidebar-13.json
index 6d1ad25d1b..507ef8357a 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-13.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-14.json b/apps/v4/public/r/styles/radix-nova/sidebar-14.json
index 1a108657ce..e690e5fd13 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-14.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-15.json b/apps/v4/public/r/styles/radix-nova/sidebar-15.json
index 46e66acd29..94bd198165 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-15.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/radix-nova/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-nova/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/radix-nova/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-nova/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-screen w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-nova/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-nova/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-nova/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-nova/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-16.json b/apps/v4/public/r/styles/radix-nova/sidebar-16.json
index fa4edd0993..cf25855e1d 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-16.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-nova/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-nova/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-nova/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-nova/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-nova/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-nova/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-nova/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-nova/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-nova/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-nova/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-nova/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-nova/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-nova/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-nova/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-nova/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-example.json b/apps/v4/public/r/styles/radix-nova/sidebar-example.json
index 59d28c877c..6ed58a925b 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-nova/sidebar-floating-example.json
index 897b7b67dd..3da8a561c6 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-nova/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-nova/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-nova/sidebar-icon-example.json
index dd7b68a7ec..117ad2d560 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-nova/sidebar-inset-example.json
index c07da43003..8898f65bca 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-nova/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/sidebar.json b/apps/v4/public/r/styles/radix-nova/sidebar.json
index d9929089d0..a15754ea21 100644
--- a/apps/v4/public/r/styles/radix-nova/sidebar.json
+++ b/apps/v4/public/r/styles/radix-nova/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-nova/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-nova/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-nova/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium 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        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 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\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden 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 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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        \"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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-nova/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-nova/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-nova/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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-lg 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-xl 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(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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-md px-2 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-md 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\", 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-md p-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-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md 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-1.5 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-md 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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\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-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/signup-02.json b/apps/v4/public/r/styles/radix-nova/signup-02.json
index 07277bc195..7b61c1904a 100644
--- a/apps/v4/public/r/styles/radix-nova/signup-02.json
+++ b/apps/v4/public/r/styles/radix-nova/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-nova/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-nova/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/signup-03.json b/apps/v4/public/r/styles/radix-nova/signup-03.json
index 25d304dda9..e9efc8b5f9 100644
--- a/apps/v4/public/r/styles/radix-nova/signup-03.json
+++ b/apps/v4/public/r/styles/radix-nova/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-nova/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-nova/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-nova/signup-04.json b/apps/v4/public/r/styles/radix-nova/signup-04.json
index 46552980a0..633bf56e75 100644
--- a/apps/v4/public/r/styles/radix-nova/signup-04.json
+++ b/apps/v4/public/r/styles/radix-nova/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-nova/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-nova/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-nova/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/signup-05.json b/apps/v4/public/r/styles/radix-nova/signup-05.json
index f12d41f0e4..6d12a4b8fc 100644
--- a/apps/v4/public/r/styles/radix-nova/signup-05.json
+++ b/apps/v4/public/r/styles/radix-nova/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-nova/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-nova/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-nova/skeleton.json b/apps/v4/public/r/styles/radix-nova/skeleton.json
index fcfb2fc267..65be48ae87 100644
--- a/apps/v4/public/r/styles/radix-nova/skeleton.json
+++ b/apps/v4/public/r/styles/radix-nova/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/slider-example.json b/apps/v4/public/r/styles/radix-nova/slider-example.json
index f084e345b8..42b628f148 100644
--- a/apps/v4/public/r/styles/radix-nova/slider-example.json
+++ b/apps/v4/public/r/styles/radix-nova/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/slider-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 { Label } from \"@/registry/radix-nova/ui/label\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/slider.json b/apps/v4/public/r/styles/radix-nova/slider.json
index 426cc7be3a..60e4d317c1 100644
--- a/apps/v4/public/r/styles/radix-nova/slider.json
+++ b/apps/v4/public/r/styles/radix-nova/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/sonner.json b/apps/v4/public/r/styles/radix-nova/sonner.json
index 083014de90..dd96fe19ad 100644
--- a/apps/v4/public/r/styles/radix-nova/sonner.json
+++ b/apps/v4/public/r/styles/radix-nova/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/spinner.json b/apps/v4/public/r/styles/radix-nova/spinner.json
index 5aa0755a9b..d4a7a4cd80 100644
--- a/apps/v4/public/r/styles/radix-nova/spinner.json
+++ b/apps/v4/public/r/styles/radix-nova/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/style.json b/apps/v4/public/r/styles/radix-nova/style.json
new file mode 100644
index 0000000000..9d8bb6576c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-nova/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/switch.json b/apps/v4/public/r/styles/radix-nova/switch.json
index 1a0cd11ff8..6fe4077167 100644
--- a/apps/v4/public/r/styles/radix-nova/switch.json
+++ b/apps/v4/public/r/styles/radix-nova/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/table.json b/apps/v4/public/r/styles/radix-nova/table.json
index c45c93ad24..5f88ef8a42 100644
--- a/apps/v4/public/r/styles/radix-nova/table.json
+++ b/apps/v4/public/r/styles/radix-nova/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/tabs-example.json b/apps/v4/public/r/styles/radix-nova/tabs-example.json
index 907c81658e..b715916bba 100644
--- a/apps/v4/public/r/styles/radix-nova/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-nova/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/tabs.json b/apps/v4/public/r/styles/radix-nova/tabs.json
index dc77855506..9bf7cf8da3 100644
--- a/apps/v4/public/r/styles/radix-nova/tabs.json
+++ b/apps/v4/public/r/styles/radix-nova/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"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-nova/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\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-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/textarea.json b/apps/v4/public/r/styles/radix-nova/textarea.json
index 36eb715a65..d10e4a28b4 100644
--- a/apps/v4/public/r/styles/radix-nova/textarea.json
+++ b/apps/v4/public/r/styles/radix-nova/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/toggle-group-example.json b/apps/v4/public/r/styles/radix-nova/toggle-group-example.json
index 5eabe17fe2..e2b3092ea5 100644
--- a/apps/v4/public/r/styles/radix-nova/toggle-group-example.json
+++ b/apps/v4/public/r/styles/radix-nova/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-nova/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-nova/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/toggle-group.json b/apps/v4/public/r/styles/radix-nova/toggle-group.json
index aa0a788e51..e059662091 100644
--- a/apps/v4/public/r/styles/radix-nova/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-nova/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-nova/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-nova/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/toggle.json b/apps/v4/public/r/styles/radix-nova/toggle.json
index 7180c825b4..f7ef0090f5 100644
--- a/apps/v4/public/r/styles/radix-nova/toggle.json
+++ b/apps/v4/public/r/styles/radix-nova/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent\",\n      },\n      size: {\n        default: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]\",\n        lg: \"h-9 min-w-9 px-2.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-nova/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]: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: \"h-8 min-w-8 px-2\",\n        sm: \"h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]\",\n        lg: \"h-9 min-w-9 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/tooltip-example.json b/apps/v4/public/r/styles/radix-nova/tooltip-example.json
index d56caee572..08ced9e562 100644
--- a/apps/v4/public/r/styles/radix-nova/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-nova/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Kbd } from \"@/registry/radix-nova/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/tooltip.json b/apps/v4/public/r/styles/radix-nova/tooltip.json
index 94afb9a6ac..2848a3d212 100644
--- a/apps/v4/public/r/styles/radix-nova/tooltip.json
+++ b/apps/v4/public/r/styles/radix-nova/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-nova/vercel.json b/apps/v4/public/r/styles/radix-nova/vercel.json
deleted file mode 100644
index 86b93c1e19..0000000000
--- a/apps/v4/public/r/styles/radix-nova/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-nova/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-nova/ui/alert\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Calendar } from \"@/registry/radix-nova/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-nova/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/radix-nova/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/accordion-example.json b/apps/v4/public/r/styles/radix-vega/accordion-example.json
index 70f1682008..a7a0d66d80 100644
--- a/apps/v4/public/r/styles/radix-vega/accordion-example.json
+++ b/apps/v4/public/r/styles/radix-vega/accordion-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/accordion-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-vega/ui/accordion\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"data-open:bg-muted/50 p-1\"\n          >\n            <AccordionTrigger className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-nova:px-2.5 style-lyra:px-2 style-vega:px-4\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/registry/radix-vega/ui/accordion\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function AccordionExample() {\n  return (\n    <ExampleWrapper className=\"w-full max-w-4xl lg:grid-cols-1 2xl:max-w-4xl 2xl:grid-cols-1\">\n      <AccordionBasic />\n      <AccordionMultiple />\n      <AccordionWithBorders />\n      <AccordionInCard />\n      <AccordionWithDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction AccordionBasic() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Is it accessible?\",\n      content: \"Yes. It adheres to the WAI-ARIA design pattern.\",\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Is it styled?\",\n      content:\n        \"Yes. It comes with default styles that matches the other components' aesthetic.\",\n    },\n    {\n      value: \"item-3\",\n      trigger: \"Is it animated?\",\n      content:\n        \"Yes. It's animated by default, but you can disable it if you prefer.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Basic\">\n      <Accordion type=\"single\" collapsible className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionMultiple() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger:\n        \"What are the key considerations when implementing a comprehensive enterprise-level authentication system?\",\n      content:\n        \"Implementing a robust enterprise authentication system requires careful consideration of multiple factors. This includes secure password hashing and storage, multi-factor authentication (MFA) implementation, session management, OAuth2 and SSO integration, regular security audits, rate limiting to prevent brute force attacks, and maintaining detailed audit logs. Additionally, you'll need to consider scalability, performance impact, and compliance with relevant data protection regulations such as GDPR or HIPAA.\",\n    },\n    {\n      value: \"item-2\",\n      trigger:\n        \"How does modern distributed system architecture handle eventual consistency and data synchronization across multiple regions?\",\n      content:\n        \"Modern distributed systems employ various strategies to maintain data consistency across regions. This often involves using techniques like CRDT (Conflict-Free Replicated Data Types), vector clocks, and gossip protocols. Systems might implement event sourcing patterns, utilize message queues for asynchronous updates, and employ sophisticated conflict resolution strategies. Popular solutions like Amazon's DynamoDB and Google's Spanner demonstrate different approaches to solving these challenges, balancing between consistency, availability, and partition tolerance as described in the CAP theorem.\",\n    },\n  ]\n\n  return (\n    <Example title=\"Multiple\">\n      <Accordion type=\"multiple\" className=\"mx-auto max-w-lg\">\n        {items.map((item) => (\n          <AccordionItem key={item.value} value={item.value}>\n            <AccordionTrigger>{item.trigger}</AccordionTrigger>\n            <AccordionContent>{item.content}</AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionWithBorders() {\n  const items = [\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content:\n        \"We offer monthly and annual subscription plans. Billing is charged at the beginning of each cycle, and you can cancel anytime. All plans include automatic backups, 24/7 support, and unlimited team members. There are no hidden fees or setup costs.\",\n    },\n    {\n      value: \"security\",\n      trigger: \"Is my data secure?\",\n      content:\n        \"Yes. We use end-to-end encryption, SOC 2 Type II compliance, and regular third-party security audits. All data is encrypted at rest and in transit using industry-standard protocols. We also offer optional two-factor authentication and single sign-on for enterprise customers.\",\n    },\n    {\n      value: \"integration\",\n      trigger: \"What integrations do you support?\",\n      content: (\n        <>\n          <p>\n            We integrate with 500+ popular tools including Slack, Zapier,\n            Salesforce, HubSpot, and more. You can also build custom\n            integrations using our REST API and webhooks.{\" \"}\n          </p>\n          <p>\n            Our API documentation includes code examples in 10+ programming\n            languages.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"With Borders\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            className=\"style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border\"\n          >\n            <AccordionTrigger className=\"font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n\nfunction AccordionInCard() {\n  const items = [\n    {\n      value: \"plans\",\n      trigger: \"What subscription plans do you offer?\",\n      content: (\n        <>\n          <p>\n            We offer three subscription tiers: Starter ($9/month), Professional\n            ($29/month), and Enterprise ($99/month). Each plan includes\n            increasing storage limits, API access, priority support, and team\n            collaboration features.\n          </p>\n          <p>\n            <a href=\"#\">Annual billing is available</a> with a 20% discount. All\n            plans include a 14-day free trial with no credit card required.\n          </p>\n          <Button size=\"sm\">\n            View plans\n            <IconPlaceholder\n              lucide=\"ArrowUpRightIcon\"\n              tabler=\"IconArrowUpRight\"\n              hugeicons=\"ArrowUpRight01Icon\"\n              phosphor=\"ArrowUpRightIcon\"\n              remixicon=\"RiArrowRightUpLine\"\n            />\n          </Button>\n        </>\n      ),\n    },\n    {\n      value: \"billing\",\n      trigger: \"How does billing work?\",\n      content: (\n        <>\n          <p>\n            Billing occurs automatically at the start of each billing cycle. We\n            accept all major credit cards, PayPal, and ACH transfers for\n            enterprise customers.\n          </p>\n          <p>\n            You&apos;ll receive an invoice via email after each payment. You can\n            update your payment method or billing information anytime in your\n            account settings. Failed payments will trigger automated retry\n            attempts and email notifications.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"upgrade\",\n      trigger: \"Can I upgrade or downgrade my plan?\",\n      content: (\n        <>\n          <p>\n            Yes, you can change your plan at any time. When upgrading,\n            you&apos;ll be charged a prorated amount for the remainder of your\n            billing cycle and immediately gain access to new features.\n          </p>\n          <p>\n            When downgrading, the change takes effect at the end of your current\n            billing period, and you&apos;ll retain access to premium features\n            until then. No refunds are provided for downgrades.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"cancel\",\n      trigger: \"How do I cancel my subscription?\",\n      content: (\n        <>\n          <p>\n            You can cancel your subscription anytime from your account settings.\n            There are no cancellation fees or penalties. Your access will\n            continue until the end of your current billing period.\n          </p>\n          <p>\n            After cancellation, your data is retained for 30 days in case you\n            want to reactivate. You can export all your data before or after\n            canceling. We&apos;d love to hear your feedback about why\n            you&apos;re leaving.\n          </p>\n        </>\n      ),\n    },\n    {\n      value: \"refund\",\n      trigger: \"What is your refund policy?\",\n      content: (\n        <>\n          <p>\n            We offer a 30-day money-back guarantee for new subscriptions. If\n            you&apos;re not satisfied within the first 30 days, contact our\n            support team for a full refund.\n          </p>\n          <p>\n            After 30 days, we don&apos;t provide refunds for partial billing\n            periods, but you can cancel anytime to avoid future charges.\n            Enterprise customers have custom refund terms outlined in their\n            contracts.\n          </p>\n        </>\n      ),\n    },\n  ]\n\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-full max-w-lg gap-4\">\n        <CardHeader>\n          <CardTitle>Subscription & Billing</CardTitle>\n          <CardDescription>\n            Common questions about your account, plans, and payments\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Accordion\n            type=\"single\"\n            collapsible\n            defaultValue=\"plans\"\n            className=\"style-maia:rounded-md style-mira:rounded-md\"\n          >\n            {items.map((item) => (\n              <AccordionItem key={item.value} value={item.value}>\n                <AccordionTrigger>{item.trigger}</AccordionTrigger>\n                <AccordionContent>{item.content}</AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AccordionWithDisabled() {\n  const items = [\n    {\n      value: \"item-1\",\n      trigger: \"Can I access my account history?\",\n      content:\n        \"Yes, you can view your complete account history including all transactions, plan changes, and support tickets in the Account History section of your dashboard.\",\n      disabled: false,\n    },\n    {\n      value: \"item-2\",\n      trigger: \"Premium feature information\",\n      content:\n        \"This section contains information about premium features. Upgrade your plan to access this content.\",\n      disabled: true,\n    },\n    {\n      value: \"item-3\",\n      trigger: \"How do I update my email address?\",\n      content:\n        \"You can update your email address in your account settings. You'll receive a verification email at your new address to confirm the change.\",\n      disabled: false,\n    },\n  ]\n\n  return (\n    <Example title=\"With Disabled\">\n      <Accordion\n        type=\"single\"\n        collapsible\n        className=\"mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg\"\n      >\n        {items.map((item) => (\n          <AccordionItem\n            key={item.value}\n            value={item.value}\n            disabled={item.disabled}\n            className=\"p-1 data-open:bg-muted/50\"\n          >\n            <AccordionTrigger className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.trigger}\n            </AccordionTrigger>\n            <AccordionContent className=\"style-vega:px-4 style-nova:px-2.5 style-lyra:px-2\">\n              {item.content}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/accordion.json b/apps/v4/public/r/styles/radix-vega/accordion.json
index 1948c95ee7..606d8bf5fa 100644
--- a/apps/v4/public/r/styles/radix-vega/accordion.json
+++ b/apps/v4/public/r/styles/radix-vega/accordion.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"data-open:animate-accordion-down data-closed:animate-accordion-up overflow-hidden text-sm\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"[&_a]:hover:text-foreground h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/alert-dialog.json b/apps/v4/public/r/styles/radix-vega/alert-dialog.json
index d6b4351f5e..2cc10d4da9 100644
--- a/apps/v4/public/r/styles/radix-vega/alert-dialog.json
+++ b/apps/v4/public/r/styles/radix-vega/alert-dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/alert-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-background ring-foreground/10 group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertDialog as AlertDialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        data-slot=\"alert-dialog-content\"\n        data-size={size}\n        className={cn(\n          \"group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        \"grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        \"mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        \"text-lg font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Action\n        data-slot=\"alert-dialog-action\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &\n  Pick<React.ComponentProps<typeof Button>, \"variant\" | \"size\">) {\n  return (\n    <Button variant={variant} size={size} asChild>\n      <AlertDialogPrimitive.Cancel\n        data-slot=\"alert-dialog-cancel\"\n        className={cn(className)}\n        {...props}\n      />\n    </Button>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/alert.json b/apps/v4/public/r/styles/radix-vega/alert.json
index 358e1b883f..71a5080f8e 100644
--- a/apps/v4/public/r/styles/radix-vega/alert.json
+++ b/apps/v4/public/r/styles/radix-vega/alert.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/alert.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nconst alertVariants = cva(\n  \"grid gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"[&_a]:hover:text-foreground font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-muted-foreground [&_a]:hover:text-foreground text-sm text-balance md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nconst alertVariants = cva(\n  \"group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-card text-card-foreground\",\n        destructive:\n          \"bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn(\n        \"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        \"text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-action\"\n      className={cn(\"absolute top-2.5 right-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Alert, AlertTitle, AlertDescription, AlertAction }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/aspect-ratio-example.json b/apps/v4/public/r/styles/radix-vega/aspect-ratio-example.json
index 79a7291be1..187aee1f46 100644
--- a/apps/v4/public/r/styles/radix-vega/aspect-ratio-example.json
+++ b/apps/v4/public/r/styles/radix-vega/aspect-ratio-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/aspect-ratio-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { AspectRatio } from \"@/registry/radix-vega/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"bg-muted rounded-lg\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { AspectRatio } from \"@/registry/radix-vega/ui/aspect-ratio\"\n\nexport default function AspectRatioExample() {\n  return (\n    <ExampleWrapper className=\"max-w-4xl 2xl:max-w-4xl\">\n      <AspectRatio16x9 />\n      <AspectRatio21x9 />\n      <AspectRatio1x1 />\n      <AspectRatio9x16 />\n    </ExampleWrapper>\n  )\n}\n\nfunction AspectRatio16x9() {\n  return (\n    <Example title=\"16:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={16 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio1x1() {\n  return (\n    <Example title=\"1:1\" className=\"items-start\">\n      <AspectRatio ratio={1 / 1} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio9x16() {\n  return (\n    <Example title=\"9:16\" className=\"items-center justify-center\">\n      <AspectRatio ratio={9 / 16} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n\nfunction AspectRatio21x9() {\n  return (\n    <Example title=\"21:9\" className=\"items-center justify-center\">\n      <AspectRatio ratio={21 / 9} className=\"rounded-lg bg-muted\">\n        <Image\n          src=\"https://avatar.vercel.sh/shadcn1\"\n          alt=\"Photo\"\n          fill\n          className=\"h-full w-full rounded-lg object-cover grayscale dark:brightness-20\"\n        />\n      </AspectRatio>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/aspect-ratio.json b/apps/v4/public/r/styles/radix-vega/aspect-ratio.json
index 0f266cb662..bc12a7dd22 100644
--- a/apps/v4/public/r/styles/radix-vega/aspect-ratio.json
+++ b/apps/v4/public/r/styles/radix-vega/aspect-ratio.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/avatar.json b/apps/v4/public/r/styles/radix-vega/avatar.json
index 01aaaeccf4..9d2fe377cd 100644
--- a/apps/v4/public/r/styles/radix-vega/avatar.json
+++ b/apps/v4/public/r/styles/radix-vega/avatar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/avatar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"after:border-border group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-blend-color ring-2 select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Avatar as AvatarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Avatar({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Root> & {\n  size?: \"default\" | \"sm\" | \"lg\"\n}) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      data-size={size}\n      className={cn(\n        \"group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarImage({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn(\n        \"aspect-square size-full rounded-full object-cover\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        \"flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"avatar-badge\"\n      className={cn(\n        \"absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none\",\n        \"group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden\",\n        \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n        \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group\"\n      className={cn(\n        \"group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AvatarGroupCount({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"avatar-group-count\"\n      className={cn(\n        \"relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarBadge,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+      "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/badge.json b/apps/v4/public/r/styles/radix-vega/badge.json
index add8465c93..e9e2674eee 100644
--- a/apps/v4/public/r/styles/radix-vega/badge.json
+++ b/apps/v4/public/r/styles/radix-vega/badge.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/badge.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nconst badgeVariants = cva(\n  \"h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nconst badgeVariants = cva(\n  \"group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        secondary:\n          \"bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80\",\n        destructive:\n          \"bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20\",\n        outline:\n          \"border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      data-variant={variant}\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/breadcrumb.json b/apps/v4/public/r/styles/radix-vega/breadcrumb.json
index cdb426ba9f..336df44cf0 100644
--- a/apps/v4/public/r/styles/radix-vega/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-vega/breadcrumb.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word 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(\"hover:text-foreground transition-colors\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"text-foreground font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/button-group.json b/apps/v4/public/r/styles/radix-vega/button-group.json
index fe64feb197..c110c121f2 100644
--- a/apps/v4/public/r/styles/radix-vega/button-group.json
+++ b/apps/v4/public/r/styles/radix-vega/button-group.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"bg-muted flex items-center gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 rounded-md border bg-muted px-2.5 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/button.json b/apps/v4/public/r/styles/radix-vega/button.json
index 0e6794fd08..54b4250992 100644
--- a/apps/v4/public/r/styles/radix-vega/button.json
+++ b/apps/v4/public/r/styles/radix-vega/button.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/button.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs\",\n        secondary:\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 dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive:\n          \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 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-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\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-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/button",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/calendar-example.json b/apps/v4/public/r/styles/radix-vega/calendar-example.json
index 043801c2a3..ce321504c9 100644
--- a/apps/v4/public/r/styles/radix-vega/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-vega/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/calendar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-vega/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"bg-card border-t\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { es } from \"react-day-picker/locale\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-vega/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CalendarExample() {\n  return (\n    <ExampleWrapper>\n      <CalendarSingle />\n      <CalendarMultiple />\n      <CalendarWeekNumbers />\n      <CalendarBookedDates />\n      <CalendarRange />\n      <CalendarRangeMultipleMonths />\n      <CalendarWithTime />\n      <CalendarWithPresets />\n      <CalendarCustomDays />\n      <DatePickerSimple />\n      <DataPickerWithDropdowns />\n      <DatePickerWithRange />\n      <CalendarInCard />\n      <CalendarInPopover />\n    </ExampleWrapper>\n  )\n}\n\nfunction CalendarInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"single\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarInPopover() {\n  return (\n    <Example title=\"In Popover\">\n      <Popover>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"px-2.5 font-normal\">\n            <IconPlaceholder\n              lucide=\"CalendarIcon\"\n              tabler=\"IconCalendar\"\n              hugeicons=\"CalendarIcon\"\n              phosphor=\"CalendarBlankIcon\"\n              remixicon=\"RiCalendarLine\"\n              data-icon=\"inline-start\"\n            />\n            Open Calendar\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar mode=\"single\" />\n        </PopoverContent>\n      </Popover>\n    </Example>\n  )\n}\n\nfunction CalendarSingle() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n  return (\n    <Example title=\"Single\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            captionLayout=\"dropdown\"\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar mode=\"multiple\" />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRange() {\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 12),\n    to: addDays(new Date(new Date().getFullYear(), 0, 12), 30),\n  })\n\n  return (\n    <Example\n      title=\"Range\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={dateRange?.from}\n            selected={dateRange}\n            onSelect={setDateRange}\n            numberOfMonths={2}\n            disabled={(date) =>\n              date > new Date() || date < new Date(\"1900-01-01\")\n            }\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarRangeMultipleMonths() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 3, 12),\n    to: addDays(new Date(new Date().getFullYear(), 3, 12), 60),\n  })\n\n  return (\n    <Example\n      title=\"Range Multiple Months\"\n      containerClassName=\"lg:col-span-full 2xl:col-span-full\"\n      className=\"p-12\"\n    >\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={3}\n            locale={es}\n            fixedWeeks\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarBookedDates() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n  const bookedDates = Array.from(\n    { length: 15 },\n    (_, i) => new Date(new Date().getFullYear(), 1, 12 + i)\n  )\n\n  return (\n    <Example title=\"Booked Dates\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            disabled={bookedDates}\n            modifiers={{\n              booked: bookedDates,\n            }}\n            modifiersClassNames={{\n              booked: \"[&>button]:line-through opacity-100\",\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithTime() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 12)\n  )\n\n  return (\n    <Example title=\"With Time\">\n      <Card size=\"sm\" className=\"mx-auto w-fit\">\n        <CardContent>\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            className=\"p-0\"\n          />\n        </CardContent>\n        <CardFooter className=\"border-t bg-card\">\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"time-from\">Start Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-from\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"10:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"time-to\">End Time</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"time-to\"\n                  type=\"time\"\n                  step=\"1\"\n                  defaultValue=\"12:30:00\"\n                  className=\"appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none\"\n                />\n                <InputGroupAddon>\n                  <IconPlaceholder\n                    lucide=\"Clock2Icon\"\n                    tabler=\"IconClockHour2\"\n                    hugeicons=\"Clock03Icon\"\n                    phosphor=\"ClockIcon\"\n                    remixicon=\"RiTimeLine\"\n                    className=\"text-muted-foreground\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarCustomDays() {\n  const [range, setRange] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 11, 8),\n    to: addDays(new Date(new Date().getFullYear(), 11, 8), 10),\n  })\n\n  return (\n    <Example title=\"Custom Days\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"range\"\n            defaultMonth={range?.from}\n            selected={range}\n            onSelect={setRange}\n            numberOfMonths={1}\n            captionLayout=\"dropdown\"\n            className=\"[--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]\"\n            formatters={{\n              formatMonthDropdown: (date) => {\n                return date.toLocaleString(\"default\", { month: \"long\" })\n              },\n            }}\n            components={{\n              DayButton: ({ children, modifiers, day, ...props }) => {\n                const isWeekend =\n                  day.date.getDay() === 0 || day.date.getDay() === 6\n\n                return (\n                  <CalendarDayButton day={day} modifiers={modifiers} {...props}>\n                    {children}\n                    {!modifiers.outside && (\n                      <span>{isWeekend ? \"$120\" : \"$100\"}</span>\n                    )}\n                  </CalendarDayButton>\n                )\n              },\n            }}\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CalendarWithPresets() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 12)\n  )\n  const [currentMonth, setCurrentMonth] = React.useState<Date>(\n    new Date(new Date().getFullYear(), new Date().getMonth(), 1)\n  )\n\n  return (\n    <Example title=\"With Presets\">\n      <Card className=\"mx-auto w-fit max-w-[300px]\" size=\"sm\">\n        <CardContent className=\"px-4\">\n          <Calendar\n            mode=\"single\"\n            selected={date}\n            onSelect={setDate}\n            month={currentMonth}\n            onMonthChange={setCurrentMonth}\n            fixedWeeks\n            className=\"p-0 [--cell-size:--spacing(9.5)]\"\n          />\n        </CardContent>\n        <CardFooter className=\"flex flex-wrap gap-2 border-t\">\n          {[\n            { label: \"Today\", value: 0 },\n            { label: \"Tomorrow\", value: 1 },\n            { label: \"In 3 days\", value: 3 },\n            { label: \"In a week\", value: 7 },\n            { label: \"In 2 weeks\", value: 14 },\n          ].map((preset) => (\n            <Button\n              key={preset.value}\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"flex-1\"\n              onClick={() => {\n                const newDate = addDays(new Date(), preset.value)\n                setDate(newDate)\n                setCurrentMonth(\n                  new Date(newDate.getFullYear(), newDate.getMonth(), 1)\n                )\n              }}\n            >\n              {preset.label}\n            </Button>\n          ))}\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction DatePickerSimple() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Example title=\"Date Picker Simple\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-simple\">Date</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-simple\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar mode=\"single\" selected={date} onSelect={setDate} />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DatePickerWithRange() {\n  const [date, setDate] = React.useState<DateRange | undefined>({\n    from: new Date(new Date().getFullYear(), 0, 20),\n    to: addDays(new Date(new Date().getFullYear(), 0, 20), 20),\n  })\n\n  return (\n    <Example title=\"Date Picker Range\">\n      <Field className=\"mx-auto w-72\">\n        <FieldLabel htmlFor=\"date-picker-range\">Date Picker Range</FieldLabel>\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button\n              id=\"date-picker-range\"\n              variant=\"outline\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"CalendarIcon\"\n                phosphor=\"CalendarBlankIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n              />\n              {date?.from ? (\n                date.to ? (\n                  <>\n                    {format(date.from, \"LLL dd, y\")} -{\" \"}\n                    {format(date.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(date.from, \"LLL dd, y\")\n                )\n              ) : (\n                <span>Pick a date</span>\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={date?.from}\n              selected={date}\n              onSelect={setDate}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction DataPickerWithDropdowns() {\n  const [date, setDate] = React.useState<Date>()\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Date Picker with Dropdowns\">\n      <Field className=\"mx-auto w-72\">\n        <Popover open={open} onOpenChange={setOpen}>\n          <FieldLabel htmlFor=\"date-picker-with-dropdowns-desktop\">\n            Date\n          </FieldLabel>\n          <PopoverTrigger asChild>\n            <Button\n              variant=\"outline\"\n              id=\"date-picker-with-dropdowns-desktop\"\n              className=\"justify-start px-2.5 font-normal\"\n            >\n              {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDownIcon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-start\"\n                className=\"ml-auto\"\n              />\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"single\"\n              selected={date}\n              onSelect={setDate}\n              captionLayout=\"dropdown\"\n            />\n            <div className=\"flex gap-2 border-t p-2\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className=\"w-full\"\n                onClick={() => setOpen(false)}\n              >\n                Done\n              </Button>\n            </div>\n          </PopoverContent>\n        </Popover>\n      </Field>\n    </Example>\n  )\n}\n\nfunction CalendarWeekNumbers() {\n  const [date, setDate] = React.useState<Date | undefined>(\n    new Date(new Date().getFullYear(), 1, 3)\n  )\n\n  return (\n    <Example title=\"Week Numbers\" className=\"justify-center\">\n      <Card className=\"mx-auto w-fit p-0\">\n        <CardContent className=\"p-0\">\n          <Calendar\n            mode=\"single\"\n            defaultMonth={date}\n            selected={date}\n            onSelect={setDate}\n            showWeekNumber\n          />\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/calendar.json b/apps/v4/public/r/styles/radix-vega/calendar.json
index 2604bb552f..932e79ef5a 100644
--- a/apps/v4/public/r/styles/radix-vega/calendar.json
+++ b/apps/v4/public/r/styles/radix-vega/calendar.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"bg-background group/calendar p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  DayPicker,\n  getDefaultClassNames,\n  type DayButton,\n  type Locale,\n} from \"react-day-picker\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  captionLayout = \"label\",\n  buttonVariant = \"ghost\",\n  locale,\n  formatters,\n  components,\n  ...props\n}: React.ComponentProps<typeof DayPicker> & {\n  buttonVariant?: React.ComponentProps<typeof Button>[\"variant\"]\n}) {\n  const defaultClassNames = getDefaultClassNames()\n\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\n        \"group/calendar bg-background p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent\",\n        String.raw`rtl:**:[.rdp-button\\_next>svg]:rotate-180`,\n        String.raw`rtl:**:[.rdp-button\\_previous>svg]:rotate-180`,\n        className\n      )}\n      captionLayout={captionLayout}\n      locale={locale}\n      formatters={{\n        formatMonthDropdown: (date) =>\n          date.toLocaleString(locale?.code, { month: \"short\" }),\n        ...formatters,\n      }}\n      classNames={{\n        root: cn(\"w-fit\", defaultClassNames.root),\n        months: cn(\n          \"relative flex flex-col gap-4 md:flex-row\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex w-full flex-col gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) p-0 select-none aria-disabled:opacity-50\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"cn-calendar-dropdown-root relative rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute inset-0 bg-popover opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"font-medium select-none\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"mt-2 flex w-full\", defaultClassNames.week),\n        week_number_header: cn(\n          \"w-(--cell-size) select-none\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] text-muted-foreground select-none\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)\",\n          props.showWeekNumber\n            ? \"[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)\"\n            : \"[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)\",\n          defaultClassNames.day\n        ),\n        range_start: cn(\n          \"relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none\",\n          defaultClassNames.today\n        ),\n        outside: cn(\n          \"text-muted-foreground aria-selected:text-muted-foreground\",\n          defaultClassNames.outside\n        ),\n        disabled: cn(\n          \"text-muted-foreground opacity-50\",\n          defaultClassNames.disabled\n        ),\n        hidden: cn(\"invisible\", defaultClassNames.hidden),\n        ...classNames,\n      }}\n      components={{\n        Root: ({ className, rootRef, ...props }) => {\n          return (\n            <div\n              data-slot=\"calendar\"\n              ref={rootRef}\n              className={cn(className)}\n              {...props}\n            />\n          )\n        },\n        Chevron: ({ className, orientation, ...props }) => {\n          if (orientation === \"left\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronLeftIcon\"\n                tabler=\"IconChevronLeft\"\n                hugeicons=\"ArrowLeftIcon\"\n                phosphor=\"CaretLeftIcon\"\n                remixicon=\"RiArrowLeftSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          if (orientation === \"right\") {\n            return (\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRightIcon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className={cn(\"cn-rtl-flip size-4\", className)}\n                {...props}\n              />\n            )\n          }\n\n          return (\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDownIcon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className={cn(\"size-4\", className)}\n              {...props}\n            />\n          )\n        },\n        DayButton: ({ ...props }) => (\n          <CalendarDayButton locale={locale} {...props} />\n        ),\n        WeekNumber: ({ children, ...props }) => {\n          return (\n            <td {...props}>\n              <div className=\"flex size-(--cell-size) items-center justify-center text-center\">\n                {children}\n              </div>\n            </td>\n          )\n        },\n        ...components,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction CalendarDayButton({\n  className,\n  day,\n  modifiers,\n  locale,\n  ...props\n}: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) {\n  const defaultClassNames = getDefaultClassNames()\n\n  const ref = React.useRef<HTMLButtonElement>(null)\n  React.useEffect(() => {\n    if (modifiers.focused) ref.current?.focus()\n  }, [modifiers.focused])\n\n  return (\n    <Button\n      ref={ref}\n      variant=\"ghost\"\n      size=\"icon\"\n      data-day={day.date.toLocaleDateString(locale?.code)}\n      data-selected-single={\n        modifiers.selected &&\n        !modifiers.range_start &&\n        !modifiers.range_end &&\n        !modifiers.range_middle\n      }\n      data-range-start={modifiers.range_start}\n      data-range-end={modifiers.range_end}\n      data-range-middle={modifiers.range_middle}\n      className={cn(\n        \"relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+      "api": "https://react-day-picker.js.org"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/card-example.json b/apps/v4/public/r/styles/radix-vega/card-example.json
index dad9bc4286..143f77ea67 100644
--- a/apps/v4/public/r/styles/radix-vega/card-example.json
+++ b/apps/v4/public/r/styles/radix-vega/card-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/card-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"mt-4 text-center style-nova:mt-2\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/card.json b/apps/v4/public/r/styles/radix-vega/card.json
index 48428e28f5..6a7f5c1e59 100644
--- a/apps/v4/public/r/styles/radix-vega/card.json
+++ b/apps/v4/public/r/styles/radix-vega/card.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"ring-foreground/10 bg-card text-card-foreground group/card flex flex-col gap-6 overflow-hidden rounded-xl py-6 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/cards.json b/apps/v4/public/r/styles/radix-vega/cards.json
new file mode 100644
index 0000000000..b787d97c18
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/cards.json
@@ -0,0 +1,41 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "cards",
+  "title": "Cards",
+  "registryDependencies": [
+    "alert-dialog",
+    "avatar",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "combobox",
+    "dropdown-menu",
+    "empty",
+    "field",
+    "input",
+    "input-group",
+    "item",
+    "label",
+    "popover",
+    "radio-group",
+    "select",
+    "separator",
+    "sheet",
+    "slider",
+    "spinner",
+    "switch",
+    "textarea",
+    "tooltip",
+    "example"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-vega/blocks/cards.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-vega/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-vega/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\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 { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-vega/ui/sheet\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Spinner } from \"@/registry/radix-vega/ui/spinner\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "type": "registry:block"
+    }
+  ],
+  "type": "registry:block"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/carousel.json b/apps/v4/public/r/styles/radix-vega/carousel.json
index 5c510d370e..149c01ee52 100644
--- a/apps/v4/public/r/styles/radix-vega/carousel.json
+++ b/apps/v4/public/r/styles/radix-vega/carousel.json
@@ -14,5 +14,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+      "api": "https://www.embla-carousel.com/get-started/react"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/chart-example.json b/apps/v4/public/r/styles/radix-vega/chart-example.json
index ab0ab2fc11..7306032411 100644
--- a/apps/v4/public/r/styles/radix-vega/chart-example.json
+++ b/apps/v4/public/r/styles/radix-vega/chart-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/chart-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground flex items-center gap-2 leading-none\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground leading-none\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  Area,\n  AreaChart,\n  Bar,\n  BarChart,\n  CartesianGrid,\n  Label,\n  Line,\n  LineChart,\n  Pie,\n  PieChart,\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n  RadialBar,\n  RadialBarChart,\n  XAxis,\n} from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst areaChartData = [\n  { month: \"January\", desktop: 186 },\n  { month: \"February\", desktop: 305 },\n  { month: \"March\", desktop: 237 },\n  { month: \"April\", desktop: 73 },\n  { month: \"May\", desktop: 209 },\n  { month: \"June\", desktop: 214 },\n]\n\nconst areaChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nexport default function ChartExample() {\n  return (\n    <ExampleWrapper>\n      <ChartAreaExample />\n      <ChartBarExample />\n      <ChartLineExample />\n      <ChartRadialExample />\n      <ChartRadarExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction ChartAreaExample() {\n  return (\n    <Example title=\"Area Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Area Chart</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={areaChartConfig}>\n            <AreaChart\n              accessibilityLayer\n              data={areaChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <Area\n                dataKey=\"desktop\"\n                type=\"natural\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.4}\n                stroke=\"var(--color-desktop)\"\n              />\n            </AreaChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                January - June 2024\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst barChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst barChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartBarExample() {\n  return (\n    <Example title=\"Bar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Bar Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={barChartConfig}>\n            <BarChart accessibilityLayer data={barChartData}>\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                tickMargin={10}\n                axisLine={false}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"dashed\" />}\n              />\n              <Bar dataKey=\"desktop\" fill=\"var(--color-desktop)\" radius={4} />\n              <Bar dataKey=\"mobile\" fill=\"var(--color-mobile)\" radius={4} />\n            </BarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col items-start gap-2\">\n          <div className=\"flex gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst lineChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst lineChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartLineExample() {\n  return (\n    <Example title=\"Line Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Line Chart - Multiple</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <ChartContainer config={lineChartConfig}>\n            <LineChart\n              accessibilityLayer\n              data={lineChartData}\n              margin={{\n                left: 12,\n                right: 12,\n              }}\n            >\n              <CartesianGrid vertical={false} />\n              <XAxis\n                dataKey=\"month\"\n                tickLine={false}\n                axisLine={false}\n                tickMargin={8}\n                tickFormatter={(value) => value.slice(0, 3)}\n              />\n              <ChartTooltip cursor={false} content={<ChartTooltipContent />} />\n              <Line\n                dataKey=\"desktop\"\n                type=\"monotone\"\n                stroke=\"var(--color-desktop)\"\n                strokeWidth={2}\n                dot={false}\n              />\n              <Line\n                dataKey=\"mobile\"\n                type=\"monotone\"\n                stroke=\"var(--color-mobile)\"\n                strokeWidth={2}\n                dot={false}\n              />\n            </LineChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter>\n          <div className=\"flex w-full items-start gap-2\">\n            <div className=\"grid gap-2\">\n              <div className=\"flex items-center gap-2 leading-none font-medium\">\n                Trending up by 5.2% this month{\" \"}\n                <IconPlaceholder\n                  lucide=\"TrendingUpIcon\"\n                  tabler=\"IconTrendingUp\"\n                  hugeicons=\"ChartUpIcon\"\n                  phosphor=\"TrendUpIcon\"\n                  remixicon=\"RiLineChartLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n                Showing total visitors for the last 6 months\n              </div>\n            </div>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst pieChartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst pieChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartPieExample() {\n  const totalVisitors = React.useMemo(() => {\n    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)\n  }, [])\n\n  return (\n    <Example title=\"Pie Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-0\">\n          <CardTitle>Pie Chart - Donut with Text</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={pieChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <PieChart>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent hideLabel />}\n              />\n              <Pie\n                data={pieChartData}\n                dataKey=\"visitors\"\n                nameKey=\"browser\"\n                innerRadius={60}\n                strokeWidth={5}\n              >\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-3xl font-bold\"\n                          >\n                            {totalVisitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </Pie>\n            </PieChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radarChartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst radarChartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadarExample() {\n  return (\n    <Example title=\"Radar Chart\">\n      <Card className=\"w-full\">\n        <CardHeader className=\"items-center pb-4\">\n          <CardTitle>Radar Chart - Multiple</CardTitle>\n          <CardDescription>\n            Showing total visitors for the last 6 months\n          </CardDescription>\n        </CardHeader>\n        <CardContent className=\"pb-0\">\n          <ChartContainer\n            config={radarChartConfig}\n            className=\"mx-auto aspect-square max-h-[250px]\"\n          >\n            <RadarChart data={radarChartData}>\n              <ChartTooltip\n                cursor={false}\n                content={<ChartTooltipContent indicator=\"line\" />}\n              />\n              <PolarAngleAxis dataKey=\"month\" />\n              <PolarGrid />\n              <Radar\n                dataKey=\"desktop\"\n                fill=\"var(--color-desktop)\"\n                fillOpacity={0.6}\n              />\n              <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            </RadarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n            January - June 2024\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst radialChartData = [\n  { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst radialChartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nfunction ChartRadialExample() {\n  return (\n    <Example title=\"Radial Chart\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Radial Chart - Shape</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </CardHeader>\n        <CardContent className=\"flex-1 pb-0\">\n          <ChartContainer\n            config={radialChartConfig}\n            className=\"mx-auto aspect-square max-h-[210px]\"\n          >\n            <RadialBarChart\n              data={radialChartData}\n              endAngle={100}\n              innerRadius={80}\n              outerRadius={140}\n            >\n              <PolarGrid\n                gridType=\"circle\"\n                radialLines={false}\n                stroke=\"none\"\n                className=\"first:fill-muted last:fill-background\"\n                polarRadius={[86, 74]}\n              />\n              <RadialBar dataKey=\"visitors\" background />\n              <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>\n                <Label\n                  content={({ viewBox }) => {\n                    if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                      return (\n                        <text\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          textAnchor=\"middle\"\n                          dominantBaseline=\"middle\"\n                        >\n                          <tspan\n                            x={viewBox.cx}\n                            y={viewBox.cy}\n                            className=\"fill-foreground text-4xl font-bold\"\n                          >\n                            {radialChartData[0].visitors.toLocaleString()}\n                          </tspan>\n                          <tspan\n                            x={viewBox.cx}\n                            y={(viewBox.cy || 0) + 24}\n                            className=\"fill-muted-foreground\"\n                          >\n                            Visitors\n                          </tspan>\n                        </text>\n                      )\n                    }\n                  }}\n                />\n              </PolarRadiusAxis>\n            </RadialBarChart>\n          </ChartContainer>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <div className=\"flex items-center gap-2 leading-none font-medium\">\n            Trending up by 5.2% this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiLineChartLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"leading-none text-muted-foreground\">\n            Showing total visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/chart.json b/apps/v4/public/r/styles/radix-vega/chart.json
index 6ec9138402..6109c6fc3f 100644
--- a/apps/v4/public/r/styles/radix-vega/chart.json
+++ b/apps/v4/public/r/styles/radix-vega/chart.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\n    label?: React.ReactNode\n    icon?: React.ComponentType\n  } & (\n    | { color?: string; theme?: never }\n    | { color?: never; theme: Record<keyof typeof THEMES, string> }\n  )\n}\n\ntype ChartContextProps = {\n  config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n  const context = React.useContext(ChartContext)\n\n  if (!context) {\n    throw new Error(\"useChart must be used within a <ChartContainer />\")\n  }\n\n  return context\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\n}) {\n  const uniqueId = React.useId()\n  const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(\n    ([, config]) => config.theme || config.color\n  )\n\n  if (!colorConfig.length) {\n    return null\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color =\n      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n      itemConfig.color\n    return color ? `  --color-${key}: ${color};` : null\n  })\n  .join(\"\\n\")}\n}\n`\n          )\n          .join(\"\\n\"),\n      }}\n    />\n  )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = \"dot\",\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<\"div\"> & {\n    hideLabel?: boolean\n    hideIndicator?: boolean\n    indicator?: \"line\" | \"dot\" | \"dashed\"\n    nameKey?: string\n    labelKey?: string\n  }) {\n  const { config } = useChart()\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null\n    }\n\n    const [item] = payload\n    const key = `${labelKey || item?.dataKey || item?.name || \"value\"}`\n    const itemConfig = getPayloadConfigFromPayload(config, item, key)\n    const value =\n      !labelKey && typeof label === \"string\"\n        ? config[label as keyof typeof config]?.label || label\n        : itemConfig?.label\n\n    if (labelFormatter) {\n      return (\n        <div className={cn(\"font-medium\", labelClassName)}>\n          {labelFormatter(value, payload)}\n        </div>\n      )\n    }\n\n    if (!value) {\n      return null\n    }\n\n    return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n  }, [\n    label,\n    labelFormatter,\n    payload,\n    hideLabel,\n    labelClassName,\n    config,\n    labelKey,\n  ])\n\n  if (!active || !payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter((item) => item.type !== \"none\")\n          .map((item, index) => {\n            const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n            const itemConfig = getPayloadConfigFromPayload(config, item, key)\n            const indicatorColor = color || item.payload.fill || item.color\n\n            return (\n              <div\n                key={item.dataKey}\n                className={cn(\n                  \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                  indicator === \"dot\" && \"items-center\"\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn(\n                            \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                            {\n                              \"h-2.5 w-2.5\": indicator === \"dot\",\n                              \"w-1\": indicator === \"line\",\n                              \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                                indicator === \"dashed\",\n                              \"my-0.5\": nestLabel && indicator === \"dashed\",\n                            }\n                          )}\n                          style={\n                            {\n                              \"--color-bg\": indicatorColor,\n                              \"--color-border\": indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        \"flex flex-1 justify-between leading-none\",\n                        nestLabel ? \"items-end\" : \"items-center\"\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">\n                          {itemConfig?.label || item.name}\n                        </span>\n                      </div>\n                      {item.value && (\n                        <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                          {item.value.toLocaleString()}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            )\n          })}\n      </div>\n    </div>\n  )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = \"bottom\",\n  nameKey,\n}: React.ComponentProps<\"div\"> &\n  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\n  const { config } = useChart()\n\n  if (!payload?.length) {\n    return null\n  }\n\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center gap-4\",\n        verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n        className\n      )}\n    >\n      {payload\n        .filter((item) => item.type !== \"none\")\n        .map((item) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n              )}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          )\n        })}\n    </div>\n  )\n}\n\nfunction getPayloadConfigFromPayload(\n  config: ChartConfig,\n  payload: unknown,\n  key: string\n) {\n  if (typeof payload !== \"object\" || payload === null) {\n    return undefined\n  }\n\n  const payloadPayload =\n    \"payload\" in payload &&\n    typeof payload.payload === \"object\" &&\n    payload.payload !== null\n      ? payload.payload\n      : undefined\n\n  let configLabelKey: string = key\n\n  if (\n    key in payload &&\n    typeof payload[key as keyof typeof payload] === \"string\"\n  ) {\n    configLabelKey = payload[key as keyof typeof payload] as string\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n  ) {\n    configLabelKey = payloadPayload[\n      key as keyof typeof payloadPayload\n    ] as string\n  }\n\n  return configLabelKey in config\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/chatgpt.json b/apps/v4/public/r/styles/radix-vega/chatgpt.json
deleted file mode 100644
index f3cd6c7790..0000000000
--- a/apps/v4/public/r/styles/radix-vega/chatgpt.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "chatgpt",
-  "title": "ChatGPT",
-  "registryDependencies": [
-    "alert",
-    "alert-dialog",
-    "badge",
-    "button",
-    "card",
-    "dropdown-menu",
-    "field",
-    "input-group",
-    "item",
-    "kbd",
-    "popover",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-vega/blocks/chatgpt.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-vega/ui/alert\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ChatGPTBlock() {\n  return (\n    <ExampleWrapper>\n      <PromptForm />\n      <ModelSelector />\n      <GroupChatDialog />\n      <CreateProjectForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction PromptForm() {\n  const [dictateEnabled, setDictateEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Prompt Form\">\n      <Field>\n        <FieldLabel htmlFor=\"prompt\" className=\"sr-only\">\n          Prompt\n        </FieldLabel>\n        <InputGroup>\n          <InputGroupTextarea id=\"prompt\" placeholder=\"Ask anything\" />\n          <InputGroupAddon align=\"block-end\">\n            <DropdownMenu>\n              <Tooltip>\n                <DropdownMenuTrigger asChild>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      onClick={() => setDictateEnabled(!dictateEnabled)}\n                      className=\"rounded-4xl\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                </DropdownMenuTrigger>\n                <TooltipContent>\n                  Add files and more <Kbd>/</Kbd>\n                </TooltipContent>\n              </Tooltip>\n              <DropdownMenuContent\n                className=\"w-56\"\n                onCloseAutoFocus={(e) => e.preventDefault()}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"PaperclipIcon\"\n                    tabler=\"IconPaperclip\"\n                    hugeicons=\"AttachmentIcon\"\n                    phosphor=\"PaperclipIcon\"\n                    remixicon=\"RiAttachmentLine\"\n                  />\n                  Add photos & files\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                    remixicon=\"RiSparklingLine\"\n                  />\n                  Deep research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                  Shopping research\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"WandIcon\"\n                    tabler=\"IconWand\"\n                    hugeicons=\"MagicWand05Icon\"\n                    phosphor=\"MagicWandIcon\"\n                    remixicon=\"RiMagicLine\"\n                  />\n                  Create image\n                </DropdownMenuItem>\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MousePointerIcon\"\n                        tabler=\"IconPointer\"\n                        hugeicons=\"Cursor01Icon\"\n                        phosphor=\"HandPointingIcon\"\n                        remixicon=\"RiHand\"\n                      />\n                      Agent mode\n                    </DropdownMenuItem>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"right\">\n                    <div className=\"font-medium\">35 left</div>\n                    <div className=\"text-primary-foreground/80 text-xs\">\n                      More available for purchase\n                    </div>\n                  </TooltipContent>\n                </Tooltip>\n                <DropdownMenuSub>\n                  <DropdownMenuSubTrigger>\n                    <IconPlaceholder\n                      lucide=\"MoreHorizontalIcon\"\n                      tabler=\"IconDots\"\n                      hugeicons=\"MoreHorizontalCircle01Icon\"\n                      phosphor=\"DotsThreeOutlineIcon\"\n                      remixicon=\"RiMoreLine\"\n                    />\n                    More\n                  </DropdownMenuSubTrigger>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Add sources\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"BookOpenIcon\"\n                        tabler=\"IconBook\"\n                        hugeicons=\"BookIcon\"\n                        phosphor=\"BookOpenIcon\"\n                        remixicon=\"RiBookOpenLine\"\n                      />\n                      Study and learn\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"GlobeIcon\"\n                        tabler=\"IconWorld\"\n                        hugeicons=\"GlobalIcon\"\n                        phosphor=\"GlobeIcon\"\n                        remixicon=\"RiGlobeLine\"\n                      />\n                      Web search\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PenToolIcon\"\n                        tabler=\"IconPencil\"\n                        hugeicons=\"PenIcon\"\n                        phosphor=\"PencilIcon\"\n                        remixicon=\"RiPencilLine\"\n                      />\n                      Canvas\n                    </DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuSub>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  onClick={() => setDictateEnabled(!dictateEnabled)}\n                  className=\"ml-auto rounded-4xl\"\n                >\n                  <IconPlaceholder\n                    lucide=\"AudioLinesIcon\"\n                    tabler=\"IconMicrophone\"\n                    hugeicons=\"AudioWave01Icon\"\n                    phosphor=\"MicrophoneIcon\"\n                    remixicon=\"RiMicLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>Dictate</TooltipContent>\n            </Tooltip>\n            <InputGroupButton\n              size=\"icon-sm\"\n              variant=\"default\"\n              className=\"rounded-4xl\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp02Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ModelSelector() {\n  const [mode, setMode] = React.useState(\"auto\")\n  const [model, setModel] = React.useState(\"gpt-5.1\")\n\n  return (\n    <Example title=\"Model Selector\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" className=\"gap-2\">\n            ChatGPT 5.1\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground size-4\"\n            />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-60\" align=\"start\">\n          <DropdownMenuLabel className=\"text-muted-foreground text-xs font-normal\">\n            GPT-5.1\n          </DropdownMenuLabel>\n          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>\n            <DropdownMenuRadioItem value=\"auto\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Auto</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Decides how long to think\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"instant\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Instant</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Answers right away\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n            <DropdownMenuRadioItem value=\"thinking\">\n              <Item size=\"xs\" className=\"p-0\">\n                <ItemContent>\n                  <ItemTitle>Thinking</ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    Thinks longer for better answers\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuRadioItem>\n          </DropdownMenuRadioGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <span className=\"font-medium\">Legacy models</span>\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent>\n              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>\n                <DropdownMenuRadioItem value=\"gpt-4\">\n                  GPT-4\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-4-turbo\">\n                  GPT-4 Turbo\n                </DropdownMenuRadioItem>\n                <DropdownMenuRadioItem value=\"gpt-3.5\">\n                  GPT-3.5\n                </DropdownMenuRadioItem>\n              </DropdownMenuRadioGroup>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction GroupChatDialog() {\n  return (\n    <Example title=\"Group Chat Dialog\" className=\"items-center justify-center\">\n      <AlertDialog>\n        <AlertDialogTrigger asChild>\n          <Button>Start Group Chat</Button>\n        </AlertDialogTrigger>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>\n            <AlertDialogDescription>\n              Add people to your chats to plan, share ideas, and get creative.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter className=\"flex-row items-center justify-between sm:justify-between\">\n            <a\n              href=\"#\"\n              className=\"text-muted-foreground hover:text-foreground text-sm underline underline-offset-4\"\n            >\n              Learn more\n            </a>\n            <div className=\"flex gap-2\">\n              <AlertDialogCancel>Cancel</AlertDialogCancel>\n              <AlertDialogAction>Start group chat</AlertDialogAction>\n            </div>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </Example>\n  )\n}\n\nconst categories = [\n  {\n    id: \"homework\",\n    label: \"Homework\",\n  },\n  {\n    id: \"writing\",\n    label: \"Writing\",\n  },\n  {\n    id: \"health\",\n    label: \"Health\",\n  },\n  {\n    id: \"travel\",\n    label: \"Travel\",\n  },\n]\n\nfunction CreateProjectForm() {\n  const [projectName, setProjectName] = React.useState(\"\")\n  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(\n    categories[0].id\n  )\n  const [memorySetting, setMemorySetting] = React.useState<\n    \"default\" | \"project-only\"\n  >(\"default\")\n  const [selectedColor, setSelectedColor] = React.useState<string | null>(\n    \"var(--foreground)\"\n  )\n\n  return (\n    <Example title=\"Create Project\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Create Project</CardTitle>\n          <CardDescription>\n            Start a new project to keep chats, files, and custom instructions in\n            one place.\n          </CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span className=\"sr-only\">Memory</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-72\">\n                <DropdownMenuRadioGroup\n                  value={memorySetting}\n                  onValueChange={(value) => {\n                    setMemorySetting(value as \"default\" | \"project-only\")\n                  }}\n                >\n                  <DropdownMenuRadioItem value=\"default\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Default</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can access memories from outside chats, and\n                          vice versa.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                  <DropdownMenuRadioItem value=\"project-only\">\n                    <Item size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle>Project Only</ItemTitle>\n                        <ItemDescription className=\"text-xs\">\n                          Project can only access its own memories. Its memories\n                          are hidden from outside chats.\n                        </ItemDescription>\n                      </ItemContent>\n                    </Item>\n                  </DropdownMenuRadioItem>\n                </DropdownMenuRadioGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuLabel>\n                  Note that this setting can&apos;t be changed later.\n                </DropdownMenuLabel>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"project-name\" className=\"sr-only\">\n                Project Name\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"project-name\"\n                  placeholder=\"Copenhagen Trip\"\n                  value={projectName}\n                  onChange={(e) => {\n                    setProjectName(e.target.value)\n                  }}\n                />\n                <InputGroupAddon>\n                  <Popover>\n                    <PopoverTrigger asChild>\n                      <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                        <IconPlaceholder\n                          style={\n                            { \"--color\": selectedColor } as React.CSSProperties\n                          }\n                          lucide=\"FolderIcon\"\n                          phosphor=\"FolderIcon\"\n                          remixicon=\"RiFolderLine\"\n                          tabler=\"IconFolder\"\n                          hugeicons=\"FolderIcon\"\n                          className=\"text-(--color)\"\n                        />\n                      </InputGroupButton>\n                    </PopoverTrigger>\n                    <PopoverContent align=\"start\" className=\"w-60 p-3\">\n                      <div className=\"flex flex-wrap gap-2\">\n                        {[\n                          \"var(--foreground)\",\n                          \"#fa423e\",\n                          \"#f59e0b\",\n                          \"#8b5cf6\",\n                          \"#ec4899\",\n                          \"#10b981\",\n                          \"#6366f1\",\n                          \"#14b8a6\",\n                          \"#f97316\",\n                          \"#fbbc04\",\n                        ].map((color) => (\n                          <Button\n                            key={color}\n                            size=\"icon\"\n                            variant=\"ghost\"\n                            className=\"rounded-full p-1\"\n                            style={{ \"--color\": color } as React.CSSProperties}\n                            data-checked={selectedColor === color}\n                            onClick={() => {\n                              setSelectedColor(color)\n                            }}\n                          >\n                            <span className=\"group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)\" />\n                            <span className=\"sr-only\">{color}</span>\n                          </Button>\n                        ))}\n                      </div>\n                    </PopoverContent>\n                  </Popover>\n                </InputGroupAddon>\n              </InputGroup>\n              <FieldDescription className=\"flex flex-wrap gap-2\">\n                {categories.map((category) => (\n                  <Badge\n                    key={category.id}\n                    variant={\n                      selectedCategory === category.id ? \"default\" : \"outline\"\n                    }\n                    data-checked={selectedCategory === category.id}\n                    asChild\n                  >\n                    <button\n                      onClick={() => {\n                        setSelectedCategory(\n                          selectedCategory === category.id ? null : category.id\n                        )\n                      }}\n                    >\n                      <IconPlaceholder\n                        lucide=\"CircleCheckIcon\"\n                        tabler=\"IconCircleCheck\"\n                        hugeicons=\"CheckmarkCircle02Icon\"\n                        phosphor=\"CheckCircleIcon\"\n                        remixicon=\"RiCheckboxCircleLine\"\n                        data-icon=\"inline-start\"\n                        className=\"hidden group-data-[checked=true]/badge:inline\"\n                      />\n                      {category.label}\n                    </button>\n                  </Badge>\n                ))}\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Alert className=\"bg-muted\">\n                <IconPlaceholder\n                  lucide=\"LightbulbIcon\"\n                  tabler=\"IconBulb\"\n                  hugeicons=\"BulbIcon\"\n                  phosphor=\"LightbulbIcon\"\n                  remixicon=\"RiLightbulbLine\"\n                />\n                <AlertDescription className=\"text-xs\">\n                  Projects keep chats, files, and custom instructions in one\n                  place. Use them for ongoing work, or just to keep things tidy.\n                </AlertDescription>\n              </Alert>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/checkbox.json b/apps/v4/public/r/styles/radix-vega/checkbox.json
index 858e6add13..9c3501708b 100644
--- a/apps/v4/public/r/styles/radix-vega/checkbox.json
+++ b/apps/v4/public/r/styles/radix-vega/checkbox.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/collapsible-example.json b/apps/v4/public/r/styles/radix-vega/collapsible-example.json
index 656192e6b9..90205523da 100644
--- a/apps/v4/public/r/styles/radix-vega/collapsible-example.json
+++ b/apps/v4/public/r/styles/radix-vega/collapsible-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/collapsible-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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"style-lyra:ml-4 mt-1 ml-5\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"text-foreground w-full justify-start gap-2\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "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  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CollapsibleExample() {\n  return (\n    <ExampleWrapper>\n      <CollapsibleFileTree />\n      <CollapsibleSettings />\n    </ExampleWrapper>\n  )\n}\n\ntype FileTreeItem = { name: string } | { name: string; items: FileTreeItem[] }\n\nfunction CollapsibleFileTree() {\n  const fileTree: FileTreeItem[] = [\n    {\n      name: \"components\",\n      items: [\n        {\n          name: \"ui\",\n          items: [\n            { name: \"button.tsx\" },\n            { name: \"card.tsx\" },\n            { name: \"dialog.tsx\" },\n            { name: \"input.tsx\" },\n            { name: \"select.tsx\" },\n            { name: \"table.tsx\" },\n          ],\n        },\n        { name: \"login-form.tsx\" },\n        { name: \"register-form.tsx\" },\n      ],\n    },\n    {\n      name: \"lib\",\n      items: [{ name: \"utils.ts\" }, { name: \"cn.ts\" }, { name: \"api.ts\" }],\n    },\n    {\n      name: \"hooks\",\n      items: [\n        { name: \"use-media-query.ts\" },\n        { name: \"use-debounce.ts\" },\n        { name: \"use-local-storage.ts\" },\n      ],\n    },\n    {\n      name: \"types\",\n      items: [{ name: \"index.d.ts\" }, { name: \"api.d.ts\" }],\n    },\n    {\n      name: \"public\",\n      items: [\n        { name: \"favicon.ico\" },\n        { name: \"logo.svg\" },\n        { name: \"images\" },\n      ],\n    },\n    { name: \"app.tsx\" },\n    { name: \"layout.tsx\" },\n    { name: \"globals.css\" },\n    { name: \"package.json\" },\n    { name: \"tsconfig.json\" },\n    { name: \"README.md\" },\n    { name: \".gitignore\" },\n  ]\n\n  const renderItem = (fileItem: FileTreeItem) => {\n    if (\"items\" in fileItem) {\n      return (\n        <Collapsible key={fileItem.name}>\n          <CollapsibleTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              className=\"group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"ChevronRightIcon\"\n                tabler=\"IconChevronRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"CaretRightIcon\"\n                remixicon=\"RiArrowRightSLine\"\n                className=\"transition-transform group-data-[state=open]:rotate-90\"\n              />\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"Folder01Icon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              {fileItem.name}\n            </Button>\n          </CollapsibleTrigger>\n          <CollapsibleContent className=\"mt-1 ml-5 style-lyra:ml-4\">\n            <div className=\"flex flex-col gap-1\">\n              {fileItem.items.map((child) => renderItem(child))}\n            </div>\n          </CollapsibleContent>\n        </Collapsible>\n      )\n    }\n    return (\n      <Button\n        key={fileItem.name}\n        variant=\"link\"\n        size=\"sm\"\n        className=\"w-full justify-start gap-2 text-foreground\"\n      >\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n        <span>{fileItem.name}</span>\n      </Button>\n    )\n  }\n\n  return (\n    <Example title=\"File Tree\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-[16rem] gap-2\" size=\"sm\">\n        <CardHeader>\n          <Tabs defaultValue=\"explorer\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"explorer\">Explorer</TabsTrigger>\n              <TabsTrigger value=\"settings\">Outline</TabsTrigger>\n            </TabsList>\n          </Tabs>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-col gap-1\">\n            {fileTree.map((item) => renderItem(item))}\n          </div>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CollapsibleSettings() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Settings\" className=\"items-center\">\n      <Card className=\"mx-auto w-full max-w-xs\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Radius</CardTitle>\n          <CardDescription>\n            Set the corner radius of the element.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <Collapsible\n            open={isOpen}\n            onOpenChange={setIsOpen}\n            className=\"flex items-start gap-2\"\n          >\n            <FieldGroup className=\"grid w-full grid-cols-2 gap-2\">\n              <Field>\n                <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                  Radius X\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                  Radius Y\n                </FieldLabel>\n                <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n              </Field>\n              <CollapsibleContent className=\"col-span-full grid grid-cols-subgrid gap-2\">\n                <Field>\n                  <FieldLabel htmlFor=\"radius-x\" className=\"sr-only\">\n                    Radius X\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"radius-y\" className=\"sr-only\">\n                    Radius Y\n                  </FieldLabel>\n                  <Input id=\"radius\" placeholder=\"0\" defaultValue={0} />\n                </Field>\n              </CollapsibleContent>\n            </FieldGroup>\n            <CollapsibleTrigger asChild>\n              <Button variant=\"outline\" size=\"icon\">\n                {isOpen ? (\n                  <IconPlaceholder\n                    lucide=\"MinimizeIcon\"\n                    tabler=\"IconMinimize\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                ) : (\n                  <IconPlaceholder\n                    lucide=\"MaximizeIcon\"\n                    tabler=\"IconMaximize\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                )}\n              </Button>\n            </CollapsibleTrigger>\n          </Collapsible>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/collapsible.json b/apps/v4/public/r/styles/radix-vega/collapsible.json
index 4ebad196f7..e38b5439ce 100644
--- a/apps/v4/public/r/styles/radix-vega/collapsible.json
+++ b/apps/v4/public/r/styles/radix-vega/collapsible.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/combobox-example.json b/apps/v4/public/r/styles/radix-vega/combobox-example.json
index cbac53ce94..40ddd08b45 100644
--- a/apps/v4/public/r/styles/radix-vega/combobox-example.json
+++ b/apps/v4/public/r/styles/radix-vega/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/combobox-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-vega/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/radix-vega/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen} modal={false}>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue placeholder=\"Select a framework\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {frameworks.map((framework) => (\n              <SelectItem key={framework} value={framework}>\n                {framework}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"w-52 justify-between font-normal text-muted-foreground\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/combobox.json b/apps/v4/public/r/styles/radix-vega/combobox.json
index b332ef5684..89a768e3e6 100644
--- a/apps/v4/public/r/styles/radix-vega/combobox.json
+++ b/apps/v4/public/r/styles/radix-vega/combobox.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none size-4\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm 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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1.5\",\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-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-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"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 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-md 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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none 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 overflow-y-auto overscroll-contain p-1 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 rounded-sm py-1.5 pr-8 pl-2 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\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 my-1 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-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40\",\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-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+      "api": "https://base-ui.com/react/components/combobox"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/command.json b/apps/v4/public/r/styles/radix-vega/command.json
index 17c5c2bc09..6c361fb077 100644
--- a/apps/v4/public/r/styles/radix-vega/command.json
+++ b/apps/v4/public/r/styles/radix-vega/command.json
@@ -11,9 +11,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-xl! p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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        \"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\",\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(\"bg-border -mx-1 h-px w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\",\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-vega/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 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(\n          \"top-1/3 translate-y-0 overflow-hidden rounded-xl! p-0\",\n          className\n        )}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1 pb-0\">\n      <InputGroup className=\"h-8! rounded-lg! border-input/30 bg-input/30 shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 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 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\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(\"-mx-1 h-px w-auto bg-border\", 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-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:**:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/command",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+      "api": "https://github.com/dip/cmdk"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/component-example.json b/apps/v4/public/r/styles/radix-vega/component-example.json
index cb40b162ba..911429d1eb 100644
--- a/apps/v4/public/r/styles/radix-vega/component-example.json
+++ b/apps/v4/public/r/styles/radix-vega/component-example.json
@@ -18,7 +18,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/component-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  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-vega/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-vega/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function ComponentExample() {\n  return (\n    <ExampleWrapper>\n      <CardExample />\n      <FormExample />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardExample() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <AlertDialog>\n            <AlertDialogTrigger asChild>\n              <Button>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  data-icon=\"inline-start\"\n                />\n                Show Dialog\n              </Button>\n            </AlertDialogTrigger>\n            <AlertDialogContent size=\"sm\">\n              <AlertDialogHeader>\n                <AlertDialogMedia>\n                  <IconPlaceholder\n                    lucide=\"BluetoothIcon\"\n                    tabler=\"IconBluetooth\"\n                    hugeicons=\"BluetoothIcon\"\n                    phosphor=\"BluetoothIcon\"\n                    remixicon=\"RiBluetoothLine\"\n                  />\n                </AlertDialogMedia>\n                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>\n                <AlertDialogDescription>\n                  Do you want to allow the USB accessory to connect to this\n                  device?\n                </AlertDialogDescription>\n              </AlertDialogHeader>\n              <AlertDialogFooter>\n                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                <AlertDialogAction>Allow</AlertDialogAction>\n              </AlertDialogFooter>\n            </AlertDialogContent>\n          </AlertDialog>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction FormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-56\">\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>Account</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"UserIcon\"\n                      tabler=\"IconUser\"\n                      hugeicons=\"UserIcon\"\n                      phosphor=\"UserIcon\"\n                      remixicon=\"RiUserLine\"\n                    />\n                    Profile\n                    <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CreditCardIcon\"\n                      tabler=\"IconCreditCard\"\n                      hugeicons=\"CreditCardIcon\"\n                      phosphor=\"CreditCardIcon\"\n                      remixicon=\"RiBankCardLine\"\n                    />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"SettingsIcon\"\n                        tabler=\"IconSettings\"\n                        hugeicons=\"SettingsIcon\"\n                        phosphor=\"GearIcon\"\n                        remixicon=\"RiSettingsLine\"\n                      />\n                      Settings\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"KeyboardIcon\"\n                              tabler=\"IconKeyboard\"\n                              hugeicons=\"KeyboardIcon\"\n                              phosphor=\"KeyboardIcon\"\n                              remixicon=\"RiKeyboardLine\"\n                            />\n                            Keyboard Shortcuts\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"LanguagesIcon\"\n                              tabler=\"IconLanguage\"\n                              hugeicons=\"LanguageCircleIcon\"\n                              phosphor=\"TranslateIcon\"\n                              remixicon=\"RiTranslate\"\n                            />\n                            Language\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Notifications\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuGroup>\n                                  <DropdownMenuLabel>\n                                    Notification Types\n                                  </DropdownMenuLabel>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.push}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        push: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"BellIcon\"\n                                      tabler=\"IconBell\"\n                                      hugeicons=\"NotificationIcon\"\n                                      phosphor=\"BellIcon\"\n                                      remixicon=\"RiNotificationLine\"\n                                    />\n                                    Push Notifications\n                                  </DropdownMenuCheckboxItem>\n                                  <DropdownMenuCheckboxItem\n                                    checked={notifications.email}\n                                    onCheckedChange={(checked) =>\n                                      setNotifications({\n                                        ...notifications,\n                                        email: checked === true,\n                                      })\n                                    }\n                                  >\n                                    <IconPlaceholder\n                                      lucide=\"MailIcon\"\n                                      tabler=\"IconMail\"\n                                      hugeicons=\"MailIcon\"\n                                      phosphor=\"EnvelopeIcon\"\n                                      remixicon=\"RiMailLine\"\n                                    />\n                                    Email Notifications\n                                  </DropdownMenuCheckboxItem>\n                                </DropdownMenuGroup>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"ShieldIcon\"\n                              tabler=\"IconShield\"\n                              hugeicons=\"ShieldIcon\"\n                              phosphor=\"ShieldIcon\"\n                              remixicon=\"RiShieldLine\"\n                            />\n                            Privacy & Security\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/context-menu.json b/apps/v4/public/r/styles/radix-vega/context-menu.json
index c3668a854b..6f1dc98b2f 100644
--- a/apps/v4/public/r/styles/radix-vega/context-menu.json
+++ b/apps/v4/public/r/styles/radix-vega/context-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground cn-menu-target z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_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        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_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        \"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) min-w-36 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 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 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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 z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8\",\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 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/dashboard-01.json b/apps/v4/public/r/styles/radix-vega/dashboard-01.json
index 54436e3283..a7f407b91b 100644
--- a/apps/v4/public/r/styles/radix-vega/dashboard-01.json
+++ b/apps/v4/public/r/styles/radix-vega/dashboard-01.json
@@ -57,17 +57,17 @@
     },
     {
       "path": "registry/radix-vega/blocks/dashboard-01/components/data-table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-vega/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-vega/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"text-muted-foreground size-7 hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"text-muted-foreground size-3\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"text-muted-foreground px-1.5\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"data-[state=open]:bg-muted text-muted-foreground flex size-8\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"bg-muted sticky top-0 z-10\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"text-muted-foreground hidden flex-1 text-sm lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"text-foreground w-fit px-0 text-left\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  closestCenter,\n  DndContext,\n  KeyboardSensor,\n  MouseSensor,\n  TouchSensor,\n  useSensor,\n  useSensors,\n  type DragEndEvent,\n  type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n  arrayMove,\n  SortableContext,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFacetedRowModel,\n  getFacetedUniqueValues,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type ColumnFiltersState,\n  type Row,\n  type SortingState,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-vega/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/registry/radix-vega/ui/table\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n  id: z.number(),\n  header: z.string(),\n  type: z.string(),\n  status: z.string(),\n  target: z.string(),\n  limit: z.string(),\n  reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n  const { attributes, listeners } = useSortable({\n    id,\n  })\n\n  return (\n    <Button\n      {...attributes}\n      {...listeners}\n      variant=\"ghost\"\n      size=\"icon\"\n      className=\"size-7 text-muted-foreground hover:bg-transparent\"\n    >\n      <IconPlaceholder\n        lucide=\"GripVerticalIcon\"\n        tabler=\"IconGripVertical\"\n        hugeicons=\"DragDropVerticalIcon\"\n        phosphor=\"DotsSixVerticalIcon\"\n        remixicon=\"RiDraggable\"\n        className=\"size-3 text-muted-foreground\"\n      />\n      <span className=\"sr-only\">Drag to reorder</span>\n    </Button>\n  )\n}\n\nconst columns: ColumnDef<z.infer<typeof schema>>[] = [\n  {\n    id: \"drag\",\n    header: () => null,\n    cell: ({ row }) => <DragHandle id={row.original.id} />,\n  },\n  {\n    id: \"select\",\n    header: ({ table }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }) => (\n      <div className=\"flex items-center justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"header\",\n    header: \"Header\",\n    cell: ({ row }) => {\n      return <TableCellViewer item={row.original} />\n    },\n    enableHiding: false,\n  },\n  {\n    accessorKey: \"type\",\n    header: \"Section Type\",\n    cell: ({ row }) => (\n      <div className=\"w-32\">\n        <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n          {row.original.type}\n        </Badge>\n      </div>\n    ),\n  },\n  {\n    accessorKey: \"status\",\n    header: \"Status\",\n    cell: ({ row }) => (\n      <Badge variant=\"outline\" className=\"px-1.5 text-muted-foreground\">\n        {row.original.status === \"Done\" ? (\n          <IconPlaceholder\n            lucide=\"CircleCheckIcon\"\n            tabler=\"IconCircleCheckFilled\"\n            hugeicons=\"CheckmarkCircle01Icon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleFill\"\n            className=\"fill-green-500 dark:fill-green-400\"\n          />\n        ) : (\n          <IconPlaceholder\n            lucide=\"LoaderIcon\"\n            tabler=\"IconLoader\"\n            hugeicons=\"Loading03Icon\"\n            phosphor=\"SpinnerIcon\"\n            remixicon=\"RiLoader4Line\"\n          />\n        )}\n        {row.original.status}\n      </Badge>\n    ),\n  },\n  {\n    accessorKey: \"target\",\n    header: () => <div className=\"w-full text-right\">Target</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-target`} className=\"sr-only\">\n          Target\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.target}\n          id={`${row.original.id}-target`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"limit\",\n    header: () => <div className=\"w-full text-right\">Limit</div>,\n    cell: ({ row }) => (\n      <form\n        onSubmit={(e) => {\n          e.preventDefault()\n          toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n            loading: `Saving ${row.original.header}`,\n            success: \"Done\",\n            error: \"Error\",\n          })\n        }}\n      >\n        <Label htmlFor={`${row.original.id}-limit`} className=\"sr-only\">\n          Limit\n        </Label>\n        <Input\n          className=\"h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30\"\n          defaultValue={row.original.limit}\n          id={`${row.original.id}-limit`}\n        />\n      </form>\n    ),\n  },\n  {\n    accessorKey: \"reviewer\",\n    header: \"Reviewer\",\n    cell: ({ row }) => {\n      const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n      if (isAssigned) {\n        return row.original.reviewer\n      }\n\n      return (\n        <>\n          <Label htmlFor={`${row.original.id}-reviewer`} className=\"sr-only\">\n            Reviewer\n          </Label>\n          <Select>\n            <SelectTrigger\n              className=\"w-38 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate\"\n              size=\"sm\"\n              id={`${row.original.id}-reviewer`}\n            >\n              <SelectValue placeholder=\"Assign reviewer\" />\n            </SelectTrigger>\n            <SelectContent align=\"end\">\n              <SelectGroup>\n                <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                <SelectItem value=\"Jamik Tashpulatov\">\n                  Jamik Tashpulatov\n                </SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </>\n      )\n    },\n  },\n  {\n    id: \"actions\",\n    cell: () => (\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            className=\"flex size-8 text-muted-foreground data-[state=open]:bg-muted\"\n            size=\"icon\"\n          >\n            <IconPlaceholder\n              lucide=\"EllipsisVerticalIcon\"\n              tabler=\"IconDotsVertical\"\n              hugeicons=\"MoreVerticalCircle01Icon\"\n              phosphor=\"DotsThreeVerticalIcon\"\n              remixicon=\"RiMore2Line\"\n            />\n            <span className=\"sr-only\">Open menu</span>\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-32\">\n          <DropdownMenuItem>Edit</DropdownMenuItem>\n          <DropdownMenuItem>Make a copy</DropdownMenuItem>\n          <DropdownMenuItem>Favorite</DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">Delete</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    ),\n  },\n]\n\nfunction DraggableRow({ row }: { row: Row<z.infer<typeof schema>> }) {\n  const { transform, transition, setNodeRef, isDragging } = useSortable({\n    id: row.original.id,\n  })\n\n  return (\n    <TableRow\n      data-state={row.getIsSelected() && \"selected\"}\n      data-dragging={isDragging}\n      ref={setNodeRef}\n      className=\"relative z-0 data-[dragging=true]:z-10 data-[dragging=true]:opacity-80\"\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition: transition,\n      }}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <TableCell key={cell.id}>\n          {flexRender(cell.column.columnDef.cell, cell.getContext())}\n        </TableCell>\n      ))}\n    </TableRow>\n  )\n}\n\nexport function DataTable({\n  data: initialData,\n}: {\n  data: z.infer<typeof schema>[]\n}) {\n  const [data, setData] = React.useState(() => initialData)\n  const [rowSelection, setRowSelection] = React.useState({})\n  const [columnVisibility, setColumnVisibility] =\n    React.useState<VisibilityState>({})\n  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(\n    []\n  )\n  const [sorting, setSorting] = React.useState<SortingState>([])\n  const [pagination, setPagination] = React.useState({\n    pageIndex: 0,\n    pageSize: 10,\n  })\n  const sortableId = React.useId()\n  const sensors = useSensors(\n    useSensor(MouseSensor, {}),\n    useSensor(TouchSensor, {}),\n    useSensor(KeyboardSensor, {})\n  )\n\n  const dataIds = React.useMemo<UniqueIdentifier[]>(\n    () => data?.map(({ id }) => id) || [],\n    [data]\n  )\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      columnVisibility,\n      rowSelection,\n      columnFilters,\n      pagination,\n    },\n    getRowId: (row) => row.id.toString(),\n    enableRowSelection: true,\n    onRowSelectionChange: setRowSelection,\n    onSortingChange: setSorting,\n    onColumnFiltersChange: setColumnFilters,\n    onColumnVisibilityChange: setColumnVisibility,\n    onPaginationChange: setPagination,\n    getCoreRowModel: getCoreRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFacetedRowModel: getFacetedRowModel(),\n    getFacetedUniqueValues: getFacetedUniqueValues(),\n  })\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (active && over && active.id !== over.id) {\n      setData((data) => {\n        const oldIndex = dataIds.indexOf(active.id)\n        const newIndex = dataIds.indexOf(over.id)\n        return arrayMove(data, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    <Tabs\n      defaultValue=\"outline\"\n      className=\"w-full flex-col justify-start gap-6\"\n    >\n      <div className=\"flex items-center justify-between px-4 lg:px-6\">\n        <Label htmlFor=\"view-selector\" className=\"sr-only\">\n          View\n        </Label>\n        <Select defaultValue=\"outline\">\n          <SelectTrigger\n            className=\"flex w-fit @4xl/main:hidden\"\n            size=\"sm\"\n            id=\"view-selector\"\n          >\n            <SelectValue placeholder=\"Select a view\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"outline\">Outline</SelectItem>\n              <SelectItem value=\"past-performance\">Past Performance</SelectItem>\n              <SelectItem value=\"key-personnel\">Key Personnel</SelectItem>\n              <SelectItem value=\"focus-documents\">Focus Documents</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <TabsList className=\"hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex\">\n          <TabsTrigger value=\"outline\">Outline</TabsTrigger>\n          <TabsTrigger value=\"past-performance\">\n            Past Performance <Badge variant=\"secondary\">3</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"key-personnel\">\n            Key Personnel <Badge variant=\"secondary\">2</Badge>\n          </TabsTrigger>\n          <TabsTrigger value=\"focus-documents\">Focus Documents</TabsTrigger>\n        </TabsList>\n        <div className=\"flex items-center gap-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" size=\"sm\">\n                <IconPlaceholder\n                  lucide=\"Columns3Icon\"\n                  tabler=\"IconLayoutColumns\"\n                  hugeicons=\"LeftToRightListBulletIcon\"\n                  phosphor=\"ColumnsIcon\"\n                  remixicon=\"RiLayoutColumnLine\"\n                  data-icon=\"inline-start\"\n                />\n                Columns\n                <IconPlaceholder\n                  lucide=\"ChevronDownIcon\"\n                  tabler=\"IconChevronDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"CaretDownIcon\"\n                  remixicon=\"RiArrowDownSLine\"\n                  data-icon=\"inline-end\"\n                />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              {table\n                .getAllColumns()\n                .filter(\n                  (column) =>\n                    typeof column.accessorFn !== \"undefined\" &&\n                    column.getCanHide()\n                )\n                .map((column) => {\n                  return (\n                    <DropdownMenuCheckboxItem\n                      key={column.id}\n                      className=\"capitalize\"\n                      checked={column.getIsVisible()}\n                      onCheckedChange={(value) =>\n                        column.toggleVisibility(!!value)\n                      }\n                    >\n                      {column.id}\n                    </DropdownMenuCheckboxItem>\n                  )\n                })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Button variant=\"outline\" size=\"sm\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n            />\n            <span className=\"hidden lg:inline\">Add Section</span>\n          </Button>\n        </div>\n      </div>\n      <TabsContent\n        value=\"outline\"\n        className=\"relative flex flex-col gap-4 overflow-auto px-4 lg:px-6\"\n      >\n        <div className=\"overflow-hidden rounded-lg border\">\n          <DndContext\n            collisionDetection={closestCenter}\n            modifiers={[restrictToVerticalAxis]}\n            onDragEnd={handleDragEnd}\n            sensors={sensors}\n            id={sortableId}\n          >\n            <Table>\n              <TableHeader className=\"sticky top-0 z-10 bg-muted\">\n                {table.getHeaderGroups().map((headerGroup) => (\n                  <TableRow key={headerGroup.id}>\n                    {headerGroup.headers.map((header) => {\n                      return (\n                        <TableHead key={header.id} colSpan={header.colSpan}>\n                          {header.isPlaceholder\n                            ? null\n                            : flexRender(\n                                header.column.columnDef.header,\n                                header.getContext()\n                              )}\n                        </TableHead>\n                      )\n                    })}\n                  </TableRow>\n                ))}\n              </TableHeader>\n              <TableBody className=\"**:data-[slot=table-cell]:first:w-8\">\n                {table.getRowModel().rows?.length ? (\n                  <SortableContext\n                    items={dataIds}\n                    strategy={verticalListSortingStrategy}\n                  >\n                    {table.getRowModel().rows.map((row) => (\n                      <DraggableRow key={row.id} row={row} />\n                    ))}\n                  </SortableContext>\n                ) : (\n                  <TableRow>\n                    <TableCell\n                      colSpan={columns.length}\n                      className=\"h-24 text-center\"\n                    >\n                      No results.\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </DndContext>\n        </div>\n        <div className=\"flex items-center justify-between px-4\">\n          <div className=\"hidden flex-1 text-sm text-muted-foreground lg:flex\">\n            {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n            {table.getFilteredRowModel().rows.length} row(s) selected.\n          </div>\n          <div className=\"flex w-full items-center gap-8 lg:w-fit\">\n            <div className=\"hidden items-center gap-2 lg:flex\">\n              <Label htmlFor=\"rows-per-page\" className=\"text-sm font-medium\">\n                Rows per page\n              </Label>\n              <Select\n                value={`${table.getState().pagination.pageSize}`}\n                onValueChange={(value) => {\n                  table.setPageSize(Number(value))\n                }}\n              >\n                <SelectTrigger size=\"sm\" className=\"w-20\" id=\"rows-per-page\">\n                  <SelectValue\n                    placeholder={table.getState().pagination.pageSize}\n                  />\n                </SelectTrigger>\n                <SelectContent side=\"top\">\n                  <SelectGroup>\n                    {[10, 20, 30, 40, 50].map((pageSize) => (\n                      <SelectItem key={pageSize} value={`${pageSize}`}>\n                        {pageSize}\n                      </SelectItem>\n                    ))}\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n            <div className=\"flex w-fit items-center justify-center text-sm font-medium\">\n              Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n              {table.getPageCount()}\n            </div>\n            <div className=\"ml-auto flex items-center gap-2 lg:ml-0\">\n              <Button\n                variant=\"outline\"\n                className=\"hidden h-8 w-8 p-0 lg:flex\"\n                onClick={() => table.setPageIndex(0)}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to first page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsLeftIcon\"\n                  tabler=\"IconChevronsLeft\"\n                  hugeicons=\"ArrowLeftDoubleIcon\"\n                  phosphor=\"CaretDoubleLeftIcon\"\n                  remixicon=\"RiSkipLeftLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.previousPage()}\n                disabled={!table.getCanPreviousPage()}\n              >\n                <span className=\"sr-only\">Go to previous page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronLeftIcon\"\n                  tabler=\"IconChevronLeft\"\n                  hugeicons=\"ArrowLeft01Icon\"\n                  phosphor=\"CaretLeftIcon\"\n                  remixicon=\"RiArrowLeftSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"size-8\"\n                size=\"icon\"\n                onClick={() => table.nextPage()}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to next page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronRightIcon\"\n                  tabler=\"IconChevronRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"CaretRightIcon\"\n                  remixicon=\"RiArrowRightSLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                className=\"hidden size-8 lg:flex\"\n                size=\"icon\"\n                onClick={() => table.setPageIndex(table.getPageCount() - 1)}\n                disabled={!table.getCanNextPage()}\n              >\n                <span className=\"sr-only\">Go to last page</span>\n                <IconPlaceholder\n                  lucide=\"ChevronsRightIcon\"\n                  tabler=\"IconChevronsRight\"\n                  hugeicons=\"ArrowRightDoubleIcon\"\n                  phosphor=\"CaretDoubleRightIcon\"\n                  remixicon=\"RiSkipRightLine\"\n                />\n              </Button>\n            </div>\n          </div>\n        </div>\n      </TabsContent>\n      <TabsContent\n        value=\"past-performance\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent value=\"key-personnel\" className=\"flex flex-col px-4 lg:px-6\">\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n      <TabsContent\n        value=\"focus-documents\"\n        className=\"flex flex-col px-4 lg:px-6\"\n      >\n        <div className=\"aspect-video w-full flex-1 rounded-lg border border-dashed\"></div>\n      </TabsContent>\n    </Tabs>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--primary)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--primary)\",\n  },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer<typeof schema> }) {\n  const isMobile = useIsMobile()\n\n  return (\n    <Drawer direction={isMobile ? \"bottom\" : \"right\"}>\n      <DrawerTrigger asChild>\n        <Button variant=\"link\" className=\"w-fit px-0 text-left text-foreground\">\n          {item.header}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader className=\"gap-1\">\n          <DrawerTitle>{item.header}</DrawerTitle>\n          <DrawerDescription>\n            Showing total visitors for the last 6 months\n          </DrawerDescription>\n        </DrawerHeader>\n        <div className=\"flex flex-col gap-4 overflow-y-auto px-4 text-sm\">\n          {!isMobile && (\n            <>\n              <ChartContainer config={chartConfig}>\n                <AreaChart\n                  accessibilityLayer\n                  data={chartData}\n                  margin={{\n                    left: 0,\n                    right: 10,\n                  }}\n                >\n                  <CartesianGrid vertical={false} />\n                  <XAxis\n                    dataKey=\"month\"\n                    tickLine={false}\n                    axisLine={false}\n                    tickMargin={8}\n                    tickFormatter={(value) => value.slice(0, 3)}\n                    hide\n                  />\n                  <ChartTooltip\n                    cursor={false}\n                    content={<ChartTooltipContent indicator=\"dot\" />}\n                  />\n                  <Area\n                    dataKey=\"mobile\"\n                    type=\"natural\"\n                    fill=\"var(--color-mobile)\"\n                    fillOpacity={0.6}\n                    stroke=\"var(--color-mobile)\"\n                    stackId=\"a\"\n                  />\n                  <Area\n                    dataKey=\"desktop\"\n                    type=\"natural\"\n                    fill=\"var(--color-desktop)\"\n                    fillOpacity={0.4}\n                    stroke=\"var(--color-desktop)\"\n                    stackId=\"a\"\n                  />\n                </AreaChart>\n              </ChartContainer>\n              <Separator />\n              <div className=\"grid gap-2\">\n                <div className=\"flex gap-2 leading-none font-medium\">\n                  Trending up by 5.2% this month{\" \"}\n                  <IconPlaceholder\n                    lucide=\"TrendingUpIcon\"\n                    tabler=\"IconTrendingUp\"\n                    hugeicons=\"ChartUpIcon\"\n                    phosphor=\"TrendUpIcon\"\n                    remixicon=\"RiArrowUpLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"text-muted-foreground\">\n                  Showing total visitors for the last 6 months. This is just\n                  some random text to test the layout. It spans multiple lines\n                  and should wrap around.\n                </div>\n              </div>\n              <Separator />\n            </>\n          )}\n          <form className=\"flex flex-col gap-4\">\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"header\">Header</Label>\n              <Input id=\"header\" defaultValue={item.header} />\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"type\">Type</Label>\n                <Select defaultValue={item.type}>\n                  <SelectTrigger id=\"type\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a type\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Table of Contents\">\n                        Table of Contents\n                      </SelectItem>\n                      <SelectItem value=\"Executive Summary\">\n                        Executive Summary\n                      </SelectItem>\n                      <SelectItem value=\"Technical Approach\">\n                        Technical Approach\n                      </SelectItem>\n                      <SelectItem value=\"Design\">Design</SelectItem>\n                      <SelectItem value=\"Capabilities\">Capabilities</SelectItem>\n                      <SelectItem value=\"Focus Documents\">\n                        Focus Documents\n                      </SelectItem>\n                      <SelectItem value=\"Narrative\">Narrative</SelectItem>\n                      <SelectItem value=\"Cover Page\">Cover Page</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"status\">Status</Label>\n                <Select defaultValue={item.status}>\n                  <SelectTrigger id=\"status\" className=\"w-full\">\n                    <SelectValue placeholder=\"Select a status\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"Done\">Done</SelectItem>\n                      <SelectItem value=\"In Progress\">In Progress</SelectItem>\n                      <SelectItem value=\"Not Started\">Not Started</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"target\">Target</Label>\n                <Input id=\"target\" defaultValue={item.target} />\n              </div>\n              <div className=\"flex flex-col gap-3\">\n                <Label htmlFor=\"limit\">Limit</Label>\n                <Input id=\"limit\" defaultValue={item.limit} />\n              </div>\n            </div>\n            <div className=\"flex flex-col gap-3\">\n              <Label htmlFor=\"reviewer\">Reviewer</Label>\n              <Select defaultValue={item.reviewer}>\n                <SelectTrigger id=\"reviewer\" className=\"w-full\">\n                  <SelectValue placeholder=\"Select a reviewer\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"Eddie Lake\">Eddie Lake</SelectItem>\n                    <SelectItem value=\"Jamik Tashpulatov\">\n                      Jamik Tashpulatov\n                    </SelectItem>\n                    <SelectItem value=\"Emily Whalen\">Emily Whalen</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </div>\n          </form>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose asChild>\n            <Button variant=\"outline\">Done</Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-vega/blocks/dashboard-01/components/nav-documents.tsx",
-      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"data-[state=open]:bg-accent rounded-sm\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavDocuments({\n  items,\n}: {\n  items: {\n    name: string\n    url: string\n    icon: React.ReactNode\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n      <SidebarGroupLabel>Documents</SidebarGroupLabel>\n      <SidebarMenu>\n        {items.map((item) => (\n          <SidebarMenuItem key={item.name}>\n            <SidebarMenuButton asChild>\n              <a href={item.url}>\n                {item.icon}\n                <span>{item.name}</span>\n              </a>\n            </SidebarMenuButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <SidebarMenuAction\n                  showOnHover\n                  className=\"rounded-sm data-[state=open]:bg-accent\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeOutlineIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                  <span className=\"sr-only\">More</span>\n                </SidebarMenuAction>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                className=\"w-24 rounded-lg\"\n                side={isMobile ? \"bottom\" : \"right\"}\n                align={isMobile ? \"end\" : \"start\"}\n              >\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"Folder01Icon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Open</span>\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare3\"\n                    hugeicons=\"Share01Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                  <span>Share</span>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"Trash2Icon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        ))}\n        <SidebarMenuItem>\n          <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n              className=\"text-sidebar-foreground/70\"\n            />\n            <span>More</span>\n          </SidebarMenuButton>\n        </SidebarMenuItem>\n      </SidebarMenu>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-vega/blocks/dashboard-01/components/nav-main.tsx",
-      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavMain({\n  items,\n}: {\n  items: {\n    title: string\n    url: string\n    icon?: React.ReactNode\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupContent className=\"flex flex-col gap-2\">\n        <SidebarMenu>\n          <SidebarMenuItem className=\"flex items-center gap-2\">\n            <SidebarMenuButton\n              tooltip=\"Quick Create\"\n              className=\"min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground\"\n            >\n              <IconPlaceholder\n                lucide=\"CirclePlusIcon\"\n                tabler=\"IconCirclePlusFilled\"\n                hugeicons=\"PlusSignCircleIcon\"\n                phosphor=\"PlusCircleIcon\"\n                remixicon=\"RiAddCircleFill\"\n              />\n              <span>Quick Create</span>\n            </SidebarMenuButton>\n            <Button\n              size=\"icon\"\n              className=\"size-8 group-data-[collapsible=icon]:opacity-0\"\n              variant=\"outline\"\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"Mail01Icon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              <span className=\"sr-only\">Inbox</span>\n            </Button>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SidebarMenu>\n          {items.map((item) => (\n            <SidebarMenuItem key={item.title}>\n              <SidebarMenuButton tooltip={item.title}>\n                {item.icon}\n                <span>{item.title}</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          ))}\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -77,12 +77,12 @@
     },
     {
       "path": "registry/radix-vega/blocks/dashboard-01/components/nav-user.tsx",
-      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n  user,\n}: {\n  user: {\n    name: string\n    email: string\n    avatar: string\n  }\n}) {\n  const { isMobile } = useSidebar()\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <Avatar className=\"h-8 w-8 rounded-lg grayscale\">\n                <AvatarImage src={user.avatar} alt={user.name} />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{user.name}</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  {user.email}\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"EllipsisVerticalIcon\"\n                tabler=\"IconDotsVertical\"\n                hugeicons=\"MoreVerticalCircle01Icon\"\n                phosphor=\"DotsThreeVerticalIcon\"\n                remixicon=\"RiMore2Line\"\n                className=\"ml-auto size-4\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            align=\"end\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <div className=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                <Avatar className=\"h-8 w-8 rounded-lg\">\n                  <AvatarImage src={user.avatar} alt={user.name} />\n                  <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                </Avatar>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">{user.name}</span>\n                  <span className=\"truncate text-xs text-muted-foreground\">\n                    {user.email}\n                  </span>\n                </div>\n              </div>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleUserRoundIcon\"\n                  tabler=\"IconUserCircle\"\n                  hugeicons=\"UserCircle02Icon\"\n                  phosphor=\"UserCircleIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Account\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Billing\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BellIcon\"\n                  tabler=\"IconNotification\"\n                  hugeicons=\"Notification03Icon\"\n                  phosphor=\"BellIcon\"\n                  remixicon=\"RiNotification3Line\"\n                />\n                Notifications\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"Logout01Icon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-vega/blocks/dashboard-01/components/section-cards.tsx",
-      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport {\n  Card,\n  CardAction,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SectionCards() {\n  return (\n    <div className=\"grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card\">\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Total Revenue</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            $1,250.00\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Trending up this month{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Visitors for the last 6 months\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>New Customers</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            1,234\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingDownIcon\"\n                tabler=\"IconTrendingDown\"\n                hugeicons=\"ChartDownIcon\"\n                phosphor=\"TrendDownIcon\"\n                remixicon=\"RiArrowDownLine\"\n              />\n              -20%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Down 20% this period{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingDownIcon\"\n              tabler=\"IconTrendingDown\"\n              hugeicons=\"ChartDownIcon\"\n              phosphor=\"TrendDownIcon\"\n              remixicon=\"RiArrowDownLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">\n            Acquisition needs attention\n          </div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Active Accounts</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            45,678\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +12.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Strong user retention{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Engagement exceed targets</div>\n        </CardFooter>\n      </Card>\n      <Card className=\"@container/card\">\n        <CardHeader>\n          <CardDescription>Growth Rate</CardDescription>\n          <CardTitle className=\"text-2xl font-semibold tabular-nums @[250px]/card:text-3xl\">\n            4.5%\n          </CardTitle>\n          <CardAction>\n            <Badge variant=\"outline\">\n              <IconPlaceholder\n                lucide=\"TrendingUpIcon\"\n                tabler=\"IconTrendingUp\"\n                hugeicons=\"ChartUpIcon\"\n                phosphor=\"TrendUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              +4.5%\n            </Badge>\n          </CardAction>\n        </CardHeader>\n        <CardFooter className=\"flex-col items-start gap-1.5 text-sm\">\n          <div className=\"line-clamp-1 flex gap-2 font-medium\">\n            Steady performance increase{\" \"}\n            <IconPlaceholder\n              lucide=\"TrendingUpIcon\"\n              tabler=\"IconTrendingUp\"\n              hugeicons=\"ChartUpIcon\"\n              phosphor=\"TrendUpIcon\"\n              remixicon=\"RiArrowUpLine\"\n              className=\"size-4\"\n            />\n          </div>\n          <div className=\"text-muted-foreground\">Meets growth projections</div>\n        </CardFooter>\n      </Card>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-vega/demo.json b/apps/v4/public/r/styles/radix-vega/demo.json
new file mode 100644
index 0000000000..d73df7a819
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/demo.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "demo",
+  "title": "Demo",
+  "registryDependencies": [
+    "alert-dialog",
+    "badge",
+    "button",
+    "button-group",
+    "card",
+    "checkbox",
+    "dropdown-menu",
+    "field",
+    "input-group",
+    "item",
+    "radio-group",
+    "slider",
+    "switch",
+    "textarea"
+  ],
+  "files": [
+    {
+      "path": "registry/radix-vega/examples/demo.tsx",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field, FieldGroup } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n  InputGroupText,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Demo() {\n  const [sliderValue, setSliderValue] = React.useState<number[]>([500])\n  const handleSliderValueChange = React.useCallback((value: number[]) => {\n    setSliderValue(value)\n  }, [])\n\n  return (\n    <div className=\"flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background\">\n      <div className=\"grid max-w-3xl gap-4 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-4\">\n          <Card>\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-1\">\n                <div className=\"text-2xl font-medium\">Style Overview</div>\n                <div className=\"line-clamp-2 text-base text-muted-foreground\">\n                  Designers love packing quirky glyphs into test phrases. This\n                  is a preview of the typography styles.\n                </div>\n              </div>\n              <div className=\"grid grid-cols-6 gap-3\">\n                {[\n                  \"--background\",\n                  \"--foreground\",\n                  \"--primary\",\n                  \"--secondary\",\n                  \"--muted\",\n                  \"--accent\",\n                  \"--destructive\",\n                  \"--chart-1\",\n                  \"--chart-2\",\n                  \"--chart-3\",\n                  \"--chart-4\",\n                  \"--chart-5\",\n                ].map((variant) => (\n                  <div\n                    key={variant}\n                    className=\"flex flex-col flex-wrap items-center gap-2\"\n                  >\n                    <div\n                      className=\"relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten\"\n                      style={\n                        {\n                          \"--color\": `var(${variant})`,\n                        } as React.CSSProperties\n                      }\n                    />\n                    <div className=\"hidden max-w-14 truncate font-mono text-[0.60rem] md:block\">\n                      {variant}\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </CardContent>\n          </Card>\n          <Card>\n            <CardContent>\n              <div className=\"grid grid-cols-8 place-items-center gap-4\">\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"Copy01Icon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CircleAlertIcon\"\n                    tabler=\"IconExclamationCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"WarningCircleIcon\"\n                    remixicon=\"RiErrorWarningLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"Delete02Icon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShareIcon\"\n                    tabler=\"IconShare\"\n                    hugeicons=\"Share03Icon\"\n                    phosphor=\"ShareIcon\"\n                    remixicon=\"RiShareLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ShoppingBagIcon\"\n                    tabler=\"IconShoppingBag\"\n                    hugeicons=\"ShoppingBag01Icon\"\n                    phosphor=\"BagIcon\"\n                    remixicon=\"RiShoppingBagLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MoreHorizontalIcon\"\n                    tabler=\"IconDots\"\n                    hugeicons=\"MoreHorizontalCircle01Icon\"\n                    phosphor=\"DotsThreeIcon\"\n                    remixicon=\"RiMoreLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"Loader2Icon\"\n                    tabler=\"IconLoader\"\n                    hugeicons=\"Loading03Icon\"\n                    phosphor=\"SpinnerIcon\"\n                    remixicon=\"RiLoaderLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"MinusIcon\"\n                    tabler=\"IconMinus\"\n                    hugeicons=\"MinusSignIcon\"\n                    phosphor=\"MinusIcon\"\n                    remixicon=\"RiSubtractLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowLeftIcon\"\n                    tabler=\"IconArrowLeft\"\n                    hugeicons=\"ArrowLeft02Icon\"\n                    phosphor=\"ArrowLeftIcon\"\n                    remixicon=\"RiArrowLeftLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ArrowRightIcon\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRight02Icon\"\n                    phosphor=\"ArrowRightIcon\"\n                    remixicon=\"RiArrowRightLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SearchIcon\"\n                    tabler=\"IconSearch\"\n                    hugeicons=\"Search01Icon\"\n                    phosphor=\"MagnifyingGlassIcon\"\n                    remixicon=\"RiSearchLine\"\n                  />\n                </Card>\n                <Card className=\"flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4\">\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"Settings01Icon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                </Card>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n        <div className=\"flex flex-col gap-4\">\n          <Card className=\"w-full\">\n            <CardContent className=\"flex flex-col gap-6\">\n              <div className=\"flex flex-col gap-4\">\n                <div className=\"flex flex-wrap gap-2\">\n                  <Button>Button</Button>\n                  <Button variant=\"secondary\">Secondary</Button>\n                  <Button variant=\"outline\">Outline</Button>\n                  <Button variant=\"destructive\">Delete</Button>\n                </div>\n                <Item variant=\"outline\">\n                  <ItemContent>\n                    <ItemTitle>Two-factor authentication</ItemTitle>\n                    <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n                      Verify via email or phone number.\n                    </ItemDescription>\n                  </ItemContent>\n                  <ItemActions className=\"hidden md:flex\">\n                    <Button size=\"sm\" variant=\"secondary\">\n                      Enable\n                    </Button>\n                  </ItemActions>\n                </Item>\n              </div>\n              <Slider\n                value={sliderValue}\n                onValueChange={handleSliderValueChange}\n                max={1000}\n                min={0}\n                step={10}\n                className=\"flex-1\"\n                aria-label=\"Slider\"\n              />\n              <FieldGroup>\n                <Field>\n                  <InputGroup>\n                    <InputGroupInput placeholder=\"Name\" />\n                    <InputGroupAddon align=\"inline-end\">\n                      <InputGroupText>\n                        <IconPlaceholder\n                          lucide=\"SearchIcon\"\n                          tabler=\"IconSearch\"\n                          hugeicons=\"Search01Icon\"\n                          phosphor=\"MagnifyingGlassIcon\"\n                          remixicon=\"RiSearchLine\"\n                        />\n                      </InputGroupText>\n                    </InputGroupAddon>\n                  </InputGroup>\n                </Field>\n                <Field className=\"flex-1\">\n                  <Textarea placeholder=\"Message\" className=\"resize-none\" />\n                </Field>\n              </FieldGroup>\n              <div className=\"flex items-center gap-2\">\n                <div className=\"flex gap-2\">\n                  <Badge>Badge</Badge>\n                  <Badge variant=\"secondary\">Secondary</Badge>\n                  <Badge variant=\"outline\">Outline</Badge>\n                </div>\n                <RadioGroup\n                  defaultValue=\"apple\"\n                  className=\"ml-auto flex w-fit gap-3\"\n                >\n                  <RadioGroupItem value=\"apple\" />\n                  <RadioGroupItem value=\"banana\" />\n                </RadioGroup>\n                <div className=\"flex gap-3\">\n                  <Checkbox defaultChecked />\n                  <Checkbox />\n                </div>\n              </div>\n              <div className=\"flex items-center gap-4\">\n                <AlertDialog>\n                  <AlertDialogTrigger asChild>\n                    <Button variant=\"outline\">\n                      <span className=\"hidden md:block\">Alert Dialog</span>\n                      <span className=\"block md:hidden\">Dialog</span>\n                    </Button>\n                  </AlertDialogTrigger>\n                  <AlertDialogContent size=\"sm\">\n                    <AlertDialogHeader>\n                      <AlertDialogTitle>\n                        Allow accessory to connect?\n                      </AlertDialogTitle>\n                      <AlertDialogDescription>\n                        Do you want to allow the USB accessory to connect to\n                        this device and your data?\n                      </AlertDialogDescription>\n                    </AlertDialogHeader>\n                    <AlertDialogFooter>\n                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                      <AlertDialogAction>Allow</AlertDialogAction>\n                    </AlertDialogFooter>\n                  </AlertDialogContent>\n                </AlertDialog>\n                <ButtonGroup>\n                  <Button variant=\"outline\">Button Group</Button>\n                  <DropdownMenu>\n                    <DropdownMenuTrigger asChild>\n                      <Button variant=\"outline\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"ChevronUpIcon\"\n                          tabler=\"IconChevronUp\"\n                          hugeicons=\"ArrowUp01Icon\"\n                          phosphor=\"CaretUpIcon\"\n                          remixicon=\"RiArrowUpSLine\"\n                        />\n                      </Button>\n                    </DropdownMenuTrigger>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      side=\"top\"\n                      className=\"w-40\"\n                    >\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n                        <DropdownMenuItem>Block User</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem variant=\"destructive\">\n                          Delete Conversation\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ButtonGroup>\n                <Switch defaultChecked className=\"ml-auto\" />\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
+      "type": "registry:example"
+    }
+  ],
+  "type": "registry:example"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/dialog-example.json b/apps/v4/public/r/styles/radix-vega/dialog-example.json
index cce8fbd58b..498e974274 100644
--- a/apps/v4/public/r/styles/radix-vega/dialog-example.json
+++ b/apps/v4/public/r/styles/radix-vega/dialog-example.json
@@ -21,7 +21,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/dialog-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DialogExample() {\n  return (\n    <ExampleWrapper>\n      <DialogWithForm />\n      <DialogScrollableContent />\n      <DialogWithStickyFooter />\n      <DialogNoCloseButton />\n      <DialogChatSettings />\n    </ExampleWrapper>\n  )\n}\n\nfunction DialogWithForm() {\n  return (\n    <Example title=\"With Form\" className=\"items-center justify-center\">\n      <Dialog>\n        <form>\n          <DialogTrigger asChild>\n            <Button variant=\"outline\">Edit Profile</Button>\n          </DialogTrigger>\n          <DialogContent>\n            <DialogHeader>\n              <DialogTitle>Edit profile</DialogTitle>\n              <DialogDescription>\n                Make changes to your profile here. Click save when you&apos;re\n                done. Your profile will be updated immediately.\n              </DialogDescription>\n            </DialogHeader>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name-1\">Name</FieldLabel>\n                <Input id=\"name-1\" name=\"name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"username-1\">Username</FieldLabel>\n                <Input\n                  id=\"username-1\"\n                  name=\"username\"\n                  defaultValue=\"@peduarte\"\n                />\n              </Field>\n            </FieldGroup>\n            <DialogFooter>\n              <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n              </DialogClose>\n              <Button type=\"submit\">Save changes</Button>\n            </DialogFooter>\n          </DialogContent>\n        </form>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogWithStickyFooter() {\n  return (\n    <Example title=\"With Sticky Footer\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Sticky Footer</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Scrollable Content</DialogTitle>\n            <DialogDescription>\n              This is a dialog with scrollable content.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DialogNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>No Close Button</DialogTitle>\n            <DialogDescription>\n              This dialog doesn&apos;t have a close button in the top-right\n              corner.\n            </DialogDescription>\n          </DialogHeader>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </DialogClose>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst spokenLanguages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Italian\", value: \"it\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Chinese\", value: \"zh\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Arabic\", value: \"ar\" },\n  { label: \"Hindi\", value: \"hi\" },\n  { label: \"Bengali\", value: \"bn\" },\n  { label: \"Telugu\", value: \"te\" },\n  { label: \"Marathi\", value: \"mr\" },\n  { label: \"Kannada\", value: \"kn\" },\n  { label: \"Malayalam\", value: \"ml\" },\n]\n\nconst voices = [\n  { label: \"Samantha\", value: \"samantha\" },\n  { label: \"Alex\", value: \"alex\" },\n  { label: \"Fred\", value: \"fred\" },\n  { label: \"Victoria\", value: \"victoria\" },\n  { label: \"Tom\", value: \"tom\" },\n  { label: \"Karen\", value: \"karen\" },\n  { label: \"Sam\", value: \"sam\" },\n  { label: \"Daniel\", value: \"daniel\" },\n]\n\nfunction DialogChatSettings() {\n  const [tab, setTab] = React.useState(\"general\")\n  const [theme, setTheme] = React.useState(\"system\")\n  const [accentColor, setAccentColor] = React.useState(\"default\")\n  const [spokenLanguage, setSpokenLanguage] = React.useState(\"en\")\n  const [voice, setVoice] = React.useState(\"samantha\")\n\n  return (\n    <Example title=\"Chat Settings\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Chat Settings</Button>\n        </DialogTrigger>\n        <DialogContent className=\"min-w-md\">\n          <DialogHeader>\n            <DialogTitle>Chat Settings</DialogTitle>\n            <DialogDescription>\n              Customize your chat settings: theme, accent color, spoken\n              language, voice, personality, and custom instructions.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"flex flex-col gap-4\">\n            <NativeSelect\n              value={tab}\n              onChange={(e) => setTab(e.target.value)}\n              className=\"w-full md:hidden\"\n            >\n              <NativeSelectOption value=\"general\">General</NativeSelectOption>\n              <NativeSelectOption value=\"notifications\">\n                Notifications\n              </NativeSelectOption>\n              <NativeSelectOption value=\"personalization\">\n                Personalization\n              </NativeSelectOption>\n              <NativeSelectOption value=\"security\">Security</NativeSelectOption>\n            </NativeSelect>\n            <Tabs value={tab} onValueChange={setTab}>\n              <TabsList className=\"hidden w-full md:flex\">\n                <TabsTrigger value=\"general\">General</TabsTrigger>\n                <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n                <TabsTrigger value=\"personalization\">\n                  Personalization\n                </TabsTrigger>\n                <TabsTrigger value=\"security\">Security</TabsTrigger>\n              </TabsList>\n              <div className=\"border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]\">\n                <TabsContent value=\"general\">\n                  <FieldSet>\n                    <FieldGroup>\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"theme\">Theme</FieldLabel>\n                        <Select value={theme} onValueChange={setTheme}>\n                          <SelectTrigger id=\"theme\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"light\">Light</SelectItem>\n                              <SelectItem value=\"dark\">Dark</SelectItem>\n                              <SelectItem value=\"system\">System</SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"accent-color\">\n                          Accent Color\n                        </FieldLabel>\n                        <Select\n                          value={accentColor}\n                          onValueChange={setAccentColor}\n                        >\n                          <SelectTrigger id=\"accent-color\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\">\n                            <SelectGroup>\n                              <SelectItem value=\"default\">\n                                <div className=\"size-3 rounded-full bg-neutral-500 dark:bg-neutral-400\" />\n                                Default\n                              </SelectItem>\n                              <SelectItem value=\"red\">\n                                <div className=\"size-3 rounded-full bg-red-500 dark:bg-red-400\" />\n                                Red\n                              </SelectItem>\n                              <SelectItem value=\"blue\">\n                                <div className=\"size-3 rounded-full bg-blue-500 dark:bg-blue-400\" />\n                                Blue\n                              </SelectItem>\n                              <SelectItem value=\"green\">\n                                <div className=\"size-3 rounded-full bg-green-500 dark:bg-green-400\" />\n                                Green\n                              </SelectItem>\n                              <SelectItem value=\"purple\">\n                                <div className=\"size-3 rounded-full bg-purple-500 dark:bg-purple-400\" />\n                                Purple\n                              </SelectItem>\n                              <SelectItem value=\"pink\">\n                                <div className=\"size-3 rounded-full bg-pink-500 dark:bg-pink-400\" />\n                                Pink\n                              </SelectItem>\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"responsive\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"spoken-language\">\n                            Spoken Language\n                          </FieldLabel>\n                          <FieldDescription>\n                            For best results, select the language you mainly\n                            speak. If it&apos;s not listed, it may still be\n                            supported via auto-detection.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Select\n                          value={spokenLanguage}\n                          onValueChange={setSpokenLanguage}\n                        >\n                          <SelectTrigger id=\"spoken-language\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              <SelectItem value=\"auto\">Auto</SelectItem>\n                            </SelectGroup>\n                            <SelectSeparator />\n                            <SelectGroup>\n                              {spokenLanguages.map((language) => (\n                                <SelectItem\n                                  key={language.value}\n                                  value={language.value}\n                                >\n                                  {language.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                      <FieldSeparator />\n                      <Field orientation=\"horizontal\">\n                        <FieldLabel htmlFor=\"voice\">Voice</FieldLabel>\n                        <Select value={voice} onValueChange={setVoice}>\n                          <SelectTrigger id=\"voice\">\n                            <SelectValue placeholder=\"Select\" />\n                          </SelectTrigger>\n                          <SelectContent align=\"end\" position=\"item-aligned\">\n                            <SelectGroup>\n                              {voices.map((voice) => (\n                                <SelectItem\n                                  key={voice.value}\n                                  value={voice.value}\n                                >\n                                  {voice.label}\n                                </SelectItem>\n                              ))}\n                            </SelectGroup>\n                          </SelectContent>\n                        </Select>\n                      </Field>\n                    </FieldGroup>\n                  </FieldSet>\n                </TabsContent>\n                <TabsContent value=\"notifications\">\n                  <FieldGroup>\n                    <FieldSet>\n                      <FieldLabel>Responses</FieldLabel>\n                      <FieldDescription>\n                        Get notified when ChatGPT responds to requests that take\n                        time, like research or image generation.\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push\" defaultChecked disabled />\n                          <FieldLabel htmlFor=\"push\" className=\"font-normal\">\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                    <FieldSeparator />\n                    <FieldSet>\n                      <FieldLabel>Tasks</FieldLabel>\n                      <FieldDescription>\n                        Get notified when tasks you&apos;ve created have\n                        updates. <a href=\"#\">Manage tasks</a>\n                      </FieldDescription>\n                      <FieldGroup data-slot=\"checkbox-group\">\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"push-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"push-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Push notifications\n                          </FieldLabel>\n                        </Field>\n                        <Field orientation=\"horizontal\">\n                          <Checkbox id=\"email-tasks\" />\n                          <FieldLabel\n                            htmlFor=\"email-tasks\"\n                            className=\"font-normal\"\n                          >\n                            Email notifications\n                          </FieldLabel>\n                        </Field>\n                      </FieldGroup>\n                    </FieldSet>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"personalization\">\n                  <FieldGroup>\n                    <Field orientation=\"responsive\">\n                      <FieldLabel htmlFor=\"nickname\">Nickname</FieldLabel>\n                      <InputGroup>\n                        <InputGroupInput\n                          id=\"nickname\"\n                          placeholder=\"Broski\"\n                          className=\"@md/field-group:max-w-[200px]\"\n                        />\n                        <InputGroupAddon align=\"inline-end\">\n                          <Tooltip>\n                            <TooltipTrigger asChild>\n                              <InputGroupButton size=\"icon-xs\">\n                                <IconPlaceholder\n                                  lucide=\"InfoIcon\"\n                                  tabler=\"IconInfoCircle\"\n                                  hugeicons=\"AlertCircleIcon\"\n                                  phosphor=\"InfoIcon\"\n                                  remixicon=\"RiInformationLine\"\n                                />\n                              </InputGroupButton>\n                            </TooltipTrigger>\n                            <TooltipContent className=\"flex items-center gap-2\">\n                              Used to identify you in the chat. <Kbd>N</Kbd>\n                            </TooltipContent>\n                          </Tooltip>\n                        </InputGroupAddon>\n                      </InputGroup>\n                    </Field>\n                    <FieldSeparator />\n                    <Field\n                      orientation=\"responsive\"\n                      className=\"@md/field-group:flex-col @2xl/field-group:flex-row\"\n                    >\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"about\">More about you</FieldLabel>\n                        <FieldDescription>\n                          Tell us more about yourself. This will be used to help\n                          us personalize your experience.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Textarea\n                        id=\"about\"\n                        placeholder=\"I'm a software engineer...\"\n                        className=\"min-h-[120px] @md/field-group:min-w-full @2xl/field-group:min-w-[300px]\"\n                      />\n                    </Field>\n                    <FieldSeparator />\n                    <FieldLabel>\n                      <Field orientation=\"horizontal\">\n                        <FieldContent>\n                          <FieldLabel htmlFor=\"customization\">\n                            Enable customizations\n                          </FieldLabel>\n                          <FieldDescription>\n                            Enable customizations to make ChatGPT more\n                            personalized.\n                          </FieldDescription>\n                        </FieldContent>\n                        <Switch id=\"customization\" defaultChecked />\n                      </Field>\n                    </FieldLabel>\n                  </FieldGroup>\n                </TabsContent>\n                <TabsContent value=\"security\">\n                  <FieldGroup>\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldLabel htmlFor=\"2fa\">\n                          Multi-factor authentication\n                        </FieldLabel>\n                        <FieldDescription>\n                          Enable multi-factor authentication to secure your\n                          account. If you do not have a two-factor\n                          authentication device, you can use a one-time code\n                          sent to your email.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Switch id=\"2fa\" />\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out</FieldTitle>\n                        <FieldDescription>\n                          Log out of your account on this device.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out\n                      </Button>\n                    </Field>\n                    <FieldSeparator />\n                    <Field orientation=\"horizontal\">\n                      <FieldContent>\n                        <FieldTitle>Log out of all devices</FieldTitle>\n                        <FieldDescription>\n                          This will log you out of all devices, including the\n                          current session. It may take up to 30 minutes for the\n                          changes to take effect.\n                        </FieldDescription>\n                      </FieldContent>\n                      <Button variant=\"outline\" size=\"sm\">\n                        Log Out All\n                      </Button>\n                    </Field>\n                  </FieldGroup>\n                </TabsContent>\n              </div>\n            </Tabs>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/dialog.json b/apps/v4/public/r/styles/radix-vega/dialog.json
index 639b1b205e..f43fd46cb7 100644
--- a/apps/v4/public/r/styles/radix-vega/dialog.json
+++ b/apps/v4/public/r/styles/radix-vega/dialog.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl p-6 text-sm ring-1 duration-100 outline-none sm:max-w-md\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as DialogPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Dialog({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />\n}\n\nfunction DialogTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />\n}\n\nfunction DialogPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />\n}\n\nfunction DialogClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />\n}\n\nfunction DialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n  return (\n    <DialogPrimitive.Overlay\n      data-slot=\"dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DialogContent({\n  className,\n  children,\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <DialogPortal>\n      <DialogOverlay />\n      <DialogPrimitive.Content\n        data-slot=\"dialog-content\"\n        className={cn(\n          \"fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-6 rounded-xl bg-background p-6 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-md data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <DialogPrimitive.Close data-slot=\"dialog-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </DialogPrimitive.Close>\n        )}\n      </DialogPrimitive.Content>\n    </DialogPortal>\n  )\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"dialog-header\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogFooter({\n  className,\n  showCloseButton = false,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showCloseButton?: boolean\n}) {\n  return (\n    <div\n      data-slot=\"dialog-footer\"\n      className={cn(\n        \"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showCloseButton && (\n        <DialogPrimitive.Close asChild>\n          <Button variant=\"outline\">Close</Button>\n        </DialogPrimitive.Close>\n      )}\n    </div>\n  )\n}\n\nfunction DialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"dialog-title\"\n      className={cn(\"leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"dialog-description\"\n      className={cn(\n        \"text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogOverlay,\n  DialogPortal,\n  DialogTitle,\n  DialogTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/direction.json b/apps/v4/public/r/styles/radix-vega/direction.json
index 97976fd0f6..aeb781141f 100644
--- a/apps/v4/public/r/styles/radix-vega/direction.json
+++ b/apps/v4/public/r/styles/radix-vega/direction.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+      "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/drawer-example.json b/apps/v4/public/r/styles/radix-vega/drawer-example.json
index 0a7f3e0dda..ddc3af41f5 100644
--- a/apps/v4/public/r/styles/radix-vega/drawer-example.json
+++ b/apps/v4/public/r/styles/radix-vega/drawer-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/drawer-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-vega/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-vega/ui/drawer\"\n\nexport default function DrawerExample() {\n  return (\n    <ExampleWrapper>\n      <DrawerScrollableContent />\n      <DrawerWithSides />\n    </ExampleWrapper>\n  )\n}\n\nconst DRAWER_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction DrawerWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {DRAWER_SIDES.map((side) => (\n          <Drawer\n            key={side}\n            direction={\n              side === \"bottom\" ? undefined : (side as \"top\" | \"right\" | \"left\")\n            }\n          >\n            <DrawerTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </DrawerTrigger>\n            <DrawerContent className=\"data-[vaul-drawer-direction=bottom]:max-h-[50vh] data-[vaul-drawer-direction=top]:max-h-[50vh]\">\n              <DrawerHeader>\n                <DrawerTitle>Move Goal</DrawerTitle>\n                <DrawerDescription>\n                  Set your daily activity goal.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div className=\"no-scrollbar overflow-y-auto px-4\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <DrawerFooter>\n                <Button>Submit</Button>\n                <DrawerClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DrawerScrollableContent() {\n  return (\n    <Example title=\"Scrollable Content\">\n      <Drawer direction=\"right\">\n        <DrawerTrigger asChild>\n          <Button variant=\"outline\">Scrollable Content</Button>\n        </DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"no-scrollbar overflow-y-auto px-4\">\n            {Array.from({ length: 10 }).map((_, index) => (\n              <p\n                key={index}\n                className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n              >\n                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do\n                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n                enim ad minim veniam, quis nostrud exercitation ullamco laboris\n                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor\n                in reprehenderit in voluptate velit esse cillum dolore eu fugiat\n                nulla pariatur. Excepteur sint occaecat cupidatat non proident,\n                sunt in culpa qui officia deserunt mollit anim id est laborum.\n              </p>\n            ))}\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </DrawerContent>\n      </Drawer>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/drawer.json b/apps/v4/public/r/styles/radix-vega/drawer.json
index b0b44dbb67..4cc8f0905d 100644
--- a/apps/v4/public/r/styles/radix-vega/drawer.json
+++ b/apps/v4/public/r/styles/radix-vega/drawer.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/drawer.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"bg-background group/drawer-content fixed z-50 flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"vaul\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background text-sm data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        <div className=\"mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  )\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+      "api": "https://vaul.emilkowal.ski/getting-started"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json
index 6f83d91a66..64df691728 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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"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 [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/dropdown-menu.json b/apps/v4/public/r/styles/radix-vega/dropdown-menu.json
index 6463f2eba4..693fcb2157 100644
--- a/apps/v4/public/r/styles/radix-vega/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-vega/dropdown-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 duration-100 data-[state=closed]:overflow-hidden\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_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        \"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground cn-menu-target z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md p-1 shadow-lg ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover p-1 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 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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-2 py-1.5 text-xs font-medium text-muted-foreground data-inset:pl-8\",\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 my-1 h-px bg-border\", 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-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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 z-50 min-w-[96px] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/elevenlabs.json b/apps/v4/public/r/styles/radix-vega/elevenlabs.json
deleted file mode 100644
index 12754f3abb..0000000000
--- a/apps/v4/public/r/styles/radix-vega/elevenlabs.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "elevenlabs",
-  "title": "Elevenlabs",
-  "registryDependencies": [
-    "example",
-    "button",
-    "card"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-vega/blocks/elevenlabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useEffect, useMemo, useRef, useState } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\n\nexport default function ElevenlabsBlocks() {\n  return (\n    <ExampleWrapper>\n      <BarVisualizerDemo />\n      <WaveformDemo />\n    </ExampleWrapper>\n  )\n}\n\nfunction BarVisualizerDemo() {\n  const [state, setState] = useState<AgentState>(\"speaking\")\n\n  return (\n    <Example title=\"Bar Visualizer\">\n      <Card className=\"\">\n        <CardHeader>\n          <CardTitle>Audio Frequency Visualizer</CardTitle>\n          <CardDescription>\n            Real-time frequency band visualization with animated state\n            transitions\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <BarVisualizer\n            state={state}\n            demo={true}\n            barCount={20}\n            minHeight={15}\n            maxHeight={90}\n            className=\"h-40 max-w-full\"\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={state === \"connecting\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"connecting\")}\n          >\n            Connecting\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"listening\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"listening\")}\n          >\n            Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={state === \"speaking\" ? \"default\" : \"outline\"}\n            onClick={() => setState(\"speaking\")}\n          >\n            Speaking\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction WaveformDemo() {\n  const [active, setActive] = useState(false)\n  const [processing, setProcessing] = useState(true)\n  const [mode, setMode] = useState<\"static\" | \"scrolling\">(\"static\")\n  const handleToggleActive = () => {\n    setActive(!active)\n    if (!active) {\n      setProcessing(false)\n    }\n  }\n  const handleToggleProcessing = () => {\n    setProcessing(!processing)\n    if (!processing) {\n      setActive(false)\n    }\n  }\n  return (\n    <Example title=\"Waveform\" className=\"items-center justify-center\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Live Audio Waveform</CardTitle>\n          <CardDescription>\n            Real-time microphone input visualization with audio reactivity\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <LiveWaveform\n            active={active}\n            processing={processing}\n            height={80}\n            barWidth={3}\n            barGap={2}\n            mode={mode}\n            fadeEdges={true}\n            barColor=\"gray\"\n            historySize={120}\n          />\n        </CardContent>\n        <CardFooter className=\"gap-2\">\n          <Button\n            size=\"sm\"\n            variant={active ? \"default\" : \"outline\"}\n            onClick={handleToggleActive}\n          >\n            {active ? \"Stop\" : \"Start\"} Listening\n          </Button>\n          <Button\n            size=\"sm\"\n            variant={processing ? \"default\" : \"outline\"}\n            onClick={handleToggleProcessing}\n          >\n            {processing ? \"Stop\" : \"Start\"} Processing\n          </Button>\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            onClick={() => setMode(mode === \"static\" ? \"scrolling\" : \"static\")}\n          >\n            {mode === \"static\" ? \"Static\" : \"Scrolling\"}\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nexport interface AudioAnalyserOptions {\n  fftSize?: number\n  smoothingTimeConstant?: number\n  minDecibels?: number\n  maxDecibels?: number\n}\n\nfunction createAudioAnalyser(\n  mediaStream: MediaStream,\n  options: AudioAnalyserOptions = {}\n) {\n  const audioContext = new (window.AudioContext ||\n    (window as unknown as { webkitAudioContext: typeof AudioContext })\n      .webkitAudioContext)()\n  const source = audioContext.createMediaStreamSource(mediaStream)\n  const analyser = audioContext.createAnalyser()\n\n  if (options.fftSize) analyser.fftSize = options.fftSize\n  if (options.smoothingTimeConstant !== undefined) {\n    analyser.smoothingTimeConstant = options.smoothingTimeConstant\n  }\n  if (options.minDecibels !== undefined)\n    analyser.minDecibels = options.minDecibels\n  if (options.maxDecibels !== undefined)\n    analyser.maxDecibels = options.maxDecibels\n\n  source.connect(analyser)\n\n  const cleanup = () => {\n    source.disconnect()\n    audioContext.close()\n  }\n\n  return { analyser, audioContext, cleanup }\n}\n\n/**\n * Hook for tracking the volume of an audio stream using the Web Audio API.\n * @param mediaStream - The MediaStream to analyze\n * @param options - Audio analyser options\n * @returns The current volume level (0-1)\n */\nexport function useAudioVolume(\n  mediaStream?: MediaStream | null,\n  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }\n) {\n  const [volume, setVolume] = useState(0)\n  const volumeRef = useRef(0)\n  const frameId = useRef<number | undefined>(undefined)\n\n  // Memoize options to prevent unnecessary re-renders\n  const memoizedOptions = useMemo(() => options, [options])\n\n  useEffect(() => {\n    if (!mediaStream) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setVolume(0)\n      volumeRef.current = 0\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      memoizedOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Uint8Array(bufferLength)\n    let lastUpdate = 0\n    const updateInterval = 1000 / 30 // 30 FPS\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getByteFrequencyData(dataArray)\n        let sum = 0\n        for (let i = 0; i < dataArray.length; i++) {\n          const a = dataArray[i]\n          sum += a * a\n        }\n        const newVolume = Math.sqrt(sum / dataArray.length) / 255\n\n        // Only update state if volume changed significantly\n        if (Math.abs(newVolume - volumeRef.current) > 0.01) {\n          volumeRef.current = newVolume\n          setVolume(newVolume)\n        }\n        lastUpdate = timestamp\n      }\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, memoizedOptions])\n\n  return volume\n}\n\nexport interface MultiBandVolumeOptions {\n  bands?: number\n  loPass?: number // Low frequency cutoff\n  hiPass?: number // High frequency cutoff\n  updateInterval?: number // Update interval in ms\n  analyserOptions?: AudioAnalyserOptions\n}\n\nconst multibandDefaults: MultiBandVolumeOptions = {\n  bands: 5,\n  loPass: 100,\n  hiPass: 600,\n  updateInterval: 32,\n  analyserOptions: { fftSize: 2048 },\n}\n\n// Memoized normalization function to avoid recreating on each render\nconst normalizeDb = (value: number) => {\n  if (value === -Infinity) return 0\n  const minDb = -100\n  const maxDb = -10\n  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100\n  return Math.sqrt(db)\n}\n\n/**\n * Hook for tracking volume across multiple frequency bands\n * @param mediaStream - The MediaStream to analyze\n * @param options - Multiband options\n * @returns Array of volume levels for each frequency band\n */\nexport function useMultibandVolume(\n  mediaStream?: MediaStream | null,\n  options: MultiBandVolumeOptions = {}\n) {\n  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])\n\n  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>\n    new Array(opts.bands).fill(0)\n  )\n  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))\n  const frameId = useRef<number | undefined>(undefined)\n\n  useEffect(() => {\n    if (!mediaStream) {\n      const emptyBands = new Array(opts.bands).fill(0)\n      setTimeout(() => {\n        setFrequencyBands(emptyBands)\n      }, 0)\n      bandsRef.current = emptyBands\n      return\n    }\n\n    const { analyser, cleanup } = createAudioAnalyser(\n      mediaStream,\n      opts.analyserOptions\n    )\n\n    const bufferLength = analyser.frequencyBinCount\n    const dataArray = new Float32Array(bufferLength)\n    const sliceStart = opts.loPass!\n    const sliceEnd = opts.hiPass!\n    const sliceLength = sliceEnd - sliceStart\n    const chunkSize = Math.ceil(sliceLength / opts.bands!)\n\n    let lastUpdate = 0\n    const updateInterval = opts.updateInterval!\n\n    const updateVolume = (timestamp: number) => {\n      if (timestamp - lastUpdate >= updateInterval) {\n        analyser.getFloatFrequencyData(dataArray)\n\n        // Process directly without creating intermediate arrays\n        const chunks = new Array(opts.bands!)\n\n        for (let i = 0; i < opts.bands!; i++) {\n          let sum = 0\n          let count = 0\n          const startIdx = sliceStart + i * chunkSize\n          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)\n\n          for (let j = startIdx; j < endIdx; j++) {\n            sum += normalizeDb(dataArray[j])\n            count++\n          }\n\n          chunks[i] = count > 0 ? sum / count : 0\n        }\n\n        // Only update state if bands changed significantly\n        let hasChanged = false\n        for (let i = 0; i < chunks.length; i++) {\n          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {\n            hasChanged = true\n            break\n          }\n        }\n\n        if (hasChanged) {\n          bandsRef.current = chunks\n          setFrequencyBands(chunks)\n        }\n\n        lastUpdate = timestamp\n      }\n\n      frameId.current = requestAnimationFrame(updateVolume)\n    }\n\n    frameId.current = requestAnimationFrame(updateVolume)\n\n    return () => {\n      cleanup()\n      if (frameId.current) {\n        cancelAnimationFrame(frameId.current)\n      }\n    }\n  }, [mediaStream, opts])\n\n  return frequencyBands\n}\n\ntype AnimationState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n  | undefined\n\nexport const useBarAnimator = (\n  state: AnimationState,\n  columns: number,\n  interval: number\n): number[] => {\n  const indexRef = useRef(0)\n  const [currentFrame, setCurrentFrame] = useState<number[]>([])\n  const animationFrameId = useRef<number | null>(null)\n\n  // Memoize sequence generation\n  const sequence = useMemo(() => {\n    if (state === \"thinking\" || state === \"listening\") {\n      return generateListeningSequenceBar(columns)\n    } else if (state === \"connecting\" || state === \"initializing\") {\n      return generateConnectingSequenceBar(columns)\n    } else if (state === undefined || state === \"speaking\") {\n      return [new Array(columns).fill(0).map((_, idx) => idx)]\n    } else {\n      return [[]]\n    }\n  }, [state, columns])\n\n  useEffect(() => {\n    indexRef.current = 0\n    setTimeout(() => {\n      setCurrentFrame(sequence[0] || [])\n    }, 0)\n  }, [sequence])\n\n  useEffect(() => {\n    let startTime = performance.now()\n\n    const animate = (time: DOMHighResTimeStamp) => {\n      const timeElapsed = time - startTime\n\n      if (timeElapsed >= interval) {\n        indexRef.current = (indexRef.current + 1) % sequence.length\n        setCurrentFrame(sequence[indexRef.current] || [])\n        startTime = time\n      }\n\n      animationFrameId.current = requestAnimationFrame(animate)\n    }\n\n    animationFrameId.current = requestAnimationFrame(animate)\n\n    return () => {\n      if (animationFrameId.current !== null) {\n        cancelAnimationFrame(animationFrameId.current)\n      }\n    }\n  }, [interval, sequence])\n\n  return currentFrame\n}\n\n// Memoize sequence generators\nconst generateConnectingSequenceBar = (columns: number): number[][] => {\n  const seq = []\n  for (let x = 0; x < columns; x++) {\n    seq.push([x, columns - 1 - x])\n  }\n  return seq\n}\n\nconst generateListeningSequenceBar = (columns: number): number[][] => {\n  const center = Math.floor(columns / 2)\n  const noIndex = -1\n  return [[center], [noIndex]]\n}\n\nexport type AgentState =\n  | \"connecting\"\n  | \"initializing\"\n  | \"listening\"\n  | \"speaking\"\n  | \"thinking\"\n\nexport interface BarVisualizerProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Voice assistant state */\n  state?: AgentState\n  /** Number of bars to display */\n  barCount?: number\n  /** Audio source */\n  mediaStream?: MediaStream | null\n  /** Min/max height as percentage */\n  minHeight?: number\n  maxHeight?: number\n  /** Enable demo mode with fake audio data */\n  demo?: boolean\n  /** Align bars from center instead of bottom */\n  centerAlign?: boolean\n}\n\nconst BarVisualizerComponent = React.forwardRef<\n  HTMLDivElement,\n  BarVisualizerProps\n>(\n  (\n    {\n      state,\n      barCount = 15,\n      mediaStream,\n      minHeight = 20,\n      maxHeight = 100,\n      demo = false,\n      centerAlign = false,\n      className,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    // Audio processing\n    const realVolumeBands = useMultibandVolume(mediaStream, {\n      bands: barCount,\n      loPass: 100,\n      hiPass: 200,\n    })\n\n    // Generate fake volume data for demo mode using refs to avoid state updates\n    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))\n    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>\n      new Array(barCount).fill(0.2)\n    )\n    const fakeAnimationRef = useRef<number | undefined>(undefined)\n\n    // Animate fake volume bands for speaking and listening states\n    useEffect(() => {\n      if (!demo) return\n\n      if (state !== \"speaking\" && state !== \"listening\") {\n        const bands = new Array(barCount).fill(0.2)\n        fakeVolumeBandsRef.current = bands\n        setTimeout(() => {\n          setFakeVolumeBands(bands)\n        }, 0)\n        return\n      }\n\n      let lastUpdate = 0\n      const updateInterval = 50\n      const startTime = Date.now() / 1000\n\n      const updateFakeVolume = (timestamp: number) => {\n        if (timestamp - lastUpdate >= updateInterval) {\n          const time = Date.now() / 1000 - startTime\n          const newBands = new Array(barCount)\n\n          for (let i = 0; i < barCount; i++) {\n            const waveOffset = i * 0.5\n            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5\n            const randomNoise = Math.random() * 0.2\n            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))\n          }\n\n          // Only update if values changed significantly\n          let hasChanged = false\n          for (let i = 0; i < barCount; i++) {\n            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {\n              hasChanged = true\n              break\n            }\n          }\n\n          if (hasChanged) {\n            fakeVolumeBandsRef.current = newBands\n            setFakeVolumeBands(newBands)\n          }\n\n          lastUpdate = timestamp\n        }\n\n        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n      }\n\n      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)\n\n      return () => {\n        if (fakeAnimationRef.current) {\n          cancelAnimationFrame(fakeAnimationRef.current)\n        }\n      }\n    }, [demo, state, barCount])\n\n    // Use fake or real volume data based on demo mode\n    const volumeBands = useMemo(\n      () => (demo ? fakeVolumeBands : realVolumeBands),\n      [demo, fakeVolumeBands, realVolumeBands]\n    )\n\n    // Animation sequencing\n    const highlightedIndices = useBarAnimator(\n      state,\n      barCount,\n      state === \"connecting\"\n        ? 2000 / barCount\n        : state === \"thinking\"\n          ? 150\n          : state === \"listening\"\n            ? 500\n            : 1000\n    )\n\n    return (\n      <div\n        ref={ref}\n        data-state={state}\n        className={cn(\n          \"relative flex justify-center gap-1.5\",\n          centerAlign ? \"items-center\" : \"items-end\",\n          \"bg-muted h-32 w-full overflow-hidden rounded-lg p-4\",\n          className\n        )}\n        style={{\n          ...style,\n        }}\n        {...props}\n      >\n        {volumeBands.map((volume, index) => {\n          const heightPct = Math.min(\n            maxHeight,\n            Math.max(minHeight, volume * 100 + 5)\n          )\n          const isHighlighted = highlightedIndices?.includes(index) ?? false\n\n          return (\n            <Bar\n              key={index}\n              heightPct={heightPct}\n              isHighlighted={isHighlighted}\n              state={state}\n            />\n          )\n        })}\n      </div>\n    )\n  }\n)\n\n// Memoized Bar component to prevent unnecessary re-renders\nconst Bar = React.memo<{\n  heightPct: number\n  isHighlighted: boolean\n  state?: AgentState\n}>(({ heightPct, isHighlighted, state }) => (\n  <div\n    data-highlighted={isHighlighted}\n    className={cn(\n      \"max-w-[12px] min-w-[8px] flex-1 transition-all duration-150\",\n      \"rounded-full\",\n      \"bg-border data-[highlighted=true]:bg-primary\",\n      state === \"speaking\" && \"bg-primary\",\n      state === \"thinking\" && isHighlighted && \"animate-pulse\"\n    )}\n    style={{\n      height: `${heightPct}%`,\n      animationDuration: state === \"thinking\" ? \"300ms\" : undefined,\n    }}\n  />\n))\n\nBar.displayName = \"Bar\"\n\n// Wrap the main component with React.memo for prop comparison optimization\nconst BarVisualizer = React.memo(\n  BarVisualizerComponent,\n  (prevProps, nextProps) => {\n    return (\n      prevProps.state === nextProps.state &&\n      prevProps.barCount === nextProps.barCount &&\n      prevProps.mediaStream === nextProps.mediaStream &&\n      prevProps.minHeight === nextProps.minHeight &&\n      prevProps.maxHeight === nextProps.maxHeight &&\n      prevProps.demo === nextProps.demo &&\n      prevProps.centerAlign === nextProps.centerAlign &&\n      prevProps.className === nextProps.className &&\n      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)\n    )\n  }\n)\n\nBarVisualizerComponent.displayName = \"BarVisualizerComponent\"\nBarVisualizer.displayName = \"BarVisualizer\"\n\nexport type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {\n  active?: boolean\n  processing?: boolean\n  deviceId?: string\n  barWidth?: number\n  barHeight?: number\n  barGap?: number\n  barRadius?: number\n  barColor?: string\n  fadeEdges?: boolean\n  fadeWidth?: number\n  height?: string | number\n  sensitivity?: number\n  smoothingTimeConstant?: number\n  fftSize?: number\n  historySize?: number\n  updateRate?: number\n  mode?: \"scrolling\" | \"static\"\n  onError?: (error: Error) => void\n  onStreamReady?: (stream: MediaStream) => void\n  onStreamEnd?: () => void\n}\nexport const LiveWaveform = ({\n  active = false,\n  processing = false,\n  deviceId,\n  barWidth = 3,\n  barGap = 1,\n  barRadius = 1.5,\n  barColor,\n  fadeEdges = true,\n  fadeWidth = 24,\n  barHeight: baseBarHeight = 4,\n  height = 64,\n  sensitivity = 1,\n  smoothingTimeConstant = 0.8,\n  fftSize = 256,\n  historySize = 60,\n  updateRate = 30,\n  mode = \"static\",\n  onError,\n  onStreamReady,\n  onStreamEnd,\n  className,\n  ...props\n}: LiveWaveformProps) => {\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const containerRef = useRef<HTMLDivElement>(null)\n  const historyRef = useRef<number[]>([])\n  const analyserRef = useRef<AnalyserNode | null>(null)\n  const audioContextRef = useRef<AudioContext | null>(null)\n  const streamRef = useRef<MediaStream | null>(null)\n  const animationRef = useRef<number>(0)\n  const lastUpdateRef = useRef<number>(0)\n  const processingAnimationRef = useRef<number | null>(null)\n  const lastActiveDataRef = useRef<number[]>([])\n  const transitionProgressRef = useRef(0)\n  const staticBarsRef = useRef<number[]>([])\n  const needsRedrawRef = useRef(true)\n  const gradientCacheRef = useRef<CanvasGradient | null>(null)\n  const lastWidthRef = useRef(0)\n  const heightStyle = typeof height === \"number\" ? `${height}px` : height\n  // Handle canvas resizing\n  useEffect(() => {\n    const canvas = canvasRef.current\n    const container = containerRef.current\n    if (!canvas || !container) return\n    const resizeObserver = new ResizeObserver(() => {\n      const rect = container.getBoundingClientRect()\n      const dpr = window.devicePixelRatio || 1\n      canvas.width = rect.width * dpr\n      canvas.height = rect.height * dpr\n      canvas.style.width = `${rect.width}px`\n      canvas.style.height = `${rect.height}px`\n      const ctx = canvas.getContext(\"2d\")\n      if (ctx) {\n        ctx.scale(dpr, dpr)\n      }\n      gradientCacheRef.current = null\n      lastWidthRef.current = rect.width\n      needsRedrawRef.current = true\n    })\n    resizeObserver.observe(container)\n    return () => resizeObserver.disconnect()\n  }, [])\n  useEffect(() => {\n    if (processing && !active) {\n      let time = 0\n      transitionProgressRef.current = 0\n      const animateProcessing = () => {\n        time += 0.03\n        transitionProgressRef.current = Math.min(\n          1,\n          transitionProgressRef.current + 0.02\n        )\n        const processingData = []\n        const barCount = Math.floor(\n          (containerRef.current?.getBoundingClientRect().width || 200) /\n            (barWidth + barGap)\n        )\n        if (mode === \"static\") {\n          const halfCount = Math.floor(barCount / 2)\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - halfCount) / halfCount\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25\n            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2\n            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.min(\n                i,\n                lastActiveDataRef.current.length - 1\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        } else {\n          for (let i = 0; i < barCount; i++) {\n            const normalizedPosition = (i - barCount / 2) / (barCount / 2)\n            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4\n            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25\n            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2\n            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15\n            const combinedWave = wave1 + wave2 + wave3\n            const processingValue = (0.2 + combinedWave) * centerWeight\n            let finalValue = processingValue\n            if (\n              lastActiveDataRef.current.length > 0 &&\n              transitionProgressRef.current < 1\n            ) {\n              const lastDataIndex = Math.floor(\n                (i / barCount) * lastActiveDataRef.current.length\n              )\n              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0\n              finalValue =\n                lastValue * (1 - transitionProgressRef.current) +\n                processingValue * transitionProgressRef.current\n            }\n            processingData.push(Math.max(0.05, Math.min(1, finalValue)))\n          }\n        }\n        if (mode === \"static\") {\n          staticBarsRef.current = processingData\n        } else {\n          historyRef.current = processingData\n        }\n        needsRedrawRef.current = true\n        processingAnimationRef.current =\n          requestAnimationFrame(animateProcessing)\n      }\n      animateProcessing()\n      return () => {\n        if (processingAnimationRef.current) {\n          cancelAnimationFrame(processingAnimationRef.current)\n        }\n      }\n    } else if (!active && !processing) {\n      const hasData =\n        mode === \"static\"\n          ? staticBarsRef.current.length > 0\n          : historyRef.current.length > 0\n      if (hasData) {\n        let fadeProgress = 0\n        const fadeToIdle = () => {\n          fadeProgress += 0.03\n          if (fadeProgress < 1) {\n            if (mode === \"static\") {\n              staticBarsRef.current = staticBarsRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            } else {\n              historyRef.current = historyRef.current.map(\n                (value) => value * (1 - fadeProgress)\n              )\n            }\n            needsRedrawRef.current = true\n            requestAnimationFrame(fadeToIdle)\n          } else {\n            if (mode === \"static\") {\n              staticBarsRef.current = []\n            } else {\n              historyRef.current = []\n            }\n          }\n        }\n        fadeToIdle()\n      }\n    }\n  }, [processing, active, barWidth, barGap, mode])\n  // Handle microphone setup and teardown\n  useEffect(() => {\n    if (!active) {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n      return\n    }\n    const setupMicrophone = async () => {\n      try {\n        const stream = await navigator.mediaDevices.getUserMedia({\n          audio: deviceId\n            ? {\n                deviceId: { exact: deviceId },\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              }\n            : {\n                echoCancellation: true,\n                noiseSuppression: true,\n                autoGainControl: true,\n              },\n        })\n        streamRef.current = stream\n        onStreamReady?.(stream)\n        const AudioContextConstructor =\n          window.AudioContext ||\n          (window as unknown as { webkitAudioContext: typeof AudioContext })\n            .webkitAudioContext\n        const audioContext = new AudioContextConstructor()\n        const analyser = audioContext.createAnalyser()\n        analyser.fftSize = fftSize\n        analyser.smoothingTimeConstant = smoothingTimeConstant\n        const source = audioContext.createMediaStreamSource(stream)\n        source.connect(analyser)\n        audioContextRef.current = audioContext\n        analyserRef.current = analyser\n        // Clear history when starting\n        historyRef.current = []\n      } catch (error) {\n        onError?.(error as Error)\n      }\n    }\n    setupMicrophone()\n    return () => {\n      if (streamRef.current) {\n        streamRef.current.getTracks().forEach((track) => track.stop())\n        streamRef.current = null\n        onStreamEnd?.()\n      }\n      if (\n        audioContextRef.current &&\n        audioContextRef.current.state !== \"closed\"\n      ) {\n        audioContextRef.current.close()\n        audioContextRef.current = null\n      }\n      if (animationRef.current) {\n        cancelAnimationFrame(animationRef.current)\n        animationRef.current = 0\n      }\n    }\n  }, [\n    active,\n    deviceId,\n    fftSize,\n    smoothingTimeConstant,\n    onError,\n    onStreamReady,\n    onStreamEnd,\n  ])\n  // Animation loop\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n    const ctx = canvas.getContext(\"2d\")\n    if (!ctx) return\n    let rafId: number\n    const animate = (currentTime: number) => {\n      // Render waveform\n      const rect = canvas.getBoundingClientRect()\n      // Update audio data if active\n      if (active && currentTime - lastUpdateRef.current > updateRate) {\n        lastUpdateRef.current = currentTime\n        if (analyserRef.current) {\n          const dataArray = new Uint8Array(\n            analyserRef.current.frequencyBinCount\n          )\n          analyserRef.current.getByteFrequencyData(dataArray)\n          if (mode === \"static\") {\n            // For static mode, update bars in place\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            const barCount = Math.floor(rect.width / (barWidth + barGap))\n            const halfCount = Math.floor(barCount / 2)\n            const newBars: number[] = []\n            // Mirror the data for symmetric display\n            for (let i = halfCount - 1; i >= 0; i--) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            for (let i = 0; i < halfCount; i++) {\n              const dataIndex = Math.floor(\n                (i / halfCount) * relevantData.length\n              )\n              const value = Math.min(\n                1,\n                (relevantData[dataIndex] / 255) * sensitivity\n              )\n              newBars.push(Math.max(0.05, value))\n            }\n            staticBarsRef.current = newBars\n            lastActiveDataRef.current = newBars\n          } else {\n            // Scrolling mode - original behavior\n            let sum = 0\n            const startFreq = Math.floor(dataArray.length * 0.05)\n            const endFreq = Math.floor(dataArray.length * 0.4)\n            const relevantData = dataArray.slice(startFreq, endFreq)\n            for (let i = 0; i < relevantData.length; i++) {\n              sum += relevantData[i]\n            }\n            const average = (sum / relevantData.length / 255) * sensitivity\n            // Add to history\n            historyRef.current.push(Math.min(1, Math.max(0.05, average)))\n            lastActiveDataRef.current = [...historyRef.current]\n            // Maintain history size\n            if (historyRef.current.length > historySize) {\n              historyRef.current.shift()\n            }\n          }\n          needsRedrawRef.current = true\n        }\n      }\n      // Only redraw if needed\n      if (!needsRedrawRef.current && !active) {\n        rafId = requestAnimationFrame(animate)\n        return\n      }\n      needsRedrawRef.current = active\n      ctx.clearRect(0, 0, rect.width, rect.height)\n      const computedBarColor =\n        barColor ||\n        (() => {\n          const style = getComputedStyle(canvas)\n          // Try to get the computed color value directly\n          const color = style.color\n          return color || \"#000\"\n        })()\n      const step = barWidth + barGap\n      const barCount = Math.floor(rect.width / step)\n      const centerY = rect.height / 2\n      // Draw bars based on mode\n      if (mode === \"static\") {\n        // Static mode - bars in fixed positions\n        const dataToRender = processing\n          ? staticBarsRef.current\n          : active\n            ? staticBarsRef.current\n            : staticBarsRef.current.length > 0\n              ? staticBarsRef.current\n              : []\n        for (let i = 0; i < barCount && i < dataToRender.length; i++) {\n          const value = dataToRender[i] || 0.1\n          const x = i * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      } else {\n        // Scrolling mode - original behavior\n        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {\n          const dataIndex = historyRef.current.length - 1 - i\n          const value = historyRef.current[dataIndex] || 0.1\n          const x = rect.width - (i + 1) * step\n          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)\n          const y = centerY - barHeight / 2\n          ctx.fillStyle = computedBarColor\n          ctx.globalAlpha = 0.4 + value * 0.6\n          if (barRadius > 0) {\n            ctx.beginPath()\n            ctx.roundRect(x, y, barWidth, barHeight, barRadius)\n            ctx.fill()\n          } else {\n            ctx.fillRect(x, y, barWidth, barHeight)\n          }\n        }\n      }\n      // Apply edge fading\n      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {\n        // Cache gradient if width hasn't changed\n        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {\n          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)\n          const fadePercent = Math.min(0.3, fadeWidth / rect.width)\n          // destination-out: removes destination where source alpha is high\n          // We want: fade edges out, keep center solid\n          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep\n          gradient.addColorStop(0, \"rgba(255,255,255,1)\")\n          gradient.addColorStop(fadePercent, \"rgba(255,255,255,0)\")\n          // Center stays transparent = keep everything\n          gradient.addColorStop(1 - fadePercent, \"rgba(255,255,255,0)\")\n          // Right edge: fade from transparent (0) = keep to opaque (1) = remove\n          gradient.addColorStop(1, \"rgba(255,255,255,1)\")\n          gradientCacheRef.current = gradient\n          lastWidthRef.current = rect.width\n        }\n        ctx.globalCompositeOperation = \"destination-out\"\n        ctx.fillStyle = gradientCacheRef.current\n        ctx.fillRect(0, 0, rect.width, rect.height)\n        ctx.globalCompositeOperation = \"source-over\"\n      }\n      ctx.globalAlpha = 1\n      rafId = requestAnimationFrame(animate)\n    }\n    rafId = requestAnimationFrame(animate)\n    return () => {\n      if (rafId) {\n        cancelAnimationFrame(rafId)\n      }\n    }\n  }, [\n    active,\n    processing,\n    sensitivity,\n    updateRate,\n    historySize,\n    barWidth,\n    baseBarHeight,\n    barGap,\n    barRadius,\n    barColor,\n    fadeEdges,\n    fadeWidth,\n    mode,\n  ])\n  return (\n    <div\n      className={cn(\"relative h-full w-full\", className)}\n      ref={containerRef}\n      style={{ height: heightStyle }}\n      aria-label={\n        active\n          ? \"Live audio waveform\"\n          : processing\n            ? \"Processing audio\"\n            : \"Audio waveform idle\"\n      }\n      role=\"img\"\n      {...props}\n    >\n      {!active && !processing && (\n        <div className=\"border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted\" />\n      )}\n      <canvas\n        className=\"block h-full w-full\"\n        ref={canvasRef}\n        aria-hidden=\"true\"\n      />\n    </div>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/empty.json b/apps/v4/public/r/styles/radix-vega/empty.json
index 84c3abaf93..40ca9e155b 100644
--- a/apps/v4/public/r/styles/radix-vega/empty.json
+++ b/apps/v4/public/r/styles/radix-vega/empty.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/empty.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Empty({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-lg border-dashed p-12 text-center text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/example.json b/apps/v4/public/r/styles/radix-vega/example.json
index adf6d6ef20..b485ae8a35 100644
--- a/apps/v4/public/r/styles/radix-vega/example.json
+++ b/apps/v4/public/r/styles/radix-vega/example.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "path": "registry/radix-vega/components/example.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"bg-background w-full\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"text-muted-foreground px-1.5 py-2 text-xs font-medium\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ExampleWrapper({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className=\"w-full bg-muted dark:bg-background\">\n      <div\n        data-slot=\"example-wrapper\"\n        className={cn(\n          \"mx-auto grid min-h-screen w-full max-w-5xl min-w-0 content-center items-start gap-8 p-4 pt-2 sm:gap-12 sm:p-6 md:grid-cols-2 md:gap-8 lg:p-12 2xl:max-w-6xl\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction Example({\n  title,\n  children,\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  title?: string\n  containerClassName?: string\n}) {\n  return (\n    <div\n      data-slot=\"example\"\n      className={cn(\n        \"mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none\",\n        containerClassName\n      )}\n      {...props}\n    >\n      {title && (\n        <div className=\"px-1.5 py-2 text-xs font-medium text-muted-foreground\">\n          {title}\n        </div>\n      )}\n      <div\n        data-slot=\"example-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { ExampleWrapper, Example }\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/field.json b/apps/v4/public/r/styles/radix-vega/field.json
index 6a07b4aed4..184fdf0ab0 100644
--- a/apps/v4/public/r/styles/radix-vega/field.json
+++ b/apps/v4/public/r/styles/radix-vega/field.json
@@ -8,9 +8,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\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=\"text-muted-foreground bg-background relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/field",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/font-dm-sans.json b/apps/v4/public/r/styles/radix-vega/font-dm-sans.json
index ff19524e21..a2e5cd9f9a 100644
--- a/apps/v4/public/r/styles/radix-vega/font-dm-sans.json
+++ b/apps/v4/public/r/styles/radix-vega/font-dm-sans.json
@@ -4,7 +4,7 @@
   "title": "DM Sans",
   "type": "registry:font",
   "font": {
-    "family": "'DM Sans', sans-serif",
+    "family": "'DM Sans Variable', sans-serif",
     "provider": "google",
     "import": "DM_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-vega/font-geist-sans.json b/apps/v4/public/r/styles/radix-vega/font-geist-sans.json
deleted file mode 100644
index a60a347fd3..0000000000
--- a/apps/v4/public/r/styles/radix-vega/font-geist-sans.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "font-geist-sans",
-  "title": "Geist Sans",
-  "type": "registry:font",
-  "font": {
-    "family": "'Geist Variable', sans-serif",
-    "provider": "google",
-    "import": "Geist",
-    "variable": "--font-sans",
-    "subsets": [
-      "latin"
-    ]
-  }
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/font-jetbrains-mono.json b/apps/v4/public/r/styles/radix-vega/font-jetbrains-mono.json
index ddca970d72..6f4779e714 100644
--- a/apps/v4/public/r/styles/radix-vega/font-jetbrains-mono.json
+++ b/apps/v4/public/r/styles/radix-vega/font-jetbrains-mono.json
@@ -7,7 +7,7 @@
     "family": "'JetBrains Mono Variable', monospace",
     "provider": "google",
     "import": "JetBrains_Mono",
-    "variable": "--font-sans",
+    "variable": "--font-mono",
     "subsets": [
       "latin"
     ]
diff --git a/apps/v4/public/r/styles/radix-vega/font-lora.json b/apps/v4/public/r/styles/radix-vega/font-lora.json
new file mode 100644
index 0000000000..cacd01a3f0
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/font-lora.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-lora",
+  "title": "Lora",
+  "type": "registry:font",
+  "font": {
+    "family": "'Lora Variable', serif",
+    "provider": "google",
+    "import": "Lora",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/font-merriweather.json b/apps/v4/public/r/styles/radix-vega/font-merriweather.json
new file mode 100644
index 0000000000..37ce04e66f
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/font-merriweather.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-merriweather",
+  "title": "Merriweather",
+  "type": "registry:font",
+  "font": {
+    "family": "'Merriweather Variable', serif",
+    "provider": "google",
+    "import": "Merriweather",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/font-noto-serif.json b/apps/v4/public/r/styles/radix-vega/font-noto-serif.json
new file mode 100644
index 0000000000..79944372e8
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/font-noto-serif.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-noto-serif",
+  "title": "Noto Serif",
+  "type": "registry:font",
+  "font": {
+    "family": "'Noto Serif Variable', serif",
+    "provider": "google",
+    "import": "Noto_Serif",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/font-outfit.json b/apps/v4/public/r/styles/radix-vega/font-outfit.json
index f8d2a29416..5890ff6c7e 100644
--- a/apps/v4/public/r/styles/radix-vega/font-outfit.json
+++ b/apps/v4/public/r/styles/radix-vega/font-outfit.json
@@ -4,7 +4,7 @@
   "title": "Outfit",
   "type": "registry:font",
   "font": {
-    "family": "'Outfit', sans-serif",
+    "family": "'Outfit Variable', sans-serif",
     "provider": "google",
     "import": "Outfit",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-vega/font-playfair-display.json b/apps/v4/public/r/styles/radix-vega/font-playfair-display.json
new file mode 100644
index 0000000000..de3c908848
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/font-playfair-display.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-playfair-display",
+  "title": "Playfair Display",
+  "type": "registry:font",
+  "font": {
+    "family": "'Playfair Display Variable', serif",
+    "provider": "google",
+    "import": "Playfair_Display",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/font-public-sans.json b/apps/v4/public/r/styles/radix-vega/font-public-sans.json
index 439a927424..d3c1c09d2b 100644
--- a/apps/v4/public/r/styles/radix-vega/font-public-sans.json
+++ b/apps/v4/public/r/styles/radix-vega/font-public-sans.json
@@ -4,7 +4,7 @@
   "title": "Public Sans",
   "type": "registry:font",
   "font": {
-    "family": "'Public Sans', sans-serif",
+    "family": "'Public Sans Variable', sans-serif",
     "provider": "google",
     "import": "Public_Sans",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-vega/font-raleway.json b/apps/v4/public/r/styles/radix-vega/font-raleway.json
index 576f58c48c..eed74e258a 100644
--- a/apps/v4/public/r/styles/radix-vega/font-raleway.json
+++ b/apps/v4/public/r/styles/radix-vega/font-raleway.json
@@ -4,7 +4,7 @@
   "title": "Raleway",
   "type": "registry:font",
   "font": {
-    "family": "'Raleway', sans-serif",
+    "family": "'Raleway Variable', sans-serif",
     "provider": "google",
     "import": "Raleway",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-vega/font-roboto-slab.json b/apps/v4/public/r/styles/radix-vega/font-roboto-slab.json
new file mode 100644
index 0000000000..ba2e8983bf
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/font-roboto-slab.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "font-roboto-slab",
+  "title": "Roboto Slab",
+  "type": "registry:font",
+  "font": {
+    "family": "'Roboto Slab Variable', serif",
+    "provider": "google",
+    "import": "Roboto_Slab",
+    "variable": "--font-serif",
+    "subsets": [
+      "latin"
+    ]
+  }
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/font-roboto.json b/apps/v4/public/r/styles/radix-vega/font-roboto.json
index d1e910f150..615362a4cf 100644
--- a/apps/v4/public/r/styles/radix-vega/font-roboto.json
+++ b/apps/v4/public/r/styles/radix-vega/font-roboto.json
@@ -4,7 +4,7 @@
   "title": "Roboto",
   "type": "registry:font",
   "font": {
-    "family": "'Roboto', sans-serif",
+    "family": "'Roboto Variable', sans-serif",
     "provider": "google",
     "import": "Roboto",
     "variable": "--font-sans",
diff --git a/apps/v4/public/r/styles/radix-vega/github.json b/apps/v4/public/r/styles/radix-vega/github.json
deleted file mode 100644
index 70e6239131..0000000000
--- a/apps/v4/public/r/styles/radix-vega/github.json
+++ /dev/null
@@ -1,38 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "github",
-  "title": "GitHub",
-  "registryDependencies": [
-    "avatar",
-    "badge",
-    "button",
-    "card",
-    "checkbox",
-    "combobox",
-    "command",
-    "drawer",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input",
-    "input-group",
-    "item",
-    "kbd",
-    "native-select",
-    "popover",
-    "separator",
-    "spinner",
-    "tabs",
-    "textarea",
-    "tooltip",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-vega/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/bases/base/ui/combobox\"\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 { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/radix-vega/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/radix-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-vega/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\nimport { NativeSelect } from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport { Spinner } from \"@/registry/radix-vega/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\n\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon-sm\">\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger asChild>\n                        <DropdownMenuTrigger asChild>\n                          <Button variant=\"ghost\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"MoreHorizontalIcon\"\n                              tabler=\"IconDots\"\n                              hugeicons=\"MoreHorizontalCircle01Icon\"\n                              phosphor=\"DotsThreeOutlineIcon\"\n                              remixicon=\"RiMoreLine\"\n                            />\n                          </Button>\n                        </DropdownMenuTrigger>\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent\n                      align=\"end\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                      className=\"w-56\"\n                    >\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"PlusIcon\"\n                          tabler=\"IconPlus\"\n                          hugeicons=\"PlusSignIcon\"\n                          phosphor=\"PlusIcon\"\n                          remixicon=\"RiAddLine\"\n                        />\n                        New with options...\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ContainerIcon\"\n                          tabler=\"IconBox\"\n                          hugeicons=\"CubeIcon\"\n                          phosphor=\"CubeIcon\"\n                          remixicon=\"RiBox1Line\"\n                        />\n                        Configure dev container\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ZapIcon\"\n                          tabler=\"IconBolt\"\n                          hugeicons=\"ZapIcon\"\n                          phosphor=\"LightningIcon\"\n                          remixicon=\"RiFlashlightLine\"\n                        />\n                        Set up prebuilds\n                      </DropdownMenuItem>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ServerIcon\"\n                          tabler=\"IconServer\"\n                          hugeicons=\"ServerStackIcon\"\n                          phosphor=\"HardDrivesIcon\"\n                          remixicon=\"RiHardDriveLine\"\n                        />\n                        Manage codespaces\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"ShareIcon\"\n                          tabler=\"IconShare2\"\n                          hugeicons=\"Share03Icon\"\n                          phosphor=\"ShareIcon\"\n                          remixicon=\"RiShareLine\"\n                        />\n                        Share deep link\n                      </DropdownMenuItem>\n                      <DropdownMenuItem>\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                        What are codespaces?\n                      </DropdownMenuItem>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <Button variant=\"ghost\" size=\"icon\">\n                        <IconPlaceholder\n                          lucide=\"InfoIcon\"\n                          tabler=\"IconInfoCircle\"\n                          hugeicons=\"AlertCircleIcon\"\n                          phosphor=\"InfoIcon\"\n                          remixicon=\"RiInformationLine\"\n                        />\n                      </Button>\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\">\n              Add File\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              Create new file\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UploadIcon\"\n                hugeicons=\"Upload01Icon\"\n                tabler=\"IconUpload\"\n                phosphor=\"UploadIcon\"\n                remixicon=\"RiUploadLine\"\n              />\n              Upload files\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <PopoverTrigger asChild>\n                <Button variant=\"outline\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"CloudCogIcon\"\n                    hugeicons=\"AiCloud01Icon\"\n                    tabler=\"IconCloudCog\"\n                    phosphor=\"CloudArrowUpIcon\"\n                    remixicon=\"RiUploadCloudLine\"\n                  />\n                </Button>\n              </PopoverTrigger>\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent\n            className=\"w-80\"\n            onCloseAutoFocus={(e) => e.preventDefault()}\n          >\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"GitBranchIcon\"\n                              hugeicons=\"GitBranchIcon\"\n                              tabler=\"IconGitBranch\"\n                              phosphor=\"GitBranchIcon\"\n                              remixicon=\"RiGitBranchLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent\n                      side=\"bottom\"\n                      align=\"start\"\n                      className=\"p-1\"\n                      onCloseAutoFocus={(e) => e.preventDefault()}\n                    >\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger asChild>\n                        <TooltipTrigger asChild>\n                          <InputGroupButton variant=\"outline\" size=\"icon-sm\">\n                            <IconPlaceholder\n                              lucide=\"BotIcon\"\n                              hugeicons=\"RoboticIcon\"\n                              tabler=\"IconRobot\"\n                              phosphor=\"RobotIcon\"\n                              remixicon=\"RiRobotLine\"\n                            />\n                          </InputGroupButton>\n                        </TooltipTrigger>\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"top\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger asChild>\n                      <InputGroupButton\n                        variant=\"ghost\"\n                        size=\"icon-sm\"\n                        className=\"ml-auto\"\n                      >\n                        <IconPlaceholder\n                          lucide=\"SendIcon\"\n                          hugeicons=\"SentIcon\"\n                          tabler=\"IconSend\"\n                          phosphor=\"PaperPlaneTiltIcon\"\n                          remixicon=\"RiSendPlaneLine\"\n                        />\n                      </InputGroupButton>\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\n\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"HomeIcon\"\n                        tabler=\"IconHome\"\n                        hugeicons=\"HomeIcon\"\n                        phosphor=\"HouseIcon\"\n                        remixicon=\"RiHomeLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Home</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"CircleIcon\"\n                        tabler=\"IconCircle\"\n                        hugeicons=\"CircleIcon\"\n                        phosphor=\"CircleIcon\"\n                        remixicon=\"RiCircleLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Issues</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"GitBranchIcon\"\n                        tabler=\"IconGitBranch\"\n                        hugeicons=\"GitBranchIcon\"\n                        phosphor=\"GitBranchIcon\"\n                        remixicon=\"RiGitBranchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Pull requests</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LayoutGridIcon\"\n                        tabler=\"IconLayoutGrid\"\n                        hugeicons=\"GridIcon\"\n                        phosphor=\"GridFourIcon\"\n                        remixicon=\"RiGridLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Projects</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Discussions</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ServerIcon\"\n                        tabler=\"IconServer\"\n                        hugeicons=\"ServerStackIcon\"\n                        phosphor=\"HardDrivesIcon\"\n                        remixicon=\"RiHardDriveLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Codespaces</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"BotIcon\"\n                        tabler=\"IconRobot\"\n                        hugeicons=\"RoboticIcon\"\n                        phosphor=\"RobotIcon\"\n                        remixicon=\"RiRobotLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Copilot</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SparklesIcon\"\n                        tabler=\"IconSparkles\"\n                        hugeicons=\"SparklesIcon\"\n                        phosphor=\"SparkleIcon\"\n                        remixicon=\"RiSparklingLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Spark</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <ItemSeparator />\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"SearchIcon\"\n                        tabler=\"IconSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Explore</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"ShoppingBagIcon\"\n                        tabler=\"IconShoppingBag\"\n                        hugeicons=\"ShoppingBasket01Icon\"\n                        phosphor=\"BagIcon\"\n                        remixicon=\"RiShoppingBagLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>Marketplace</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n                <Item asChild size=\"xs\">\n                  <a href=\"#\">\n                    <ItemMedia variant=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"LinkIcon\"\n                        tabler=\"IconLink\"\n                        hugeicons=\"LinkIcon\"\n                        phosphor=\"LinkIcon\"\n                        remixicon=\"RiLinksLine\"\n                      />\n                    </ItemMedia>\n                    <ItemContent>\n                      <ItemTitle>MCP registry</ItemTitle>\n                    </ItemContent>\n                  </a>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto rounded-full\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>SC</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuLabel className=\"p-0 font-normal\">\n              <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                <ItemMedia>\n                  <Avatar>\n                    <AvatarImage\n                      src=\"https://github.com/shadcn.png\"\n                      alt=\"shadcn\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                </ItemMedia>\n                <ItemContent className=\"gap-0\">\n                  <ItemTitle className=\"text-foreground text-sm\">\n                    shadcn\n                  </ItemTitle>\n                  <ItemDescription className=\"text-xs\">\n                    shadcn@example.com\n                  </ItemDescription>\n                </ItemContent>\n              </Item>\n            </DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\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=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\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              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\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          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\n\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\n\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <option value=\"m@shadcn.com\">m@shadcn.com</option>\n                  <option value=\"m@gmail.com\">m@gmail.com</option>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\n\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <Button variant=\"outline\" size=\"icon-xs\">\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/hover-card-example.json b/apps/v4/public/r/styles/radix-vega/hover-card-example.json
index 3cf0c2cde1..28fb6e4a06 100644
--- a/apps/v4/public/r/styles/radix-vega/hover-card-example.json
+++ b/apps/v4/public/r/styles/radix-vega/hover-card-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/hover-card-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-vega/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from \"@/registry/radix-vega/ui/hover-card\"\n\nexport default function HoverCardExample() {\n  return (\n    <ExampleWrapper>\n      <HoverCardSides />\n      <HoverCardInDialog />\n    </ExampleWrapper>\n  )\n}\n\nconst HOVER_CARD_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction HoverCardSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap items-center justify-center gap-4\">\n        {HOVER_CARD_SIDES.map((side) => (\n          <HoverCard key={side} openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent side={side} className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears on the {side} side of the trigger.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction HoverCardInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Hover Card Example</DialogTitle>\n            <DialogDescription>\n              Hover over the button below to see the hover card.\n            </DialogDescription>\n          </DialogHeader>\n          <HoverCard openDelay={100} closeDelay={100}>\n            <HoverCardTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Hover me\n              </Button>\n            </HoverCardTrigger>\n            <HoverCardContent className=\"w-64\">\n              <div className=\"flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1\">\n                <h4 className=\"font-medium\">Hover Card</h4>\n                <p>\n                  This hover card appears inside a dialog. Hover over the button\n                  to see it.\n                </p>\n              </div>\n            </HoverCardContent>\n          </HoverCard>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/hover-card.json b/apps/v4/public/r/styles/radix-vega/hover-card.json
index b915ce143b..e0857aece2 100644
--- a/apps/v4/public/r/styles/radix-vega/hover-card.json
+++ b/apps/v4/public/r/styles/radix-vega/hover-card.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/hover-card.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg p-4 text-sm shadow-md ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction HoverCard({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />\n}\n\nfunction HoverCardTrigger({\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return (\n    <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />\n  )\n}\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  )\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/index.json b/apps/v4/public/r/styles/radix-vega/index.json
new file mode 100644
index 0000000000..69f13cef90
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/index.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "index",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/input-group-example.json b/apps/v4/public/r/styles/radix-vega/input-group-example.json
index 973bb5e62d..82061fbb7c 100644
--- a/apps/v4/public/r/styles/radix-vega/input-group-example.json
+++ b/apps/v4/public/r/styles/radix-vega/input-group-example.json
@@ -20,7 +20,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/input-group-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-vega/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-vega/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport { Spinner } from \"@/registry/radix-vega/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  ButtonGroup,\n  ButtonGroupText,\n} from \"@/registry/radix-vega/ui/button-group\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport { Kbd, KbdGroup } from \"@/registry/radix-vega/ui/kbd\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport { Spinner } from \"@/registry/radix-vega/ui/spinner\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputGroupExample() {\n  const [country, setCountry] = useState(\"+1\")\n\n  return (\n    <ExampleWrapper className=\"min-w-0\">\n      <InputGroupBasic />\n      <InputGroupWithAddons />\n      <InputGroupWithButtons />\n      <InputGroupWithTooltip country={country} setCountry={setCountry} />\n      <InputGroupWithKbd />\n      <InputGroupInCard />\n      <InputGroupTextareaExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-default-01\">\n            Default (No Input Group)\n          </FieldLabel>\n          <Input placeholder=\"Placeholder\" id=\"input-default-01\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-group-02\">Input Group</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-group-02\" placeholder=\"Placeholder\" />\n          </InputGroup>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-disabled-03\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-disabled-03\"\n              placeholder=\"This field is disabled\"\n              disabled\n            />\n          </InputGroup>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"input-invalid-04\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-invalid-04\"\n              placeholder=\"This field is invalid\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithAddons() {\n  return (\n    <Example title=\"With Addons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-left-05\">\n            Addon (inline-start)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-left-05\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-right-07\">\n            Addon (inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-right-07\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"EyeOffIcon\"\n                tabler=\"IconEyeClosed\"\n                hugeicons=\"ViewOffIcon\"\n                phosphor=\"EyeSlashIcon\"\n                remixicon=\"RiEyeOffLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-09\">\n            Addon (inline-start and inline-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-09\" />\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"MicIcon\"\n                tabler=\"IconMicrophone\"\n                hugeicons=\"VoiceIcon\"\n                phosphor=\"MicrophoneIcon\"\n                remixicon=\"RiMicLine\"\n                className=\"text-muted-foreground\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-20\">Addon (block-start)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-20\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>First Name</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-addon-21\">Addon (block-end)</FieldLabel>\n          <InputGroup className=\"h-auto\">\n            <InputGroupInput id=\"input-addon-21\" />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>20/240 characters</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-icon-both-10\">Multiple Icons</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-icon-both-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"StarIcon\"\n                tabler=\"IconStar\"\n                hugeicons=\"StarIcon\"\n                phosphor=\"StarIcon\"\n                remixicon=\"RiStarLine\"\n              />\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Copied to clipboard\")}\n              >\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon>\n              <IconPlaceholder\n                lucide=\"RadioIcon\"\n                tabler=\"IconPlayerRecordFilled\"\n                hugeicons=\"RecordIcon\"\n                phosphor=\"RecordIcon\"\n                remixicon=\"RiRecordCircleLine\"\n                className=\"animate-pulse text-red-500\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-description-10\">Description</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-description-10\" />\n            <InputGroupAddon align=\"inline-end\">\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n          <InputGroup>\n            <InputGroupAddon>\n              <FieldLabel htmlFor=\"input-label-10\">Label</FieldLabel>\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-label-10\" />\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-optional-12\" aria-label=\"Optional\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupText>(optional)</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithButtons() {\n  return (\n    <Example title=\"With Buttons\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-button-13\">Button</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-13\" />\n            <InputGroupAddon>\n              <InputGroupButton>Default</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-14\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"outline\">Outline</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-15\" />\n            <InputGroupAddon>\n              <InputGroupButton variant=\"secondary\">Secondary</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-16\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\">Button</InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-17\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-button-18\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithTooltip({\n  country,\n  setCountry,\n}: {\n  country: string\n  setCountry: (value: string) => void\n}) {\n  return (\n    <Example title=\"With Tooltip, Dropdown, Popover\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-tooltip-20\">Tooltip</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-tooltip-20\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Tooltip>\n                <TooltipTrigger asChild>\n                  <InputGroupButton className=\"rounded-full\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </TooltipTrigger>\n                <TooltipContent>This is content in a tooltip.</TooltipContent>\n              </Tooltip>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-dropdown-21\">Dropdown</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-dropdown-21\" />\n            <InputGroupAddon>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <InputGroupButton className=\"text-muted-foreground tabular-nums\">\n                    {country}{\" \"}\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDownIcon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </InputGroupButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent\n                  align=\"start\"\n                  className=\"min-w-16\"\n                  sideOffset={10}\n                  alignOffset={-8}\n                >\n                  <DropdownMenuItem onClick={() => setCountry(\"+1\")}>\n                    +1\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+44\")}>\n                    +44\n                  </DropdownMenuItem>\n                  <DropdownMenuItem onClick={() => setCountry(\"+46\")}>\n                    +46\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-secure-19\">Popover</FieldLabel>\n          <InputGroup>\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton variant=\"secondary\" size=\"icon-xs\">\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent align=\"start\">\n                <PopoverHeader>\n                  <PopoverTitle>Your connection is not secure.</PopoverTitle>\n                  <PopoverDescription>\n                    You should not enter any sensitive information on this site.\n                  </PopoverDescription>\n                </PopoverHeader>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"pl-1 text-muted-foreground\">\n              https://\n            </InputGroupAddon>\n            <InputGroupInput id=\"input-secure-19\" />\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                size=\"icon-xs\"\n                onClick={() => toast(\"Added to favorites\")}\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"url\">Button Group</FieldLabel>\n          <ButtonGroup>\n            <ButtonGroupText>https://</ButtonGroupText>\n            <InputGroup>\n              <InputGroupInput id=\"url\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n            <ButtonGroupText>.com</ButtonGroupText>\n          </ButtonGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupWithKbd() {\n  return (\n    <Example title=\"With Kbd\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-kbd-22\">Input Group with Kbd</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-22\" />\n            <InputGroupAddon>\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput id=\"input-kbd-23\" />\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>⌘K</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-apps-24\"\n              placeholder=\"Search for Apps...\"\n            />\n            <InputGroupAddon align=\"inline-end\">Ask AI</InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <Kbd>Tab</Kbd>\n            </InputGroupAddon>\n          </InputGroup>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-search-type-25\"\n              placeholder=\"Type to search...\"\n            />\n            <InputGroupAddon align=\"inline-start\">\n              <IconPlaceholder\n                lucide=\"SparklesIcon\"\n                tabler=\"IconServerSpark\"\n                hugeicons=\"SparklesIcon\"\n                phosphor=\"SparkleIcon\"\n                remixicon=\"RiSparklingLine\"\n              />\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <KbdGroup>\n                <Kbd>Ctrl</Kbd>\n                <Kbd>C</Kbd>\n              </KbdGroup>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-username-26\">Username</FieldLabel>\n          <InputGroup>\n            <InputGroupInput id=\"input-username-26\" defaultValue=\"shadcn\" />\n            <InputGroupAddon align=\"inline-end\">\n              <div className=\"flex size-4 items-center justify-center rounded-full bg-green-500 dark:bg-green-800\">\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"size-3 text-white\"\n                />\n              </div>\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription className=\"text-green-700\">\n            This username is available.\n          </FieldDescription>\n        </Field>\n        <InputGroup>\n          <InputGroupInput\n            id=\"input-search-docs-27\"\n            placeholder=\"Search documentation...\"\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup data-disabled=\"true\">\n          <InputGroupInput\n            id=\"input-search-disabled-28\"\n            placeholder=\"Search documentation...\"\n            disabled\n          />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">Disabled</InputGroupAddon>\n        </InputGroup>\n        <FieldGroup className=\"grid grid-cols-2 gap-4\">\n          <Field>\n            <FieldLabel htmlFor=\"input-group-11\">First Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-11\" placeholder=\"First Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"input-group-12\">Last Name</FieldLabel>\n            <InputGroup>\n              <InputGroupInput id=\"input-group-12\" placeholder=\"Last Name\" />\n              <InputGroupAddon align=\"inline-end\">\n                <IconPlaceholder\n                  lucide=\"InfoIcon\"\n                  tabler=\"IconInfoCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"InfoIcon\"\n                  remixicon=\"RiInformationLine\"\n                />\n              </InputGroupAddon>\n            </InputGroup>\n          </Field>\n        </FieldGroup>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"input-group-29\">\n            Loading (&quot;data-disabled=&quot;true&quot;)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupInput\n              id=\"input-group-29\"\n              disabled\n              defaultValue=\"shadcn\"\n            />\n            <InputGroupAddon align=\"inline-end\">\n              <Spinner />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputGroupInCard() {\n  return (\n    <Example title=\"In Card\">\n      <Card className=\"w-full\">\n        <CardHeader>\n          <CardTitle>Card with Input Group</CardTitle>\n          <CardDescription>This is a card with an input group.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"email-input\">Email Address</FieldLabel>\n              <InputGroup>\n                <InputGroupInput\n                  id=\"email-input\"\n                  type=\"email\"\n                  placeholder=\"you@example.com\"\n                />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"MailIcon\"\n                    tabler=\"IconMail\"\n                    hugeicons=\"MailIcon\"\n                    phosphor=\"EnvelopeIcon\"\n                    remixicon=\"RiMailLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"website-input\">Website URL</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon>\n                  <InputGroupText>https://</InputGroupText>\n                </InputGroupAddon>\n                <InputGroupInput id=\"website-input\" placeholder=\"example.com\" />\n                <InputGroupAddon align=\"inline-end\">\n                  <IconPlaceholder\n                    lucide=\"ExternalLinkIcon\"\n                    tabler=\"IconExternalLink\"\n                    hugeicons=\"LinkSquare02Icon\"\n                    phosphor=\"ArrowSquareOutIcon\"\n                    remixicon=\"RiExternalLinkLine\"\n                  />\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"feedback-textarea\">\n                Feedback & Comments\n              </FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea\n                  id=\"feedback-textarea\"\n                  placeholder=\"Share your thoughts...\"\n                  className=\"min-h-[100px]\"\n                />\n                <InputGroupAddon align=\"block-end\">\n                  <InputGroupText>0/500 characters</InputGroupText>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </FieldGroup>\n        </CardContent>\n        <CardFooter className=\"justify-end gap-2\">\n          <Button variant=\"outline\">Cancel</Button>\n          <Button>Submit</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction InputGroupTextareaExamples() {\n  return (\n    <Example title=\"Textarea\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-12\">\n            Default Textarea (No Input Group)\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-header-footer-12\"\n            placeholder=\"Enter your text here...\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-13\">\n            Input Group\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-13\"\n              placeholder=\"Enter your text here...\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-14\">Invalid</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-14\"\n              placeholder=\"Enter your text here...\"\n              aria-invalid=\"true\"\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled=\"true\">\n          <FieldLabel htmlFor=\"textarea-header-footer-15\">Disabled</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-15\"\n              placeholder=\"Enter your text here...\"\n              disabled\n            />\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"prompt-31\">Addon (block-start)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea id=\"prompt-31\" />\n            <InputGroupAddon align=\"block-start\">\n              <InputGroupText>Ask, Search or Chat...</InputGroupText>\n              <IconPlaceholder\n                lucide=\"InfoIcon\"\n                tabler=\"IconInfoCircle\"\n                hugeicons=\"AlertCircleIcon\"\n                phosphor=\"InfoIcon\"\n                remixicon=\"RiInformationLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </InputGroupAddon>\n          </InputGroup>\n          <FieldDescription>\n            This is a description of the input group.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-header-footer-30\">\n            Addon (block-end)\n          </FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-header-footer-30\"\n              placeholder=\"Enter your text here...\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupText>0/280 characters</InputGroupText>\n              <InputGroupButton\n                variant=\"default\"\n                size=\"icon-xs\"\n                className=\"ml-auto rounded-full\"\n              >\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                <span className=\"sr-only\">Send</span>\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comment-31\">Addon (Buttons)</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-comment-31\"\n              placeholder=\"Share your thoughts...\"\n              className=\"min-h-[120px]\"\n            />\n            <InputGroupAddon align=\"block-end\">\n              <InputGroupButton variant=\"ghost\" className=\"ml-auto\" size=\"sm\">\n                Cancel\n              </InputGroupButton>\n              <InputGroupButton variant=\"default\" size=\"sm\">\n                Post Comment\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-code-32\">Code Editor</FieldLabel>\n          <InputGroup>\n            <InputGroupTextarea\n              id=\"textarea-code-32\"\n              placeholder=\"console.log('Hello, world!');\"\n              className=\"min-h-[300px] py-3\"\n            />\n            <InputGroupAddon align=\"block-start\" className=\"border-b\">\n              <InputGroupText className=\"font-mono font-medium\">\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconBrandJavascript\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                script.js\n              </InputGroupText>\n              <InputGroupButton size=\"icon-xs\" className=\"ml-auto\">\n                <IconPlaceholder\n                  lucide=\"RefreshCwIcon\"\n                  tabler=\"IconRefresh\"\n                  hugeicons=\"RefreshIcon\"\n                  phosphor=\"ArrowClockwiseIcon\"\n                  remixicon=\"RiRefreshLine\"\n                />\n              </InputGroupButton>\n              <InputGroupButton size=\"icon-xs\" variant=\"ghost\">\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n            <InputGroupAddon align=\"block-end\" className=\"border-t\">\n              <InputGroupText>Line 1, Column 1</InputGroupText>\n              <InputGroupText className=\"ml-auto\">JavaScript</InputGroupText>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/input-group.json b/apps/v4/public/r/styles/radix-vega/input-group.json
index 242d6743f4..bae39eec37 100644
--- a/apps/v4/public/r/styles/radix-vega/input-group.json
+++ b/apps/v4/public/r/styles/radix-vega/input-group.json
@@ -9,9 +9,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none 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-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-9 w-full min-w-0 items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 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:bg-input/30 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\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-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\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 text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"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 rounded-none border-0 bg-transparent shadow-none ring-0 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 rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/input-otp-example.json b/apps/v4/public/r/styles/radix-vega/input-otp-example.json
index 0e2186782a..f8c971e63a 100644
--- a/apps/v4/public/r/styles/radix-vega/input-otp-example.json
+++ b/apps/v4/public/r/styles/radix-vega/input-otp-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/input-otp-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-muted-foreground text-sm\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"hover:text-primary underline underline-offset-4 transition-colors\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function InputOTPExample() {\n  return (\n    <ExampleWrapper>\n      <InputOTPForm />\n      <InputOTPSimple />\n      <InputOTPPattern />\n      <InputOTPWithSeparator />\n      <InputOTPAlphanumeric />\n      <InputOTPDisabled />\n      <InputOTPFourDigits />\n      <InputOTPInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputOTPSimple() {\n  return (\n    <Example title=\"Simple\">\n      <Field>\n        <FieldLabel htmlFor=\"simple\">Simple</FieldLabel>\n        <InputOTP id=\"simple\" maxLength={6}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPPattern() {\n  return (\n    <Example title=\"Digits Only\">\n      <Field>\n        <FieldLabel htmlFor=\"digits-only\">Digits Only</FieldLabel>\n        <InputOTP id=\"digits-only\" maxLength={6} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPWithSeparator() {\n  const [value, setValue] = React.useState(\"123456\")\n\n  return (\n    <Example title=\"With Separator\">\n      <Field>\n        <FieldLabel htmlFor=\"with-separator\">With Separator</FieldLabel>\n        <InputOTP\n          id=\"with-separator\"\n          maxLength={6}\n          value={value}\n          onChange={setValue}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPAlphanumeric() {\n  return (\n    <Example title=\"Alphanumeric\">\n      <Field>\n        <FieldLabel htmlFor=\"alphanumeric\">Alphanumeric</FieldLabel>\n        <FieldDescription>Accepts both letters and numbers.</FieldDescription>\n        <InputOTP\n          id=\"alphanumeric\"\n          maxLength={6}\n          pattern={REGEXP_ONLY_DIGITS_AND_CHARS}\n        >\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"disabled\">Disabled</FieldLabel>\n        <InputOTP id=\"disabled\" maxLength={6} disabled value=\"123456\">\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={3} />\n            <InputOTPSlot index={4} />\n            <InputOTPSlot index={5} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPFourDigits() {\n  return (\n    <Example title=\"4 Digits\">\n      <Field>\n        <FieldLabel htmlFor=\"four-digits\">4 Digits</FieldLabel>\n        <FieldDescription>Common pattern for PIN codes.</FieldDescription>\n        <InputOTP id=\"four-digits\" maxLength={4} pattern={REGEXP_ONLY_DIGITS}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} />\n            <InputOTPSlot index={1} />\n            <InputOTPSlot index={2} />\n            <InputOTPSlot index={3} />\n          </InputOTPGroup>\n        </InputOTP>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPInvalid() {\n  const [value, setValue] = React.useState(\"000000\")\n\n  return (\n    <Example title=\"Invalid State\">\n      <Field>\n        <FieldLabel htmlFor=\"invalid\">Invalid State</FieldLabel>\n        <FieldDescription>\n          Example showing the invalid error state.\n        </FieldDescription>\n        <InputOTP id=\"invalid\" maxLength={6} value={value} onChange={setValue}>\n          <InputOTPGroup>\n            <InputOTPSlot index={0} aria-invalid />\n            <InputOTPSlot index={1} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={2} aria-invalid />\n            <InputOTPSlot index={3} aria-invalid />\n          </InputOTPGroup>\n          <InputOTPSeparator />\n          <InputOTPGroup>\n            <InputOTPSlot index={4} aria-invalid />\n            <InputOTPSlot index={5} aria-invalid />\n          </InputOTPGroup>\n        </InputOTP>\n        <FieldError errors={[{ message: \"Invalid code. Please try again.\" }]} />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputOTPForm() {\n  return (\n    <Example title=\"Form\">\n      <Card className=\"mx-auto max-w-md\">\n        <CardHeader>\n          <CardTitle>Verify your login</CardTitle>\n          <CardDescription>\n            Enter the verification code we sent to your email address:{\" \"}\n            <span className=\"font-medium\">m@example.com</span>.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <Field>\n              <div className=\"flex items-center justify-between\">\n                <FieldLabel htmlFor=\"otp-verification\">\n                  Verification code\n                </FieldLabel>\n                <Button variant=\"outline\" size=\"xs\">\n                  <IconPlaceholder\n                    lucide=\"RefreshCwIcon\"\n                    hugeicons=\"RefreshIcon\"\n                    tabler=\"IconRefresh\"\n                    phosphor=\"ArrowClockwiseIcon\"\n                    remixicon=\"RiRefreshLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Resend Code\n                </Button>\n              </div>\n              <InputOTP maxLength={6} id=\"otp-verification\" required>\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={0} />\n                  <InputOTPSlot index={1} />\n                  <InputOTPSlot index={2} />\n                </InputOTPGroup>\n                <InputOTPSeparator />\n                <InputOTPGroup className=\"*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11\">\n                  <InputOTPSlot index={3} />\n                  <InputOTPSlot index={4} />\n                  <InputOTPSlot index={5} />\n                </InputOTPGroup>\n              </InputOTP>\n              <FieldDescription>\n                <a href=\"#\">I no longer have access to this email address.</a>\n              </FieldDescription>\n            </Field>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Verify\n          </Button>\n          <div className=\"text-sm text-muted-foreground\">\n            Having trouble signing in?{\" \"}\n            <a\n              href=\"#\"\n              className=\"underline underline-offset-4 transition-colors hover:text-primary\"\n            >\n              Contact support\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/input-otp.json b/apps/v4/public/r/styles/radix-vega/input-otp.json
index 16ded9e6e5..ef208e82b6 100644
--- a/apps/v4/public/r/styles/radix-vega/input-otp.json
+++ b/apps/v4/public/r/styles/radix-vega/input-otp.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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        \"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-md has-aria-invalid:ring-3\",\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"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 rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\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-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+      "api": "https://input-otp.rodz.dev"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/input.json b/apps/v4/public/r/styles/radix-vega/input.json
index b92cbb074f..75d96d5bd2 100644
--- a/apps/v4/public/r/styles/radix-vega/input.json
+++ b/apps/v4/public/r/styles/radix-vega/input.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 file:text-foreground placeholder:text-muted-foreground h-9 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/input",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/item-example.json b/apps/v4/public/r/styles/radix-vega/item-example.json
index d7e12122bd..206075c7bb 100644
--- a/apps/v4/public/r/styles/radix-vega/item-example.json
+++ b/apps/v4/public/r/styles/radix-vega/item-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/item-example.tsx",
-      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-muted-foreground text-sm\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
+      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ItemExample() {\n  return (\n    <ExampleWrapper>\n      <DefaultVariantItems />\n      <OutlineVariantItems />\n      <MutedVariantItems />\n      <DefaultVariantItemsSmall />\n      <OutlineVariantItemsSmall />\n      <MutedVariantItemsSmall />\n      <DefaultVariantItemsExtraSmall />\n      <OutlineVariantItemsExtraSmall />\n      <MutedVariantItemsExtraSmall />\n      <DefaultLinkItems />\n      <OutlineLinkItems />\n      <MutedLinkItems />\n      <DefaultItemGroup />\n      <OutlineItemGroup />\n      <MutedItemGroup />\n      <ItemSeparatorExample />\n      <ItemHeaderExamples />\n      <ItemFooterExamples />\n      <ItemHeaderAndFooterExamples />\n      <DefaultVariantItemsWithImage />\n      <OutlineVariantItemsWithImage />\n      <OutlineVariantItemsWithImageSmall />\n      <OutlineVariantItemsWithImageExtraSmall />\n      <MutedVariantItemsWithImage />\n    </ExampleWrapper>\n  )\n}\n\nfunction DefaultVariantItems() {\n  return (\n    <Example title=\"Default\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItems() {\n  return (\n    <Example title=\"Outline\">\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItems() {\n  return (\n    <Example title=\"Muted\">\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsSmall() {\n  return (\n    <Example title=\"Small\">\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsSmall() {\n  return (\n    <Example title=\"Outline - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsSmall() {\n  return (\n    <Example title=\"Muted - Small\">\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n          <ItemDescription>\n            This is a description that provides additional context.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            This item includes a title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n          <ItemDescription>\n            This item includes media, title, and description.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n          <ItemDescription>\n            Complete item with all components: media, title, description, and\n            button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"sm\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n          <ItemDescription>\n            Item with multiple action buttons in the actions area.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Extra Small\">\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Outline - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsExtraSmall() {\n  return (\n    <Example title=\"Muted - Extra Small\">\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title Only</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemMedia variant=\"icon\">\n          <IconPlaceholder\n            lucide=\"InboxIcon\"\n            tabler=\"IconArchive\"\n            hugeicons=\"Archive02Icon\"\n            phosphor=\"ArchiveIcon\"\n            remixicon=\"RiArchiveLine\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Media + Title + Description + Button</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Action</Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\" size=\"xs\">\n        <ItemContent>\n          <ItemTitle>Multiple Actions</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button size=\"sm\">Confirm</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultLinkItems() {\n  return (\n    <Example title=\"asChild\">\n      <ItemGroup>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineLinkItems() {\n  return (\n    <Example title=\"Outline - asChild\">\n      <ItemGroup>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"outline\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedLinkItems() {\n  return (\n    <Example title=\"Muted - asChild\">\n      <ItemGroup>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title Only (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Clickable item with title and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title (Link)</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"InboxIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"TrayIcon\"\n                remixicon=\"RiInboxLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Media + Title + Description (Link)</ItemTitle>\n              <ItemDescription>\n                Complete link item with media, title, and description.\n              </ItemDescription>\n            </ItemContent>\n          </a>\n        </Item>\n        <Item variant=\"muted\" asChild>\n          <a href=\"#\">\n            <ItemContent>\n              <ItemTitle>With Actions (Link)</ItemTitle>\n              <ItemDescription>\n                Link item that also has action buttons.\n              </ItemDescription>\n            </ItemContent>\n            <ItemActions>\n              <Button variant=\"outline\" size=\"sm\">\n                Share\n              </Button>\n            </ItemActions>\n          </a>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction DefaultItemGroup() {\n  return (\n    <Example title=\"ItemGroup\">\n      <ItemGroup>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in the group.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction OutlineItemGroup() {\n  return (\n    <Example title=\"Outline - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item with icon.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction MutedItemGroup() {\n  return (\n    <Example title=\"Muted - ItemGroup\">\n      <ItemGroup>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 1</ItemTitle>\n            <ItemDescription>First item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 2</ItemTitle>\n            <ItemDescription>Second item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"muted\">\n          <ItemContent>\n            <ItemTitle>Item 3</ItemTitle>\n            <ItemDescription>Third item in muted group.</ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button variant=\"outline\" size=\"sm\">\n              Action\n            </Button>\n          </ItemActions>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemSeparatorExample() {\n  return (\n    <Example title=\"ItemSeparator\">\n      <ItemGroup>\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Inbox</ItemTitle>\n            <ItemDescription>View all incoming messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Sent</ItemTitle>\n            <ItemDescription>View all sent messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Drafts</ItemTitle>\n            <ItemDescription>View all draft messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n        <ItemSeparator />\n        <Item variant=\"outline\">\n          <ItemMedia variant=\"icon\">\n            <IconPlaceholder\n              lucide=\"InboxIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"TrayIcon\"\n              remixicon=\"RiInboxLine\"\n            />\n          </ItemMedia>\n          <ItemContent>\n            <ItemTitle>Archive</ItemTitle>\n            <ItemDescription>View archived messages.</ItemDescription>\n          </ItemContent>\n        </Item>\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction ItemHeaderExamples() {\n  return (\n    <Example title=\"ItemHeader\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Design System</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Component Library</ItemTitle>\n          <ItemDescription>\n            A comprehensive collection of reusable UI components for building\n            consistent interfaces.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Marketing</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Campaign Analytics</ItemTitle>\n          <ItemDescription>\n            Track performance metrics and engagement rates across all marketing\n            channels.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Engineering</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Documentation</ItemTitle>\n          <ItemDescription>\n            Complete reference guide for all available endpoints and\n            authentication methods.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemFooterExamples() {\n  return (\n    <Example title=\"ItemFooter\">\n      <Item>\n        <ItemContent>\n          <ItemTitle>Quarterly Report Q4 2024</ItemTitle>\n          <ItemDescription>\n            Financial overview including revenue, expenses, and growth metrics\n            for the fourth quarter.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Last updated 2 hours ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemContent>\n          <ItemTitle>User Research Findings</ItemTitle>\n          <ItemDescription>\n            Insights from interviews and surveys conducted with 50+ users across\n            different demographics.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Created by Sarah Chen\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemContent>\n          <ItemTitle>Product Roadmap</ItemTitle>\n          <ItemDescription>\n            Planned features and improvements scheduled for the next three\n            months.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">12 comments</span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction ItemHeaderAndFooterExamples() {\n  return (\n    <Example title=\"ItemHeader + ItemFooter\">\n      <Item>\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Team Project</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Website Redesign</ItemTitle>\n          <ItemDescription>\n            Complete overhaul of the company website with modern design\n            principles and improved user experience.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Updated 5 minutes ago\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Client Work</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>Mobile App Development</ItemTitle>\n          <ItemDescription>\n            Building a cross-platform mobile application for iOS and Android\n            with React Native.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Status: In Progress\n          </span>\n        </ItemFooter>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemHeader>\n          <span className=\"text-sm font-medium\">Documentation</span>\n        </ItemHeader>\n        <ItemContent>\n          <ItemTitle>API Integration Guide</ItemTitle>\n          <ItemDescription>\n            Step-by-step instructions for integrating third-party APIs with\n            authentication and error handling.\n          </ItemDescription>\n        </ItemContent>\n        <ItemFooter>\n          <span className=\"text-sm text-muted-foreground\">\n            Category: Technical • 3 attachments\n          </span>\n        </ItemFooter>\n      </Item>\n    </Example>\n  )\n}\n\nfunction DefaultVariantItemsWithImage() {\n  return (\n    <Example title=\"Default - ItemMedia image\">\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item>\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImage() {\n  return (\n    <Example title=\"Outline - ItemMedia image\">\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Small\">\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"sm\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction OutlineVariantItemsWithImageExtraSmall() {\n  return (\n    <Example title=\"Outline - ItemMedia image - Extra Small\">\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n        </ItemContent>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"outline\" size=\"xs\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n\nfunction MutedVariantItemsWithImage() {\n  return (\n    <Example title=\"Muted - ItemMedia image\">\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Project\"\n            alt=\"Project\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Project Dashboard</ItemTitle>\n          <ItemDescription>\n            Overview of project settings and configuration.\n          </ItemDescription>\n        </ItemContent>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/Document\"\n            alt=\"Document\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>Document</ItemTitle>\n          <ItemDescription>A document with metadata displayed.</ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button variant=\"outline\" size=\"sm\">\n            View\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"muted\">\n        <ItemMedia variant=\"image\">\n          <Image\n            src=\"https://avatar.vercel.sh/File\"\n            alt=\"File\"\n            width={40}\n            height={40}\n            className=\"object-cover grayscale\"\n          />\n        </ItemMedia>\n        <ItemContent>\n          <ItemTitle>File Attachment</ItemTitle>\n          <ItemDescription>\n            Complete file with image, title, description, and action button.\n          </ItemDescription>\n        </ItemContent>\n        <ItemActions>\n          <Button size=\"sm\">Download</Button>\n        </ItemActions>\n      </Item>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/item.json b/apps/v4/public/r/styles/radix-vega/item.json
index 83ce76e679..364f03c9c9 100644
--- a/apps/v4/public/r/styles/radix-vega/item.json
+++ b/apps/v4/public/r/styles/radix-vega/item.json
@@ -7,9 +7,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/item.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-md border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nfunction ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nconst itemVariants = cva(\n  \"group/item flex w-full flex-wrap items-center rounded-md border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"border-transparent bg-muted/50\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof itemVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(itemVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nconst itemMediaVariants = cva(\n  \"flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image:\n          \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction ItemMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/item",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/kbd.json b/apps/v4/public/r/styles/radix-vega/kbd.json
index 2f4e98ed04..3f06543a54 100644
--- a/apps/v4/public/r/styles/radix-vega/kbd.json
+++ b/apps/v4/public/r/styles/radix-vega/kbd.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <kbd\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/label.json b/apps/v4/public/r/styles/radix-vega/label.json
index 3f083ddf99..ae7afb3e22 100644
--- a/apps/v4/public/r/styles/radix-vega/label.json
+++ b/apps/v4/public/r/styles/radix-vega/label.json
@@ -8,5 +8,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/label",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/login-02.json b/apps/v4/public/r/styles/radix-vega/login-02.json
index 7fbf711ee6..addc0325b3 100644
--- a/apps/v4/public/r/styles/radix-vega/login-02.json
+++ b/apps/v4/public/r/styles/radix-vega/login-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/login-02/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-vega/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-vega/blocks/login-02/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <LoginForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/login-02/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Login to your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <div className=\"flex items-center\">\n            <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n            <a\n              href=\"#\"\n              className=\"ml-auto text-sm underline-offset-4 hover:underline\"\n            >\n              Forgot your password?\n            </a>\n          </div>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <Button type=\"submit\">Login</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Login with GitHub\n          </Button>\n          <FieldDescription className=\"text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/login-03.json b/apps/v4/public/r/styles/radix-vega/login-03.json
index a6e2cc73ed..38c32c42b4 100644
--- a/apps/v4/public/r/styles/radix-vega/login-03.json
+++ b/apps/v4/public/r/styles/radix-vega/login-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/login-03/page.tsx",
-      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-vega/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { LoginForm } from \"@/registry/radix-vega/blocks/login-03/components/login-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-vega/login-04.json b/apps/v4/public/r/styles/radix-vega/login-04.json
index 78fdffe460..75daf8c5f2 100644
--- a/apps/v4/public/r/styles/radix-vega/login-04.json
+++ b/apps/v4/public/r/styles/radix-vega/login-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/login-04/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-vega/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-vega/blocks/login-04/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/login-04/components/login-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-muted-foreground text-balance\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\n\nexport function LoginForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Welcome back</h1>\n                <p className=\"text-balance text-muted-foreground\">\n                  Login to your Acme Inc account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto text-sm underline-offset-2 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n              <Field>\n                <Button type=\"submit\">Login</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Login with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Don&apos;t have an account? <a href=\"#\">Sign up</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/login-05.json b/apps/v4/public/r/styles/radix-vega/login-05.json
index 2d97051953..29f9e160d4 100644
--- a/apps/v4/public/r/styles/radix-vega/login-05.json
+++ b/apps/v4/public/r/styles/radix-vega/login-05.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/login-05/page.tsx",
-      "content": "import { LoginForm } from \"@/registry/radix-vega/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { LoginForm } from \"@/registry/radix-vega/blocks/login-05/components/login-form\"\n\nexport default function LoginPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <LoginForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/login/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-vega/menubar.json b/apps/v4/public/r/styles/radix-vega/menubar.json
index 11bf669922..70c9fb3ec3 100644
--- a/apps/v4/public/r/styles/radix-vega/menubar.json
+++ b/apps/v4/public/r/styles/radix-vega/menubar.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs\",\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        \"hover:bg-muted aria-expanded:bg-muted flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md p-1 shadow-md ring-1 duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 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-2 py-1.5 text-sm font-medium data-inset:pl-8\",\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(\"bg-border -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menubar-item:text-accent-foreground ml-auto text-xs tracking-widest\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-inset:pl-8 [&_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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md p-1 shadow-lg ring-1 duration-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs\",\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-sm px-2 py-1 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 z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 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 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-8 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 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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-2 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 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-8 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-2 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-2 py-1.5 text-sm font-medium data-inset:pl-8\",\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\", 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-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 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 z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/native-select.json b/apps/v4/public/r/styles/radix-vega/native-select.json
index 35291471f6..c0d345208c 100644
--- a/apps/v4/public/r/styles/radix-vega/native-select.json
+++ b/apps/v4/public/r/styles/radix-vega/native-select.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-8\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=sm]:h-8 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\"\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-2.5 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({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json b/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json
index 8af48593b2..732b5d7960 100644
--- a/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json
+++ b/apps/v4/public/r/styles/radix-vega/navigation-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/navigation-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-vega/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"text-muted-foreground line-clamp-2\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from \"@/registry/radix-vega/ui/navigation-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst components: { title: string; href: string; description: string }[] = [\n  {\n    title: \"Alert Dialog\",\n    href: \"/docs/primitives/alert-dialog\",\n    description:\n      \"A modal dialog that interrupts the user with important content and expects a response.\",\n  },\n  {\n    title: \"Hover Card\",\n    href: \"/docs/primitives/hover-card\",\n    description:\n      \"For sighted users to preview content available behind a link.\",\n  },\n  {\n    title: \"Progress\",\n    href: \"/docs/primitives/progress\",\n    description:\n      \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n  },\n  {\n    title: \"Scroll-area\",\n    href: \"/docs/primitives/scroll-area\",\n    description: \"Visually or semantically separates content.\",\n  },\n  {\n    title: \"Tabs\",\n    href: \"/docs/primitives/tabs\",\n    description:\n      \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n  },\n  {\n    title: \"Tooltip\",\n    href: \"/docs/primitives/tooltip\",\n    description:\n      \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n  },\n]\n\nexport default function NavigationMenuExample() {\n  return (\n    <ExampleWrapper className=\"lg:grid-cols-1\">\n      <NavigationMenuWithViewport />\n      <NavigationMenuWithoutViewport />\n    </ExampleWrapper>\n  )\n}\n\nfunction NavigationMenuWithViewport() {\n  return (\n    <Example title=\"With Viewport\">\n      <NavigationMenu>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-96\">\n                <ListItem href=\"/docs\" title=\"Introduction\">\n                  Re-usable components built with Tailwind CSS.\n                </ListItem>\n                <ListItem href=\"/docs/installation\" title=\"Installation\">\n                  How to install dependencies and structure your app.\n                </ListItem>\n                <ListItem href=\"/docs/primitives/typography\" title=\"Typography\">\n                  Styles for headings, paragraphs, lists...etc\n                </ListItem>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[400px] gap-1 md:w-[500px] md:grid-cols-2 lg:w-[600px]\">\n                {components.map((component) => (\n                  <ListItem\n                    key={component.title}\n                    title={component.title}\n                    href={component.href}\n                  >\n                    {component.description}\n                  </ListItem>\n                ))}\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction NavigationMenuWithoutViewport() {\n  return (\n    <Example title=\"Without Viewport\">\n      <NavigationMenu viewport={false}>\n        <NavigationMenuList>\n          <NavigationMenuItem>\n            <NavigationMenuLink\n              asChild\n              className={navigationMenuTriggerStyle()}\n            >\n              <Link href=\"/docs\">Documentation</Link>\n            </NavigationMenuLink>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"w-72\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Components</div>\n                        <div className=\"text-muted-foreground\">\n                          Browse all components in the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Documentation</div>\n                        <div className=\"text-muted-foreground\">\n                          Learn how to use the library.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <div className=\"flex flex-col\">\n                        <div className=\"font-medium\">Blog</div>\n                        <div className=\"text-muted-foreground\">\n                          Read our latest blog posts.\n                        </div>\n                      </div>\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>Simple List</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul>\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Components</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Documentation</Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">Blocks</Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n          <NavigationMenuItem>\n            <NavigationMenuTrigger>With Icon</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <ul className=\"grid w-[200px]\">\n                <li>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Backlog\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\" className=\"flex-row items-center gap-2\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      To Do\n                    </Link>\n                  </NavigationMenuLink>\n                  <NavigationMenuLink asChild>\n                    <Link href=\"#\">\n                      <IconPlaceholder\n                        lucide=\"CircleAlertIcon\"\n                        tabler=\"IconExclamationCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningCircleIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Done\n                    </Link>\n                  </NavigationMenuLink>\n                </li>\n              </ul>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n    </Example>\n  )\n}\n\nfunction ListItem({\n  title,\n  children,\n  href,\n  ...props\n}: React.ComponentPropsWithoutRef<\"li\"> & { href: string }) {\n  return (\n    <li {...props}>\n      <NavigationMenuLink asChild>\n        <Link href={href}>\n          <div className=\"flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs\">\n            <div className=\"leading-none font-medium\">{title}</div>\n            <div className=\"line-clamp-2 text-muted-foreground\">{children}</div>\n          </div>\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/navigation-menu.json b/apps/v4/public/r/styles/radix-vega/navigation-menu.json
index 5acfa43a07..121313831c 100644
--- a/apps/v4/public/r/styles/radix-vega/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-vega/navigation-menu.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 top-0 left-0 w-full p-2 pr-2.5 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-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-(--radix-navigation-menu-viewport-width)\",\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        \"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\",\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm 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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"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-md bg-background px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 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 pr-2.5 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-md group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow 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-lg bg-popover text-popover-foreground shadow 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-95\",\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-sm p-2 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 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-tl-sm bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/otp-01.json b/apps/v4/public/r/styles/radix-vega/otp-01.json
deleted file mode 100644
index 1f1c9def25..0000000000
--- a/apps/v4/public/r/styles/radix-vega/otp-01.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-01",
-  "title": "OTP 01",
-  "description": "A simple OTP verification form.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-vega/blocks/otp-01/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-vega/blocks/otp-01/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-xs\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-vega/blocks/otp-01/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader>\n        <CardTitle>Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\">Verification code</FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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            <FieldGroup>\n              <Button type=\"submit\">Verify</Button>\n              <FieldDescription className=\"text-center\">\n                Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n              </FieldDescription>\n            </FieldGroup>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/otp-02.json b/apps/v4/public/r/styles/radix-vega/otp-02.json
deleted file mode 100644
index f60f7766ba..0000000000
--- a/apps/v4/public/r/styles/radix-vega/otp-02.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-02",
-  "title": "OTP 02",
-  "description": "A two column OTP page with a cover image.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-vega/blocks/otp-02/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-vega/blocks/otp-02/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full\">\n      <div className=\"flex w-full items-center justify-center p-6 lg:w-1/2\">\n        <div className=\"w-full max-w-xs\">\n          <OTPForm />\n        </div>\n      </div>\n      <div className=\"relative hidden w-1/2 lg:block\">\n        <img\n          alt=\"Authentication\"\n          className=\"absolute inset-0 h-full w-full object-cover\"\n          height={1080}\n          src=\"/placeholder.svg\"\n          width={1920}\n        />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-vega/blocks/otp-02/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-1 text-center\">\n            <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n            <p className=\"text-muted-foreground text-sm text-balance\">\n              We sent a 6-digit code to your email.\n            </p>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP maxLength={6} id=\"otp\" required>\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={2} />\n                <InputOTPSlot index={3} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Enter the 6-digit code sent to your email.\n            </FieldDescription>\n          </Field>\n          <Button type=\"submit\">Verify</Button>\n          <FieldDescription className=\"text-center\">\n            Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n          </FieldDescription>\n        </FieldGroup>\n      </form>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/otp-03.json b/apps/v4/public/r/styles/radix-vega/otp-03.json
deleted file mode 100644
index 7cf070ba13..0000000000
--- a/apps/v4/public/r/styles/radix-vega/otp-03.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-03",
-  "title": "OTP 03",
-  "description": "An OTP page with a muted background color.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-vega/blocks/otp-03/page.tsx",
-      "content": "\"use client\"\n\nimport { OTPForm } from \"@/registry/radix-vega/blocks/otp-03/components/otp-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-xs flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-vega/blocks/otp-03/components/otp-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\n\nexport function OTPForm({ ...props }: React.ComponentProps<typeof Card>) {\n  return (\n    <Card {...props}>\n      <CardHeader className=\"text-center\">\n        <CardTitle className=\"text-xl\">Enter verification code</CardTitle>\n        <CardDescription>We sent a 6-digit code to your email.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                Verification code\n              </FieldLabel>\n              <InputOTP maxLength={6} id=\"otp\" required>\n                <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border\">\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 className=\"text-center\">\n                Enter the 6-digit code sent to your email.\n              </FieldDescription>\n            </Field>\n            <Button type=\"submit\">Verify</Button>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/otp-04.json b/apps/v4/public/r/styles/radix-vega/otp-04.json
deleted file mode 100644
index bd83f032e7..0000000000
--- a/apps/v4/public/r/styles/radix-vega/otp-04.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-04",
-  "title": "OTP 04",
-  "description": "An OTP page with form and image.",
-  "registryDependencies": [
-    "button",
-    "card",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-vega/blocks/otp-04/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-vega/blocks/otp-04/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-3xl\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-vega/blocks/otp-04/components/otp-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-6 md:min-h-[450px]\", className)}\n      {...props}\n    >\n      <Card className=\"flex-1 overflow-hidden p-0\">\n        <CardContent className=\"grid flex-1 p-0 md:grid-cols-2\">\n          <form className=\"flex flex-col items-center justify-center p-6 md:p-8\">\n            <FieldGroup>\n              <Field className=\"items-center text-center\">\n                <h1 className=\"text-2xl font-bold\">Enter verification code</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  We sent a 6-digit code to your email\n                </p>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n                  Verification code\n                </FieldLabel>\n                <InputOTP\n                  maxLength={6}\n                  id=\"otp\"\n                  required\n                  containerClassName=\"gap-4\"\n                >\n                  <InputOTPGroup>\n                    <InputOTPSlot index={0} />\n                    <InputOTPSlot index={1} />\n                    <InputOTPSlot index={2} />\n                  </InputOTPGroup>\n                  <InputOTPSeparator />\n                  <InputOTPGroup>\n                    <InputOTPSlot index={3} />\n                    <InputOTPSlot index={4} />\n                    <InputOTPSlot index={5} />\n                  </InputOTPGroup>\n                </InputOTP>\n                <FieldDescription className=\"text-center\">\n                  Enter the 6-digit code sent to your email.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Verify</Button>\n                <FieldDescription className=\"text-center\">\n                  Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/otp-05.json b/apps/v4/public/r/styles/radix-vega/otp-05.json
deleted file mode 100644
index a026ff30d6..0000000000
--- a/apps/v4/public/r/styles/radix-vega/otp-05.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "otp-05",
-  "title": "OTP 05",
-  "description": "A simple OTP form with social providers.",
-  "registryDependencies": [
-    "button",
-    "input-otp",
-    "label",
-    "field"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-vega/blocks/otp-05/page.tsx",
-      "content": "import { OTPForm } from \"@/registry/radix-vega/blocks/otp-05/components/otp-form\"\n\nexport default function OTPPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <OTPForm />\n      </div>\n    </div>\n  )\n}\n",
-      "type": "registry:page",
-      "target": "app/otp/page.tsx"
-    },
-    {
-      "path": "registry/radix-vega/blocks/otp-05/components/otp-form.tsx",
-      "content": "\"use client\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function OTPForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <form>\n        <FieldGroup>\n          <div className=\"flex flex-col items-center gap-2 text-center\">\n            <a\n              href=\"#\"\n              className=\"flex flex-col items-center gap-2 font-medium\"\n            >\n              <div className=\"flex size-8 items-center justify-center rounded-md\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-6\"\n                />\n              </div>\n              <span className=\"sr-only\">Acme Inc.</span>\n            </a>\n            <h1 className=\"text-xl font-bold\">Enter verification code</h1>\n            <FieldDescription>\n              We sent a 6-digit code to your email address\n            </FieldDescription>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"otp\" className=\"sr-only\">\n              Verification code\n            </FieldLabel>\n            <InputOTP\n              maxLength={6}\n              id=\"otp\"\n              required\n              containerClassName=\"gap-4\"\n            >\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={0} />\n                <InputOTPSlot index={1} />\n                <InputOTPSlot index={2} />\n              </InputOTPGroup>\n              <InputOTPSeparator />\n              <InputOTPGroup className=\"gap-2.5 *:data-[slot=input-otp-slot]:h-16 *:data-[slot=input-otp-slot]:w-12 *:data-[slot=input-otp-slot]:rounded-md *:data-[slot=input-otp-slot]:border *:data-[slot=input-otp-slot]:text-xl\">\n                <InputOTPSlot index={3} />\n                <InputOTPSlot index={4} />\n                <InputOTPSlot index={5} />\n              </InputOTPGroup>\n            </InputOTP>\n            <FieldDescription className=\"text-center\">\n              Didn&apos;t receive the code? <a href=\"#\">Resend</a>\n            </FieldDescription>\n          </Field>\n          <Field>\n            <Button type=\"submit\">Verify</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
-      "type": "registry:component"
-    }
-  ],
-  "categories": [
-    "authentication",
-    "otp"
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/pagination.json b/apps/v4/public/r/styles/radix-vega/pagination.json
index 6cdc84d28a..f66b53286b 100644
--- a/apps/v4/public/r/styles/radix-vega/pagination.json
+++ b/apps/v4/public/r/styles/radix-vega/pagination.json
@@ -11,5 +11,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/popover.json b/apps/v4/public/r/styles/radix-vega/popover.json
index 0d4d36d69c..d54ca8a0db 100644
--- a/apps/v4/public/r/styles/radix-vega/popover.json
+++ b/apps/v4/public/r/styles/radix-vega/popover.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/popover.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 outline-hidden duration-100\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Popover as PopoverPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent({\n  className,\n  align = \"center\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 flex w-72 origin-(--radix-popover-content-transform-origin) flex-col gap-4 rounded-md bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  )\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn(\"flex flex-col gap-1 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn(\"font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Popover,\n  PopoverAnchor,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/preview.json b/apps/v4/public/r/styles/radix-vega/preview.json
index c508864db8..2753f426b2 100644
--- a/apps/v4/public/r/styles/radix-vega/preview.json
+++ b/apps/v4/public/r/styles/radix-vega/preview.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "preview",
-  "title": "Home",
+  "title": "Preview",
   "registryDependencies": [
     "alert-dialog",
     "avatar",
@@ -32,8 +32,8 @@
   ],
   "files": [
     {
-      "path": "registry/radix-vega/blocks/preview.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { useState } from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from \"@/registry/radix-vega/ui/alert-dialog\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { ButtonGroup } from \"@/registry/radix-vega/ui/button-group\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n} from \"@/registry/radix-vega/ui/combobox\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/radix-vega/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\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 { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-vega/ui/sheet\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Spinner } from \"@/registry/radix-vega/ui/spinner\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CoverExample() {\n  return (\n    <ExampleWrapper>\n      <ObservabilityCard />\n      <SmallFormExample />\n      <FormExample />\n      <FieldExamples />\n      <ItemExample />\n      <ButtonGroupExamples />\n      <EmptyAvatarGroup />\n      <InputGroupExamples />\n      <SheetExample />\n      <BadgeExamples />\n    </ExampleWrapper>\n  )\n}\n\nfunction FieldExamples() {\n  const [gpuCount, setGpuCount] = React.useState(8)\n  const [value, setValue] = useState([200, 800])\n  const handleGpuAdjustment = React.useCallback((adjustment: number) => {\n    setGpuCount((prevCount) =>\n      Math.max(1, Math.min(99, prevCount + adjustment))\n    )\n  }, [])\n\n  const handleGpuInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const value = parseInt(e.target.value, 10)\n      if (!isNaN(value) && value >= 1 && value <= 99) {\n        setGpuCount(value)\n      }\n    },\n    []\n  )\n\n  return (\n    <Example title=\"Fields\">\n      <FieldSet className=\"w-full max-w-md\">\n        <FieldGroup>\n          <FieldSet>\n            <FieldLegend>Compute Environment</FieldLegend>\n            <FieldDescription>\n              Select the compute environment for your cluster.\n            </FieldDescription>\n            <RadioGroup defaultValue=\"kubernetes\">\n              <FieldLabel htmlFor=\"kubernetes-r2h\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Kubernetes</FieldTitle>\n                    <FieldDescription>\n                      Run GPU workloads on a K8s configured cluster. This is the\n                      default.\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"kubernetes\"\n                    id=\"kubernetes-r2h\"\n                    aria-label=\"Kubernetes\"\n                  />\n                </Field>\n              </FieldLabel>\n              <FieldLabel htmlFor=\"vm-z4k\">\n                <Field orientation=\"horizontal\">\n                  <FieldContent>\n                    <FieldTitle>Virtual Machine</FieldTitle>\n                    <FieldDescription>\n                      Access a VM configured cluster to run workloads. (Coming\n                      soon)\n                    </FieldDescription>\n                  </FieldContent>\n                  <RadioGroupItem\n                    value=\"vm\"\n                    id=\"vm-z4k\"\n                    aria-label=\"Virtual Machine\"\n                  />\n                </Field>\n              </FieldLabel>\n            </RadioGroup>\n          </FieldSet>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"number-of-gpus-f6l\">\n                Number of GPUs\n              </FieldLabel>\n              <FieldDescription>You can add more later.</FieldDescription>\n            </FieldContent>\n            <ButtonGroup>\n              <Input\n                id=\"number-of-gpus-f6l\"\n                value={gpuCount}\n                onChange={handleGpuInputChange}\n                size={3}\n                maxLength={3}\n              />\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Decrement\"\n                onClick={() => handleGpuAdjustment(-1)}\n                disabled={gpuCount <= 1}\n              >\n                <IconPlaceholder\n                  lucide=\"MinusIcon\"\n                  tabler=\"IconMinus\"\n                  hugeicons=\"MinusSignIcon\"\n                  phosphor=\"MinusIcon\"\n                  remixicon=\"RiSubtractLine\"\n                />\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                type=\"button\"\n                aria-label=\"Increment\"\n                onClick={() => handleGpuAdjustment(1)}\n                disabled={gpuCount >= 99}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </Button>\n            </ButtonGroup>\n          </Field>\n          <FieldSeparator />\n          <Field orientation=\"horizontal\">\n            <FieldContent>\n              <FieldLabel htmlFor=\"tinting\">Wallpaper Tinting</FieldLabel>\n              <FieldDescription>\n                Allow the wallpaper to be tinted.\n              </FieldDescription>\n            </FieldContent>\n            <Switch id=\"tinting\" defaultChecked />\n          </Field>\n          <FieldSeparator />\n          <FieldLabel htmlFor=\"checkbox-demo\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"checkbox-demo\" defaultChecked />\n              <FieldLabel htmlFor=\"checkbox-demo\" className=\"line-clamp-1\">\n                I agree to the terms and conditions\n              </FieldLabel>\n            </Field>\n          </FieldLabel>\n          <FieldSeparator />\n          <Field>\n            <FieldTitle>Price Range</FieldTitle>\n            <FieldDescription>\n              Set your budget range ($\n              <span className=\"font-medium tabular-nums\">\n                {value[0]}\n              </span> -{\" \"}\n              <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n            </FieldDescription>\n            <Slider\n              value={value}\n              onValueChange={(val) => setValue(val as number[])}\n              max={1000}\n              min={0}\n              step={10}\n              className=\"mt-2 w-full\"\n              aria-label=\"Price Range\"\n            />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"submit\">Submit</Button>\n            <Button variant=\"outline\" type=\"button\">\n              Cancel\n            </Button>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n    </Example>\n  )\n}\n\nfunction ButtonGroupExamples() {\n  const [label, setLabel] = React.useState(\"personal\")\n\n  return (\n    <Example title=\"Button Group\" className=\"items-center justify-center\">\n      <div className=\"flex flex-col gap-6\">\n        <ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Go Back\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Archive\n            </Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Report\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"sm\">\n              Snooze\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button\n                  variant=\"outline\"\n                  size=\"icon-sm\"\n                  aria-label=\"More Options\"\n                >\n                  <IconPlaceholder\n                    lucide=\"ChevronDownIcon\"\n                    tabler=\"IconChevronDown\"\n                    hugeicons=\"ArrowDown01Icon\"\n                    phosphor=\"CaretDownIcon\"\n                    remixicon=\"RiArrowDownSLine\"\n                  />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\" className=\"w-48\">\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"MailCheckIcon\"\n                      tabler=\"IconMailCheck\"\n                      hugeicons=\"MailValidation01Icon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                    Mark as Read\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ArchiveIcon\"\n                      tabler=\"IconArchive\"\n                      hugeicons=\"ArchiveIcon\"\n                      phosphor=\"ArchiveIcon\"\n                      remixicon=\"RiArchiveLine\"\n                    />\n                    Archive\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ClockIcon\"\n                      tabler=\"IconClock\"\n                      hugeicons=\"ClockIcon\"\n                      phosphor=\"ClockIcon\"\n                      remixicon=\"RiTimeLine\"\n                    />\n                    Snooze\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"CalendarPlusIcon\"\n                      tabler=\"IconCalendarPlus\"\n                      hugeicons=\"CalendarAdd01Icon\"\n                      phosphor=\"CalendarPlusIcon\"\n                      remixicon=\"RiCalendarEventLine\"\n                    />\n                    Add to Calendar\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"ListFilterIcon\"\n                      tabler=\"IconFilterPlus\"\n                      hugeicons=\"AddToListIcon\"\n                      phosphor=\"ListPlusIcon\"\n                      remixicon=\"RiPlayListAddLine\"\n                    />\n                    Add to List\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"TagIcon\"\n                        tabler=\"IconTag\"\n                        hugeicons=\"TagIcon\"\n                        phosphor=\"TagIcon\"\n                        remixicon=\"RiPriceTagLine\"\n                      />\n                      Label As...\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuSubContent>\n                      <DropdownMenuRadioGroup\n                        value={label}\n                        onValueChange={setLabel}\n                      >\n                        <DropdownMenuRadioItem value=\"personal\">\n                          Personal\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"work\">\n                          Work\n                        </DropdownMenuRadioItem>\n                        <DropdownMenuRadioItem value=\"other\">\n                          Other\n                        </DropdownMenuRadioItem>\n                      </DropdownMenuRadioGroup>\n                    </DropdownMenuSubContent>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"Trash2Icon\"\n                      tabler=\"IconTrash\"\n                      hugeicons=\"Delete02Icon\"\n                      phosphor=\"TrashIcon\"\n                      remixicon=\"RiDeleteBinLine\"\n                    />\n                    Trash\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </ButtonGroup>\n          <ButtonGroup className=\"hidden sm:flex\">\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n              <IconPlaceholder\n                lucide=\"ArrowLeftIcon\"\n                tabler=\"IconArrowLeft\"\n                hugeicons=\"ArrowLeft01Icon\"\n                phosphor=\"ArrowLeftIcon\"\n                remixicon=\"RiArrowLeftLine\"\n              />\n            </Button>\n            <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n              <IconPlaceholder\n                lucide=\"ArrowRightIcon\"\n                tabler=\"IconArrowRight\"\n                hugeicons=\"ArrowRight01Icon\"\n                phosphor=\"ArrowRightIcon\"\n                remixicon=\"RiArrowRightLine\"\n              />\n            </Button>\n          </ButtonGroup>\n        </ButtonGroup>\n        <div className=\"flex gap-4\">\n          <ButtonGroup className=\"hidden sm:flex\">\n            <ButtonGroup>\n              <Button variant=\"outline\">1</Button>\n              <Button variant=\"outline\">2</Button>\n              <Button variant=\"outline\">3</Button>\n            </ButtonGroup>\n          </ButtonGroup>\n          <ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">Follow</Button>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"outline\" size=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\" className=\"w-52\">\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"VolumeX\"\n                        tabler=\"IconVolume\"\n                        hugeicons=\"VolumeOffIcon\"\n                        phosphor=\"SpeakerSlashIcon\"\n                        remixicon=\"RiVolumeMuteLine\"\n                      />\n                      Mute Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CheckIcon\"\n                        tabler=\"IconCheck\"\n                        hugeicons=\"Tick02Icon\"\n                        phosphor=\"CheckIcon\"\n                        remixicon=\"RiCheckLine\"\n                      />\n                      Mark as Read\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"UserRoundXIcon\"\n                        tabler=\"IconUserX\"\n                        hugeicons=\"UserRemove01Icon\"\n                        phosphor=\"UserMinusIcon\"\n                        remixicon=\"RiUserUnfollowLine\"\n                      />\n                      Block User\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShareIcon\"\n                        tabler=\"IconShare\"\n                        hugeicons=\"Share03Icon\"\n                        phosphor=\"ShareIcon\"\n                        remixicon=\"RiShareLine\"\n                      />\n                      Share Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                      />\n                      Copy Conversation\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"AlertTriangleIcon\"\n                        tabler=\"IconAlertTriangle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"WarningIcon\"\n                        remixicon=\"RiErrorWarningLine\"\n                      />\n                      Report Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem variant=\"destructive\">\n                      <IconPlaceholder\n                        lucide=\"TrashIcon\"\n                        tabler=\"IconTrash\"\n                        hugeicons=\"Delete02Icon\"\n                        phosphor=\"TrashIcon\"\n                        remixicon=\"RiDeleteBinLine\"\n                      />\n                      Delete Conversation\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </ButtonGroup>\n            <ButtonGroup>\n              <Button variant=\"outline\">\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"BotIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />{\" \"}\n                Copilot\n              </Button>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <Button\n                    variant=\"outline\"\n                    size=\"icon\"\n                    aria-label=\"Open Popover\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronDownIcon\"\n                      tabler=\"IconChevronDown\"\n                      hugeicons=\"ArrowDown01Icon\"\n                      phosphor=\"CaretDownIcon\"\n                      remixicon=\"RiArrowDownSLine\"\n                    />\n                  </Button>\n                </PopoverTrigger>\n                <PopoverContent align=\"end\" className=\"w-96\">\n                  <PopoverHeader>\n                    <PopoverTitle>Agent Tasks</PopoverTitle>\n                    <PopoverDescription>\n                      Describe your task in natural language. Copilot will work\n                      in the background and open a pull request.\n                    </PopoverDescription>\n                  </PopoverHeader>\n                  <div className=\"text-sm *:[p:not(:last-child)]:mb-2\">\n                    <Textarea\n                      placeholder=\"Describe your task in natural language.\"\n                      className=\"min-h-32 resize-none\"\n                    />\n                  </div>\n                </PopoverContent>\n              </Popover>\n            </ButtonGroup>\n          </ButtonGroup>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputGroupExamples() {\n  const [isFavorite, setIsFavorite] = React.useState(false)\n  const [voiceEnabled, setVoiceEnabled] = React.useState(false)\n\n  return (\n    <Example title=\"Input Group\">\n      <div className=\"flex flex-col gap-6\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Search...\" />\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">12 results</InputGroupAddon>\n        </InputGroup>\n        <InputGroup>\n          <InputGroupInput placeholder=\"example.com\" className=\"!pl-1\" />\n          <InputGroupAddon>\n            <InputGroupText>https://</InputGroupText>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton\n                  className=\"rounded-full\"\n                  size=\"icon-xs\"\n                  aria-label=\"Info\"\n                >\n                  <IconPlaceholder\n                    lucide=\"InfoIcon\"\n                    tabler=\"IconInfoCircle\"\n                    hugeicons=\"AlertCircleIcon\"\n                    phosphor=\"InfoIcon\"\n                    remixicon=\"RiInformationLine\"\n                  />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>This is content in a tooltip.</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        </InputGroup>\n        <Field>\n          <Label htmlFor=\"input-secure-19\" className=\"sr-only\">\n            Input Secure\n          </Label>\n          <InputGroup>\n            <InputGroupInput id=\"input-secure-19\" className=\"!pl-0.5\" />\n            <Popover>\n              <PopoverTrigger asChild>\n                <InputGroupAddon>\n                  <InputGroupButton\n                    variant=\"secondary\"\n                    size=\"icon-xs\"\n                    aria-label=\"Info\"\n                  >\n                    <IconPlaceholder\n                      lucide=\"InfoIcon\"\n                      tabler=\"IconInfoCircle\"\n                      hugeicons=\"AlertCircleIcon\"\n                      phosphor=\"InfoIcon\"\n                      remixicon=\"RiInformationLine\"\n                    />\n                  </InputGroupButton>\n                </InputGroupAddon>\n              </PopoverTrigger>\n              <PopoverContent\n                align=\"start\"\n                alignOffset={10}\n                className=\"flex flex-col gap-1 rounded-xl text-sm\"\n              >\n                <p className=\"font-medium\">Your connection is not secure.</p>\n                <p>\n                  You should not enter any sensitive information on this site.\n                </p>\n              </PopoverContent>\n            </Popover>\n            <InputGroupAddon className=\"text-muted-foreground !pl-1\">\n              https://\n            </InputGroupAddon>\n            <InputGroupAddon align=\"inline-end\">\n              <InputGroupButton\n                onClick={() => setIsFavorite(!isFavorite)}\n                size=\"icon-xs\"\n                aria-label=\"Favorite\"\n              >\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                  data-favorite={isFavorite}\n                  className=\"data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary\"\n                />\n              </InputGroupButton>\n            </InputGroupAddon>\n          </InputGroup>\n        </Field>\n        <ButtonGroup className=\"w-full\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Add\">\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup className=\"flex-1\">\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <TooltipTrigger asChild>\n                    <InputGroupButton\n                      onClick={() => setVoiceEnabled(!voiceEnabled)}\n                      data-active={voiceEnabled}\n                      className=\"data-[active=true]:bg-primary data-[active=true]:text-primary-foreground\"\n                      aria-pressed={voiceEnabled}\n                      size=\"icon-xs\"\n                      aria-label=\"Voice Mode\"\n                    >\n                      <IconPlaceholder\n                        lucide=\"AudioLinesIcon\"\n                        tabler=\"IconWaveSine\"\n                        hugeicons=\"AudioWave01Icon\"\n                        phosphor=\"MicrophoneIcon\"\n                        remixicon=\"RiMicLine\"\n                      />\n                    </InputGroupButton>\n                  </TooltipTrigger>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n        <InputGroup>\n          <InputGroupTextarea placeholder=\"Ask, Search or Chat...\" />\n          <InputGroupAddon align=\"block-end\">\n            <InputGroupButton\n              variant=\"outline\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n              aria-label=\"Add\"\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n            </InputGroupButton>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <InputGroupButton variant=\"ghost\">Auto</InputGroupButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                side=\"top\"\n                align=\"start\"\n                className=\"[--radius:0.95rem]\"\n              >\n                <DropdownMenuItem>Auto</DropdownMenuItem>\n                <DropdownMenuItem>Agent</DropdownMenuItem>\n                <DropdownMenuItem>Manual</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n            <InputGroupText className=\"ml-auto\">52% used</InputGroupText>\n            <Separator orientation=\"vertical\" className=\"!h-4\" />\n            <InputGroupButton\n              variant=\"default\"\n              className=\"style-lyra:rounded-none rounded-full\"\n              size=\"icon-xs\"\n            >\n              <IconPlaceholder\n                lucide=\"ArrowUpIcon\"\n                tabler=\"IconArrowUp\"\n                hugeicons=\"ArrowUp01Icon\"\n                phosphor=\"ArrowUpIcon\"\n                remixicon=\"RiArrowUpLine\"\n              />\n              <span className=\"sr-only\">Send</span>\n            </InputGroupButton>\n          </InputGroupAddon>\n        </InputGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyAvatarGroup() {\n  return (\n    <Example title=\"Empty\">\n      <Empty className=\"h-full flex-none border\">\n        <EmptyHeader>\n          <EmptyMedia>\n            <AvatarGroup className=\"grayscale\">\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/shadcn.png\"\n                  alt=\"@shadcn\"\n                />\n                <AvatarFallback>CN</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/maxleiter.png\"\n                  alt=\"@maxleiter\"\n                />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n              <Avatar size=\"lg\">\n                <AvatarImage\n                  src=\"https://github.com/evilrabbit.png\"\n                  alt=\"@evilrabbit\"\n                />\n                <AvatarFallback>ER</AvatarFallback>\n              </Avatar>\n            </AvatarGroup>\n          </EmptyMedia>\n          <EmptyTitle>No Team Members</EmptyTitle>\n          <EmptyDescription>\n            Invite your team to collaborate on this project.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button variant=\"outline\">Show Dialog</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent>\n                <AlertDialogHeader>\n                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n                  <AlertDialogDescription>\n                    This action cannot be undone. This will permanently delete\n                    your account and remove your data from our servers.\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Cancel</AlertDialogCancel>\n                  <AlertDialogAction>Continue</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n            <AlertDialog>\n              <AlertDialogTrigger asChild>\n                <Button>Connect Mouse</Button>\n              </AlertDialogTrigger>\n              <AlertDialogContent size=\"sm\">\n                <AlertDialogHeader>\n                  <AlertDialogMedia>\n                    <IconPlaceholder\n                      lucide=\"BluetoothIcon\"\n                      tabler=\"IconBluetooth\"\n                      hugeicons=\"BluetoothIcon\"\n                      phosphor=\"BluetoothIcon\"\n                      remixicon=\"RiBluetoothLine\"\n                    />\n                  </AlertDialogMedia>\n                  <AlertDialogTitle>\n                    Allow accessory to connect?\n                  </AlertDialogTitle>\n                  <AlertDialogDescription>\n                    Do you want to allow the USB accessory to connect to this\n                    device?\n                  </AlertDialogDescription>\n                </AlertDialogHeader>\n                <AlertDialogFooter>\n                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>\n                  <AlertDialogAction>Allow</AlertDialogAction>\n                </AlertDialogFooter>\n              </AlertDialogContent>\n            </AlertDialog>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nfunction FormExample() {\n  return (\n    <Example title=\"Complex Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Payment Method</CardTitle>\n          <CardDescription>\n            All transactions are secure and encrypted\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-card-name-43j\">\n                      Name on Card\n                    </FieldLabel>\n                    <Input\n                      id=\"checkout-7j9-card-name-43j\"\n                      placeholder=\"John Doe\"\n                      required\n                    />\n                  </Field>\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <Field className=\"col-span-2\">\n                      <FieldLabel htmlFor=\"checkout-7j9-card-number-uw1\">\n                        Card Number\n                      </FieldLabel>\n                      <Input\n                        id=\"checkout-7j9-card-number-uw1\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        required\n                      />\n                      <FieldDescription>\n                        Enter your 16-digit number.\n                      </FieldDescription>\n                    </Field>\n                    <Field className=\"col-span-1\">\n                      <FieldLabel htmlFor=\"checkout-7j9-cvv\">CVV</FieldLabel>\n                      <Input id=\"checkout-7j9-cvv\" placeholder=\"123\" required />\n                    </Field>\n                  </div>\n                  <div className=\"grid grid-cols-2 gap-4\">\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-month-ts6\">\n                        Month\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-month-ts6\">\n                          <SelectValue placeholder=\"MM\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"01\">01</SelectItem>\n                            <SelectItem value=\"02\">02</SelectItem>\n                            <SelectItem value=\"03\">03</SelectItem>\n                            <SelectItem value=\"04\">04</SelectItem>\n                            <SelectItem value=\"05\">05</SelectItem>\n                            <SelectItem value=\"06\">06</SelectItem>\n                            <SelectItem value=\"07\">07</SelectItem>\n                            <SelectItem value=\"08\">08</SelectItem>\n                            <SelectItem value=\"09\">09</SelectItem>\n                            <SelectItem value=\"10\">10</SelectItem>\n                            <SelectItem value=\"11\">11</SelectItem>\n                            <SelectItem value=\"12\">12</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                    <Field>\n                      <FieldLabel htmlFor=\"checkout-7j9-exp-year-f59\">\n                        Year\n                      </FieldLabel>\n                      <Select defaultValue=\"\">\n                        <SelectTrigger id=\"checkout-7j9-exp-year-f59\">\n                          <SelectValue placeholder=\"YYYY\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectGroup>\n                            <SelectItem value=\"2024\">2024</SelectItem>\n                            <SelectItem value=\"2025\">2025</SelectItem>\n                            <SelectItem value=\"2026\">2026</SelectItem>\n                            <SelectItem value=\"2027\">2027</SelectItem>\n                            <SelectItem value=\"2028\">2028</SelectItem>\n                            <SelectItem value=\"2029\">2029</SelectItem>\n                          </SelectGroup>\n                        </SelectContent>\n                      </Select>\n                    </Field>\n                  </div>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldLegend>Billing Address</FieldLegend>\n                <FieldDescription>\n                  The billing address associated with your payment.\n                </FieldDescription>\n                <FieldGroup>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox\n                      id=\"checkout-7j9-same-as-shipping-wgm\"\n                      defaultChecked\n                    />\n                    <FieldLabel\n                      htmlFor=\"checkout-7j9-same-as-shipping-wgm\"\n                      className=\"font-normal\"\n                    >\n                      Same as shipping address\n                    </FieldLabel>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <FieldSeparator />\n              <FieldSet>\n                <FieldGroup>\n                  <Field>\n                    <FieldLabel htmlFor=\"checkout-7j9-optional-comments\">\n                      Comments\n                    </FieldLabel>\n                    <Textarea\n                      id=\"checkout-7j9-optional-comments\"\n                      placeholder=\"Add any additional comments\"\n                    />\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nfunction SmallFormExample() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Form\">\n      <Card className=\"w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>User Information</CardTitle>\n          <CardDescription>Please fill in your details below</CardDescription>\n          <CardAction>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <IconPlaceholder\n                    lucide=\"MoreVerticalIcon\"\n                    tabler=\"IconDotsVertical\"\n                    hugeicons=\"MoreVerticalCircle01Icon\"\n                    phosphor=\"DotsThreeVerticalIcon\"\n                    remixicon=\"RiMore2Line\"\n                  />\n                  <span className=\"sr-only\">More options</span>\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                align=\"end\"\n                className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\"\n              >\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>File</DropdownMenuLabel>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileIcon\"\n                      tabler=\"IconFile\"\n                      hugeicons=\"FileIcon\"\n                      phosphor=\"FileIcon\"\n                      remixicon=\"RiFileLine\"\n                    />\n                    New File\n                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FolderIcon\"\n                      tabler=\"IconFolder\"\n                      hugeicons=\"FolderIcon\"\n                      phosphor=\"FolderIcon\"\n                      remixicon=\"RiFolderLine\"\n                    />\n                    New Folder\n                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"FolderOpenIcon\"\n                        tabler=\"IconFolderOpen\"\n                        hugeicons=\"FolderOpenIcon\"\n                        phosphor=\"FolderOpenIcon\"\n                        remixicon=\"RiFolderOpenLine\"\n                      />\n                      Open Recent\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Alpha\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Beta\n                          </DropdownMenuItem>\n                          <DropdownMenuSub>\n                            <DropdownMenuSubTrigger>\n                              <IconPlaceholder\n                                lucide=\"MoreHorizontalIcon\"\n                                tabler=\"IconDots\"\n                                hugeicons=\"MoreHorizontalCircle01Icon\"\n                                phosphor=\"DotsThreeOutlineIcon\"\n                                remixicon=\"RiMoreLine\"\n                              />\n                              More Projects\n                            </DropdownMenuSubTrigger>\n                            <DropdownMenuPortal>\n                              <DropdownMenuSubContent>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Gamma\n                                </DropdownMenuItem>\n                                <DropdownMenuItem>\n                                  <IconPlaceholder\n                                    lucide=\"FileCodeIcon\"\n                                    tabler=\"IconFileCode\"\n                                    hugeicons=\"CodeIcon\"\n                                    phosphor=\"CodeIcon\"\n                                    remixicon=\"RiCodeLine\"\n                                  />\n                                  Project Delta\n                                </DropdownMenuItem>\n                              </DropdownMenuSubContent>\n                            </DropdownMenuPortal>\n                          </DropdownMenuSub>\n                        </DropdownMenuGroup>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuGroup>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FolderSearchIcon\"\n                              tabler=\"IconFolderSearch\"\n                              hugeicons=\"SearchIcon\"\n                              phosphor=\"MagnifyingGlassIcon\"\n                              remixicon=\"RiSearchLine\"\n                            />\n                            Browse...\n                          </DropdownMenuItem>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"SaveIcon\"\n                      tabler=\"IconDeviceFloppy\"\n                      hugeicons=\"FloppyDiskIcon\"\n                      phosphor=\"FloppyDiskIcon\"\n                      remixicon=\"RiSaveLine\"\n                    />\n                    Save\n                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"DownloadIcon\"\n                      tabler=\"IconDownload\"\n                      hugeicons=\"DownloadIcon\"\n                      phosphor=\"DownloadIcon\"\n                      remixicon=\"RiDownloadLine\"\n                    />\n                    Export\n                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuLabel>View</DropdownMenuLabel>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.email}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        email: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"EyeIcon\"\n                      tabler=\"IconEye\"\n                      hugeicons=\"EyeIcon\"\n                      phosphor=\"EyeIcon\"\n                      remixicon=\"RiEyeLine\"\n                    />\n                    Show Sidebar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuCheckboxItem\n                    checked={notifications.sms}\n                    onCheckedChange={(checked) =>\n                      setNotifications({\n                        ...notifications,\n                        sms: checked === true,\n                      })\n                    }\n                  >\n                    <IconPlaceholder\n                      lucide=\"LayoutIcon\"\n                      tabler=\"IconLayout\"\n                      hugeicons=\"LayoutIcon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiLayoutLine\"\n                    />\n                    Show Status Bar\n                  </DropdownMenuCheckboxItem>\n                  <DropdownMenuSub>\n                    <DropdownMenuSubTrigger>\n                      <IconPlaceholder\n                        lucide=\"PaletteIcon\"\n                        tabler=\"IconPalette\"\n                        hugeicons=\"PaintBoardIcon\"\n                        phosphor=\"PaletteIcon\"\n                        remixicon=\"RiPaletteLine\"\n                      />\n                      Theme\n                    </DropdownMenuSubTrigger>\n                    <DropdownMenuPortal>\n                      <DropdownMenuSubContent>\n                        <DropdownMenuGroup>\n                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                          <DropdownMenuRadioGroup\n                            value={theme}\n                            onValueChange={setTheme}\n                          >\n                            <DropdownMenuRadioItem value=\"light\">\n                              <IconPlaceholder\n                                lucide=\"SunIcon\"\n                                tabler=\"IconSun\"\n                                hugeicons=\"SunIcon\"\n                                phosphor=\"SunIcon\"\n                                remixicon=\"RiSunLine\"\n                              />\n                              Light\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"dark\">\n                              <IconPlaceholder\n                                lucide=\"MoonIcon\"\n                                tabler=\"IconMoon\"\n                                hugeicons=\"MoonIcon\"\n                                phosphor=\"MoonIcon\"\n                                remixicon=\"RiMoonLine\"\n                              />\n                              Dark\n                            </DropdownMenuRadioItem>\n                            <DropdownMenuRadioItem value=\"system\">\n                              <IconPlaceholder\n                                lucide=\"MonitorIcon\"\n                                tabler=\"IconDeviceDesktop\"\n                                hugeicons=\"ComputerIcon\"\n                                phosphor=\"MonitorIcon\"\n                                remixicon=\"RiComputerLine\"\n                              />\n                              System\n                            </DropdownMenuRadioItem>\n                          </DropdownMenuRadioGroup>\n                        </DropdownMenuGroup>\n                      </DropdownMenuSubContent>\n                    </DropdownMenuPortal>\n                  </DropdownMenuSub>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"HelpCircleIcon\"\n                      tabler=\"IconHelpCircle\"\n                      hugeicons=\"HelpCircleIcon\"\n                      phosphor=\"QuestionIcon\"\n                      remixicon=\"RiQuestionLine\"\n                    />\n                    Help & Support\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"FileTextIcon\"\n                      tabler=\"IconFileText\"\n                      hugeicons=\"File01Icon\"\n                      phosphor=\"FileTextIcon\"\n                      remixicon=\"RiFileTextLine\"\n                    />\n                    Documentation\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem variant=\"destructive\">\n                    <IconPlaceholder\n                      lucide=\"LogOutIcon\"\n                      tabler=\"IconLogout\"\n                      hugeicons=\"LogoutIcon\"\n                      phosphor=\"SignOutIcon\"\n                      remixicon=\"RiLogoutBoxLine\"\n                    />\n                    Sign Out\n                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <div className=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-name\">Name</FieldLabel>\n                  <Input\n                    id=\"small-form-name\"\n                    placeholder=\"Enter your name\"\n                    required\n                  />\n                </Field>\n                <Field>\n                  <FieldLabel htmlFor=\"small-form-role\">Role</FieldLabel>\n                  <Select defaultValue=\"\">\n                    <SelectTrigger id=\"small-form-role\">\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectGroup>\n                        <SelectItem value=\"developer\">Developer</SelectItem>\n                        <SelectItem value=\"designer\">Designer</SelectItem>\n                        <SelectItem value=\"manager\">Manager</SelectItem>\n                        <SelectItem value=\"other\">Other</SelectItem>\n                      </SelectGroup>\n                    </SelectContent>\n                  </Select>\n                </Field>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-framework\">\n                  Framework\n                </FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"small-form-framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"small-form-comments\">Comments</FieldLabel>\n                <Textarea\n                  id=\"small-form-comments\"\n                  placeholder=\"Add any additional comments\"\n                />\n              </Field>\n              <Field orientation=\"horizontal\">\n                <Button type=\"submit\">Submit</Button>\n                <Button variant=\"outline\" type=\"button\">\n                  Cancel\n                </Button>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Card\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-sm overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FieldSlider() {\n  const [value, setValue] = useState([200, 800])\n  return (\n    <Example title=\"Field Slider\">\n      <div className=\"w-full max-w-md\">\n        <Field>\n          <FieldTitle>Price Range</FieldTitle>\n          <FieldDescription>\n            Set your budget range ($\n            <span className=\"font-medium tabular-nums\">{value[0]}</span> -{\" \"}\n            <span className=\"font-medium tabular-nums\">{value[1]}</span>).\n          </FieldDescription>\n          <Slider\n            value={value}\n            onValueChange={setValue}\n            max={1000}\n            min={0}\n            step={10}\n            className=\"mt-2 w-full\"\n            aria-label=\"Price Range\"\n          />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ItemExample() {\n  return (\n    <Example title=\"Item\">\n      <div className=\"flex w-full max-w-md flex-col gap-6\">\n        <Item variant=\"outline\">\n          <ItemContent>\n            <ItemTitle>Two-factor authentication</ItemTitle>\n            <ItemDescription className=\"text-pretty xl:hidden 2xl:block\">\n              Verify via email or phone number.\n            </ItemDescription>\n          </ItemContent>\n          <ItemActions>\n            <Button size=\"sm\" variant=\"secondary\">\n              Enable\n            </Button>\n          </ItemActions>\n        </Item>\n        <Item variant=\"outline\" size=\"sm\" asChild>\n          <a href=\"#\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"ShoppingBagIcon\"\n                tabler=\"IconShoppingBag\"\n                hugeicons=\"ShoppingBasket01Icon\"\n                phosphor=\"BagIcon\"\n                remixicon=\"RiShoppingBagLine\"\n              />\n            </ItemMedia>\n            <ItemContent>\n              <ItemTitle>Your order has been shipped.</ItemTitle>\n            </ItemContent>\n          </a>\n        </Item>\n      </div>\n    </Example>\n  )\n}\n\nfunction BadgeExamples() {\n  return (\n    <Example title=\"Badge\" className=\"items-center justify-center\">\n      <div className=\"flex items-center justify-center gap-2\">\n        <Badge>\n          <Spinner data-icon=\"inline-start\" />\n          Syncing\n        </Badge>\n        <Badge variant=\"secondary\">\n          <Spinner data-icon=\"inline-start\" />\n          Updating\n        </Badge>\n        <Badge variant=\"outline\">\n          <Spinner data-icon=\"inline-start\" />\n          Loading\n        </Badge>\n        <Badge variant=\"link\" className=\"hidden sm:flex\">\n          <Spinner data-icon=\"inline-start\" />\n          Link\n        </Badge>\n      </div>\n    </Example>\n  )\n}\n\nfunction EmptyWithSpinner() {\n  return (\n    <Example title=\"Empty with Spinner\">\n      <Empty className=\"w-full border\">\n        <EmptyHeader>\n          <EmptyMedia variant=\"icon\">\n            <Spinner />\n          </EmptyMedia>\n          <EmptyTitle>Processing your request</EmptyTitle>\n          <EmptyDescription>\n            Please wait while we process your request. Do not refresh the page.\n          </EmptyDescription>\n        </EmptyHeader>\n        <EmptyContent>\n          <div className=\"flex gap-2\">\n            <Button size=\"sm\">Submit</Button>\n            <Button variant=\"outline\" size=\"sm\">\n              Cancel\n            </Button>\n          </div>\n        </EmptyContent>\n      </Empty>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetExample() {\n  return (\n    <Example title=\"Sheet\">\n      <div className=\"flex gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"secondary\" className=\"flex-1 capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"overflow-y-auto px-4 text-sm\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "path": "registry/radix-vega/blocks/preview/index.tsx",
+      "content": "\"use client\"\n\nimport { ActivateAgentDialog } from \"@/registry/radix-vega/blocks/preview/cards/activate-agent-dialog\"\nimport { AnalyticsCard } from \"@/registry/radix-vega/blocks/preview/cards/analytics-card\"\nimport { AnomalyAlert } from \"@/registry/radix-vega/blocks/preview/cards/anomaly-alert\"\nimport { AssignIssue } from \"@/registry/radix-vega/blocks/preview/cards/assign-issue\"\nimport { BarChartCard } from \"@/registry/radix-vega/blocks/preview/cards/bar-chart-card\"\nimport { BarVisualizerCard } from \"@/registry/radix-vega/blocks/preview/cards/bar-visualizer\"\nimport { BookAppointment } from \"@/registry/radix-vega/blocks/preview/cards/book-appointment\"\nimport { CodespacesCard } from \"@/registry/radix-vega/blocks/preview/cards/codespaces-card\"\nimport { ContributionsActivity } from \"@/registry/radix-vega/blocks/preview/cards/contributions-activity\"\nimport { Contributors } from \"@/registry/radix-vega/blocks/preview/cards/contributors\"\nimport { EnvironmentVariables } from \"@/registry/radix-vega/blocks/preview/cards/environment-variables\"\nimport { FeedbackForm } from \"@/registry/radix-vega/blocks/preview/cards/feedback-form\"\nimport { FileUpload } from \"@/registry/radix-vega/blocks/preview/cards/file-upload\"\nimport { GithubProfile } from \"@/registry/radix-vega/blocks/preview/cards/github-profile\"\nimport { IconPreviewGrid } from \"@/registry/radix-vega/blocks/preview/cards/icon-preview-grid\"\nimport { InviteTeam } from \"@/registry/radix-vega/blocks/preview/cards/invite-team\"\nimport { Invoice } from \"@/registry/radix-vega/blocks/preview/cards/invoice\"\nimport { LiveWaveformCard } from \"@/registry/radix-vega/blocks/preview/cards/live-waveform\"\nimport { NoTeamMembers } from \"@/registry/radix-vega/blocks/preview/cards/no-team-members\"\nimport { NotFound } from \"@/registry/radix-vega/blocks/preview/cards/not-found\"\nimport { ObservabilityCard } from \"@/registry/radix-vega/blocks/preview/cards/observability-card\"\nimport { PieChartCard } from \"@/registry/radix-vega/blocks/preview/cards/pie-chart-card\"\nimport { ReportBug } from \"@/registry/radix-vega/blocks/preview/cards/report-bug\"\nimport { ShippingAddress } from \"@/registry/radix-vega/blocks/preview/cards/shipping-address\"\nimport { Shortcuts } from \"@/registry/radix-vega/blocks/preview/cards/shortcuts\"\nimport { SkeletonLoading } from \"@/registry/radix-vega/blocks/preview/cards/skeleton-loading\"\nimport { SleepReport } from \"@/registry/radix-vega/blocks/preview/cards/sleep-report\"\nimport { StyleOverview } from \"@/registry/radix-vega/blocks/preview/cards/style-overview\"\nimport { UIElements } from \"@/registry/radix-vega/blocks/preview/cards/ui-elements\"\nimport { UsageCard } from \"@/registry/radix-vega/blocks/preview/cards/usage-card\"\nimport { Visitors } from \"@/registry/radix-vega/blocks/preview/cards/visitors\"\nimport { WeeklyFitnessSummary } from \"@/registry/radix-vega/blocks/preview/cards/weekly-fitness-summary\"\n\nexport default function PreviewExample() {\n  return (\n    <div className=\"overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]\">\n      <div\n        className=\"grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)\"\n        data-slot=\"capture-target\"\n      >\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <StyleOverview />\n          <div className=\"md:hidden\">\n            <UIElements />\n          </div>\n          <CodespacesCard />\n          <BarVisualizerCard />\n          <Invoice />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <IconPreviewGrid />\n          <div className=\"hidden w-full md:flex\">\n            <UIElements />\n          </div>\n          <ObservabilityCard />\n          <Visitors />\n          <Shortcuts />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <EnvironmentVariables />\n          <BarChartCard />\n          <InviteTeam />\n          <ActivateAgentDialog />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <SkeletonLoading />\n          <PieChartCard />\n          <NoTeamMembers />\n          <ReportBug />\n          <Contributors />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <FeedbackForm />\n          <BookAppointment />\n          <SleepReport />\n          <GithubProfile />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AssignIssue />\n          <WeeklyFitnessSummary />\n          <FileUpload />\n          <AnalyticsCard />\n          <UsageCard />\n          <ContributionsActivity />\n        </div>\n        <div className=\"flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]\">\n          <AnomalyAlert />\n          <LiveWaveformCard />\n          <ShippingAddress />\n          <NotFound />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/progress-example.json b/apps/v4/public/r/styles/radix-vega/progress-example.json
index 16e6294cbb..069f7480a3 100644
--- a/apps/v4/public/r/styles/radix-vega/progress-example.json
+++ b/apps/v4/public/r/styles/radix-vega/progress-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/progress-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 { Field, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { Progress } from \"@/registry/radix-vega/ui/progress\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-muted-foreground text-sm\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\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 { Field, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemGroup,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { Progress } from \"@/registry/radix-vega/ui/progress\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ProgressExample() {\n  return (\n    <ExampleWrapper>\n      <ProgressValues />\n      <ProgressWithLabel />\n      <ProgressControlled />\n      <FileUploadList />\n    </ExampleWrapper>\n  )\n}\n\nfunction ProgressValues() {\n  return (\n    <Example title=\"Progress Bar\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={0} />\n        <Progress value={25} className=\"w-full\" />\n        <Progress value={50} />\n        <Progress value={75} />\n        <Progress value={100} />\n      </div>\n    </Example>\n  )\n}\n\nfunction ProgressWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"progress-upload\">\n          <span>Upload progress</span>\n          <span className=\"ml-auto\">66%</span>\n        </FieldLabel>\n        <Progress value={66} className=\"w-full\" id=\"progress-upload\" />\n      </Field>\n    </Example>\n  )\n}\n\nfunction ProgressControlled() {\n  const [value, setValue] = React.useState([50])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"flex w-full flex-col gap-4\">\n        <Progress value={value[0]} className=\"w-full\" />\n        <Slider\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={100}\n          step={1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction FileUploadList() {\n  const files = React.useMemo(\n    () => [\n      {\n        id: \"1\",\n        name: \"document.pdf\",\n        progress: 45,\n        timeRemaining: \"2m 30s\",\n      },\n      {\n        id: \"2\",\n        name: \"presentation.pptx\",\n        progress: 78,\n        timeRemaining: \"45s\",\n      },\n      {\n        id: \"3\",\n        name: \"spreadsheet.xlsx\",\n        progress: 12,\n        timeRemaining: \"5m 12s\",\n      },\n      {\n        id: \"4\",\n        name: \"image.jpg\",\n        progress: 100,\n        timeRemaining: \"Complete\",\n      },\n    ],\n    []\n  )\n\n  return (\n    <Example title=\"File Upload List\">\n      <ItemGroup>\n        {files.map((file) => (\n          <Item key={file.id} size=\"xs\" className=\"px-0\">\n            <ItemMedia variant=\"icon\">\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n                className=\"size-5\"\n              />\n            </ItemMedia>\n            <ItemContent className=\"inline-block truncate\">\n              <ItemTitle className=\"inline\">{file.name}</ItemTitle>\n            </ItemContent>\n            <ItemContent>\n              <Progress value={file.progress} className=\"w-32\" />\n            </ItemContent>\n            <ItemActions className=\"w-16 justify-end\">\n              <span className=\"text-sm text-muted-foreground\">\n                {file.timeRemaining}\n              </span>\n            </ItemActions>\n          </Item>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/progress.json b/apps/v4/public/r/styles/radix-vega/progress.json
index 04296e2cd8..93972071b5 100644
--- a/apps/v4/public/r/styles/radix-vega/progress.json
+++ b/apps/v4/public/r/styles/radix-vega/progress.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/progress.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"bg-muted relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"bg-primary size-full flex-1 transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Progress({\n  className,\n  value,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        \"relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full bg-muted\",\n        className\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className=\"size-full flex-1 bg-primary transition-all\"\n        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  )\n}\n\nexport { Progress }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/radio-group.json b/apps/v4/public/r/styles/radix-vega/radio-group.json
index 1f1138e71e..eab3caa159 100644
--- a/apps/v4/public/r/styles/radix-vega/radio-group.json
+++ b/apps/v4/public/r/styles/radix-vega/radio-group.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/radio-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"bg-primary-foreground absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/registry.json b/apps/v4/public/r/styles/radix-vega/registry.json
index 5a209e7aa6..c1407e926f 100644
--- a/apps/v4/public/r/styles/radix-vega/registry.json
+++ b/apps/v4/public/r/styles/radix-vega/registry.json
@@ -2,6 +2,48 @@
   "name": "shadcn/ui",
   "homepage": "https://ui.shadcn.com",
   "items": [
+    {
+      "name": "index",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
+    {
+      "name": "style",
+      "dependencies": ["class-variance-authority", "lucide-react", "radix-ui"],
+      "devDependencies": ["tw-animate-css", "shadcn"],
+      "registryDependencies": ["utils"],
+      "files": [],
+      "cssVars": {},
+      "css": {
+        "@import \"tw-animate-css\"": {},
+        "@import \"shadcn/tailwind.css\"": {},
+        "@layer base": {
+          "*": {
+            "@apply border-border outline-ring/50": {}
+          },
+          "body": {
+            "@apply bg-background text-foreground": {}
+          }
+        }
+      },
+      "type": "registry:style"
+    },
     {
       "name": "accordion",
       "files": [
@@ -10,6 +52,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/accordion",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/accordion.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -20,6 +69,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -31,6 +86,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -41,6 +103,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -51,6 +120,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/avatar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+          "api": "https://www.radix-ui.com/primitives/docs/components/avatar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -61,6 +137,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/badge",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -71,6 +153,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -81,6 +169,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -92,6 +186,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/button-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -104,6 +204,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/calendar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+          "api": "https://react-day-picker.js.org"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -114,6 +221,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -126,6 +239,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/carousel",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+          "api": "https://www.embla-carousel.com/get-started/react"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -137,6 +257,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/chart",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -147,6 +273,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/checkbox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/checkbox.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -157,6 +290,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/collapsible",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/collapsible.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -169,6 +309,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/combobox",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+          "api": "https://base-ui.com/react/components/combobox"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -181,6 +328,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/command",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+          "api": "https://github.com/dip/cmdk"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -191,6 +345,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/context-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/context-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -202,6 +363,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dialog",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -213,6 +381,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/drawer",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+          "api": "https://vaul.emilkowal.ski/getting-started"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -223,6 +398,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -233,6 +415,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/empty",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -244,6 +432,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/field",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -258,6 +452,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/hover-card",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/hover-card.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -268,6 +469,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -279,6 +486,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -290,6 +503,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/input-otp",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+          "api": "https://input-otp.rodz.dev"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -301,6 +521,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/item",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -311,6 +537,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/label",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/label.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -321,6 +554,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/menubar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/menubar.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -331,6 +571,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -342,6 +589,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/pagination",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -352,6 +605,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/popover",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/popover.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -362,6 +622,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/progress",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/progress.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -372,6 +639,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/radio-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/radio-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -383,6 +657,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+          "api": "https://github.com/bvaughn/react-resizable-panels"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -393,6 +674,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -403,6 +691,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -413,6 +708,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -424,6 +726,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -443,6 +752,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -453,6 +768,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -463,6 +784,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -474,6 +802,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+          "api": "https://sonner.emilkowal.ski"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -484,6 +819,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -494,6 +835,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -504,6 +852,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/table",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -514,6 +868,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -524,6 +885,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -534,6 +901,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -545,6 +919,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -555,6 +936,13 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+          "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+        }
+      },
       "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
       "type": "registry:ui"
     },
@@ -566,6 +954,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/kbd",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -576,6 +970,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/native-select",
+          "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -586,6 +986,12 @@
           "type": "registry:ui"
         }
       ],
+      "meta": {
+        "links": {
+          "docs": "https://ui.shadcn.com/docs/components/radix/direction",
+          "api": "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md"
+        }
+      },
       "type": "registry:ui"
     },
     {
@@ -1464,6 +1870,33 @@
       ],
       "type": "registry:example"
     },
+    {
+      "name": "demo",
+      "title": "Demo",
+      "registryDependencies": [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea"
+      ],
+      "files": [
+        {
+          "path": "registry/radix-vega/examples/demo.tsx",
+          "type": "registry:example"
+        }
+      ],
+      "type": "registry:example"
+    },
     {
       "name": "component-example",
       "title": "Example",
@@ -1512,7 +1945,7 @@
     },
     {
       "name": "preview",
-      "title": "Home",
+      "title": "Preview",
       "registryDependencies": [
         "alert-dialog",
         "avatar",
@@ -1543,110 +1976,7 @@
       ],
       "files": [
         {
-          "path": "registry/radix-vega/blocks/preview.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "elevenlabs",
-      "title": "Elevenlabs",
-      "registryDependencies": ["example", "button", "card"],
-      "files": [
-        {
-          "path": "registry/radix-vega/blocks/elevenlabs.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "github",
-      "title": "GitHub",
-      "registryDependencies": [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-vega/blocks/github.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "vercel",
-      "title": "Vercel",
-      "registryDependencies": [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-vega/blocks/vercel.tsx",
-          "type": "registry:block"
-        }
-      ],
-      "type": "registry:block"
-    },
-    {
-      "name": "chatgpt",
-      "title": "ChatGPT",
-      "registryDependencies": [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example"
-      ],
-      "files": [
-        {
-          "path": "registry/radix-vega/blocks/chatgpt.tsx",
+          "path": "registry/radix-vega/blocks/preview/index.tsx",
           "type": "registry:block"
         }
       ],
@@ -2551,7 +2881,7 @@
       "title": "Roboto",
       "type": "registry:font",
       "font": {
-        "family": "'Roboto', sans-serif",
+        "family": "'Roboto Variable', sans-serif",
         "provider": "google",
         "import": "Roboto",
         "variable": "--font-sans",
@@ -2563,7 +2893,7 @@
       "title": "Raleway",
       "type": "registry:font",
       "font": {
-        "family": "'Raleway', sans-serif",
+        "family": "'Raleway Variable', sans-serif",
         "provider": "google",
         "import": "Raleway",
         "variable": "--font-sans",
@@ -2575,7 +2905,7 @@
       "title": "DM Sans",
       "type": "registry:font",
       "font": {
-        "family": "'DM Sans', sans-serif",
+        "family": "'DM Sans Variable', sans-serif",
         "provider": "google",
         "import": "DM_Sans",
         "variable": "--font-sans",
@@ -2587,7 +2917,7 @@
       "title": "Public Sans",
       "type": "registry:font",
       "font": {
-        "family": "'Public Sans', sans-serif",
+        "family": "'Public Sans Variable', sans-serif",
         "provider": "google",
         "import": "Public_Sans",
         "variable": "--font-sans",
@@ -2599,7 +2929,7 @@
       "title": "Outfit",
       "type": "registry:font",
       "font": {
-        "family": "'Outfit', sans-serif",
+        "family": "'Outfit Variable', sans-serif",
         "provider": "google",
         "import": "Outfit",
         "variable": "--font-sans",
@@ -2614,7 +2944,7 @@
         "family": "'JetBrains Mono Variable', monospace",
         "provider": "google",
         "import": "JetBrains_Mono",
-        "variable": "--font-sans",
+        "variable": "--font-mono",
         "subsets": ["latin"]
       }
     },
@@ -2629,6 +2959,66 @@
         "variable": "--font-mono",
         "subsets": ["latin"]
       }
+    },
+    {
+      "name": "font-noto-serif",
+      "title": "Noto Serif",
+      "type": "registry:font",
+      "font": {
+        "family": "'Noto Serif Variable', serif",
+        "provider": "google",
+        "import": "Noto_Serif",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-roboto-slab",
+      "title": "Roboto Slab",
+      "type": "registry:font",
+      "font": {
+        "family": "'Roboto Slab Variable', serif",
+        "provider": "google",
+        "import": "Roboto_Slab",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-merriweather",
+      "title": "Merriweather",
+      "type": "registry:font",
+      "font": {
+        "family": "'Merriweather Variable', serif",
+        "provider": "google",
+        "import": "Merriweather",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-lora",
+      "title": "Lora",
+      "type": "registry:font",
+      "font": {
+        "family": "'Lora Variable', serif",
+        "provider": "google",
+        "import": "Lora",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
+    },
+    {
+      "name": "font-playfair-display",
+      "title": "Playfair Display",
+      "type": "registry:font",
+      "font": {
+        "family": "'Playfair Display Variable', serif",
+        "provider": "google",
+        "import": "Playfair_Display",
+        "variable": "--font-serif",
+        "subsets": ["latin"]
+      }
     }
   ]
 }
diff --git a/apps/v4/public/r/styles/radix-vega/resizable.json b/apps/v4/public/r/styles/radix-vega/resizable.json
index 6d88b3e8ac..68fd300de1 100644
--- a/apps/v4/public/r/styles/radix-vega/resizable.json
+++ b/apps/v4/public/r/styles/radix-vega/resizable.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"bg-border z-10 flex h-6 w-1 shrink-0 rounded-lg\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ResizablePanelGroup({\n  className,\n  ...props\n}: ResizablePrimitive.GroupProps) {\n  return (\n    <ResizablePrimitive.Group\n      data-slot=\"resizable-panel-group\"\n      className={cn(\n        \"flex h-full w-full aria-[orientation=vertical]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n  return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: ResizablePrimitive.SeparatorProps & {\n  withHandle?: boolean\n}) {\n  return (\n    <ResizablePrimitive.Separator\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/resizable",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+      "api": "https://github.com/bvaughn/react-resizable-panels"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/scroll-area-example.json b/apps/v4/public/r/styles/radix-vega/scroll-area-example.json
index e6fb01c0cb..1a3a51d3f9 100644
--- a/apps/v4/public/r/styles/radix-vega/scroll-area-example.json
+++ b/apps/v4/public/r/styles/radix-vega/scroll-area-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/scroll-area-example.tsx",
-      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-vega/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"text-muted-foreground pt-2 text-xs\">\n                Photo by{\" \"}\n                <span className=\"text-foreground font-semibold\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
+      "content": "import * as React from \"react\"\nimport Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { ScrollArea, ScrollBar } from \"@/registry/radix-vega/ui/scroll-area\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nconst works = [\n  {\n    artist: \"Ornella Binni\",\n    art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Tom Byrom\",\n    art: \"https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80\",\n  },\n  {\n    artist: \"Vladimir Malyav\",\n    art: \"https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80\",\n  },\n] as const\n\nexport default function ScrollAreaExample() {\n  return (\n    <ExampleWrapper>\n      <ScrollAreaVertical />\n      <ScrollAreaHorizontal />\n    </ExampleWrapper>\n  )\n}\n\nfunction ScrollAreaVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ScrollArea className=\"mx-auto h-72 w-48 rounded-md border\">\n        <div className=\"p-4\">\n          <h4 className=\"mb-4 text-sm leading-none font-medium\">Tags</h4>\n          {tags.map((tag) => (\n            <React.Fragment key={tag}>\n              <div className=\"text-sm\">{tag}</div>\n              <Separator className=\"my-2\" />\n            </React.Fragment>\n          ))}\n        </div>\n      </ScrollArea>\n    </Example>\n  )\n}\n\nfunction ScrollAreaHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <ScrollArea className=\"mx-auto w-full max-w-96 rounded-md border p-4\">\n        <div className=\"flex gap-4\">\n          {works.map((artwork) => (\n            <figure key={artwork.artist} className=\"shrink-0\">\n              <div className=\"overflow-hidden rounded-md\">\n                <Image\n                  src={artwork.art}\n                  alt={`Photo by ${artwork.artist}`}\n                  className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                  width={300}\n                  height={400}\n                />\n              </div>\n              <figcaption className=\"pt-2 text-xs text-muted-foreground\">\n                Photo by{\" \"}\n                <span className=\"font-semibold text-foreground\">\n                  {artwork.artist}\n                </span>\n              </figcaption>\n            </figure>\n          ))}\n        </div>\n        <ScrollBar orientation=\"horizontal\" />\n      </ScrollArea>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/scroll-area.json b/apps/v4/public/r/styles/radix-vega/scroll-area.json
index 5910113e80..f4a62911d8 100644
--- a/apps/v4/public/r/styles/radix-vega/scroll-area.json
+++ b/apps/v4/public/r/styles/radix-vega/scroll-area.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/scroll-area.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/scroll-area",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/scroll-area.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/select.json b/apps/v4/public/r/styles/radix-vega/select.json
index f4f741a309..4a455fa3e0 100644
--- a/apps/v4/public/r/styles/radix-vega/select.json
+++ b/apps/v4/public/r/styles/radix-vega/select.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"text-muted-foreground pointer-events-none size-4\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\n          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 cn-menu-target 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-md shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[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(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"bg-popover z-10 flex cursor-default items-center justify-center 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        \"bg-popover z-10 flex cursor-default items-center justify-center 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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *: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:bg-input/30 dark:hover:bg-input/50 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        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 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-md 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(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/select",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/select.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/separator-example.json b/apps/v4/public/r/styles/radix-vega/separator-example.json
index 536fe9e56b..4b9aa3f791 100644
--- a/apps/v4/public/r/styles/radix-vega/separator-example.json
+++ b/apps/v4/public/r/styles/radix-vega/separator-example.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/separator-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-muted-foreground text-xs\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-muted-foreground text-xs\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\n\nexport default function SeparatorExample() {\n  return (\n    <ExampleWrapper>\n      <SeparatorHorizontal />\n      <SeparatorVertical />\n      <SeparatorVerticalMenu />\n      <SeparatorInList />\n    </ExampleWrapper>\n  )\n}\n\nfunction SeparatorHorizontal() {\n  return (\n    <Example title=\"Horizontal\">\n      <div className=\"flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <div className=\"leading-none font-medium\">shadcn/ui</div>\n          <div className=\"text-muted-foreground\">\n            The Foundation for your Design System\n          </div>\n        </div>\n        <Separator />\n        <div>\n          A set of beautifully designed components that you can customize,\n          extend, and build on.\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed\">\n        <div>Blog</div>\n        <Separator orientation=\"vertical\" />\n        <div>Docs</div>\n        <Separator orientation=\"vertical\" />\n        <div>Source</div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorVerticalMenu() {\n  return (\n    <Example title=\"Vertical Menu\">\n      <div className=\"flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed\">\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Settings</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Manage preferences\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Account</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Profile & security\n          </span>\n        </div>\n        <Separator orientation=\"vertical\" />\n        <div className=\"flex flex-col gap-1\">\n          <span className=\"font-medium\">Help</span>\n          <span className=\"text-xs text-muted-foreground\">Support & docs</span>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SeparatorInList() {\n  return (\n    <Example title=\"In List\">\n      <div className=\"flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed\">\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 1</dt>\n          <dd className=\"text-muted-foreground\">Value 1</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 2</dt>\n          <dd className=\"text-muted-foreground\">Value 2</dd>\n        </dl>\n        <Separator />\n        <dl className=\"flex items-center justify-between\">\n          <dt>Item 3</dt>\n          <dd className=\"text-muted-foreground\">Value 3</dd>\n        </dl>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/separator.json b/apps/v4/public/r/styles/radix-vega/separator.json
index 7ff2981a23..a876c8a01e 100644
--- a/apps/v4/public/r/styles/radix-vega/separator.json
+++ b/apps/v4/public/r/styles/radix-vega/separator.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Separator({\n  className,\n  orientation = \"horizontal\",\n  decorative = true,\n  ...props\n}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {\n  return (\n    <SeparatorPrimitive.Root\n      data-slot=\"separator\"\n      decorative={decorative}\n      orientation={orientation}\n      className={cn(\n        \"shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/separator",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/separator.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/sheet-example.json b/apps/v4/public/r/styles/radix-vega/sheet-example.json
index d2ccfec81b..a48faa8945 100644
--- a/apps/v4/public/r/styles/radix-vega/sheet-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sheet-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sheet-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-vega/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from \"@/registry/radix-vega/ui/sheet\"\n\nexport default function SheetExample() {\n  return (\n    <ExampleWrapper>\n      <SheetWithForm />\n      <SheetNoCloseButton />\n      <SheetWithSides />\n    </ExampleWrapper>\n  )\n}\n\nfunction SheetWithForm() {\n  return (\n    <Example title=\"With Form\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">Open</Button>\n        </SheetTrigger>\n        <SheetContent>\n          <SheetHeader>\n            <SheetTitle>Edit profile</SheetTitle>\n            <SheetDescription>\n              Make changes to your profile here. Click save when you&apos;re\n              done.\n            </SheetDescription>\n          </SheetHeader>\n          <div className=\"style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-name\">Name</FieldLabel>\n                <Input id=\"sheet-demo-name\" defaultValue=\"Pedro Duarte\" />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"sheet-demo-username\">Username</FieldLabel>\n                <Input id=\"sheet-demo-username\" defaultValue=\"@peduarte\" />\n              </Field>\n            </FieldGroup>\n          </div>\n          <SheetFooter>\n            <Button type=\"submit\">Save changes</Button>\n            <SheetClose asChild>\n              <Button variant=\"outline\">Close</Button>\n            </SheetClose>\n          </SheetFooter>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nfunction SheetNoCloseButton() {\n  return (\n    <Example title=\"No Close Button\">\n      <Sheet>\n        <SheetTrigger asChild>\n          <Button variant=\"outline\">No Close Button</Button>\n        </SheetTrigger>\n        <SheetContent showCloseButton={false}>\n          <SheetHeader>\n            <SheetTitle>No Close Button</SheetTitle>\n            <SheetDescription>\n              This sheet doesn&apos;t have a close button in the top-right\n              corner. You can only close it using the button below.\n            </SheetDescription>\n          </SheetHeader>\n        </SheetContent>\n      </Sheet>\n    </Example>\n  )\n}\n\nconst SHEET_SIDES = [\"top\", \"right\", \"bottom\", \"left\"] as const\n\nfunction SheetWithSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {SHEET_SIDES.map((side) => (\n          <Sheet key={side}>\n            <SheetTrigger asChild>\n              <Button variant=\"outline\" className=\"capitalize\">\n                {side}\n              </Button>\n            </SheetTrigger>\n            <SheetContent\n              side={side}\n              className=\"data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]\"\n            >\n              <SheetHeader>\n                <SheetTitle>Edit profile</SheetTitle>\n                <SheetDescription>\n                  Make changes to your profile here. Click save when you&apos;re\n                  done.\n                </SheetDescription>\n              </SheetHeader>\n              <div className=\"no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6\">\n                {Array.from({ length: 10 }).map((_, index) => (\n                  <p\n                    key={index}\n                    className=\"mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed\"\n                  >\n                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed\n                    do eiusmod tempor incididunt ut labore et dolore magna\n                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation\n                    ullamco laboris nisi ut aliquip ex ea commodo consequat.\n                    Duis aute irure dolor in reprehenderit in voluptate velit\n                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n                    occaecat cupidatat non proident, sunt in culpa qui officia\n                    deserunt mollit anim id est laborum.\n                  </p>\n                ))}\n              </div>\n              <SheetFooter>\n                <Button type=\"submit\">Save changes</Button>\n                <SheetClose asChild>\n                  <Button variant=\"outline\">Cancel</Button>\n                </SheetClose>\n              </SheetFooter>\n            </SheetContent>\n          </Sheet>\n        ))}\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sheet.json b/apps/v4/public/r/styles/radix-vega/sheet.json
index 0eeffd24f8..4380db2e9e 100644
--- a/apps/v4/public/r/styles/radix-vega/sheet.json
+++ b/apps/v4/public/r/styles/radix-vega/sheet.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/sheet.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"bg-background data-open:animate-in data-closed:animate-out data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"text-foreground font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Portal>) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {\n  return (\n    <SheetPrimitive.Overlay\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 duration-100 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" asChild>\n            <Button\n              variant=\"ghost\"\n              className=\"absolute top-4 right-4\"\n              size=\"icon-sm\"\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n              />\n              <span className=\"sr-only\">Close</span>\n            </Button>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sheet",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/dialog.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-01.json b/apps/v4/public/r/styles/radix-vega/sidebar-01.json
index 9c8b542d77..0328f45407 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-01.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-01.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-01/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-01/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-01/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-02.json b/apps/v4/public/r/styles/radix-vega/sidebar-02.json
index d426630668..ac0941c4f6 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-02.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-02.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-02/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-02/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-02/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-vega/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-vega/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-vega/blocks/sidebar-02/components/search-form\"\nimport { VersionSwitcher } from \"@/registry/radix-vega/blocks/sidebar-02/components/version-switcher\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <VersionSwitcher\n          versions={data.versions}\n          defaultVersion={data.versions[0]}\n        />\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent className=\"gap-0\">\n        {/* We create a collapsible SidebarGroup for each parent. */}\n        {data.navMain.map((item) => (\n          <Collapsible\n            key={item.title}\n            title={item.title}\n            defaultOpen\n            className=\"group/collapsible\"\n          >\n            <SidebarGroup>\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {item.title}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {item.items.map((item) => (\n                      <SidebarMenuItem key={item.title}>\n                        <SidebarMenuButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </SidebarGroup>\n          </Collapsible>\n        ))}\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-02/components/version-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function VersionSwitcher({\n  versions,\n  defaultVersion,\n}: {\n  versions: string[]\n  defaultVersion: string\n}) {\n  const [selectedVersion, setSelectedVersion] = React.useState(defaultVersion)\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                <IconPlaceholder\n                  lucide=\"GalleryVerticalEndIcon\"\n                  tabler=\"IconLayoutRows\"\n                  hugeicons=\"LayoutBottomIcon\"\n                  phosphor=\"RowsIcon\"\n                  remixicon=\"RiGalleryLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"flex flex-col gap-0.5 leading-none\">\n                <span className=\"font-medium\">Documentation</span>\n                <span className=\"\">v{selectedVersion}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width)\"\n            align=\"start\"\n          >\n            {versions.map((version) => (\n              <DropdownMenuItem\n                key={version}\n                onSelect={() => setSelectedVersion(version)}\n              >\n                v{version}{\" \"}\n                {version === selectedVersion && (\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto\"\n                  />\n                )}\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-03.json b/apps/v4/public/r/styles/radix-vega/sidebar-03.json
index 5a6eb3c7e7..da9c61d79b 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-03.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-03.json
@@ -10,13 +10,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-03/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-03/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b\">\n          <div className=\"flex items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-03/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub>\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-04.json b/apps/v4/public/r/styles/radix-vega/sidebar-04.json
index f817a0c17b..6fec2d581f 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-04.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-04.json
@@ -11,13 +11,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-04/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-04/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"19rem\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-04/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"floating\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu className=\"gap-2\">\n            {data.navMain.map((item) => (\n              <SidebarMenuItem key={item.title}>\n                <SidebarMenuButton asChild>\n                  <a href={item.url} className=\"font-medium\">\n                    {item.title}\n                  </a>\n                </SidebarMenuButton>\n                {item.items?.length ? (\n                  <SidebarMenuSub className=\"ml-0 border-l-0 px-1.5\">\n                    {item.items.map((item) => (\n                      <SidebarMenuSubItem key={item.title}>\n                        <SidebarMenuSubButton asChild isActive={item.isActive}>\n                          <a href={item.url}>{item.title}</a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                ) : null}\n              </SidebarMenuItem>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-05.json b/apps/v4/public/r/styles/radix-vega/sidebar-05.json
index 6fafb9c20c..75544f87cf 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-05.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-05.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-05/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-05/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-05/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-vega/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { SearchForm } from \"@/registry/radix-vega/blocks/sidebar-05/components/search-form\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarRail,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Community\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Contribution Guide\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n        <SearchForm />\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarMenu>\n            {data.navMain.map((item, index) => (\n              <Collapsible\n                key={item.title}\n                defaultOpen={index === 1}\n                className=\"group/collapsible\"\n              >\n                <SidebarMenuItem>\n                  <CollapsibleTrigger asChild>\n                    <SidebarMenuButton>\n                      {item.title}{\" \"}\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                        className=\"ml-auto group-data-[state=open]/collapsible:hidden\"\n                      />\n                      <IconPlaceholder\n                        lucide=\"MinusIcon\"\n                        tabler=\"IconMinus\"\n                        hugeicons=\"MinusSignIcon\"\n                        phosphor=\"MinusIcon\"\n                        remixicon=\"RiSubtractLine\"\n                        className=\"ml-auto group-data-[state=closed]/collapsible:hidden\"\n                      />\n                    </SidebarMenuButton>\n                  </CollapsibleTrigger>\n                  {item.items?.length ? (\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items.map((item) => (\n                          <SidebarMenuSubItem key={item.title}>\n                            <SidebarMenuSubButton\n                              asChild\n                              isActive={item.isActive}\n                            >\n                              <a href={item.url}>{item.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  ) : null}\n                </SidebarMenuItem>\n              </Collapsible>\n            ))}\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-06.json b/apps/v4/public/r/styles/radix-vega/sidebar-06.json
index 988bf80fef..34098125cd 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-06.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-06.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-06/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-06/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-06/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-vega/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-vega/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-vega/blocks/sidebar-06/components/nav-main\"\nimport { SidebarOptInForm } from \"@/registry/radix-vega/blocks/sidebar-06/components/sidebar-opt-in-form\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  navMain: [\n    {\n      title: \"Getting Started\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Installation\",\n          url: \"#\",\n        },\n        {\n          title: \"Project Structure\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Build Your Application\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Routing\",\n          url: \"#\",\n        },\n        {\n          title: \"Data Fetching\",\n          url: \"#\",\n          isActive: true,\n        },\n        {\n          title: \"Rendering\",\n          url: \"#\",\n        },\n        {\n          title: \"Caching\",\n          url: \"#\",\n        },\n        {\n          title: \"Styling\",\n          url: \"#\",\n        },\n        {\n          title: \"Optimizing\",\n          url: \"#\",\n        },\n        {\n          title: \"Configuring\",\n          url: \"#\",\n        },\n        {\n          title: \"Testing\",\n          url: \"#\",\n        },\n        {\n          title: \"Authentication\",\n          url: \"#\",\n        },\n        {\n          title: \"Deploying\",\n          url: \"#\",\n        },\n        {\n          title: \"Upgrading\",\n          url: \"#\",\n        },\n        {\n          title: \"Examples\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"API Reference\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Components\",\n          url: \"#\",\n        },\n        {\n          title: \"File Conventions\",\n          url: \"#\",\n        },\n        {\n          title: \"Functions\",\n          url: \"#\",\n        },\n        {\n          title: \"next.config.js Options\",\n          url: \"#\",\n        },\n        {\n          title: \"CLI\",\n          url: \"#\",\n        },\n        {\n          title: \"Edge Runtime\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Architecture\",\n      url: \"#\",\n      items: [\n        {\n          title: \"Accessibility\",\n          url: \"#\",\n        },\n        {\n          title: \"Fast Refresh\",\n          url: \"#\",\n        },\n        {\n          title: \"Next.js Compiler\",\n          url: \"#\",\n        },\n        {\n          title: \"Supported Browsers\",\n          url: \"#\",\n        },\n        {\n          title: \"Turbopack\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"GalleryVerticalEndIcon\"\n                    tabler=\"IconLayoutRows\"\n                    hugeicons=\"LayoutBottomIcon\"\n                    phosphor=\"RowsIcon\"\n                    remixicon=\"RiGalleryLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"flex flex-col gap-0.5 leading-none\">\n                  <span className=\"font-medium\">Documentation</span>\n                  <span className=\"\">v1.0.0</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n      </SidebarContent>\n      <SidebarFooter>\n        <div className=\"p-1\">\n          <SidebarOptInForm />\n        </div>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -29,7 +29,7 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
-      "content": "import { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-vega/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "import { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { SidebarInput } from \"@/registry/radix-vega/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n  return (\n    <Card className=\"gap-2 py-4 shadow-none\">\n      <CardHeader className=\"px-4\">\n        <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n        <CardDescription>\n          Opt-in to receive updates and news about the sidebar.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"px-4\">\n        <form>\n          <div className=\"grid gap-2.5\">\n            <SidebarInput type=\"email\" placeholder=\"Email\" />\n            <Button className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none\">\n              Subscribe\n            </Button>\n          </div>\n        </form>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-07.json b/apps/v4/public/r/styles/radix-vega/sidebar-07.json
index 19c2f95637..1146298d73 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-07.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-07.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-07/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-07/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -40,7 +40,7 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-07/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const { isMobile } = useSidebar()\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-medium\">{activeTeam.name}</span>\n                <span className=\"truncate text-xs\">{activeTeam.plan}</span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-08.json b/apps/v4/public/r/styles/radix-vega/sidebar-08.json
index d86c4b71bf..2bb8cda7e2 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-08.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-08.json
@@ -14,13 +14,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-08/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-08/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem className=\"hidden md:block\">\n                  <BreadcrumbLink href=\"#\">\n                    Build Your Application\n                  </BreadcrumbLink>\n                </BreadcrumbItem>\n                <BreadcrumbSeparator className=\"hidden md:block\" />\n                <BreadcrumbItem>\n                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-08/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-vega/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-vega/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-vega/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-vega/blocks/sidebar-08/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-vega/blocks/sidebar-08/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-vega/blocks/sidebar-08/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-08/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar variant=\"inset\" {...props}>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-09.json b/apps/v4/public/r/styles/radix-vega/sidebar-09.json
index bb7017b3ad..05571b0d50 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-09.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-09.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-09/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-muted/50 aspect-video h-12 w-full rounded-lg\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-09/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider\n      style={\n        {\n          \"--sidebar-width\": \"350px\",\n        } as React.CSSProperties\n      }\n    >\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">All Inboxes</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Inbox</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          {Array.from({ length: 24 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n            />\n          ))}\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-09/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-foreground text-base font-medium\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-09/components/nav-user\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarHeader,\n  SidebarInput,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Inbox\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"InboxIcon\"\n          tabler=\"IconInbox\"\n          hugeicons=\"InboxIcon\"\n          phosphor=\"TrayIcon\"\n          remixicon=\"RiInboxLine\"\n        />\n      ),\n      isActive: true,\n    },\n    {\n      title: \"Drafts\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileIcon\"\n          tabler=\"IconFile\"\n          hugeicons=\"FileIcon\"\n          phosphor=\"FileIcon\"\n          remixicon=\"RiFileLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Sent\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Junk\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArchiveXIcon\"\n          tabler=\"IconArchiveOff\"\n          hugeicons=\"ArchiveIcon\"\n          phosphor=\"ArchiveIcon\"\n          remixicon=\"RiArchiveLine\"\n        />\n      ),\n      isActive: false,\n    },\n    {\n      title: \"Trash\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n      isActive: false,\n    },\n  ],\n  mails: [\n    {\n      name: \"William Smith\",\n      email: \"williamsmith@example.com\",\n      subject: \"Meeting Tomorrow\",\n      date: \"09:34 AM\",\n      teaser:\n        \"Hi team, just a reminder about our meeting tomorrow at 10 AM.\\nPlease come prepared with your project updates.\",\n    },\n    {\n      name: \"Alice Smith\",\n      email: \"alicesmith@example.com\",\n      subject: \"Re: Project Update\",\n      date: \"Yesterday\",\n      teaser:\n        \"Thanks for the update. The progress looks great so far.\\nLet's schedule a call to discuss the next steps.\",\n    },\n    {\n      name: \"Bob Johnson\",\n      email: \"bobjohnson@example.com\",\n      subject: \"Weekend Plans\",\n      date: \"2 days ago\",\n      teaser:\n        \"Hey everyone! I'm thinking of organizing a team outing this weekend.\\nWould you be interested in a hiking trip or a beach day?\",\n    },\n    {\n      name: \"Emily Davis\",\n      email: \"emilydavis@example.com\",\n      subject: \"Re: Question about Budget\",\n      date: \"2 days ago\",\n      teaser:\n        \"I've reviewed the budget numbers you sent over.\\nCan we set up a quick call to discuss some potential adjustments?\",\n    },\n    {\n      name: \"Michael Wilson\",\n      email: \"michaelwilson@example.com\",\n      subject: \"Important Announcement\",\n      date: \"1 week ago\",\n      teaser:\n        \"Please join us for an all-hands meeting this Friday at 3 PM.\\nWe have some exciting news to share about the company's future.\",\n    },\n    {\n      name: \"Sarah Brown\",\n      email: \"sarahbrown@example.com\",\n      subject: \"Re: Feedback on Proposal\",\n      date: \"1 week ago\",\n      teaser:\n        \"Thank you for sending over the proposal. I've reviewed it and have some thoughts.\\nCould we schedule a meeting to discuss my feedback in detail?\",\n    },\n    {\n      name: \"David Lee\",\n      email: \"davidlee@example.com\",\n      subject: \"New Project Idea\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've been brainstorming and came up with an interesting project concept.\\nDo you have time this week to discuss its potential impact and feasibility?\",\n    },\n    {\n      name: \"Olivia Wilson\",\n      email: \"oliviawilson@example.com\",\n      subject: \"Vacation Plans\",\n      date: \"1 week ago\",\n      teaser:\n        \"Just a heads up that I'll be taking a two-week vacation next month.\\nI'll make sure all my projects are up to date before I leave.\",\n    },\n    {\n      name: \"James Martin\",\n      email: \"jamesmartin@example.com\",\n      subject: \"Re: Conference Registration\",\n      date: \"1 week ago\",\n      teaser:\n        \"I've completed the registration for the upcoming tech conference.\\nLet me know if you need any additional information from my end.\",\n    },\n    {\n      name: \"Sophia White\",\n      email: \"sophiawhite@example.com\",\n      subject: \"Team Dinner\",\n      date: \"1 week ago\",\n      teaser:\n        \"To celebrate our recent project success, I'd like to organize a team dinner.\\nAre you available next Friday evening? Please let me know your preferences.\",\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  // Note: I'm using state to show active item.\n  // IRL you should use the url/router.\n  const [activeItem, setActiveItem] = React.useState(data.navMain[0])\n  const [mails, setMails] = React.useState(data.mails)\n  const { setOpen } = useSidebar()\n\n  return (\n    <Sidebar\n      collapsible=\"icon\"\n      className=\"overflow-hidden *:data-[sidebar=sidebar]:flex-row\"\n      {...props}\n    >\n      {/* This is the first sidebar */}\n      {/* We disable collapsible and adjust width to icon. */}\n      {/* This will make the sidebar appear as icons. */}\n      <Sidebar\n        collapsible=\"none\"\n        className=\"w-[calc(var(--sidebar-width-icon)+1px)]! border-r\"\n      >\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild className=\"md:h-8 md:p-0\">\n                <a href=\"#\">\n                  <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconCommand\"\n                      hugeicons=\"CommandIcon\"\n                      phosphor=\"CommandIcon\"\n                      remixicon=\"RiCommandLine\"\n                      className=\"size-4\"\n                    />\n                  </div>\n                  <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span className=\"truncate font-medium\">Acme Inc</span>\n                    <span className=\"truncate text-xs\">Enterprise</span>\n                  </div>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupContent className=\"px-1.5 md:px-0\">\n              <SidebarMenu>\n                {data.navMain.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton\n                      tooltip={{\n                        children: item.title,\n                        hidden: false,\n                      }}\n                      onClick={() => {\n                        setActiveItem(item)\n                        const mail = data.mails.sort(() => Math.random() - 0.5)\n                        setMails(\n                          mail.slice(\n                            0,\n                            Math.max(5, Math.floor(Math.random() * 10) + 1)\n                          )\n                        )\n                        setOpen(true)\n                      }}\n                      isActive={activeItem?.title === item.title}\n                      className=\"px-2.5 md:px-2\"\n                    >\n                      {item.icon}\n                      <span>{item.title}</span>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <NavUser user={data.user} />\n        </SidebarFooter>\n      </Sidebar>\n\n      {/* This is the second sidebar */}\n      {/* We disable collapsible and let it fill remaining space */}\n      <Sidebar collapsible=\"none\" className=\"hidden flex-1 md:flex\">\n        <SidebarHeader className=\"gap-3.5 border-b p-4\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-base font-medium text-foreground\">\n              {activeItem?.title}\n            </div>\n            <Label className=\"flex items-center gap-2 text-sm\">\n              <span>Unreads</span>\n              <Switch className=\"shadow-none\" />\n            </Label>\n          </div>\n          <SidebarInput placeholder=\"Type to search...\" />\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup className=\"px-0\">\n            <SidebarGroupContent>\n              {mails.map((mail) => (\n                <a\n                  href=\"#\"\n                  key={mail.email}\n                  className=\"flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n                >\n                  <div className=\"flex w-full items-center gap-2\">\n                    <span>{mail.name}</span>{\" \"}\n                    <span className=\"ml-auto text-xs\">{mail.date}</span>\n                  </div>\n                  <span className=\"font-medium\">{mail.subject}</span>\n                  <span className=\"line-clamp-2 w-[260px] text-xs whitespace-break-spaces\">\n                    {mail.teaser}\n                  </span>\n                </a>\n              ))}\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n      </Sidebar>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-10.json b/apps/v4/public/r/styles/radix-vega/sidebar-10.json
index 502d3cce67..b83dcc3fa7 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-10.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-10.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-10/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-vega/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-10/components/app-sidebar\"\nimport { NavActions } from \"@/registry/radix-vega/blocks/sidebar-10/components/nav-actions\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n          <div className=\"ml-auto px-3\">\n            <NavActions />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 px-4 py-10\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
@@ -25,7 +25,7 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-10/components/nav-actions.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"text-muted-foreground hidden font-medium md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"data-[state=open]:bg-accent h-7 w-7\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n  [\n    {\n      label: \"Customize Page\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n    {\n      label: \"Turn into wiki\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FileTextIcon\"\n          tabler=\"IconFileText\"\n          hugeicons=\"File01Icon\"\n          phosphor=\"FileTextIcon\"\n          remixicon=\"RiFileTextLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Copy Link\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      label: \"Duplicate\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CopyIcon\"\n          tabler=\"IconCopy\"\n          hugeicons=\"Copy01Icon\"\n          phosphor=\"CopyIcon\"\n          remixicon=\"RiFileCopyLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpRightIcon\"\n          tabler=\"IconCornerUpRight\"\n          hugeicons=\"RedoIcon\"\n          phosphor=\"ArrowBendUpRightIcon\"\n          remixicon=\"RiCornerUpRightLine\"\n        />\n      ),\n    },\n    {\n      label: \"Move to Trash\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Trash2Icon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"Delete02Icon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Undo\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CornerUpLeftIcon\"\n          tabler=\"IconCornerUpLeft\"\n          hugeicons=\"UndoIcon\"\n          phosphor=\"ArrowBendUpLeftIcon\"\n          remixicon=\"RiCornerUpLeftLine\"\n        />\n      ),\n    },\n    {\n      label: \"View analytics\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ChartLineIcon\"\n          tabler=\"IconChartLine\"\n          hugeicons=\"ChartIcon\"\n          phosphor=\"ChartLineIcon\"\n          remixicon=\"RiLineChartLine\"\n        />\n      ),\n    },\n    {\n      label: \"Version History\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GalleryVerticalEndIcon\"\n          tabler=\"IconLayoutRows\"\n          hugeicons=\"LayoutBottomIcon\"\n          phosphor=\"RowsIcon\"\n          remixicon=\"RiGalleryLine\"\n        />\n      ),\n    },\n    {\n      label: \"Show delete pages\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TrashIcon\"\n          tabler=\"IconTrash\"\n          hugeicons=\"DeleteIcon\"\n          phosphor=\"TrashIcon\"\n          remixicon=\"RiDeleteBinLine\"\n        />\n      ),\n    },\n    {\n      label: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n  ],\n  [\n    {\n      label: \"Import\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowUpIcon\"\n          tabler=\"IconArrowUp\"\n          hugeicons=\"ArrowUpIcon\"\n          phosphor=\"ArrowUpIcon\"\n          remixicon=\"RiArrowUpLine\"\n        />\n      ),\n    },\n    {\n      label: \"Export\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"ArrowDownIcon\"\n          tabler=\"IconArrowDown\"\n          hugeicons=\"ArrowDownIcon\"\n          phosphor=\"ArrowDownIcon\"\n          remixicon=\"RiArrowDownLine\"\n        />\n      ),\n    },\n  ],\n]\n\nexport function NavActions() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  React.useEffect(() => {\n    setIsOpen(true)\n  }, [])\n\n  return (\n    <div className=\"flex items-center gap-2 text-sm\">\n      <div className=\"hidden font-medium text-muted-foreground md:inline-block\">\n        Edit Oct 08\n      </div>\n      <Button variant=\"ghost\" size=\"icon\" className=\"h-7 w-7\">\n        <IconPlaceholder\n          lucide=\"StarIcon\"\n          tabler=\"IconStar\"\n          hugeicons=\"StarIcon\"\n          phosphor=\"StarIcon\"\n          remixicon=\"RiStarLine\"\n        />\n      </Button>\n      <Popover open={isOpen} onOpenChange={setIsOpen}>\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"h-7 w-7 data-[state=open]:bg-accent\"\n          >\n            <IconPlaceholder\n              lucide=\"MoreHorizontalIcon\"\n              tabler=\"IconDots\"\n              hugeicons=\"MoreHorizontalCircle01Icon\"\n              phosphor=\"DotsThreeOutlineIcon\"\n              remixicon=\"RiMoreLine\"\n            />\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent\n          className=\"w-56 overflow-hidden rounded-lg p-0\"\n          align=\"end\"\n        >\n          <Sidebar collapsible=\"none\" className=\"bg-transparent\">\n            <SidebarContent>\n              {data.map((group, index) => (\n                <SidebarGroup key={index} className=\"border-b last:border-none\">\n                  <SidebarGroupContent className=\"gap-0\">\n                    <SidebarMenu>\n                      {group.map((item, index) => (\n                        <SidebarMenuItem key={index}>\n                          <SidebarMenuButton>\n                            {item.icon} <span>{item.label}</span>\n                          </SidebarMenuButton>\n                        </SidebarMenuItem>\n                      ))}\n                    </SidebarMenu>\n                  </SidebarGroupContent>\n                </SidebarGroup>\n              ))}\n            </SidebarContent>\n          </Sidebar>\n        </PopoverContent>\n      </Popover>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -45,12 +45,12 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-10/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-10/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-11.json b/apps/v4/public/r/styles/radix-vega/sidebar-11.json
index db07203230..050468b123 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-11.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-11.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-11/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-11/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">components</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">ui</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>button.tsx</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-12.json b/apps/v4/public/r/styles/radix-vega/sidebar-12.json
index 5e5bc4152f..89f7b51c60 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-12.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-12.json
@@ -15,18 +15,18 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-12/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"bg-muted/50 aspect-square rounded-xl\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-12/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <AppSidebar />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n          <Separator\n            orientation=\"vertical\"\n            className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n          />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem>\n                <BreadcrumbPage>October 2024</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-5\">\n            {Array.from({ length: 20 }).map((_, i) => (\n              <div key={i} className=\"aspect-square rounded-xl bg-muted/50\" />\n            ))}\n          </div>\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-12/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-vega/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-vega/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-vega/blocks/sidebar-12/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-vega/blocks/sidebar-12/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-12/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar {...props}>\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-12/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-13.json b/apps/v4/public/r/styles/radix-vega/sidebar-13.json
index 71b6b37a2f..e2cec5b9c8 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-13.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-13.json
@@ -18,7 +18,7 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-13/components/settings-dialog.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"bg-muted/50 aspect-video max-w-3xl rounded-xl\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  nav: [\n    {\n      name: \"Notifications\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BellIcon\"\n          tabler=\"IconBell\"\n          hugeicons=\"NotificationIcon\"\n          phosphor=\"BellIcon\"\n          remixicon=\"RiNotificationLine\"\n        />\n      ),\n    },\n    {\n      name: \"Navigation\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MenuIcon\"\n          tabler=\"IconMenu\"\n          hugeicons=\"Menu09Icon\"\n          phosphor=\"ListIcon\"\n          remixicon=\"RiMenuLine\"\n        />\n      ),\n    },\n    {\n      name: \"Home\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"HomeIcon\"\n          tabler=\"IconHome\"\n          hugeicons=\"HomeIcon\"\n          phosphor=\"HouseIcon\"\n          remixicon=\"RiHomeLine\"\n        />\n      ),\n    },\n    {\n      name: \"Appearance\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PaintbrushIcon\"\n          tabler=\"IconPalette\"\n          hugeicons=\"PaintBoardIcon\"\n          phosphor=\"PaletteIcon\"\n          remixicon=\"RiPaletteLine\"\n        />\n      ),\n    },\n    {\n      name: \"Messages & media\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MessageCircleIcon\"\n          tabler=\"IconMessageQuestion\"\n          hugeicons=\"MessageIcon\"\n          phosphor=\"ChatCircleIcon\"\n          remixicon=\"RiChat1Line\"\n        />\n      ),\n    },\n    {\n      name: \"Language & region\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"GlobeIcon\"\n          tabler=\"IconWorld\"\n          hugeicons=\"Globe02Icon\"\n          phosphor=\"GlobeIcon\"\n          remixicon=\"RiGlobalLine\"\n        />\n      ),\n    },\n    {\n      name: \"Accessibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"KeyboardIcon\"\n          tabler=\"IconKeyboard\"\n          hugeicons=\"KeyboardIcon\"\n          phosphor=\"KeyboardIcon\"\n          remixicon=\"RiKeyboardLine\"\n        />\n      ),\n    },\n    {\n      name: \"Mark as read\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n        />\n      ),\n    },\n    {\n      name: \"Audio & video\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"VideoIcon\"\n          tabler=\"IconVideoPlus\"\n          hugeicons=\"RecordIcon\"\n          phosphor=\"VideoIcon\"\n          remixicon=\"RiVideoLine\"\n        />\n      ),\n    },\n    {\n      name: \"Connected accounts\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LinkIcon\"\n          tabler=\"IconLink\"\n          hugeicons=\"LinkIcon\"\n          phosphor=\"LinkIcon\"\n          remixicon=\"RiLinksLine\"\n        />\n      ),\n    },\n    {\n      name: \"Privacy & visibility\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LockIcon\"\n          tabler=\"IconLock\"\n          hugeicons=\"ShieldIcon\"\n          phosphor=\"LockIcon\"\n          remixicon=\"RiLockLine\"\n        />\n      ),\n    },\n    {\n      name: \"Advanced\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SettingsIcon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"SettingsIcon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function SettingsDialog() {\n  const [open, setOpen] = React.useState(true)\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <DialogTrigger asChild>\n        <Button size=\"sm\">Open Dialog</Button>\n      </DialogTrigger>\n      <DialogContent className=\"overflow-hidden p-0 md:max-h-[500px] md:max-w-[700px] lg:max-w-[800px]\">\n        <DialogTitle className=\"sr-only\">Settings</DialogTitle>\n        <DialogDescription className=\"sr-only\">\n          Customize your settings here.\n        </DialogDescription>\n        <SidebarProvider className=\"items-start\">\n          <Sidebar collapsible=\"none\" className=\"hidden md:flex\">\n            <SidebarContent>\n              <SidebarGroup>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {data.nav.map((item) => (\n                      <SidebarMenuItem key={item.name}>\n                        <SidebarMenuButton\n                          asChild\n                          isActive={item.name === \"Messages & media\"}\n                        >\n                          <a href=\"#\">\n                            {item.icon}\n                            <span>{item.name}</span>\n                          </a>\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </SidebarGroup>\n            </SidebarContent>\n          </Sidebar>\n          <main className=\"flex h-[480px] flex-1 flex-col overflow-hidden\">\n            <header className=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n              <div className=\"flex items-center gap-2 px-4\">\n                <Breadcrumb>\n                  <BreadcrumbList>\n                    <BreadcrumbItem className=\"hidden md:block\">\n                      <BreadcrumbLink href=\"#\">Settings</BreadcrumbLink>\n                    </BreadcrumbItem>\n                    <BreadcrumbSeparator className=\"hidden md:block\" />\n                    <BreadcrumbItem>\n                      <BreadcrumbPage>Messages & media</BreadcrumbPage>\n                    </BreadcrumbItem>\n                  </BreadcrumbList>\n                </Breadcrumb>\n              </div>\n            </header>\n            <div className=\"flex flex-1 flex-col gap-4 overflow-y-auto p-4 pt-0\">\n              {Array.from({ length: 10 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"aspect-video max-w-3xl rounded-xl bg-muted/50\"\n                />\n              ))}\n            </div>\n          </main>\n        </SidebarProvider>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-14.json b/apps/v4/public/r/styles/radix-vega/sidebar-14.json
index 6820bdd078..8eb1bdf652 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-14.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-14.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-14/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-14/components/app-sidebar\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem className=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator className=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n          <SidebarTrigger className=\"-mr-1 ml-auto rotate-180\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n      <AppSidebar side=\"right\" />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-15.json b/apps/v4/public/r/styles/radix-vega/sidebar-15.json
index af97f20fec..906dc368c9 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-15.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-15.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-15/page.tsx",
-      "content": "import { SidebarLeft } from \"@/registry/radix-vega/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-vega/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl\" />\n          <div className=\"bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
+      "content": "import { SidebarLeft } from \"@/registry/radix-vega/blocks/sidebar-15/components/sidebar-left\"\nimport { SidebarRight } from \"@/registry/radix-vega/blocks/sidebar-15/components/sidebar-right\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbList,\n  BreadcrumbPage,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\n\nexport default function Page() {\n  return (\n    <SidebarProvider>\n      <SidebarLeft />\n      <SidebarInset>\n        <header className=\"sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background\">\n          <div className=\"flex flex-1 items-center gap-2 px-3\">\n            <SidebarTrigger />\n            <Separator\n              orientation=\"vertical\"\n              className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n            />\n            <Breadcrumb>\n              <BreadcrumbList>\n                <BreadcrumbItem>\n                  <BreadcrumbPage className=\"line-clamp-1\">\n                    Project Management & Task Tracking\n                  </BreadcrumbPage>\n                </BreadcrumbItem>\n              </BreadcrumbList>\n            </Breadcrumb>\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50\" />\n          <div className=\"mx-auto h-screen w-full max-w-3xl rounded-xl bg-muted/50\" />\n        </div>\n      </SidebarInset>\n      <SidebarRight />\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-15/components/calendars.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarSeparator,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Calendars({\n  calendars,\n}: {\n  calendars: {\n    name: string\n    items: string[]\n  }[]\n}) {\n  return (\n    <>\n      {calendars.map((calendar, index) => (\n        <React.Fragment key={calendar.name}>\n          <SidebarGroup key={calendar.name}>\n            <Collapsible\n              defaultOpen={index === 0}\n              className=\"group/collapsible\"\n            >\n              <SidebarGroupLabel\n                asChild\n                className=\"group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n              >\n                <CollapsibleTrigger>\n                  {calendar.name}{\" \"}\n                  <IconPlaceholder\n                    lucide=\"ChevronRightIcon\"\n                    tabler=\"IconChevronRight\"\n                    hugeicons=\"ArrowRight01Icon\"\n                    phosphor=\"CaretRightIcon\"\n                    remixicon=\"RiArrowRightSLine\"\n                    className=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\"\n                  />\n                </CollapsibleTrigger>\n              </SidebarGroupLabel>\n              <CollapsibleContent>\n                <SidebarGroupContent>\n                  <SidebarMenu>\n                    {calendar.items.map((item, index) => (\n                      <SidebarMenuItem key={item}>\n                        <SidebarMenuButton>\n                          <div\n                            data-active={index < 2}\n                            className=\"group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary\"\n                          >\n                            <IconPlaceholder\n                              lucide=\"CheckIcon\"\n                              tabler=\"IconCheck\"\n                              hugeicons=\"Tick02Icon\"\n                              phosphor=\"CheckIcon\"\n                              remixicon=\"RiCheckLine\"\n                              className=\"hidden size-3 group-data-[active=true]/calendar-item:block\"\n                            />\n                          </div>\n                          {item}\n                        </SidebarMenuButton>\n                      </SidebarMenuItem>\n                    ))}\n                  </SidebarMenu>\n                </SidebarGroupContent>\n              </CollapsibleContent>\n            </Collapsible>\n          </SidebarGroup>\n          <SidebarSeparator className=\"mx-0\" />\n        </React.Fragment>\n      ))}\n    </>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-15/components/nav-workspaces.tsx",
-      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavWorkspaces({\n  workspaces,\n}: {\n  workspaces: {\n    name: string\n    emoji: React.ReactNode\n    pages: {\n      name: string\n      emoji: React.ReactNode\n    }[]\n  }[]\n}) {\n  return (\n    <SidebarGroup>\n      <SidebarGroupLabel>Workspaces</SidebarGroupLabel>\n      <SidebarGroupContent>\n        <SidebarMenu>\n          {workspaces.map((workspace) => (\n            <Collapsible key={workspace.name}>\n              <SidebarMenuItem>\n                <SidebarMenuButton asChild>\n                  <a href=\"#\">\n                    <span>{workspace.emoji}</span>\n                    <span>{workspace.name}</span>\n                  </a>\n                </SidebarMenuButton>\n                <CollapsibleTrigger asChild>\n                  <SidebarMenuAction\n                    className=\"left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90\"\n                    showOnHover\n                  >\n                    <IconPlaceholder\n                      lucide=\"ChevronRightIcon\"\n                      tabler=\"IconChevronRight\"\n                      hugeicons=\"ArrowRight01Icon\"\n                      phosphor=\"CaretRightIcon\"\n                      remixicon=\"RiArrowRightSLine\"\n                    />\n                  </SidebarMenuAction>\n                </CollapsibleTrigger>\n                <SidebarMenuAction showOnHover>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                </SidebarMenuAction>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    {workspace.pages.map((page) => (\n                      <SidebarMenuSubItem key={page.name}>\n                        <SidebarMenuSubButton asChild>\n                          <a href=\"#\">\n                            <span>{page.emoji}</span>\n                            <span>{page.name}</span>\n                          </a>\n                        </SidebarMenuSubButton>\n                      </SidebarMenuSubItem>\n                    ))}\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          ))}\n          <SidebarMenuItem>\n            <SidebarMenuButton className=\"text-sidebar-foreground/70\">\n              <IconPlaceholder\n                lucide=\"MoreHorizontalIcon\"\n                tabler=\"IconDots\"\n                hugeicons=\"MoreHorizontalCircle01Icon\"\n                phosphor=\"DotsThreeOutlineIcon\"\n                remixicon=\"RiMoreLine\"\n              />\n              <span>More</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroupContent>\n    </SidebarGroup>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -62,12 +62,12 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-15/components/sidebar-right.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-vega/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-vega/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"border-sidebar-border h-16 border-b\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendars } from \"@/registry/radix-vega/blocks/sidebar-15/components/calendars\"\nimport { DatePicker } from \"@/registry/radix-vega/blocks/sidebar-15/components/date-picker\"\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-15/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarRail,\n  SidebarSeparator,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\n// This is sample data.\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  calendars: [\n    {\n      name: \"My Calendars\",\n      items: [\"Personal\", \"Work\", \"Family\"],\n    },\n    {\n      name: \"Favorites\",\n      items: [\"Holidays\", \"Birthdays\"],\n    },\n    {\n      name: \"Other\",\n      items: [\"Travel\", \"Reminders\", \"Deadlines\"],\n    },\n  ],\n}\n\nexport function SidebarRight({\n  ...props\n}: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      collapsible=\"none\"\n      className=\"sticky top-0 hidden h-svh border-l lg:flex\"\n      {...props}\n    >\n      <SidebarHeader className=\"h-16 border-b border-sidebar-border\">\n        <NavUser user={data.user} />\n      </SidebarHeader>\n      <SidebarContent>\n        <DatePicker />\n        <SidebarSeparator className=\"mx-0\" />\n        <Calendars calendars={data.calendars} />\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton>\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n              />\n              <span>New Calendar</span>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-15/components/team-switcher.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-muted-foreground text-xs\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"bg-background flex size-6 items-center justify-center rounded-md border\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"text-muted-foreground font-medium\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function TeamSwitcher({\n  teams,\n}: {\n  teams: {\n    name: string\n    logo: React.ReactNode\n    plan: string\n  }[]\n}) {\n  const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n  if (!activeTeam) {\n    return null\n  }\n\n  return (\n    <SidebarMenu>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton className=\"w-fit px-1.5\">\n              <div className=\"flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground\">\n                {activeTeam.logo}\n              </div>\n              <span className=\"truncate font-medium\">{activeTeam.name}</span>\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"opacity-50\"\n              />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-64 rounded-lg\"\n            align=\"start\"\n            side=\"bottom\"\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-xs text-muted-foreground\">\n              Teams\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-xs border\">\n                  {team.logo}\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                  className=\"size-4\"\n                />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">Add team</div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-16.json b/apps/v4/public/r/styles/radix-vega/sidebar-16.json
index 42a1e003ff..7b9565ff5f 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-16.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-16.json
@@ -16,13 +16,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/sidebar-16/page.tsx",
-      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-vega/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-vega/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n                <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n              </div>\n              <div className=\"bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
+      "content": "import { AppSidebar } from \"@/registry/radix-vega/blocks/sidebar-16/components/app-sidebar\"\nimport { SiteHeader } from \"@/registry/radix-vega/blocks/sidebar-16/components/site-header\"\nimport { SidebarInset, SidebarProvider } from \"@/registry/radix-vega/ui/sidebar\"\n\nexport const iframeHeight = \"800px\"\n\nexport const description = \"A sidebar with a header and a search form.\"\n\nexport default function Page() {\n  return (\n    <div className=\"[--header-height:calc(--spacing(14))]\">\n      <SidebarProvider className=\"flex flex-col\">\n        <SiteHeader />\n        <div className=\"flex flex-1\">\n          <AppSidebar />\n          <SidebarInset>\n            <div className=\"flex flex-1 flex-col gap-4 p-4\">\n              <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n                <div className=\"aspect-video rounded-xl bg-muted/50\" />\n              </div>\n              <div className=\"min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n            </div>\n          </SidebarInset>\n        </div>\n      </SidebarProvider>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/dashboard/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-16/components/app-sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-vega/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-vega/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-vega/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { NavMain } from \"@/registry/radix-vega/blocks/sidebar-16/components/nav-main\"\nimport { NavProjects } from \"@/registry/radix-vega/blocks/sidebar-16/components/nav-projects\"\nimport { NavSecondary } from \"@/registry/radix-vega/blocks/sidebar-16/components/nav-secondary\"\nimport { NavUser } from \"@/registry/radix-vega/blocks/sidebar-16/components/nav-user\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = {\n  user: {\n    name: \"shadcn\",\n    email: \"m@example.com\",\n    avatar: \"/avatars/shadcn.jpg\",\n  },\n  navMain: [\n    {\n      title: \"Playground\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"TerminalSquareIcon\"\n          tabler=\"IconTerminal2\"\n          hugeicons=\"ComputerTerminalIcon\"\n          phosphor=\"TerminalIcon\"\n          remixicon=\"RiTerminalBoxLine\"\n        />\n      ),\n      isActive: true,\n      items: [\n        {\n          title: \"History\",\n          url: \"#\",\n        },\n        {\n          title: \"Starred\",\n          url: \"#\",\n        },\n        {\n          title: \"Settings\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Models\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BotIcon\"\n          tabler=\"IconRobot\"\n          hugeicons=\"RoboticIcon\"\n          phosphor=\"RobotIcon\"\n          remixicon=\"RiRobotLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Genesis\",\n          url: \"#\",\n        },\n        {\n          title: \"Explorer\",\n          url: \"#\",\n        },\n        {\n          title: \"Quantum\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Documentation\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"BookOpenIcon\"\n          tabler=\"IconBook\"\n          hugeicons=\"BookOpen02Icon\"\n          phosphor=\"BookOpenIcon\"\n          remixicon=\"RiBookOpenLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"Introduction\",\n          url: \"#\",\n        },\n        {\n          title: \"Get Started\",\n          url: \"#\",\n        },\n        {\n          title: \"Tutorials\",\n          url: \"#\",\n        },\n        {\n          title: \"Changelog\",\n          url: \"#\",\n        },\n      ],\n    },\n    {\n      title: \"Settings\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"Settings2Icon\"\n          tabler=\"IconSettings\"\n          hugeicons=\"Settings05Icon\"\n          phosphor=\"GearIcon\"\n          remixicon=\"RiSettingsLine\"\n        />\n      ),\n      items: [\n        {\n          title: \"General\",\n          url: \"#\",\n        },\n        {\n          title: \"Team\",\n          url: \"#\",\n        },\n        {\n          title: \"Billing\",\n          url: \"#\",\n        },\n        {\n          title: \"Limits\",\n          url: \"#\",\n        },\n      ],\n    },\n  ],\n  navSecondary: [\n    {\n      title: \"Support\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"LifeBuoyIcon\"\n          tabler=\"IconLifebuoy\"\n          hugeicons=\"ChartRingIcon\"\n          phosphor=\"LifebuoyIcon\"\n          remixicon=\"RiLifebuoyLine\"\n        />\n      ),\n    },\n    {\n      title: \"Feedback\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"SendIcon\"\n          tabler=\"IconSend\"\n          hugeicons=\"SentIcon\"\n          phosphor=\"PaperPlaneTiltIcon\"\n          remixicon=\"RiSendPlaneLine\"\n        />\n      ),\n    },\n  ],\n  projects: [\n    {\n      name: \"Design Engineering\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"FrameIcon\"\n          tabler=\"IconFrame\"\n          hugeicons=\"CropIcon\"\n          phosphor=\"CropIcon\"\n          remixicon=\"RiCropLine\"\n        />\n      ),\n    },\n    {\n      name: \"Sales & Marketing\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"PieChartIcon\"\n          tabler=\"IconChartPie\"\n          hugeicons=\"PieChartIcon\"\n          phosphor=\"ChartPieIcon\"\n          remixicon=\"RiPieChartLine\"\n        />\n      ),\n    },\n    {\n      name: \"Travel\",\n      url: \"#\",\n      icon: (\n        <IconPlaceholder\n          lucide=\"MapIcon\"\n          tabler=\"IconMap\"\n          hugeicons=\"MapsIcon\"\n          phosphor=\"MapTrifoldIcon\"\n          remixicon=\"RiMapLine\"\n        />\n      ),\n    },\n  ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {\n  return (\n    <Sidebar\n      className=\"top-(--header-height) h-[calc(100svh-var(--header-height))]!\"\n      {...props}\n    >\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton size=\"lg\" asChild>\n              <a href=\"#\">\n                <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                  <IconPlaceholder\n                    lucide=\"TerminalIcon\"\n                    tabler=\"IconCommand\"\n                    hugeicons=\"CommandIcon\"\n                    phosphor=\"CommandIcon\"\n                    remixicon=\"RiCommandLine\"\n                    className=\"size-4\"\n                  />\n                </div>\n                <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                  <span className=\"truncate font-medium\">Acme Inc</span>\n                  <span className=\"truncate text-xs\">Enterprise</span>\n                </div>\n              </a>\n            </SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <NavMain items={data.navMain} />\n        <NavProjects projects={data.projects} />\n        <NavSecondary items={data.navSecondary} className=\"mt-auto\" />\n      </SidebarContent>\n      <SidebarFooter>\n        <NavUser user={data.user} />\n      </SidebarFooter>\n    </Sidebar>\n  )\n}\n",
       "type": "registry:component"
     },
     {
@@ -52,7 +52,7 @@
     },
     {
       "path": "registry/radix-vega/blocks/sidebar-16/components/site-header.tsx",
-      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-vega/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"bg-background sticky top-0 z-50 flex w-full items-center border-b\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-vega/blocks/sidebar-16/components/search-form\"\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <header className=\"sticky top-0 z-50 flex w-full items-center border-b bg-background\">\n      <div className=\"flex h-(--header-height) w-full items-center gap-2 px-4\">\n        <Button\n          className=\"h-8 w-8\"\n          variant=\"ghost\"\n          size=\"icon\"\n          onClick={toggleSidebar}\n        >\n          <IconPlaceholder\n            lucide=\"PanelLeftIcon\"\n            tabler=\"IconLayoutSidebar\"\n            hugeicons=\"SidebarLeftIcon\"\n            phosphor=\"SidebarIcon\"\n            remixicon=\"RiLayoutLeftLine\"\n          />\n        </Button>\n        <Separator\n          orientation=\"vertical\"\n          className=\"mr-2 data-vertical:h-4 data-vertical:self-auto\"\n        />\n        <Breadcrumb className=\"hidden sm:block\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink href=\"#\">Build Your Application</BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <SearchForm className=\"w-full sm:ml-auto sm:w-auto\" />\n      </div>\n    </header>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-example.json b/apps/v4/public/r/styles/radix-vega/sidebar-example.json
index fb4b4935dd..3d41d5305d 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-example.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sidebar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarExample() {\n  const data = {\n    versions: [\"1.0.1\", \"1.1.0-alpha\", \"2.0.0-beta1\"],\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  const [selectedVersion, setSelectedVersion] = React.useState(data.versions[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar>\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Item className=\"p-0\" size=\"xs\">\n                      <ItemContent>\n                        <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                        <ItemDescription>v{selectedVersion}</ItemDescription>\n                      </ItemContent>\n                      <ItemActions>\n                        <IconPlaceholder\n                          lucide=\"ChevronsUpDownIcon\"\n                          tabler=\"IconSelector\"\n                          hugeicons=\"UnfoldMoreIcon\"\n                          phosphor=\"CaretUpDownIcon\"\n                          remixicon=\"RiArrowUpDownLine\"\n                        />\n                      </ItemActions>\n                    </Item>\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    {data.versions.map((version) => (\n                      <DropdownMenuItem\n                        key={version}\n                        onSelect={() => setSelectedVersion(version)}\n                      >\n                        v{version}{\" \"}\n                        {version === selectedVersion && (\n                          <IconPlaceholder\n                            lucide=\"CheckIcon\"\n                            tabler=\"IconCheck\"\n                            hugeicons=\"Tick02Icon\"\n                            phosphor=\"CheckIcon\"\n                            remixicon=\"RiCheckLine\"\n                            className=\"ml-auto\"\n                          />\n                        )}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n          <form>\n            <SidebarGroup className=\"py-0\">\n              <SidebarGroupContent className=\"relative\">\n                <Label htmlFor=\"search\" className=\"sr-only\">\n                  Search\n                </Label>\n                <SidebarInput\n                  id=\"search\"\n                  placeholder=\"Search the docs...\"\n                  className=\"pl-8\"\n                />\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"SearchIcon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                  className=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none\"\n                />\n              </SidebarGroupContent>\n            </SidebarGroup>\n          </form>\n        </SidebarHeader>\n        <SidebarContent>\n          {data.navMain.map((item) => (\n            <SidebarGroup key={item.title}>\n              <SidebarGroupLabel>{item.title}</SidebarGroupLabel>\n              <SidebarGroupContent>\n                <SidebarMenu>\n                  {item.items.map((subItem) => (\n                    <SidebarMenuItem key={subItem.title}>\n                      <SidebarMenuButton asChild isActive={subItem.isActive}>\n                        <a href={subItem.url}>{subItem.title}</a>\n                      </SidebarMenuButton>\n                    </SidebarMenuItem>\n                  ))}\n                </SidebarMenu>\n              </SidebarGroupContent>\n            </SidebarGroup>\n          ))}\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-floating-example.json b/apps/v4/public/r/styles/radix-vega/sidebar-floating-example.json
index 1bfe661c93..2c6eabf584 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-floating-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-floating-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sidebar-floating-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-vega/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Field } from \"@/registry/radix-vega/ui/field\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarFloatingExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Getting Started\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Installation\",\n            url: \"#\",\n          },\n          {\n            title: \"Project Structure\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Build Your Application\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Routing\",\n            url: \"#\",\n          },\n          {\n            title: \"Data Fetching\",\n            url: \"#\",\n            isActive: true,\n          },\n          {\n            title: \"Rendering\",\n            url: \"#\",\n          },\n          {\n            title: \"Caching\",\n            url: \"#\",\n          },\n          {\n            title: \"Styling\",\n            url: \"#\",\n          },\n          {\n            title: \"Optimizing\",\n            url: \"#\",\n          },\n          {\n            title: \"Configuring\",\n            url: \"#\",\n          },\n          {\n            title: \"Testing\",\n            url: \"#\",\n          },\n          {\n            title: \"Authentication\",\n            url: \"#\",\n          },\n          {\n            title: \"Deploying\",\n            url: \"#\",\n          },\n          {\n            title: \"Upgrading\",\n            url: \"#\",\n          },\n          {\n            title: \"Examples\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"API Reference\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Components\",\n            url: \"#\",\n          },\n          {\n            title: \"File Conventions\",\n            url: \"#\",\n          },\n          {\n            title: \"Functions\",\n            url: \"#\",\n          },\n          {\n            title: \"next.config.js Options\",\n            url: \"#\",\n          },\n          {\n            title: \"CLI\",\n            url: \"#\",\n          },\n          {\n            title: \"Edge Runtime\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Architecture\",\n        url: \"#\",\n        items: [\n          {\n            title: \"Accessibility\",\n            url: \"#\",\n          },\n          {\n            title: \"Fast Refresh\",\n            url: \"#\",\n          },\n          {\n            title: \"Next.js Compiler\",\n            url: \"#\",\n          },\n          {\n            title: \"Supported Browsers\",\n            url: \"#\",\n          },\n          {\n            title: \"Turbopack\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider className=\"bg-background\">\n      <Sidebar variant=\"floating\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <SidebarMenuButton size=\"lg\" asChild>\n                <a href=\"#\">\n                  <Item className=\"p-0\" size=\"xs\">\n                    <ItemContent>\n                      <ItemTitle className=\"text-sm\">Documentation</ItemTitle>\n                      <ItemDescription>v1.0.0</ItemDescription>\n                    </ItemContent>\n                  </Item>\n                </a>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <DropdownMenu key={item.title}>\n                  <SidebarMenuItem>\n                    <DropdownMenuTrigger asChild>\n                      <SidebarMenuButton className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\">\n                        {item.title}{\" \"}\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                          className=\"ml-auto\"\n                        />\n                      </SidebarMenuButton>\n                    </DropdownMenuTrigger>\n                    {item.items?.length ? (\n                      <DropdownMenuContent side=\"right\" align=\"start\">\n                        <DropdownMenuGroup>\n                          {item.items.map((subItem) => (\n                            <DropdownMenuItem asChild key={subItem.title}>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </DropdownMenuItem>\n                          ))}\n                        </DropdownMenuGroup>\n                      </DropdownMenuContent>\n                    ) : null}\n                  </SidebarMenuItem>\n                </DropdownMenu>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarGroup>\n            <Card size=\"sm\" className=\"-mx-2\">\n              <CardHeader>\n                <CardTitle className=\"text-sm\">\n                  Subscribe to our newsletter\n                </CardTitle>\n                <CardDescription>\n                  Opt-in to receive updates and news about the sidebar.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <form>\n                  <Field>\n                    <SidebarInput type=\"email\" placeholder=\"Email\" />\n                    <Button\n                      className=\"w-full bg-sidebar-primary text-sidebar-primary-foreground\"\n                      size=\"sm\"\n                    >\n                      Subscribe\n                    </Button>\n                  </Field>\n                </form>\n              </CardContent>\n            </Card>\n          </SidebarGroup>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-icon-example.json b/apps/v4/public/r/styles/radix-vega/sidebar-icon-example.json
index c608476440..19bbb82d17 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-icon-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-icon-example.json
@@ -14,7 +14,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sidebar-icon-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemMedia,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarIconExample() {\n  const data = {\n    user: {\n      name: \"shadcn\",\n      email: \"m@example.com\",\n      avatar: \"/avatars/shadcn.jpg\",\n    },\n    teams: [\n      {\n        name: \"Acme Inc\",\n        plan: \"Enterprise\",\n      },\n      {\n        name: \"Acme Corp.\",\n        plan: \"Startup\",\n      },\n      {\n        name: \"Evil Corp.\",\n        plan: \"Free\",\n      },\n    ],\n    navMain: [\n      {\n        title: \"Playground\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"TerminalSquareIcon\"\n            tabler=\"IconTerminal2\"\n            hugeicons=\"ComputerTerminalIcon\"\n            phosphor=\"TerminalIcon\"\n            remixicon=\"RiTerminalBoxLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"History\",\n            url: \"#\",\n          },\n          {\n            title: \"Starred\",\n            url: \"#\",\n          },\n          {\n            title: \"Settings\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Models\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BotIcon\"\n            tabler=\"IconRobot\"\n            hugeicons=\"RoboticIcon\"\n            phosphor=\"RobotIcon\"\n            remixicon=\"RiRobotLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Genesis\",\n            url: \"#\",\n          },\n          {\n            title: \"Explorer\",\n            url: \"#\",\n          },\n          {\n            title: \"Quantum\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Documentation\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"BookOpen\"\n            tabler=\"IconBook\"\n            hugeicons=\"BookOpen02Icon\"\n            phosphor=\"BookOpenIcon\"\n            remixicon=\"RiBookOpenLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Introduction\",\n            url: \"#\",\n          },\n          {\n            title: \"Get Started\",\n            url: \"#\",\n          },\n          {\n            title: \"Tutorials\",\n            url: \"#\",\n          },\n          {\n            title: \"Changelog\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"General\",\n            url: \"#\",\n          },\n          {\n            title: \"Team\",\n            url: \"#\",\n          },\n          {\n            title: \"Billing\",\n            url: \"#\",\n          },\n          {\n            title: \"Limits\",\n            url: \"#\",\n          },\n        ],\n      },\n    ],\n    projects: [\n      {\n        name: \"Design Engineering\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FrameIcon\"\n            tabler=\"IconFrame\"\n            hugeicons=\"CropIcon\"\n            phosphor=\"CropIcon\"\n            remixicon=\"RiCropLine\"\n          />\n        ),\n      },\n      {\n        name: \"Sales & Marketing\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"PieChartIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"PieChartIcon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n        ),\n      },\n      {\n        name: \"Travel\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"MapIcon\"\n            tabler=\"IconMap\"\n            hugeicons=\"MapsIcon\"\n            phosphor=\"MapTrifoldIcon\"\n            remixicon=\"RiMapLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  const [activeTeam, setActiveTeam] = React.useState(data.teams[0])\n\n  return (\n    <SidebarProvider>\n      <Sidebar collapsible=\"icon\">\n        <SidebarHeader>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Button size=\"icon-sm\" asChild className=\"size-8\">\n                      <span>\n                        <svg\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                          viewBox=\"0 0 256 256\"\n                        >\n                          <rect width=\"256\" height=\"256\" fill=\"none\"></rect>\n                          <line\n                            x1=\"208\"\n                            y1=\"128\"\n                            x2=\"128\"\n                            y2=\"208\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                          <line\n                            x1=\"192\"\n                            y1=\"40\"\n                            x2=\"40\"\n                            y2=\"192\"\n                            fill=\"none\"\n                            stroke=\"currentColor\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                            strokeWidth=\"32\"\n                          ></line>\n                        </svg>\n                      </span>\n                    </Button>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {activeTeam.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {activeTeam.plan}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Teams</DropdownMenuLabel>\n                    {data.teams.map((team) => (\n                      <DropdownMenuItem\n                        key={team.name}\n                        onClick={() => setActiveTeam(team)}\n                      >\n                        {team.name}\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarHeader>\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Platform</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                  className=\"group/collapsible\"\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton tooltip={item.title} asChild>\n                      <CollapsibleTrigger>\n                        {item.icon}\n                        <span>{item.title}</span>\n                        <IconPlaceholder\n                          lucide=\"ChevronRightIcon\"\n                          tabler=\"IconChevronRight\"\n                          hugeicons=\"ArrowRight01Icon\"\n                          phosphor=\"CaretRightIcon\"\n                          remixicon=\"RiArrowRightSLine\"\n                          className=\"ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90\"\n                        />\n                      </CollapsibleTrigger>\n                    </SidebarMenuButton>\n                    <CollapsibleContent>\n                      <SidebarMenuSub>\n                        {item.items?.map((subItem) => (\n                          <SidebarMenuSubItem key={subItem.title}>\n                            <SidebarMenuSubButton asChild>\n                              <a href={subItem.url}>{subItem.title}</a>\n                            </SidebarMenuSubButton>\n                          </SidebarMenuSubItem>\n                        ))}\n                      </SidebarMenuSub>\n                    </CollapsibleContent>\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"group-data-[collapsible=icon]:hidden\">\n            <SidebarGroupLabel>Projects</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.projects.map((item) => (\n                <SidebarMenuItem key={item.name}>\n                  <SidebarMenuButton asChild>\n                    <a href={item.url}>\n                      {item.icon}\n                      {item.name}\n                    </a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarFooter>\n          <SidebarMenu>\n            <SidebarMenuItem>\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <SidebarMenuButton\n                    size=\"lg\"\n                    className=\"data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground\"\n                  >\n                    <Avatar>\n                      <AvatarImage\n                        src={data.user.avatar}\n                        alt={data.user.name}\n                      />\n                      <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n                    </Avatar>\n                    <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span className=\"truncate font-medium\">\n                        {data.user.name}\n                      </span>\n                      <span className=\"truncate text-xs\">\n                        {data.user.email}\n                      </span>\n                    </div>\n                    <IconPlaceholder\n                      lucide=\"ChevronsUpDownIcon\"\n                      tabler=\"IconSelector\"\n                      hugeicons=\"UnfoldMoreIcon\"\n                      phosphor=\"CaretUpDownIcon\"\n                      remixicon=\"RiArrowUpDownLine\"\n                    />\n                  </SidebarMenuButton>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>\n                      <Item size=\"xs\">\n                        <ItemMedia>\n                          <Avatar>\n                            <AvatarImage\n                              src={data.user.avatar}\n                              alt={data.user.name}\n                            />\n                            <AvatarFallback>CN</AvatarFallback>\n                          </Avatar>\n                        </ItemMedia>\n                        <ItemContent>\n                          <ItemTitle>{data.user.name}</ItemTitle>\n                          <ItemDescription> {data.user.email}</ItemDescription>\n                        </ItemContent>\n                      </Item>\n                    </DropdownMenuLabel>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Account</DropdownMenuItem>\n                    <DropdownMenuItem>Billing</DropdownMenuItem>\n                    <DropdownMenuItem>Settings</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Log out</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarFooter>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\">\n          <div className=\"flex items-center gap-2 px-4\">\n            <SidebarTrigger className=\"-ml-1\" />\n          </div>\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-inset-example.json b/apps/v4/public/r/styles/radix-vega/sidebar-inset-example.json
index 5d16076078..107109b780 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar-inset-example.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar-inset-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/sidebar-inset-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n            <div className=\"bg-muted/50 aspect-video rounded-xl\" />\n          </div>\n          <div className=\"bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/radix-vega/ui/collapsible\"\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SidebarInsetExample() {\n  const data = {\n    navMain: [\n      {\n        title: \"Dashboard\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"HomeIcon\"\n            tabler=\"IconHome\"\n            hugeicons=\"Home01Icon\"\n            phosphor=\"HouseIcon\"\n            remixicon=\"RiHomeLine\"\n          />\n        ),\n        isActive: true,\n        items: [\n          {\n            title: \"Overview\",\n            url: \"#\",\n          },\n          {\n            title: \"Analytics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Analytics\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"ChartIcon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"Reports\",\n            url: \"#\",\n          },\n          {\n            title: \"Metrics\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Orders\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingBagIcon\"\n            tabler=\"IconShoppingBag\"\n            hugeicons=\"ShoppingBag01Icon\"\n            phosphor=\"BagIcon\"\n            remixicon=\"RiShoppingBagLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Orders\",\n            url: \"#\",\n          },\n          {\n            title: \"Pending\",\n            url: \"#\",\n          },\n          {\n            title: \"Completed\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Products\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"ShoppingCartIcon\"\n            tabler=\"IconShoppingCart\"\n            hugeicons=\"ShoppingCart01Icon\"\n            phosphor=\"ShoppingCartIcon\"\n            remixicon=\"RiShoppingCartLine\"\n          />\n        ),\n        items: [\n          {\n            title: \"All Products\",\n            url: \"#\",\n          },\n          {\n            title: \"Categories\",\n            url: \"#\",\n          },\n        ],\n      },\n      {\n        title: \"Invoices\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"FileIcon\"\n            tabler=\"IconFile\"\n            hugeicons=\"File01Icon\"\n            phosphor=\"FileIcon\"\n            remixicon=\"RiFileLine\"\n          />\n        ),\n      },\n      {\n        title: \"Customers\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"UserIcon\"\n            tabler=\"IconUser\"\n            hugeicons=\"UserIcon\"\n            phosphor=\"UserIcon\"\n            remixicon=\"RiUserLine\"\n          />\n        ),\n      },\n      {\n        title: \"Settings\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Settings2Icon\"\n            tabler=\"IconSettings\"\n            hugeicons=\"Settings05Icon\"\n            phosphor=\"GearIcon\"\n            remixicon=\"RiSettingsLine\"\n          />\n        ),\n      },\n    ],\n    navSecondary: [\n      {\n        title: \"Support\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"LifeBuoy\"\n            tabler=\"IconLifebuoy\"\n            hugeicons=\"ChartRingIcon\"\n            phosphor=\"LifebuoyIcon\"\n            remixicon=\"RiLifebuoyLine\"\n          />\n        ),\n      },\n      {\n        title: \"Feedback\",\n        url: \"#\",\n        icon: (\n          <IconPlaceholder\n            lucide=\"Send\"\n            tabler=\"IconSend\"\n            hugeicons=\"SentIcon\"\n            phosphor=\"PaperPlaneTiltIcon\"\n            remixicon=\"RiSendPlaneLine\"\n          />\n        ),\n      },\n    ],\n  }\n\n  return (\n    <SidebarProvider>\n      <Sidebar variant=\"inset\">\n        <SidebarContent>\n          <SidebarGroup>\n            <SidebarGroupLabel>Dashboard</SidebarGroupLabel>\n            <SidebarMenu>\n              {data.navMain.map((item) => (\n                <Collapsible\n                  key={item.title}\n                  asChild\n                  defaultOpen={item.isActive}\n                >\n                  <SidebarMenuItem>\n                    <SidebarMenuButton\n                      asChild\n                      tooltip={item.title}\n                      isActive={item.isActive}\n                    >\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                    {item.items?.length ? (\n                      <>\n                        <CollapsibleTrigger asChild>\n                          <SidebarMenuAction className=\"data-[state=open]:rotate-90\">\n                            <IconPlaceholder\n                              lucide=\"ChevronRightIcon\"\n                              tabler=\"IconChevronRight\"\n                              hugeicons=\"ArrowRight01Icon\"\n                              phosphor=\"CaretRightIcon\"\n                              remixicon=\"RiArrowRightSLine\"\n                            />\n                            <span className=\"sr-only\">Toggle</span>\n                          </SidebarMenuAction>\n                        </CollapsibleTrigger>\n                        <CollapsibleContent>\n                          <SidebarMenuSub>\n                            {item.items.map((subItem) => (\n                              <SidebarMenuSubItem key={subItem.title}>\n                                <SidebarMenuSubButton asChild>\n                                  <a href={subItem.url}>\n                                    <span>{subItem.title}</span>\n                                  </a>\n                                </SidebarMenuSubButton>\n                              </SidebarMenuSubItem>\n                            ))}\n                          </SidebarMenuSub>\n                        </CollapsibleContent>\n                      </>\n                    ) : null}\n                  </SidebarMenuItem>\n                </Collapsible>\n              ))}\n            </SidebarMenu>\n          </SidebarGroup>\n          <SidebarGroup className=\"mt-auto\">\n            <SidebarGroupContent>\n              <SidebarMenu>\n                {data.navSecondary.map((item) => (\n                  <SidebarMenuItem key={item.title}>\n                    <SidebarMenuButton asChild size=\"sm\">\n                      <a href={item.url}>\n                        {item.icon}\n                        <span>{item.title}</span>\n                      </a>\n                    </SidebarMenuButton>\n                  </SidebarMenuItem>\n                ))}\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </SidebarContent>\n        <SidebarRail />\n      </Sidebar>\n      <SidebarInset>\n        <header className=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n          <SidebarTrigger className=\"-ml-1\" />\n        </header>\n        <div className=\"flex flex-1 flex-col gap-4 p-4\">\n          <div className=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n            <div className=\"aspect-video rounded-xl bg-muted/50\" />\n          </div>\n          <div className=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n        </div>\n      </SidebarInset>\n    </SidebarProvider>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/sidebar.json b/apps/v4/public/r/styles/radix-vega/sidebar.json
index 979223695e..3cd185adf1 100644
--- a/apps/v4/public/r/styles/radix-vega/sidebar.json
+++ b/apps/v4/public/r/styles/radix-vega/sidebar.json
@@ -13,9 +13,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-vega/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-vega/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-vega/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"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=\"bg-sidebar group-data-[variant=floating]:ring-sidebar-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"bg-background relative flex w-full flex-1 flex-col md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\"bg-background h-8 w-full shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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(\"bg-sidebar-border mx-2 w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"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        \"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium 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        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 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-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 data-active:font-medium peer/menu-button flex w-full items-center overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden 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 after:absolute after:-inset-2 focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        showOnHover &&\n          \"peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 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        \"text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-active/menu-button:text-sidebar-accent-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden 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\",\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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l 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        \"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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden group-data-[collapsible=icon]:hidden focus-visible:ring-2 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-vega/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-vega/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-vega/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper 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-lg 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-xl 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(\"h-8 w-full bg-background shadow-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2\", 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 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-md px-2 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-md 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-1\", 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-md p-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-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md 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-1.5 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-md 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-md px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-md\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\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-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sidebar",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/signup-02.json b/apps/v4/public/r/styles/radix-vega/signup-02.json
index 3aaab19506..ace6f30363 100644
--- a/apps/v4/public/r/styles/radix-vega/signup-02.json
+++ b/apps/v4/public/r/styles/radix-vega/signup-02.json
@@ -12,13 +12,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/signup-02/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-vega/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"bg-muted relative hidden lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-vega/blocks/signup-02/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"grid min-h-svh lg:grid-cols-2\">\n      <div className=\"flex flex-col gap-4 p-6 md:p-10\">\n        <div className=\"flex justify-center gap-2 md:justify-start\">\n          <a href=\"#\" className=\"flex items-center gap-2 font-medium\">\n            <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n              <IconPlaceholder\n                lucide=\"GalleryVerticalEndIcon\"\n                tabler=\"IconLayoutRows\"\n                hugeicons=\"LayoutBottomIcon\"\n                phosphor=\"RowsIcon\"\n                remixicon=\"RiGalleryLine\"\n                className=\"size-4\"\n              />\n            </div>\n            Acme Inc.\n          </a>\n        </div>\n        <div className=\"flex flex-1 items-center justify-center\">\n          <div className=\"w-full max-w-xs\">\n            <SignupForm />\n          </div>\n        </div>\n      </div>\n      <div className=\"relative hidden bg-muted lg:block\">\n        <img\n          src=\"/placeholder.svg\"\n          alt=\"Image\"\n          className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n        />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/signup-02/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-muted-foreground text-sm text-balance\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"form\">) {\n  return (\n    <form className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <FieldGroup>\n        <div className=\"flex flex-col items-center gap-1 text-center\">\n          <h1 className=\"text-2xl font-bold\">Create your account</h1>\n          <p className=\"text-sm text-balance text-muted-foreground\">\n            Fill in the form below to create your account\n          </p>\n        </div>\n        <Field>\n          <FieldLabel htmlFor=\"name\">Full Name</FieldLabel>\n          <Input\n            id=\"name\"\n            type=\"text\"\n            placeholder=\"John Doe\"\n            required\n            className=\"bg-background\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            We&apos;ll use this to contact you. We will not share your email\n            with anyone else.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n          <Input\n            id=\"password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>\n            Must be at least 8 characters long.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"confirm-password\">Confirm Password</FieldLabel>\n          <Input\n            id=\"confirm-password\"\n            type=\"password\"\n            required\n            className=\"bg-background\"\n          />\n          <FieldDescription>Please confirm your password.</FieldDescription>\n        </Field>\n        <Field>\n          <Button type=\"submit\">Create Account</Button>\n        </Field>\n        <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-muted dark:*:data-[slot=field-separator-content]:bg-card\">\n          Or continue with\n        </FieldSeparator>\n        <Field>\n          <Button variant=\"outline\" type=\"button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n              <path\n                d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            Sign up with GitHub\n          </Button>\n          <FieldDescription className=\"px-6 text-center\">\n            Already have an account? <a href=\"#\">Sign in</a>\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </form>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/signup-03.json b/apps/v4/public/r/styles/radix-vega/signup-03.json
index de92c1cbee..d5201eb16c 100644
--- a/apps/v4/public/r/styles/radix-vega/signup-03.json
+++ b/apps/v4/public/r/styles/radix-vega/signup-03.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/signup-03/page.tsx",
-      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-vega/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { SignupForm } from \"@/registry/radix-vega/blocks/signup-03/components/signup-form\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10\">\n      <div className=\"flex w-full max-w-sm flex-col gap-6\">\n        <a href=\"#\" className=\"flex items-center gap-2 self-center font-medium\">\n          <div className=\"flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground\">\n            <IconPlaceholder\n              lucide=\"GalleryVerticalEndIcon\"\n              tabler=\"IconLayoutRows\"\n              hugeicons=\"LayoutBottomIcon\"\n              phosphor=\"RowsIcon\"\n              remixicon=\"RiGalleryLine\"\n              className=\"size-4\"\n            />\n          </div>\n          Acme Inc.\n        </a>\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-vega/signup-04.json b/apps/v4/public/r/styles/radix-vega/signup-04.json
index 185996e70f..64d0d585f4 100644
--- a/apps/v4/public/r/styles/radix-vega/signup-04.json
+++ b/apps/v4/public/r/styles/radix-vega/signup-04.json
@@ -13,13 +13,13 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/signup-04/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-vega/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-vega/blocks/signup-04/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10\">\n      <div className=\"w-full max-w-sm md:max-w-4xl\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
     {
       "path": "registry/radix-vega/blocks/signup-04/components/signup-form.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-muted-foreground text-sm text-balance\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"bg-muted relative hidden md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\n\nexport function SignupForm({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)} {...props}>\n      <Card className=\"overflow-hidden p-0\">\n        <CardContent className=\"grid p-0 md:grid-cols-2\">\n          <form className=\"p-6 md:p-8\">\n            <FieldGroup>\n              <div className=\"flex flex-col items-center gap-2 text-center\">\n                <h1 className=\"text-2xl font-bold\">Create your account</h1>\n                <p className=\"text-sm text-balance text-muted-foreground\">\n                  Enter your email below to create your account\n                </p>\n              </div>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n                <FieldDescription>\n                  We&apos;ll use this to contact you. We will not share your\n                  email with anyone else.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Field className=\"grid grid-cols-2 gap-4\">\n                  <Field>\n                    <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                    <Input id=\"password\" type=\"password\" required />\n                  </Field>\n                  <Field>\n                    <FieldLabel htmlFor=\"confirm-password\">\n                      Confirm Password\n                    </FieldLabel>\n                    <Input id=\"confirm-password\" type=\"password\" required />\n                  </Field>\n                </Field>\n                <FieldDescription>\n                  Must be at least 8 characters long.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <Button type=\"submit\">Create Account</Button>\n              </Field>\n              <FieldSeparator className=\"*:data-[slot=field-separator-content]:bg-card\">\n                Or continue with\n              </FieldSeparator>\n              <Field className=\"grid grid-cols-3 gap-4\">\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Apple</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Google</span>\n                </Button>\n                <Button variant=\"outline\" type=\"button\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n                    <path\n                      d=\"M6.915 4.03c-1.968 0-3.683 1.28-4.871 3.113C.704 9.208 0 11.883 0 14.449c0 .706.07 1.369.21 1.973a6.624 6.624 0 0 0 .265.86 5.297 5.297 0 0 0 .371.761c.696 1.159 1.818 1.927 3.593 1.927 1.497 0 2.633-.671 3.965-2.444.76-1.012 1.144-1.626 2.663-4.32l.756-1.339.186-.325c.061.1.121.196.183.3l2.152 3.595c.724 1.21 1.665 2.556 2.47 3.314 1.046.987 1.992 1.22 3.06 1.22 1.075 0 1.876-.355 2.455-.843a3.743 3.743 0 0 0 .81-.973c.542-.939.861-2.127.861-3.745 0-2.72-.681-5.357-2.084-7.45-1.282-1.912-2.957-2.93-4.716-2.93-1.047 0-2.088.467-3.053 1.308-.652.57-1.257 1.29-1.82 2.05-.69-.875-1.335-1.547-1.958-2.056-1.182-.966-2.315-1.303-3.454-1.303zm10.16 2.053c1.147 0 2.188.758 2.992 1.999 1.132 1.748 1.647 4.195 1.647 6.4 0 1.548-.368 2.9-1.839 2.9-.58 0-1.027-.23-1.664-1.004-.496-.601-1.343-1.878-2.832-4.358l-.617-1.028a44.908 44.908 0 0 0-1.255-1.98c.07-.109.141-.224.211-.327 1.12-1.667 2.118-2.602 3.358-2.602zm-10.201.553c1.265 0 2.058.791 2.675 1.446.307.327.737.871 1.234 1.579l-1.02 1.566c-.757 1.163-1.882 3.017-2.837 4.338-1.191 1.649-1.81 1.817-2.486 1.817-.524 0-1.038-.237-1.383-.794-.263-.426-.464-1.13-.464-2.046 0-2.221.63-4.535 1.66-6.088.454-.687.964-1.226 1.533-1.533a2.264 2.264 0 0 1 1.088-.285z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                  <span className=\"sr-only\">Sign up with Meta</span>\n                </Button>\n              </Field>\n              <FieldDescription className=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </FieldGroup>\n          </form>\n          <div className=\"relative hidden bg-muted md:block\">\n            <img\n              src=\"/placeholder.svg\"\n              alt=\"Image\"\n              className=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n            />\n          </div>\n        </CardContent>\n      </Card>\n      <FieldDescription className=\"px-6 text-center\">\n        By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>{\" \"}\n        and <a href=\"#\">Privacy Policy</a>.\n      </FieldDescription>\n    </div>\n  )\n}\n",
       "type": "registry:component"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/signup-05.json b/apps/v4/public/r/styles/radix-vega/signup-05.json
index 8f30c7e9d1..262ee8d53e 100644
--- a/apps/v4/public/r/styles/radix-vega/signup-05.json
+++ b/apps/v4/public/r/styles/radix-vega/signup-05.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/blocks/signup-05/page.tsx",
-      "content": "import { SignupForm } from \"@/registry/radix-vega/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
+      "content": "import { SignupForm } from \"@/registry/radix-vega/blocks/signup-05/components/signup-form\"\n\nexport default function SignupPage() {\n  return (\n    <div className=\"flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <SignupForm />\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:page",
       "target": "app/signup/page.tsx"
     },
diff --git a/apps/v4/public/r/styles/radix-vega/skeleton.json b/apps/v4/public/r/styles/radix-vega/skeleton.json
index 957e34b992..332affdef9 100644
--- a/apps/v4/public/r/styles/radix-vega/skeleton.json
+++ b/apps/v4/public/r/styles/radix-vega/skeleton.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/skeleton.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"bg-muted animate-pulse rounded-md\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Skeleton({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"skeleton\"\n      className={cn(\"animate-pulse rounded-md bg-muted\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Skeleton }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/skeleton",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/slider-example.json b/apps/v4/public/r/styles/radix-vega/slider-example.json
index ed9620196f..35c2d13235 100644
--- a/apps/v4/public/r/styles/radix-vega/slider-example.json
+++ b/apps/v4/public/r/styles/radix-vega/slider-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/slider-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 { Label } from \"@/registry/radix-vega/ui/label\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-muted-foreground text-sm\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\n\nexport default function SliderExample() {\n  return (\n    <ExampleWrapper>\n      <SliderBasic />\n      <SliderRange />\n      <SliderMultiple />\n      <SliderVertical />\n      <SliderControlled />\n      <SliderDisabled />\n    </ExampleWrapper>\n  )\n}\n\nfunction SliderBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Slider defaultValue={[50]} max={100} step={1} />\n    </Example>\n  )\n}\n\nfunction SliderRange() {\n  return (\n    <Example title=\"Range\">\n      <Slider defaultValue={[25, 50]} max={100} step={5} />\n    </Example>\n  )\n}\n\nfunction SliderMultiple() {\n  return (\n    <Example title=\"Multiple Thumbs\">\n      <Slider defaultValue={[10, 20, 70]} max={100} step={10} />\n    </Example>\n  )\n}\n\nfunction SliderVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <div className=\"flex items-center gap-6\">\n        <Slider\n          defaultValue={[50]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n        <Slider\n          defaultValue={[25]}\n          max={100}\n          step={1}\n          orientation=\"vertical\"\n          className=\"h-40\"\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderControlled() {\n  const [value, setValue] = React.useState([0.3, 0.7])\n\n  return (\n    <Example title=\"Controlled\">\n      <div className=\"grid w-full gap-3\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <Label htmlFor=\"slider-demo-temperature\">Temperature</Label>\n          <span className=\"text-sm text-muted-foreground\">\n            {value.join(\", \")}\n          </span>\n        </div>\n        <Slider\n          id=\"slider-demo-temperature\"\n          value={value}\n          onValueChange={setValue}\n          min={0}\n          max={1}\n          step={0.1}\n        />\n      </div>\n    </Example>\n  )\n}\n\nfunction SliderDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Slider defaultValue={[50]} max={100} step={1} disabled />\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/slider.json b/apps/v4/public/r/styles/radix-vega/slider.json
index f88df94cbf..aff5a0244a 100644
--- a/apps/v4/public/r/styles/radix-vega/slider.json
+++ b/apps/v4/public/r/styles/radix-vega/slider.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"bg-muted relative grow overflow-hidden rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/slider",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/slider.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/sonner.json b/apps/v4/public/r/styles/radix-vega/sonner.json
index 729ac264ab..874a35e4dd 100644
--- a/apps/v4/public/r/styles/radix-vega/sonner.json
+++ b/apps/v4/public/r/styles/radix-vega/sonner.json
@@ -12,5 +12,12 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/sonner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+      "api": "https://sonner.emilkowal.ski"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/spinner.json b/apps/v4/public/r/styles/radix-vega/spinner.json
index d41f4c895c..33e46db8fe 100644
--- a/apps/v4/public/r/styles/radix-vega/spinner.json
+++ b/apps/v4/public/r/styles/radix-vega/spinner.json
@@ -8,5 +8,11 @@
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/spinner",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/style.json b/apps/v4/public/r/styles/radix-vega/style.json
new file mode 100644
index 0000000000..9d8bb6576c
--- /dev/null
+++ b/apps/v4/public/r/styles/radix-vega/style.json
@@ -0,0 +1,31 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "style",
+  "dependencies": [
+    "class-variance-authority",
+    "lucide-react",
+    "radix-ui"
+  ],
+  "devDependencies": [
+    "tw-animate-css",
+    "shadcn"
+  ],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [],
+  "cssVars": {},
+  "css": {
+    "@import \"tw-animate-css\"": {},
+    "@import \"shadcn/tailwind.css\"": {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {}
+      },
+      "body": {
+        "@apply bg-background text-foreground": {}
+      }
+    }
+  },
+  "type": "registry:style"
+}
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/switch.json b/apps/v4/public/r/styles/radix-vega/switch.json
index 23d413e83a..ebc703c59b 100644
--- a/apps/v4/public/r/styles/radix-vega/switch.json
+++ b/apps/v4/public/r/styles/radix-vega/switch.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Switch({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className=\"pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/switch",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/switch.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/table.json b/apps/v4/public/r/styles/radix-vega/table.json
index 0780ebe38b..7759ea3708 100644
--- a/apps/v4/public/r/styles/radix-vega/table.json
+++ b/apps/v4/public/r/styles/radix-vega/table.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/table.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"text-muted-foreground mt-4 text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Table({ className, ...props }: React.ComponentProps<\"table\">) {\n  return (\n    <div\n      data-slot=\"table-container\"\n      className=\"relative w-full overflow-x-auto\"\n    >\n      <table\n        data-slot=\"table\"\n        className={cn(\"w-full caption-bottom text-sm\", className)}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<\"thead\">) {\n  return (\n    <thead\n      data-slot=\"table-header\"\n      className={cn(\"[&_tr]:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<\"tbody\">) {\n  return (\n    <tbody\n      data-slot=\"table-body\"\n      className={cn(\"[&_tr:last-child]:border-0\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<\"tfoot\">) {\n  return (\n    <tfoot\n      data-slot=\"table-footer\"\n      className={cn(\n        \"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<\"tr\">) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        \"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<\"th\">) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        \"h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<\"td\">) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn(\n        \"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TableCaption({\n  className,\n  ...props\n}: React.ComponentProps<\"caption\">) {\n  return (\n    <caption\n      data-slot=\"table-caption\"\n      className={cn(\"mt-4 text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableHead,\n  TableRow,\n  TableCell,\n  TableCaption,\n}\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/table",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/tabs-example.json b/apps/v4/public/r/styles/radix-vega/tabs-example.json
index d37795e942..b6eea8ed7f 100644
--- a/apps/v4/public/r/styles/radix-vega/tabs-example.json
+++ b/apps/v4/public/r/styles/radix-vega/tabs-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/tabs-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TabsExample() {\n  return (\n    <ExampleWrapper>\n      <TabsBasic />\n      <TabsLine />\n      <TabsVariantsComparison />\n      <TabsDisabled />\n      <TabsWithIcons />\n      <TabsIconOnly />\n      <TabsMultiple />\n      <TabsWithContent />\n      <TabsLineWithContent />\n      <TabsLineDisabled />\n      <TabsWithDropdown />\n      <TabsVertical />\n      <TabsWithInputAndButton />\n    </ExampleWrapper>\n  )\n}\n\nfunction TabsBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLine() {\n  return (\n    <Example title=\"Line\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVariantsComparison() {\n  return (\n    <Example title=\"Variants Alignment\">\n      <div className=\"flex gap-4\">\n        <Tabs defaultValue=\"overview\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n        <Tabs defaultValue=\"overview\">\n          <TabsList variant=\"line\">\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n        </Tabs>\n      </div>\n    </Example>\n  )\n}\n\nfunction TabsDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">Home</TabsTrigger>\n          <TabsTrigger value=\"settings\" disabled>\n            Disabled\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Tabs defaultValue=\"preview\">\n        <TabsList>\n          <TabsTrigger value=\"preview\">\n            <IconPlaceholder\n              lucide=\"AppWindowIcon\"\n              tabler=\"IconAppWindow\"\n              hugeicons=\"CursorInWindowIcon\"\n              phosphor=\"AppWindowIcon\"\n              remixicon=\"RiWindowLine\"\n            />\n            Preview\n          </TabsTrigger>\n          <TabsTrigger value=\"code\">\n            <IconPlaceholder\n              lucide=\"CodeIcon\"\n              tabler=\"IconCode\"\n              hugeicons=\"CodeIcon\"\n              phosphor=\"CodeIcon\"\n              remixicon=\"RiCodeLine\"\n            />\n            Code\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsIconOnly() {\n  return (\n    <Example title=\"Icon Only\">\n      <Tabs defaultValue=\"home\">\n        <TabsList>\n          <TabsTrigger value=\"home\">\n            <IconPlaceholder\n              lucide=\"HomeIcon\"\n              tabler=\"IconHome\"\n              hugeicons=\"HomeIcon\"\n              phosphor=\"HouseIcon\"\n              remixicon=\"RiHomeLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"search\">\n            <IconPlaceholder\n              lucide=\"SearchIcon\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </TabsTrigger>\n          <TabsTrigger value=\"settings\">\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsMultiple() {\n  return (\n    <Example title=\"Multiple\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList>\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithContent() {\n  return (\n    <Example title=\"With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineWithContent() {\n  return (\n    <Example title=\"Line With Content\">\n      <Tabs defaultValue=\"account\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsLineDisabled() {\n  return (\n    <Example title=\"Line Disabled\">\n      <Tabs defaultValue=\"overview\">\n        <TabsList variant=\"line\">\n          <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n          <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          <TabsTrigger value=\"reports\" disabled>\n            Reports\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithDropdown() {\n  return (\n    <Example title=\"With Dropdown\">\n      <Tabs defaultValue=\"overview\">\n        <div className=\"flex items-center justify-between\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n            <TabsTrigger value=\"reports\">Reports</TabsTrigger>\n          </TabsList>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"size-8\">\n                <IconPlaceholder\n                  lucide=\"MoreHorizontalIcon\"\n                  tabler=\"IconDots\"\n                  hugeicons=\"MoreHorizontalCircle01Icon\"\n                  phosphor=\"DotsThreeIcon\"\n                  remixicon=\"RiMoreLine\"\n                />\n                <span className=\"sr-only\">More options</span>\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\">\n              <DropdownMenuItem>Settings</DropdownMenuItem>\n              <DropdownMenuItem>Export</DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>Archive</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <Tabs defaultValue=\"account\" orientation=\"vertical\">\n        <TabsList>\n          <TabsTrigger value=\"account\">Account</TabsTrigger>\n          <TabsTrigger value=\"password\">Password</TabsTrigger>\n          <TabsTrigger value=\"notifications\">Notifications</TabsTrigger>\n        </TabsList>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"account\">\n            Manage your account preferences and profile information.\n          </TabsContent>\n          <TabsContent value=\"password\">\n            Update your password to keep your account secure. Use a strong\n            password with a mix of letters, numbers, and symbols.\n          </TabsContent>\n          <TabsContent value=\"notifications\">\n            Configure how you receive notifications and alerts. Choose which\n            types of notifications you want to receive and how you want to\n            receive them.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n\nfunction TabsWithInputAndButton() {\n  return (\n    <Example title=\"With Input and Button\" containerClassName=\"col-span-full\">\n      <Tabs defaultValue=\"overview\" className=\"mx-auto w-full max-w-lg\">\n        <div className=\"flex items-center gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"analytics\">Analytics</TabsTrigger>\n          </TabsList>\n          <div className=\"ml-auto flex items-center gap-2\">\n            <Input placeholder=\"Search...\" className=\"w-44\" />\n            <Button>Action</Button>\n          </div>\n        </div>\n        <div className=\"border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4\">\n          <TabsContent value=\"overview\">\n            View your dashboard metrics and key performance indicators.\n          </TabsContent>\n          <TabsContent value=\"analytics\">\n            Detailed analytics and insights about your data.\n          </TabsContent>\n          <TabsContent value=\"reports\">\n            Generate and view custom reports.\n          </TabsContent>\n        </div>\n      </Tabs>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/tabs.json b/apps/v4/public/r/styles/radix-vega/tabs.json
index 3a9ad149d8..29957ec75a 100644
--- a/apps/v4/public/r/styles/radix-vega/tabs.json
+++ b/apps/v4/public/r/styles/radix-vega/tabs.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"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-vega/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"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 rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\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-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tabs",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tabs.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/textarea.json b/apps/v4/public/r/styles/radix-vega/textarea.json
index e99a6ef6a1..b96aebebfd 100644
--- a/apps/v4/public/r/styles/radix-vega/textarea.json
+++ b/apps/v4/public/r/styles/radix-vega/textarea.json
@@ -4,9 +4,15 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/textarea",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/toggle-group-example.json b/apps/v4/public/r/styles/radix-vega/toggle-group-example.json
index 24c5eaeaf4..7b5c6e0d6f 100644
--- a/apps/v4/public/r/styles/radix-vega/toggle-group-example.json
+++ b/apps/v4/public/r/styles/radix-vega/toggle-group-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/toggle-group-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  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-vega/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-muted-foreground text-xs\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"bg-muted rounded-md px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/radix-vega/ui/toggle-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ToggleGroupExample() {\n  return (\n    <ExampleWrapper>\n      <ToggleGroupBasic />\n      <ToggleGroupOutline />\n      <ToggleGroupOutlineWithIcons />\n      <ToggleGroupSizes />\n      <ToggleGroupSpacing />\n      <ToggleGroupWithIcons />\n      <ToggleGroupFilter />\n      <ToggleGroupDateRange />\n      <ToggleGroupSort />\n      <ToggleGroupWithInputAndSelect />\n      <ToggleGroupVertical />\n      <ToggleGroupVerticalOutline />\n      <ToggleGroupVerticalOutlineWithIcons />\n      <ToggleGroupVerticalWithSpacing />\n      <ToggleGroupFontWeightSelector />\n    </ExampleWrapper>\n  )\n}\n\nfunction ToggleGroupBasic() {\n  return (\n    <Example title=\"Basic\">\n      <ToggleGroup type=\"multiple\" spacing={1}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutline() {\n  return (\n    <Example title=\"Outline\">\n      <ToggleGroup variant=\"outline\" type=\"single\" defaultValue=\"all\">\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"missed\" aria-label=\"Toggle missed\">\n          Missed\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupOutlineWithIcons() {\n  return (\n    <Example title=\"Outline With Icons\">\n      <ToggleGroup variant=\"outline\" type=\"multiple\" size=\"sm\">\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <ToggleGroup\n          type=\"single\"\n          size=\"sm\"\n          defaultValue=\"top\"\n          variant=\"outline\"\n        >\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <ToggleGroup type=\"single\" defaultValue=\"top\" variant=\"outline\">\n          <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n            Top\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n            Bottom\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n            Left\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n            Right\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSpacing() {\n  return (\n    <Example title=\"With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <ToggleGroup type=\"multiple\" variant=\"outline\" spacing={1} size=\"sm\">\n        <ToggleGroupItem\n          value=\"star\"\n          aria-label=\"Toggle star\"\n          className=\"aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"StarIcon\"\n            tabler=\"IconStar\"\n            hugeicons=\"StarIcon\"\n            phosphor=\"StarIcon\"\n            remixicon=\"RiStarLine\"\n          />\n          Star\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"heart\"\n          aria-label=\"Toggle heart\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"HeartIcon\"\n            tabler=\"IconHeart\"\n            hugeicons=\"FavouriteIcon\"\n            phosphor=\"HeartIcon\"\n            remixicon=\"RiHeartLine\"\n          />\n          Heart\n        </ToggleGroupItem>\n        <ToggleGroupItem\n          value=\"bookmark\"\n          aria-label=\"Toggle bookmark\"\n          className=\"aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground\"\n        >\n          <IconPlaceholder\n            lucide=\"BookmarkIcon\"\n            tabler=\"IconBookmark\"\n            hugeicons=\"BookmarkIcon\"\n            phosphor=\"BookmarkIcon\"\n            remixicon=\"RiBookmarkLine\"\n          />\n          Bookmark\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFilter() {\n  return (\n    <Example title=\"Filter\">\n      <ToggleGroup type=\"single\" defaultValue=\"all\" variant=\"outline\" size=\"sm\">\n        <ToggleGroupItem value=\"all\" aria-label=\"All\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupDateRange() {\n  return (\n    <Example title=\"Date Range\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"today\"\n        variant=\"outline\"\n        size=\"sm\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"today\" aria-label=\"Today\">\n          Today\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"week\" aria-label=\"This Week\">\n          This Week\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"month\" aria-label=\"This Month\">\n          This Month\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"year\" aria-label=\"This Year\">\n          This Year\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupSort() {\n  return (\n    <Example title=\"Sort\">\n      <ToggleGroup\n        type=\"single\"\n        defaultValue=\"newest\"\n        variant=\"outline\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"newest\" aria-label=\"Newest\">\n          <IconPlaceholder\n            lucide=\"ArrowDownIcon\"\n            tabler=\"IconArrowDown\"\n            hugeicons=\"ArrowDownIcon\"\n            phosphor=\"ArrowDownIcon\"\n            remixicon=\"RiArrowDownLine\"\n          />\n          Newest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"oldest\" aria-label=\"Oldest\">\n          <IconPlaceholder\n            lucide=\"ArrowUpIcon\"\n            tabler=\"IconArrowUp\"\n            hugeicons=\"ArrowUpIcon\"\n            phosphor=\"ArrowUpIcon\"\n            remixicon=\"RiArrowUpLine\"\n          />\n          Oldest\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"popular\" aria-label=\"Popular\">\n          <IconPlaceholder\n            lucide=\"TrendingUpIcon\"\n            tabler=\"IconTrendingUp\"\n            hugeicons=\"TradeUpIcon\"\n            phosphor=\"TrendUpIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Popular\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupWithInputAndSelect() {\n  return (\n    <Example title=\"With Input and Select\">\n      <div className=\"flex items-center gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Select defaultValue=\"all\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"archived\">Archived</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <ToggleGroup type=\"single\" defaultValue=\"grid\" variant=\"outline\">\n          <ToggleGroupItem value=\"grid\" aria-label=\"Grid view\">\n            Grid\n          </ToggleGroupItem>\n          <ToggleGroupItem value=\"list\" aria-label=\"List view\">\n            List\n          </ToggleGroupItem>\n        </ToggleGroup>\n      </div>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVertical() {\n  return (\n    <Example title=\"Vertical\">\n      <ToggleGroup type=\"multiple\" orientation=\"vertical\" spacing={2}>\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutline() {\n  return (\n    <Example title=\"Vertical Outline\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"single\"\n        defaultValue=\"all\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"all\" aria-label=\"Toggle all\">\n          All\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"active\" aria-label=\"Toggle active\">\n          Active\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"completed\" aria-label=\"Toggle completed\">\n          Completed\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"archived\" aria-label=\"Toggle archived\">\n          Archived\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalOutlineWithIcons() {\n  return (\n    <Example title=\"Vertical Outline With Icons\">\n      <ToggleGroup\n        variant=\"outline\"\n        type=\"multiple\"\n        orientation=\"vertical\"\n        size=\"sm\"\n      >\n        <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n          <IconPlaceholder\n            lucide=\"BoldIcon\"\n            tabler=\"IconBold\"\n            hugeicons=\"TextBoldIcon\"\n            phosphor=\"TextBIcon\"\n            remixicon=\"RiBold\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n          <IconPlaceholder\n            lucide=\"ItalicIcon\"\n            tabler=\"IconItalic\"\n            hugeicons=\"TextItalicIcon\"\n            phosphor=\"TextItalicIcon\"\n            remixicon=\"RiItalic\"\n          />\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n          <IconPlaceholder\n            lucide=\"UnderlineIcon\"\n            tabler=\"IconUnderline\"\n            hugeicons=\"TextUnderlineIcon\"\n            phosphor=\"TextUnderlineIcon\"\n            remixicon=\"RiUnderline\"\n          />\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n\nfunction ToggleGroupFontWeightSelector() {\n  const [fontWeight, setFontWeight] = React.useState(\"normal\")\n  return (\n    <Example title=\"Font Weight Selector\">\n      <Field>\n        <FieldLabel>Font Weight</FieldLabel>\n        <ToggleGroup\n          type=\"single\"\n          value={fontWeight}\n          onValueChange={(value) => setFontWeight(value)}\n          variant=\"outline\"\n          spacing={2}\n          size=\"lg\"\n        >\n          <ToggleGroupItem\n            value=\"light\"\n            aria-label=\"Light\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-light\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Light</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"normal\"\n            aria-label=\"Normal\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-normal\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Normal</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"medium\"\n            aria-label=\"Medium\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-medium\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Medium</span>\n          </ToggleGroupItem>\n          <ToggleGroupItem\n            value=\"bold\"\n            aria-label=\"Bold\"\n            className=\"flex size-16 flex-col items-center justify-center rounded-xl\"\n          >\n            <span className=\"text-2xl leading-none font-bold\">Aa</span>\n            <span className=\"text-xs text-muted-foreground\">Bold</span>\n          </ToggleGroupItem>\n        </ToggleGroup>\n        <FieldDescription>\n          Use{\" \"}\n          <code className=\"rounded-md bg-muted px-1 py-0.5 font-mono\">\n            font-{fontWeight}\n          </code>{\" \"}\n          to set the font weight.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction ToggleGroupVerticalWithSpacing() {\n  return (\n    <Example title=\"Vertical With Spacing\">\n      <ToggleGroup\n        type=\"single\"\n        size=\"sm\"\n        defaultValue=\"top\"\n        variant=\"outline\"\n        orientation=\"vertical\"\n        spacing={2}\n      >\n        <ToggleGroupItem value=\"top\" aria-label=\"Toggle top\">\n          Top\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"bottom\" aria-label=\"Toggle bottom\">\n          Bottom\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"left\" aria-label=\"Toggle left\">\n          Left\n        </ToggleGroupItem>\n        <ToggleGroupItem value=\"right\" aria-label=\"Toggle right\">\n          Right\n        </ToggleGroupItem>\n      </ToggleGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/toggle-group.json b/apps/v4/public/r/styles/radix-vega/toggle-group.json
index 334e8d2494..dca58a91b4 100644
--- a/apps/v4/public/r/styles/radix-vega/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-vega/toggle-group.json
@@ -7,9 +7,16 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/toggle-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-vega/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-vertical:flex-col data-vertical:items-stretch data-[spacing=0]:data-[variant=outline]:shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"data-[state=on]:bg-muted shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-vega/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        \"group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs data-vertical:flex-col data-vertical:items-stretch\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t\",\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle-group",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle-group.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/toggle.json b/apps/v4/public/r/styles/radix-vega/toggle.json
index a8af1671e2..1b050515ed 100644
--- a/apps/v4/public/r/styles/radix-vega/toggle.json
+++ b/apps/v4/public/r/styles/radix-vega/toggle.json
@@ -4,9 +4,16 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/lib/utils\"\n\nconst toggleVariants = cva(\n  \"hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1 rounded-md text-sm font-medium transition-[color,box-shadow] [&_svg:not([class*='size-'])]:size-4 group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border-input hover:bg-muted border bg-transparent shadow-xs\",\n      },\n      size: {\n        default: \"h-9 min-w-9 px-2\",\n        sm: \"h-8 min-w-8 px-1.5\",\n        lg: \"h-10 min-w-10 px-2.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-vega/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 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 shadow-xs hover:bg-muted\",\n      },\n      size: {\n        default: \"h-9 min-w-9 px-2\",\n        sm: \"h-8 min-w-8 px-1.5\",\n        lg: \"h-10 min-w-10 px-2.5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/toggle",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/toggle.md"
+    }
+  },
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/tooltip-example.json b/apps/v4/public/r/styles/radix-vega/tooltip-example.json
index 80a800ea9c..907e71495c 100644
--- a/apps/v4/public/r/styles/radix-vega/tooltip-example.json
+++ b/apps/v4/public/r/styles/radix-vega/tooltip-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/tooltip-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent className=\"pr-1.5\">\n          <div className=\"flex items-center gap-2\">\n            Save Changes <Kbd>S</Kbd>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"text-primary w-fit text-sm underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Kbd } from \"@/registry/radix-vega/ui/kbd\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function TooltipExample() {\n  return (\n    <ExampleWrapper>\n      <TooltipBasic />\n      <TooltipSides />\n      <TooltipWithIcon />\n      <TooltipLongContent />\n      <TooltipDisabled />\n      <TooltipWithKeyboard />\n      <TooltipOnLink />\n      <TooltipFormatted />\n    </ExampleWrapper>\n  )\n}\n\nfunction TooltipBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Add to library</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipSides() {\n  return (\n    <Example title=\"Sides\">\n      <div className=\"flex flex-wrap gap-2\">\n        {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n          <Tooltip key={side}>\n            <TooltipTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit capitalize\">\n                {side}\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side={side}>\n              <p>Add to library</p>\n            </TooltipContent>\n          </Tooltip>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction TooltipWithIcon() {\n  return (\n    <Example title=\"With Icon\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"ghost\" size=\"icon\">\n            <IconPlaceholder\n              lucide=\"InfoIcon\"\n              tabler=\"IconInfoCircle\"\n              hugeicons=\"AlertCircleIcon\"\n              phosphor=\"InfoIcon\"\n              remixicon=\"RiInformationLine\"\n            />\n            <span className=\"sr-only\">Info</span>\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Additional information</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipLongContent() {\n  return (\n    <Example title=\"Long Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Show Tooltip\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          To learn more about how this works, check out the docs. If you have\n          any questions, please reach out to us.\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <span className=\"inline-block w-fit\">\n            <Button variant=\"outline\" disabled>\n              Disabled\n            </Button>\n          </span>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>This feature is currently unavailable</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipWithKeyboard() {\n  return (\n    <Example title=\"With Keyboard Shortcut\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" size=\"icon-sm\">\n            <IconPlaceholder\n              lucide=\"SaveIcon\"\n              tabler=\"IconDeviceFloppy\"\n              hugeicons=\"FloppyDiskIcon\"\n              phosphor=\"FloppyDiskIcon\"\n              remixicon=\"RiSaveLine\"\n            />\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          Save Changes <Kbd>S</Kbd>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipOnLink() {\n  return (\n    <Example title=\"On Link\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <a\n            href=\"#\"\n            className=\"w-fit text-sm text-primary underline-offset-4 hover:underline\"\n            onClick={(e) => e.preventDefault()}\n          >\n            Learn more\n          </a>\n        </TooltipTrigger>\n        <TooltipContent>\n          <p>Click to read the documentation</p>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n\nfunction TooltipFormatted() {\n  return (\n    <Example title=\"Formatted Content\">\n      <Tooltip>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Status\n          </Button>\n        </TooltipTrigger>\n        <TooltipContent>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-semibold\">Active</p>\n            <p className=\"text-xs opacity-80\">Last updated 2 hours ago</p>\n          </div>\n        </TooltipContent>\n      </Tooltip>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/tooltip.json b/apps/v4/public/r/styles/radix-vega/tooltip.json
index 95f8e0cb6b..4830be3d16 100644
--- a/apps/v4/public/r/styles/radix-vega/tooltip.json
+++ b/apps/v4/public/r/styles/radix-vega/tooltip.json
@@ -4,10 +4,17 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  )\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
+  "meta": {
+    "links": {
+      "docs": "https://ui.shadcn.com/docs/components/radix/tooltip",
+      "examples": "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+      "api": "https://www.radix-ui.com/docs/primitives/components/tooltip.md"
+    }
+  },
   "docs": "The `tooltip` component has been added. Remember to wrap your app with the `TooltipProvider` component.\n\n```tsx title=\"app/layout.tsx\"\nimport { TooltipProvider } from \"@/components/ui/tooltip\"\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <TooltipProvider>{children}</TooltipProvider>\n      </body>\n    </html>\n  )\n}\n```\n",
   "type": "registry:ui"
 }
\ No newline at end of file
diff --git a/apps/v4/public/r/styles/radix-vega/vercel.json b/apps/v4/public/r/styles/radix-vega/vercel.json
deleted file mode 100644
index 0be4aceaa1..0000000000
--- a/apps/v4/public/r/styles/radix-vega/vercel.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
-  "name": "vercel",
-  "title": "Vercel",
-  "registryDependencies": [
-    "alert",
-    "badge",
-    "button",
-    "calendar",
-    "card",
-    "chart",
-    "dialog",
-    "dropdown-menu",
-    "empty",
-    "field",
-    "input-group",
-    "item",
-    "native-select",
-    "popover",
-    "textarea",
-    "example"
-  ],
-  "files": [
-    {
-      "path": "registry/radix-vega/blocks/vercel.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { type DateRange } from \"react-day-picker\"\nimport { Area, AreaChart } from \"recharts\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Alert, AlertDescription } from \"@/registry/radix-vega/ui/alert\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Calendar } from \"@/registry/radix-vega/ui/calendar\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyTitle,\n} from \"@/registry/radix-vega/ui/empty\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function VercelBlock() {\n  return (\n    <ExampleWrapper>\n      <DeploymentFilter />\n      <UsageCard />\n      <ObservabilityCard />\n      <BillingList />\n      <AnomalyAlert />\n      <ActivateAgentDialog />\n      <FeedbackForm />\n      <AnalyticsCard />\n    </ExampleWrapper>\n  )\n}\n\nconst items = [\n  {\n    name: \"Edge Requests\",\n    value: \"$1.83K\",\n    percentage: 67.34,\n  },\n  {\n    name: \"Fast Data Transfer\",\n    percentage: 52.18,\n    value: \"$952.51\",\n  },\n  {\n    name: \"Monitoring data points\",\n    percentage: 89.42,\n    value: \"$901.20\",\n  },\n  {\n    name: \"Web Analytics Events\",\n    percentage: 45.67,\n    value: \"$603.71\",\n  },\n  {\n    name: \"Edge Request CPU Duration\",\n    percentage: 23.91,\n    value: \"$4.65\",\n  },\n  {\n    name: \"Fast Origin Transfer\",\n    percentage: 38.75,\n    value: \"$3.85\",\n  },\n  {\n    name: \"ISR Reads\",\n    percentage: 71.24,\n    value: \"$2.86\",\n  },\n  {\n    name: \"Function Invocations\",\n    percentage: 15.83,\n    value: \"$0.60\",\n  },\n  {\n    name: \"ISR Writes\",\n    percentage: 26.23,\n    value: \"524.52K / 2M\",\n  },\n  {\n    name: \"Function Duration\",\n    percentage: 5.11,\n    value: \"5.11 GB Hrs / 1K GB Hrs\",\n  },\n]\n\nfunction UsageCard() {\n  return (\n    <Example title=\"Usage\" className=\"items-center\">\n      <Card className=\"w-full max-w-sm gap-4\">\n        <CardHeader>\n          <CardTitle className=\"px-1 text-sm\">\n            5 days remaining in cycle\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <ItemGroup className=\"gap-0\">\n            {items.map((item) => (\n              <Item\n                key={item.name}\n                size=\"xs\"\n                asChild\n                className=\"px-0 group-hover/item-group:bg-transparent\"\n              >\n                <a href=\"#\">\n                  <ItemMedia variant=\"icon\" className=\"text-primary\">\n                    <CircularGauge percentage={item.percentage} />\n                  </ItemMedia>\n                  <ItemContent className=\"inline-block truncate\">\n                    <ItemTitle className=\"inline\">{item.name}</ItemTitle>\n                  </ItemContent>\n                  <ItemActions>\n                    <span className=\"text-muted-foreground font-mono text-xs font-medium tabular-nums\">\n                      {item.value}\n                    </span>\n                  </ItemActions>\n                </a>\n              </Item>\n            ))}\n          </ItemGroup>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction AnomalyAlert() {\n  return (\n    <Example title=\"Anomaly Alert\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-xs\">\n        <CardContent className=\"p-6\">\n          <Empty className=\"mx-auto p-0\">\n            <EmptyHeader>\n              <EmptyTitle>Get alerted for anomalies</EmptyTitle>\n              <EmptyDescription>\n                Automatically monitor your projects for anomalies and get\n                notified.\n              </EmptyDescription>\n            </EmptyHeader>\n            <EmptyContent>\n              <Button>Upgrade to Observability Plus</Button>\n            </EmptyContent>\n          </Empty>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nconst environments = [\n  \"All Environments\",\n  \"Production\",\n  \"Preview\",\n  \"Development\",\n  \"Staging\",\n  \"Test\",\n  \"Other\",\n]\n\nconst statuses = [\n  { name: \"Ready\", color: \"oklch(0.72 0.19 150)\" },\n  { name: \"Error\", color: \"oklch(0.64 0.21 25)\" },\n  { name: \"Building\", color: \"oklch(0.77 0.16 70)\" },\n  { name: \"Queued\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Provisioning\", color: \"oklch(0.72 0.00 0)\" },\n  { name: \"Canceled\", color: \"oklch(0.72 0.00 0)\" },\n]\n\nfunction DeploymentFilter() {\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState(\n    environments[0]\n  )\n  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(\n    new Set(statuses.slice(0, 5).map((s) => s.name))\n  )\n  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()\n\n  const toggleStatus = (statusName: string) => {\n    setSelectedStatuses((prev) => {\n      const next = new Set(prev)\n      if (next.has(statusName)) {\n        next.delete(statusName)\n      } else {\n        next.add(statusName)\n      }\n      return next\n    })\n  }\n\n  return (\n    <Example title=\"Deployment Filter\" containerClassName=\"col-span-full\">\n      <div className=\"flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto\">\n        <Popover>\n          <PopoverTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-start\">\n              <IconPlaceholder\n                lucide=\"CalendarIcon\"\n                tabler=\"IconCalendar\"\n                hugeicons=\"Calendar01Icon\"\n                phosphor=\"CalendarIcon\"\n                remixicon=\"RiCalendarLine\"\n                data-icon=\"inline-start\"\n                className=\"text-muted-foreground\"\n              />\n              {dateRange?.from ? (\n                dateRange.to ? (\n                  <>\n                    {format(dateRange.from, \"LLL dd, y\")} -{\" \"}\n                    {format(dateRange.to, \"LLL dd, y\")}\n                  </>\n                ) : (\n                  format(dateRange.from, \"LLL dd, y\")\n                )\n              ) : (\n                \"Select Date Range\"\n              )}\n            </Button>\n          </PopoverTrigger>\n          <PopoverContent className=\"w-auto p-0\" align=\"start\">\n            <Calendar\n              mode=\"range\"\n              defaultMonth={dateRange?.from}\n              selected={dateRange}\n              onSelect={setDateRange}\n              numberOfMonths={2}\n            />\n          </PopoverContent>\n        </Popover>\n        <InputGroup className=\"lg:ml-auto lg:max-w-72\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"Search01Icon\"\n              phosphor=\"MagnifyingGlassIcon\"\n              remixicon=\"RiSearchLine\"\n            />\n          </InputGroupAddon>\n          <InputGroupInput placeholder=\"All Authors...\" />\n          <InputGroupAddon align=\"inline-end\">\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              className=\"text-muted-foreground\"\n            />\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              {selectedEnvironment}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {environments.map((environment) => (\n              <DropdownMenuItem\n                key={environment}\n                onSelect={() => setSelectedEnvironment(environment)}\n                data-active={selectedEnvironment === environment}\n              >\n                {environment}\n                <IconPlaceholder\n                  lucide=\"CheckIcon\"\n                  tabler=\"IconCheck\"\n                  hugeicons=\"Tick02Icon\"\n                  phosphor=\"CheckIcon\"\n                  remixicon=\"RiCheckLine\"\n                  className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                />\n              </DropdownMenuItem>\n            ))}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"outline\" className=\"justify-between\">\n              <div className=\"flex items-center -space-x-0.5\">\n                {statuses.map((status) => (\n                  <div\n                    key={status.name}\n                    style={\n                      {\n                        \"--color\": status.color,\n                      } as React.CSSProperties\n                    }\n                    className=\"size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0\"\n                    data-active={selectedStatuses.has(status.name)}\n                  />\n                ))}\n              </div>\n              Status {selectedStatuses.size}/{statuses.length}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                data-icon=\"inline-end\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            {statuses.map((status) => {\n              const isSelected = selectedStatuses.has(status.name)\n              return (\n                <DropdownMenuItem\n                  key={status.name}\n                  onSelect={() => toggleStatus(status.name)}\n                  data-active={isSelected}\n                  style={\n                    {\n                      \"--color\": status.color,\n                    } as React.CSSProperties\n                  }\n                >\n                  <div className=\"flex items-center gap-2\">\n                    <div className=\"size-2 rounded-full bg-(--color)\" />\n                    {status.name}\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"CheckIcon\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"CheckIcon\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100\"\n                  />\n                </DropdownMenuItem>\n              )\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nconst billingItems = [\n  {\n    month: \"November 2025\",\n    invoiceDate: new Date(2025, 10, 5),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"October 2025\",\n    invoiceDate: new Date(2025, 9, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n  {\n    month: \"September 2025\",\n    invoiceDate: new Date(2025, 8, 4),\n    amount: \"$10.00\",\n    status: \"Paid\" as const,\n  },\n]\n\nfunction BillingList() {\n  return (\n    <Example\n      title=\"Billing\"\n      className=\"items-center lg:p-16\"\n      containerClassName=\"col-span-full\"\n    >\n      <ItemGroup className=\"max-w-7xl gap-0 rounded-lg border\">\n        {billingItems.map((item, index) => (\n          <React.Fragment key={item.month}>\n            <Item className=\"grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]\">\n              <ItemContent>\n                <ItemTitle>\n                  {item.month}\n                  <Badge\n                    variant=\"secondary\"\n                    className=\"bg-green-100 text-green-700 hover:bg-green-100\"\n                  >\n                    {item.status}\n                  </Badge>\n                </ItemTitle>\n                <ItemDescription>\n                  Infrastructure usage & Vercel platform\n                </ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemTitle>Total Due</ItemTitle>\n                <ItemDescription>{item.amount}</ItemDescription>\n              </ItemContent>\n              <ItemContent className=\"hidden lg:flex\">\n                <ItemDescription>\n                  Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                </ItemDescription>\n              </ItemContent>\n              <ItemActions>\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <IconPlaceholder\n                        lucide=\"MoreHorizontalIcon\"\n                        tabler=\"IconDots\"\n                        hugeicons=\"MoreHorizontalCircle01Icon\"\n                        phosphor=\"DotsThreeOutlineIcon\"\n                        remixicon=\"RiMoreLine\"\n                      />\n                      <span className=\"sr-only\">More options</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>View invoice</DropdownMenuItem>\n                    <DropdownMenuItem>Download PDF</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Contact support</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </ItemActions>\n              <ItemFooter className=\"col-span-full w-full border-t pt-4 lg:hidden\">\n                <ItemContent>\n                  <ItemTitle>Total Due</ItemTitle>\n                  <ItemDescription>{item.amount}</ItemDescription>\n                </ItemContent>\n                <ItemContent>\n                  <ItemDescription>\n                    Invoiced {format(item.invoiceDate, \"d MMM yyyy\")}\n                  </ItemDescription>\n                </ItemContent>\n              </ItemFooter>\n            </Item>\n            {index !== billingItems.length - 1 && (\n              <ItemSeparator className=\"my-0\" />\n            )}\n          </React.Fragment>\n        ))}\n      </ItemGroup>\n    </Example>\n  )\n}\n\nfunction CircularGauge({ percentage }: { percentage: number }) {\n  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)\n  const circumference = 2 * Math.PI * 42.5\n  const strokePercent = (normalizedPercentage / 100) * circumference\n\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      height=\"16\"\n      width=\"16\"\n      strokeWidth=\"2\"\n      viewBox=\"0 0 100 100\"\n      className=\"-rotate-90\"\n    >\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className=\"opacity-20\"\n        stroke=\"currentColor\"\n        style={{\n          strokeDasharray: `${circumference} ${circumference}`,\n        }}\n      />\n      <circle\n        cx=\"50\"\n        cy=\"50\"\n        r=\"42.5\"\n        strokeWidth=\"12\"\n        strokeDashoffset=\"0\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        stroke=\"currentColor\"\n        className=\"transition-all duration-300\"\n        style={{\n          strokeDasharray: `${strokePercent} ${circumference}`,\n        }}\n      />\n    </svg>\n  )\n}\n\nconst agentFeatures = [\n  {\n    id: \"code-reviews\",\n    content: (\n      <>\n        <strong>Code reviews</strong> with full codebase context to catch{\" \"}\n        <strong>hard-to-find</strong> bugs. bugs.\n      </>\n    ),\n  },\n  {\n    id: \"code-suggestions\",\n    content: (\n      <>\n        <strong>Code suggestions</strong> validated in sandboxes before you\n        merge.\n      </>\n    ),\n  },\n  {\n    id: \"root-cause\",\n    content: (\n      <>\n        <strong>Root-cause analysis</strong> for production issues with\n        deployment context.{\" \"}\n        <Badge\n          variant=\"secondary\"\n          className=\"bg-blue-100 text-blue-700 hover:bg-blue-100\"\n        >\n          Requires Observability Plus\n        </Badge>\n      </>\n    ),\n  },\n]\n\nfunction ActivateAgentDialog() {\n  return (\n    <Example title=\"Activate Agent\" className=\"items-center justify-center\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Activate Agent</Button>\n        </DialogTrigger>\n        <DialogContent showCloseButton={false}>\n          <DialogHeader>\n            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>\n            <DialogDescription>\n              Your use is subject to Vercel&apos;s{\" \"}\n              <a href=\"#\">Public Beta Agreement</a> and{\" \"}\n              <a href=\"#\">AI Product Terms</a>.\n            </DialogDescription>\n          </DialogHeader>\n          <div className=\"no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto\">\n            <ItemGroup className=\"gap-0 pr-2\">\n              {agentFeatures.map((feature) => (\n                <Item key={feature.id} size=\"xs\" className=\"px-0\">\n                  <ItemMedia variant=\"icon\" className=\"self-start\">\n                    <IconPlaceholder\n                      lucide=\"CheckCircle2Icon\"\n                      tabler=\"IconCircleCheckFilled\"\n                      hugeicons=\"CheckmarkCircle02Icon\"\n                      phosphor=\"CheckCircleIcon\"\n                      remixicon=\"RiCheckboxCircleLine\"\n                      className=\"fill-primary text-primary-foreground size-5\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle className=\"text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium\">\n                      {feature.content}\n                    </ItemTitle>\n                  </ItemContent>\n                </Item>\n              ))}\n            </ItemGroup>\n            <Alert className=\"hidden sm:grid\">\n              <IconPlaceholder\n                lucide=\"CircleDollarSignIcon\"\n                hugeicons=\"DollarCircleIcon\"\n                tabler=\"IconCoin\"\n                phosphor=\"CurrencyCircleDollarIcon\"\n                remixicon=\"RiMoneyDollarCircleLine\"\n              />\n              <AlertDescription>\n                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.\n              </AlertDescription>\n            </Alert>\n          </div>\n          <DialogFooter>\n            <DialogClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Enable with $100 credits</Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction ObservabilityCard() {\n  return (\n    <Example title=\"Observability\" className=\"items-center justify-center\">\n      <Card className=\"relative w-full max-w-md overflow-hidden pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>\n          <CardDescription>\n            Switch to the improved way to explore your data, with natural\n            language. Monitoring will no longer be available on the Pro plan in\n            November, 2025\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button>\n            Create Query{\" \"}\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"PlusSignIcon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-end\"\n            />\n          </Button>\n          <Badge variant=\"secondary\" className=\"ml-auto\">\n            Warning\n          </Badge>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction FeedbackForm() {\n  return (\n    <Example title=\"Feedback Form\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form id=\"feedback-form\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"topic\">Topic</FieldLabel>\n                <NativeSelect id=\"topic\">\n                  <NativeSelectOption value=\"\">\n                    Select a topic\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ai\">AI</NativeSelectOption>\n                  <NativeSelectOption value=\"accounts-and-access-controls\">\n                    Accounts and Access Controls\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"billing\">\n                    Billing\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"cdn\">\n                    CDN (Firewall, Caching)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"ci-cd\">\n                    CI/CD (Builds, Deployments, Environment Variables)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"dashboard-interface\">\n                    Dashboard Interface (Navigation, UI Issues)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"domains\">\n                    Domains\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"frameworks\">\n                    Frameworks\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"marketplace-and-integrations\">\n                    Marketplace and Integrations\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"observability\">\n                    Observability (Observability, Logs, Monitoring)\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"storage\">\n                    Storage\n                  </NativeSelectOption>\n                </NativeSelect>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"feedback\">Feedback</FieldLabel>\n                <Textarea\n                  id=\"feedback\"\n                  placeholder=\"Your feedback helps us improve...\"\n                />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"feedback-form\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst chartData = [\n  { month: \"January\", visitors: 186 },\n  { month: \"February\", visitors: 305 },\n  { month: \"March\", visitors: 237 },\n  { month: \"April\", visitors: 73 },\n  { month: \"May\", visitors: 209 },\n  { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n    color: \"var(--chart-1)\",\n  },\n} satisfies ChartConfig\n\nfunction AnalyticsCard() {\n  return (\n    <Example title=\"Analytics Card\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-sm data-[size=sm]:pb-0\" size=\"sm\">\n        <CardHeader>\n          <CardTitle>Analytics</CardTitle>\n          <CardDescription>\n            418.2K Visitors <Badge>+10%</Badge>\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              View Analytics\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <ChartContainer config={chartConfig} className=\"aspect-[1/0.35]\">\n          <AreaChart\n            accessibilityLayer\n            data={chartData}\n            margin={{\n              left: 0,\n              right: 0,\n            }}\n          >\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent indicator=\"line\" hideLabel />}\n              defaultIndex={2}\n            />\n            <Area\n              dataKey=\"visitors\"\n              type=\"linear\"\n              fill=\"var(--color-visitors)\"\n              fillOpacity={0.4}\n              stroke=\"var(--color-visitors)\"\n            />\n          </AreaChart>\n        </ChartContainer>\n      </Card>\n    </Example>\n  )\n}\n",
-      "type": "registry:block"
-    }
-  ],
-  "type": "registry:block"
-}
\ No newline at end of file
diff --git a/apps/v4/public/r/templates/astro-app.tar.gz b/apps/v4/public/r/templates/astro-app.tar.gz
new file mode 100644
index 0000000000..f92ecb698f
Binary files /dev/null and b/apps/v4/public/r/templates/astro-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/astro-monorepo.tar.gz b/apps/v4/public/r/templates/astro-monorepo.tar.gz
new file mode 100644
index 0000000000..546d9bd90a
Binary files /dev/null and b/apps/v4/public/r/templates/astro-monorepo.tar.gz differ
diff --git a/apps/v4/public/r/templates/next-app.tar.gz b/apps/v4/public/r/templates/next-app.tar.gz
new file mode 100644
index 0000000000..6707b2740b
Binary files /dev/null and b/apps/v4/public/r/templates/next-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/next-monorepo.tar.gz b/apps/v4/public/r/templates/next-monorepo.tar.gz
new file mode 100644
index 0000000000..1f841c6e66
Binary files /dev/null and b/apps/v4/public/r/templates/next-monorepo.tar.gz differ
diff --git a/apps/v4/public/r/templates/react-router-app.tar.gz b/apps/v4/public/r/templates/react-router-app.tar.gz
new file mode 100644
index 0000000000..b4d71491cf
Binary files /dev/null and b/apps/v4/public/r/templates/react-router-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/react-router-monorepo.tar.gz b/apps/v4/public/r/templates/react-router-monorepo.tar.gz
new file mode 100644
index 0000000000..7725680062
Binary files /dev/null and b/apps/v4/public/r/templates/react-router-monorepo.tar.gz differ
diff --git a/apps/v4/public/r/templates/start-app.tar.gz b/apps/v4/public/r/templates/start-app.tar.gz
new file mode 100644
index 0000000000..8f461392af
Binary files /dev/null and b/apps/v4/public/r/templates/start-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/start-monorepo.tar.gz b/apps/v4/public/r/templates/start-monorepo.tar.gz
new file mode 100644
index 0000000000..08954fc145
Binary files /dev/null and b/apps/v4/public/r/templates/start-monorepo.tar.gz differ
diff --git a/apps/v4/public/r/templates/vite-app.tar.gz b/apps/v4/public/r/templates/vite-app.tar.gz
new file mode 100644
index 0000000000..9143972a7e
Binary files /dev/null and b/apps/v4/public/r/templates/vite-app.tar.gz differ
diff --git a/apps/v4/public/r/templates/vite-monorepo.tar.gz b/apps/v4/public/r/templates/vite-monorepo.tar.gz
new file mode 100644
index 0000000000..6301a0ef19
Binary files /dev/null and b/apps/v4/public/r/templates/vite-monorepo.tar.gz differ
diff --git a/apps/v4/public/schema/registry-item.json b/apps/v4/public/schema/registry-item.json
index da2aab51a7..772b1212ff 100644
--- a/apps/v4/public/schema/registry-item.json
+++ b/apps/v4/public/schema/registry-item.json
@@ -246,6 +246,10 @@
             "type": "string"
           },
           "description": "Array of font subsets to include (e.g., ['latin', 'latin-ext'])."
+        },
+        "selector": {
+          "type": "string",
+          "description": "CSS selector to apply the font utility class to (e.g., 'h1, h2, h3'). Defaults to 'html'."
         }
       },
       "required": ["family", "provider", "import", "variable"]
diff --git a/apps/v4/registry/base-colors.ts b/apps/v4/registry/base-colors.ts
index dce6eb60db..3523db36be 100644
--- a/apps/v4/registry/base-colors.ts
+++ b/apps/v4/registry/base-colors.ts
@@ -1,7 +1,9 @@
 import { THEMES } from "@/registry/themes"
 
 export const BASE_COLORS = THEMES.filter((theme) =>
-  ["neutral", "stone", "zinc", "gray"].includes(theme.name)
+  ["neutral", "stone", "zinc", "mauve", "olive", "mist", "taupe"].includes(
+    theme.name
+  )
 )
 
 export type BaseColor = (typeof BASE_COLORS)[number]
diff --git a/apps/v4/registry/bases/__index__.tsx b/apps/v4/registry/bases/__index__.tsx
index 7100381fca..83063b6c51 100644
--- a/apps/v4/registry/bases/__index__.tsx
+++ b/apps/v4/registry/bases/__index__.tsx
@@ -30,7 +30,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/accordion",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+          api: "https://www.radix-ui.com/primitives/docs/components/accordion.md",
+        },
+      },
     },
     alert: {
       name: "alert",
@@ -55,7 +62,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/alert",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx",
+        },
+      },
     },
     "alert-dialog": {
       name: "alert-dialog",
@@ -80,7 +93,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+          api: "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md",
+        },
+      },
     },
     "aspect-ratio": {
       name: "aspect-ratio",
@@ -105,7 +125,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+          api: "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md",
+        },
+      },
     },
     avatar: {
       name: "avatar",
@@ -130,7 +157,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/avatar",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+          api: "https://www.radix-ui.com/primitives/docs/components/avatar.md",
+        },
+      },
     },
     badge: {
       name: "badge",
@@ -155,7 +189,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/badge",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx",
+        },
+      },
     },
     breadcrumb: {
       name: "breadcrumb",
@@ -180,7 +220,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx",
+        },
+      },
     },
     button: {
       name: "button",
@@ -205,7 +251,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/button",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx",
+        },
+      },
     },
     "button-group": {
       name: "button-group",
@@ -230,7 +282,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/button-group",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx",
+        },
+      },
     },
     calendar: {
       name: "calendar",
@@ -255,7 +313,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/calendar",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+          api: "https://react-day-picker.js.org",
+        },
+      },
     },
     card: {
       name: "card",
@@ -280,7 +345,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/card",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx",
+        },
+      },
     },
     carousel: {
       name: "carousel",
@@ -305,7 +376,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/carousel",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+          api: "https://www.embla-carousel.com/get-started/react",
+        },
+      },
     },
     chart: {
       name: "chart",
@@ -330,7 +408,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/chart",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx",
+        },
+      },
     },
     checkbox: {
       name: "checkbox",
@@ -355,7 +439,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/checkbox",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/checkbox.md",
+        },
+      },
     },
     collapsible: {
       name: "collapsible",
@@ -380,7 +471,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/collapsible",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/collapsible.md",
+        },
+      },
     },
     combobox: {
       name: "combobox",
@@ -405,7 +503,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/combobox",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+          api: "https://base-ui.com/react/components/combobox",
+        },
+      },
     },
     command: {
       name: "command",
@@ -430,7 +535,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/command",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+          api: "https://github.com/dip/cmdk",
+        },
+      },
     },
     "context-menu": {
       name: "context-menu",
@@ -455,7 +567,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/context-menu",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/context-menu.md",
+        },
+      },
     },
     dialog: {
       name: "dialog",
@@ -480,7 +599,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/dialog",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/dialog.md",
+        },
+      },
     },
     drawer: {
       name: "drawer",
@@ -505,7 +631,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/drawer",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+          api: "https://vaul.emilkowal.ski/getting-started",
+        },
+      },
     },
     "dropdown-menu": {
       name: "dropdown-menu",
@@ -530,7 +663,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md",
+        },
+      },
     },
     empty: {
       name: "empty",
@@ -555,7 +695,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/empty",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx",
+        },
+      },
     },
     field: {
       name: "field",
@@ -580,7 +726,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/field",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx",
+        },
+      },
     },
     "hover-card": {
       name: "hover-card",
@@ -605,7 +757,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/hover-card",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/hover-card.md",
+        },
+      },
     },
     input: {
       name: "input",
@@ -630,7 +789,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/input",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx",
+        },
+      },
     },
     "input-group": {
       name: "input-group",
@@ -655,7 +820,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/input-group",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx",
+        },
+      },
     },
     "input-otp": {
       name: "input-otp",
@@ -680,7 +851,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/input-otp",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+          api: "https://input-otp.rodz.dev",
+        },
+      },
     },
     item: {
       name: "item",
@@ -705,7 +883,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/item",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx",
+        },
+      },
     },
     label: {
       name: "label",
@@ -730,7 +914,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/label",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/label.md",
+        },
+      },
     },
     menubar: {
       name: "menubar",
@@ -755,7 +946,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/menubar",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/menubar.md",
+        },
+      },
     },
     "navigation-menu": {
       name: "navigation-menu",
@@ -782,7 +980,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md",
+        },
+      },
     },
     pagination: {
       name: "pagination",
@@ -807,7 +1012,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/pagination",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx",
+        },
+      },
     },
     popover: {
       name: "popover",
@@ -832,7 +1043,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/popover",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/popover.md",
+        },
+      },
     },
     progress: {
       name: "progress",
@@ -857,7 +1075,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/progress",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/progress.md",
+        },
+      },
     },
     "radio-group": {
       name: "radio-group",
@@ -882,7 +1107,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/radio-group",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/radio-group.md",
+        },
+      },
     },
     resizable: {
       name: "resizable",
@@ -907,7 +1139,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/resizable",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+          api: "https://github.com/bvaughn/react-resizable-panels",
+        },
+      },
     },
     "scroll-area": {
       name: "scroll-area",
@@ -932,7 +1171,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/scroll-area",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/scroll-area.md",
+        },
+      },
     },
     select: {
       name: "select",
@@ -957,7 +1203,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/select",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/select.md",
+        },
+      },
     },
     separator: {
       name: "separator",
@@ -982,7 +1235,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/separator",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/separator.md",
+        },
+      },
     },
     sheet: {
       name: "sheet",
@@ -1007,7 +1267,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/sheet",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/dialog.md",
+        },
+      },
     },
     sidebar: {
       name: "sidebar",
@@ -1040,7 +1307,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/sidebar",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx",
+        },
+      },
     },
     skeleton: {
       name: "skeleton",
@@ -1065,7 +1338,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/skeleton",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx",
+        },
+      },
     },
     slider: {
       name: "slider",
@@ -1090,7 +1369,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/slider",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/slider.md",
+        },
+      },
     },
     sonner: {
       name: "sonner",
@@ -1115,7 +1401,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/sonner",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+          api: "https://sonner.emilkowal.ski",
+        },
+      },
     },
     spinner: {
       name: "spinner",
@@ -1140,7 +1433,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/spinner",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx",
+        },
+      },
     },
     switch: {
       name: "switch",
@@ -1165,7 +1464,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/switch",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/switch.md",
+        },
+      },
     },
     table: {
       name: "table",
@@ -1190,7 +1496,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/table",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx",
+        },
+      },
     },
     tabs: {
       name: "tabs",
@@ -1215,7 +1527,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/tabs",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/tabs.md",
+        },
+      },
     },
     textarea: {
       name: "textarea",
@@ -1240,7 +1559,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/textarea",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx",
+        },
+      },
     },
     toggle: {
       name: "toggle",
@@ -1265,7 +1590,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/toggle",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/toggle.md",
+        },
+      },
     },
     "toggle-group": {
       name: "toggle-group",
@@ -1290,7 +1622,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/toggle-group",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/toggle-group.md",
+        },
+      },
     },
     tooltip: {
       name: "tooltip",
@@ -1315,7 +1654,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/tooltip",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+          api: "https://www.radix-ui.com/docs/primitives/components/tooltip.md",
+        },
+      },
     },
     kbd: {
       name: "kbd",
@@ -1340,7 +1686,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/kbd",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx",
+        },
+      },
     },
     "native-select": {
       name: "native-select",
@@ -1365,7 +1717,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/native-select",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx",
+        },
+      },
     },
     direction: {
       name: "direction",
@@ -1390,7 +1748,12 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/radix/direction",
+          api: "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md",
+        },
+      },
     },
     "accordion-example": {
       name: "accordion-example",
@@ -3106,6 +3469,46 @@ export const Index: Record<string, Record<string, any>> = {
       categories: undefined,
       meta: undefined,
     },
+    demo: {
+      name: "demo",
+      title: "Demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea",
+      ],
+      files: [
+        {
+          path: "registry/bases/radix/examples/demo.tsx",
+          type: "registry:example",
+          target: "",
+        },
+      ],
+      component: React.lazy(async () => {
+        const mod = await import("@/registry/bases/radix/examples/demo.tsx")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || item.name
+        return { default: mod.default || mod[exportName] }
+      }),
+      categories: undefined,
+      meta: undefined,
+    },
     "component-example": {
       name: "component-example",
       title: "Example",
@@ -3199,7 +3602,7 @@ export const Index: Record<string, Record<string, any>> = {
     },
     preview: {
       name: "preview",
-      title: "Home",
+      title: "Preview",
       description: "",
       type: "registry:block",
       registryDependencies: [
@@ -3232,168 +3635,15 @@ export const Index: Record<string, Record<string, any>> = {
       ],
       files: [
         {
-          path: "registry/bases/radix/blocks/preview.tsx",
+          path: "registry/bases/radix/blocks/preview/index.tsx",
           type: "registry:block",
           target: "",
         },
       ],
       component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/radix/blocks/preview.tsx")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || item.name
-        return { default: mod.default || mod[exportName] }
-      }),
-      categories: undefined,
-      meta: undefined,
-    },
-    elevenlabs: {
-      name: "elevenlabs",
-      title: "Elevenlabs",
-      description: "",
-      type: "registry:block",
-      registryDependencies: ["example", "button", "card"],
-      files: [
-        {
-          path: "registry/bases/radix/blocks/elevenlabs.tsx",
-          type: "registry:block",
-          target: "",
-        },
-      ],
-      component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/radix/blocks/elevenlabs.tsx")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || item.name
-        return { default: mod.default || mod[exportName] }
-      }),
-      categories: undefined,
-      meta: undefined,
-    },
-    github: {
-      name: "github",
-      title: "GitHub",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example",
-      ],
-      files: [
-        {
-          path: "registry/bases/radix/blocks/github.tsx",
-          type: "registry:block",
-          target: "",
-        },
-      ],
-      component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/radix/blocks/github.tsx")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || item.name
-        return { default: mod.default || mod[exportName] }
-      }),
-      categories: undefined,
-      meta: undefined,
-    },
-    vercel: {
-      name: "vercel",
-      title: "Vercel",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example",
-      ],
-      files: [
-        {
-          path: "registry/bases/radix/blocks/vercel.tsx",
-          type: "registry:block",
-          target: "",
-        },
-      ],
-      component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/radix/blocks/vercel.tsx")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || item.name
-        return { default: mod.default || mod[exportName] }
-      }),
-      categories: undefined,
-      meta: undefined,
-    },
-    chatgpt: {
-      name: "chatgpt",
-      title: "ChatGPT",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example",
-      ],
-      files: [
-        {
-          path: "registry/bases/radix/blocks/chatgpt.tsx",
-          type: "registry:block",
-          target: "",
-        },
-      ],
-      component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/radix/blocks/chatgpt.tsx")
+        const mod = await import(
+          "@/registry/bases/radix/blocks/preview/index.tsx"
+        )
         const exportName =
           Object.keys(mod).find(
             (key) =>
@@ -4668,7 +4918,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/accordion",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+          api: "https://base-ui.com/react/components/accordion.md",
+        },
+      },
     },
     alert: {
       name: "alert",
@@ -4693,7 +4950,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/alert",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx",
+        },
+      },
     },
     "alert-dialog": {
       name: "alert-dialog",
@@ -4718,7 +4981,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/alert-dialog",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+          api: "https://base-ui.com/react/components/alert-dialog.md",
+        },
+      },
     },
     "aspect-ratio": {
       name: "aspect-ratio",
@@ -4743,7 +5013,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx",
+        },
+      },
     },
     avatar: {
       name: "avatar",
@@ -4768,7 +5044,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/avatar",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+          api: "https://base-ui.com/react/components/avatar.md",
+        },
+      },
     },
     badge: {
       name: "badge",
@@ -4793,7 +5076,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/badge",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx",
+        },
+      },
     },
     breadcrumb: {
       name: "breadcrumb",
@@ -4818,7 +5107,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/breadcrumb",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx",
+        },
+      },
     },
     button: {
       name: "button",
@@ -4843,7 +5138,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/button",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx",
+        },
+      },
     },
     "button-group": {
       name: "button-group",
@@ -4868,7 +5169,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/button-group",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx",
+        },
+      },
     },
     calendar: {
       name: "calendar",
@@ -4893,7 +5200,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/calendar",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+          api: "https://react-day-picker.js.org",
+        },
+      },
     },
     card: {
       name: "card",
@@ -4918,7 +5232,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/card",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx",
+        },
+      },
     },
     carousel: {
       name: "carousel",
@@ -4943,7 +5263,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/carousel",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+          api: "https://www.embla-carousel.com/get-started/react",
+        },
+      },
     },
     chart: {
       name: "chart",
@@ -4968,7 +5295,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/chart",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx",
+        },
+      },
     },
     checkbox: {
       name: "checkbox",
@@ -4993,7 +5326,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/checkbox",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+          api: "https://base-ui.com/react/components/checkbox.md",
+        },
+      },
     },
     collapsible: {
       name: "collapsible",
@@ -5018,7 +5358,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/collapsible",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+          api: "https://base-ui.com/react/components/collapsible.md",
+        },
+      },
     },
     combobox: {
       name: "combobox",
@@ -5043,7 +5390,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/combobox",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+          api: "https://base-ui.com/react/components/combobox.md",
+        },
+      },
     },
     command: {
       name: "command",
@@ -5068,7 +5422,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/command",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+          api: "https://github.com/dip/cmdk",
+        },
+      },
     },
     "context-menu": {
       name: "context-menu",
@@ -5093,7 +5454,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/context-menu",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+          api: "https://base-ui.com/react/components/context-menu.md",
+        },
+      },
     },
     dialog: {
       name: "dialog",
@@ -5118,7 +5486,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/dialog",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+          api: "https://base-ui.com/react/components/dialog.md",
+        },
+      },
     },
     drawer: {
       name: "drawer",
@@ -5143,7 +5518,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/drawer",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+          api: "https://vaul.emilkowal.ski/getting-started",
+        },
+      },
     },
     "dropdown-menu": {
       name: "dropdown-menu",
@@ -5168,7 +5550,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+          api: "https://base-ui.com/react/components/menu.md",
+        },
+      },
     },
     empty: {
       name: "empty",
@@ -5193,7 +5582,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/empty",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx",
+        },
+      },
     },
     field: {
       name: "field",
@@ -5218,7 +5613,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/field",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx",
+        },
+      },
     },
     "hover-card": {
       name: "hover-card",
@@ -5243,7 +5644,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/hover-card",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+          api: "https://base-ui.com/react/components/hover-card.md",
+        },
+      },
     },
     input: {
       name: "input",
@@ -5268,7 +5676,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/input",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx",
+        },
+      },
     },
     "input-group": {
       name: "input-group",
@@ -5293,7 +5707,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/input-group",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx",
+        },
+      },
     },
     "input-otp": {
       name: "input-otp",
@@ -5318,7 +5738,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/input-otp",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+          api: "https://input-otp.rodz.dev",
+        },
+      },
     },
     item: {
       name: "item",
@@ -5343,7 +5770,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/item",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx",
+        },
+      },
     },
     label: {
       name: "label",
@@ -5368,7 +5801,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/label",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+          api: "https://base-ui.com/react/components/label.md",
+        },
+      },
     },
     menubar: {
       name: "menubar",
@@ -5393,7 +5833,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/menubar",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+          api: "https://base-ui.com/react/components/menubar.md",
+        },
+      },
     },
     "navigation-menu": {
       name: "navigation-menu",
@@ -5418,7 +5865,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/navigation-menu",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+          api: "https://base-ui.com/react/components/navigation-menu.md",
+        },
+      },
     },
     pagination: {
       name: "pagination",
@@ -5443,7 +5897,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/pagination",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx",
+        },
+      },
     },
     popover: {
       name: "popover",
@@ -5468,7 +5928,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/popover",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+          api: "https://base-ui.com/react/components/popover.md",
+        },
+      },
     },
     progress: {
       name: "progress",
@@ -5493,7 +5960,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/progress",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+          api: "https://base-ui.com/react/components/progress.md",
+        },
+      },
     },
     "radio-group": {
       name: "radio-group",
@@ -5518,7 +5992,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/radio-group",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+          api: "https://base-ui.com/react/components/radio-group.md",
+        },
+      },
     },
     resizable: {
       name: "resizable",
@@ -5543,7 +6024,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/resizable",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+          api: "https://github.com/bvaughn/react-resizable-panels",
+        },
+      },
     },
     "scroll-area": {
       name: "scroll-area",
@@ -5568,7 +6056,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/scroll-area",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+          api: "https://base-ui.com/react/components/scroll-area.md",
+        },
+      },
     },
     select: {
       name: "select",
@@ -5593,7 +6088,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/select",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+          api: "https://base-ui.com/react/components/select.md",
+        },
+      },
     },
     separator: {
       name: "separator",
@@ -5618,7 +6120,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/separator",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+          api: "https://base-ui.com/react/components/separator.md",
+        },
+      },
     },
     sheet: {
       name: "sheet",
@@ -5643,7 +6152,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/sheet",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+          api: "https://base-ui.com/react/components/dialog.md",
+        },
+      },
     },
     sidebar: {
       name: "sidebar",
@@ -5676,7 +6192,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/sidebar",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx",
+        },
+      },
     },
     skeleton: {
       name: "skeleton",
@@ -5701,7 +6223,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/skeleton",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx",
+        },
+      },
     },
     slider: {
       name: "slider",
@@ -5726,7 +6254,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/slider",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+          api: "https://base-ui.com/react/components/slider.md",
+        },
+      },
     },
     sonner: {
       name: "sonner",
@@ -5751,7 +6286,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/sonner",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+          api: "https://sonner.emilkowal.ski",
+        },
+      },
     },
     spinner: {
       name: "spinner",
@@ -5776,7 +6318,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/spinner",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx",
+        },
+      },
     },
     switch: {
       name: "switch",
@@ -5801,7 +6349,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/switch",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+          api: "https://base-ui.com/react/components/switch.md",
+        },
+      },
     },
     table: {
       name: "table",
@@ -5826,7 +6381,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/table",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx",
+        },
+      },
     },
     tabs: {
       name: "tabs",
@@ -5851,7 +6412,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/tabs",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+          api: "https://base-ui.com/react/components/tabs.md",
+        },
+      },
     },
     textarea: {
       name: "textarea",
@@ -5876,7 +6444,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/textarea",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx",
+        },
+      },
     },
     toggle: {
       name: "toggle",
@@ -5901,7 +6475,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/toggle",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+          api: "https://base-ui.com/react/components/toggle.md",
+        },
+      },
     },
     "toggle-group": {
       name: "toggle-group",
@@ -5926,7 +6507,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/toggle-group",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+          api: "https://base-ui.com/react/components/toggle-group.md",
+        },
+      },
     },
     tooltip: {
       name: "tooltip",
@@ -5951,7 +6539,14 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/tooltip",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+          api: "https://base-ui.com/react/components/tooltip.md",
+        },
+      },
     },
     kbd: {
       name: "kbd",
@@ -5976,7 +6571,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/kbd",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx",
+        },
+      },
     },
     "native-select": {
       name: "native-select",
@@ -6001,7 +6602,13 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/native-select",
+          examples:
+            "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx",
+        },
+      },
     },
     direction: {
       name: "direction",
@@ -6026,7 +6633,12 @@ export const Index: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
       categories: undefined,
-      meta: undefined,
+      meta: {
+        links: {
+          docs: "https://ui.shadcn.com/docs/components/base/direction",
+          api: "https://base-ui.com/react/utils/direction-provider.md",
+        },
+      },
     },
     "accordion-example": {
       name: "accordion-example",
@@ -7742,6 +8354,46 @@ export const Index: Record<string, Record<string, any>> = {
       categories: undefined,
       meta: undefined,
     },
+    demo: {
+      name: "demo",
+      title: "Demo",
+      description: "",
+      type: "registry:example",
+      registryDependencies: [
+        "alert-dialog",
+        "badge",
+        "button",
+        "button-group",
+        "card",
+        "checkbox",
+        "dropdown-menu",
+        "field",
+        "input-group",
+        "item",
+        "radio-group",
+        "slider",
+        "switch",
+        "textarea",
+      ],
+      files: [
+        {
+          path: "registry/bases/base/examples/demo.tsx",
+          type: "registry:example",
+          target: "",
+        },
+      ],
+      component: React.lazy(async () => {
+        const mod = await import("@/registry/bases/base/examples/demo.tsx")
+        const exportName =
+          Object.keys(mod).find(
+            (key) =>
+              typeof mod[key] === "function" || typeof mod[key] === "object"
+          ) || item.name
+        return { default: mod.default || mod[exportName] }
+      }),
+      categories: undefined,
+      meta: undefined,
+    },
     "component-example": {
       name: "component-example",
       title: "Example",
@@ -7833,7 +8485,7 @@ export const Index: Record<string, Record<string, any>> = {
     },
     preview: {
       name: "preview",
-      title: "Home",
+      title: "Preview",
       description: "",
       type: "registry:block",
       registryDependencies: [
@@ -7843,6 +8495,7 @@ export const Index: Record<string, Record<string, any>> = {
         "button",
         "button-group",
         "card",
+        "chart",
         "checkbox",
         "combobox",
         "dropdown-menu",
@@ -7866,168 +8519,15 @@ export const Index: Record<string, Record<string, any>> = {
       ],
       files: [
         {
-          path: "registry/bases/base/blocks/preview.tsx",
+          path: "registry/bases/base/blocks/preview/index.tsx",
           type: "registry:block",
           target: "",
         },
       ],
       component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/base/blocks/preview.tsx")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || item.name
-        return { default: mod.default || mod[exportName] }
-      }),
-      categories: undefined,
-      meta: undefined,
-    },
-    elevenlabs: {
-      name: "elevenlabs",
-      title: "Elevenlabs",
-      description: "",
-      type: "registry:block",
-      registryDependencies: ["example", "button", "card"],
-      files: [
-        {
-          path: "registry/bases/base/blocks/elevenlabs.tsx",
-          type: "registry:block",
-          target: "",
-        },
-      ],
-      component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/base/blocks/elevenlabs.tsx")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || item.name
-        return { default: mod.default || mod[exportName] }
-      }),
-      categories: undefined,
-      meta: undefined,
-    },
-    github: {
-      name: "github",
-      title: "GitHub",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [
-        "avatar",
-        "badge",
-        "button",
-        "card",
-        "checkbox",
-        "combobox",
-        "command",
-        "drawer",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input",
-        "input-group",
-        "item",
-        "kbd",
-        "native-select",
-        "popover",
-        "separator",
-        "spinner",
-        "tabs",
-        "textarea",
-        "tooltip",
-        "example",
-      ],
-      files: [
-        {
-          path: "registry/bases/base/blocks/github.tsx",
-          type: "registry:block",
-          target: "",
-        },
-      ],
-      component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/base/blocks/github.tsx")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || item.name
-        return { default: mod.default || mod[exportName] }
-      }),
-      categories: undefined,
-      meta: undefined,
-    },
-    vercel: {
-      name: "vercel",
-      title: "Vercel",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [
-        "alert",
-        "badge",
-        "button",
-        "calendar",
-        "card",
-        "chart",
-        "dialog",
-        "dropdown-menu",
-        "empty",
-        "field",
-        "input-group",
-        "item",
-        "native-select",
-        "popover",
-        "textarea",
-        "example",
-      ],
-      files: [
-        {
-          path: "registry/bases/base/blocks/vercel.tsx",
-          type: "registry:block",
-          target: "",
-        },
-      ],
-      component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/base/blocks/vercel.tsx")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || item.name
-        return { default: mod.default || mod[exportName] }
-      }),
-      categories: undefined,
-      meta: undefined,
-    },
-    chatgpt: {
-      name: "chatgpt",
-      title: "ChatGPT",
-      description: "",
-      type: "registry:block",
-      registryDependencies: [
-        "alert",
-        "alert-dialog",
-        "badge",
-        "button",
-        "card",
-        "dropdown-menu",
-        "field",
-        "input-group",
-        "item",
-        "kbd",
-        "popover",
-        "tooltip",
-        "example",
-      ],
-      files: [
-        {
-          path: "registry/bases/base/blocks/chatgpt.tsx",
-          type: "registry:block",
-          target: "",
-        },
-      ],
-      component: React.lazy(async () => {
-        const mod = await import("@/registry/bases/base/blocks/chatgpt.tsx")
+        const mod = await import(
+          "@/registry/bases/base/blocks/preview/index.tsx"
+        )
         const exportName =
           Object.keys(mod).find(
             (key) =>
diff --git a/apps/v4/registry/bases/base/blocks/_registry.ts b/apps/v4/registry/bases/base/blocks/_registry.ts
index 7598bfd009..dc20c18000 100644
--- a/apps/v4/registry/bases/base/blocks/_registry.ts
+++ b/apps/v4/registry/bases/base/blocks/_registry.ts
@@ -3,7 +3,7 @@ import { type Registry } from "shadcn/schema"
 export const blocks: Registry["items"] = [
   {
     name: "preview",
-    title: "Home",
+    title: "Preview",
     type: "registry:block",
     registryDependencies: [
       "alert-dialog",
@@ -12,6 +12,7 @@ export const blocks: Registry["items"] = [
       "button",
       "button-group",
       "card",
+      "chart",
       "checkbox",
       "combobox",
       "dropdown-menu",
@@ -35,110 +36,7 @@ export const blocks: Registry["items"] = [
     ],
     files: [
       {
-        path: "blocks/preview.tsx",
-        type: "registry:block",
-      },
-    ],
-  },
-  {
-    name: "elevenlabs",
-    title: "Elevenlabs",
-    type: "registry:block",
-    registryDependencies: ["example", "button", "card"],
-    files: [
-      {
-        path: "blocks/elevenlabs.tsx",
-        type: "registry:block",
-      },
-    ],
-  },
-  {
-    name: "github",
-    title: "GitHub",
-    type: "registry:block",
-    registryDependencies: [
-      "avatar",
-      "badge",
-      "button",
-      "card",
-      "checkbox",
-      "combobox",
-      "command",
-      "drawer",
-      "dropdown-menu",
-      "empty",
-      "field",
-      "input",
-      "input-group",
-      "item",
-      "kbd",
-      "native-select",
-      "popover",
-      "separator",
-      "spinner",
-      "tabs",
-      "textarea",
-      "tooltip",
-      "example",
-    ],
-    files: [
-      {
-        path: "blocks/github.tsx",
-        type: "registry:block",
-      },
-    ],
-  },
-  {
-    name: "vercel",
-    title: "Vercel",
-    type: "registry:block",
-    registryDependencies: [
-      "alert",
-      "badge",
-      "button",
-      "calendar",
-      "card",
-      "chart",
-      "dialog",
-      "dropdown-menu",
-      "empty",
-      "field",
-      "input-group",
-      "item",
-      "native-select",
-      "popover",
-      "textarea",
-      "example",
-    ],
-    files: [
-      {
-        path: "blocks/vercel.tsx",
-        type: "registry:block",
-      },
-    ],
-  },
-  {
-    name: "chatgpt",
-    title: "ChatGPT",
-    type: "registry:block",
-    registryDependencies: [
-      "alert",
-      "alert-dialog",
-      "badge",
-      "button",
-      "card",
-      "dropdown-menu",
-      "field",
-      "input-group",
-      "item",
-      "kbd",
-      "popover",
-      "tooltip",
-      "example",
-    ],
-    files: [
-      {
-        path: "blocks/chatgpt.tsx",
+        path: "blocks/preview/index.tsx",
         type: "registry:block",
       },
     ],
diff --git a/apps/v4/registry/bases/base/blocks/chatgpt.tsx b/apps/v4/registry/bases/base/blocks/chatgpt.tsx
deleted file mode 100644
index 962064b9f7..0000000000
--- a/apps/v4/registry/bases/base/blocks/chatgpt.tsx
+++ /dev/null
@@ -1,635 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/base/components/example"
-import { Alert, AlertDescription } from "@/registry/bases/base/ui/alert"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/registry/bases/base/ui/alert-dialog"
-import { Badge } from "@/registry/bases/base/ui/badge"
-import { Button } from "@/registry/bases/base/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/base/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/bases/base/ui/dropdown-menu"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-} from "@/registry/bases/base/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupTextarea,
-} from "@/registry/bases/base/ui/input-group"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemTitle,
-} from "@/registry/bases/base/ui/item"
-import { Kbd } from "@/registry/bases/base/ui/kbd"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/bases/base/ui/popover"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/bases/base/ui/tooltip"
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
-export default function ChatGPTBlock() {
-  return (
-    <ExampleWrapper>
-      <PromptForm />
-      <ModelSelector />
-      <GroupChatDialog />
-      <CreateProjectForm />
-    </ExampleWrapper>
-  )
-}
-
-function PromptForm() {
-  const [dictateEnabled, setDictateEnabled] = React.useState(false)
-
-  return (
-    <Example title="Prompt Form">
-      <Field>
-        <FieldLabel htmlFor="prompt" className="sr-only">
-          Prompt
-        </FieldLabel>
-        <InputGroup>
-          <InputGroupTextarea id="prompt" placeholder="Ask anything" />
-          <InputGroupAddon align="block-end">
-            <DropdownMenu>
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <DropdownMenuTrigger
-                      render={
-                        <InputGroupButton
-                          variant="ghost"
-                          size="icon-sm"
-                          onClick={() => setDictateEnabled(!dictateEnabled)}
-                          className="rounded-4xl"
-                        />
-                      }
-                    />
-                  }
-                >
-                  <IconPlaceholder
-                    lucide="PlusIcon"
-                    tabler="IconPlus"
-                    hugeicons="PlusSignIcon"
-                    phosphor="PlusIcon"
-                    remixicon="RiAddLine"
-                  />
-                </TooltipTrigger>
-                <TooltipContent>
-                  Add files and more <Kbd>/</Kbd>
-                </TooltipContent>
-              </Tooltip>
-              <DropdownMenuContent className="w-56">
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="PaperclipIcon"
-                      tabler="IconPaperclip"
-                      hugeicons="AttachmentIcon"
-                      phosphor="PaperclipIcon"
-                      remixicon="RiAttachmentLine"
-                    />
-                    Add photos & files
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="SparklesIcon"
-                      tabler="IconSparkles"
-                      hugeicons="SparklesIcon"
-                      phosphor="SparkleIcon"
-                      remixicon="RiSparklingLine"
-                    />
-                    Deep research
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="ShoppingBagIcon"
-                      tabler="IconShoppingBag"
-                      hugeicons="ShoppingBag01Icon"
-                      phosphor="BagIcon"
-                      remixicon="RiShoppingBagLine"
-                    />
-                    Shopping research
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="WandIcon"
-                      tabler="IconWand"
-                      hugeicons="MagicWand05Icon"
-                      phosphor="MagicWandIcon"
-                      remixicon="RiMagicLine"
-                    />
-                    Create image
-                  </DropdownMenuItem>
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="MousePointerIcon"
-                            tabler="IconPointer"
-                            hugeicons="Cursor01Icon"
-                            phosphor="HandPointingIcon"
-                            remixicon="RiHand"
-                          />
-                          Agent mode
-                        </DropdownMenuItem>
-                      }
-                    />
-                    <TooltipContent side="right">
-                      <div className="font-medium">35 left</div>
-                      <div className="text-primary-foreground/80 text-xs">
-                        More available for purchase
-                      </div>
-                    </TooltipContent>
-                  </Tooltip>
-                </DropdownMenuGroup>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                    <IconPlaceholder
-                      lucide="MoreHorizontalIcon"
-                      tabler="IconDots"
-                      hugeicons="MoreHorizontalCircle01Icon"
-                      phosphor="DotsThreeOutlineIcon"
-                      remixicon="RiMoreLine"
-                    />
-                    More
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuPortal>
-                    <DropdownMenuSubContent>
-                      <DropdownMenuGroup>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="ShareIcon"
-                            tabler="IconShare"
-                            hugeicons="Share03Icon"
-                            phosphor="ShareIcon"
-                            remixicon="RiShareLine"
-                          />
-                          Add sources
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="BookOpenIcon"
-                            tabler="IconBook"
-                            hugeicons="BookIcon"
-                            phosphor="BookOpenIcon"
-                            remixicon="RiBookOpenLine"
-                          />
-                          Study and learn
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="GlobeIcon"
-                            tabler="IconWorld"
-                            hugeicons="GlobalIcon"
-                            phosphor="GlobeIcon"
-                            remixicon="RiGlobeLine"
-                          />
-                          Web search
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="PenToolIcon"
-                            tabler="IconPencil"
-                            hugeicons="PenIcon"
-                            phosphor="PencilIcon"
-                            remixicon="RiPencilLine"
-                          />
-                          Canvas
-                        </DropdownMenuItem>
-                      </DropdownMenuGroup>
-                    </DropdownMenuSubContent>
-                  </DropdownMenuPortal>
-                </DropdownMenuSub>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <InputGroupButton
-                    variant="ghost"
-                    size="icon-sm"
-                    onClick={() => setDictateEnabled(!dictateEnabled)}
-                    className="ml-auto rounded-4xl"
-                  />
-                }
-              >
-                <IconPlaceholder
-                  lucide="AudioLinesIcon"
-                  tabler="IconMicrophone"
-                  hugeicons="AudioWave01Icon"
-                  phosphor="MicrophoneIcon"
-                  remixicon="RiMicLine"
-                />
-              </TooltipTrigger>
-              <TooltipContent>Dictate</TooltipContent>
-            </Tooltip>
-            <InputGroupButton
-              size="icon-sm"
-              variant="default"
-              className="rounded-4xl"
-            >
-              <IconPlaceholder
-                lucide="ArrowUpIcon"
-                tabler="IconArrowUp"
-                hugeicons="ArrowUp02Icon"
-                phosphor="ArrowUpIcon"
-                remixicon="RiArrowUpLine"
-              />
-            </InputGroupButton>
-          </InputGroupAddon>
-        </InputGroup>
-      </Field>
-    </Example>
-  )
-}
-
-function ModelSelector() {
-  const [mode, setMode] = React.useState("auto")
-  const [model, setModel] = React.useState("gpt-5.1")
-
-  return (
-    <Example title="Model Selector">
-      <DropdownMenu>
-        <DropdownMenuTrigger
-          render={<Button variant="ghost" className="gap-2" />}
-        >
-          ChatGPT 5.1
-          <IconPlaceholder
-            lucide="ChevronDownIcon"
-            tabler="IconChevronDown"
-            hugeicons="ArrowDown01Icon"
-            phosphor="CaretDownIcon"
-            remixicon="RiArrowDownSLine"
-            className="text-muted-foreground size-4"
-          />
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-60" align="start">
-          <DropdownMenuGroup>
-            <DropdownMenuLabel className="text-muted-foreground text-xs font-normal">
-              GPT-5.1
-            </DropdownMenuLabel>
-            <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>
-              <DropdownMenuRadioItem value="auto">
-                <Item size="xs" className="p-0">
-                  <ItemContent>
-                    <ItemTitle>Auto</ItemTitle>
-                    <ItemDescription className="text-xs">
-                      Decides how long to think
-                    </ItemDescription>
-                  </ItemContent>
-                </Item>
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="instant">
-                <Item size="xs" className="p-0">
-                  <ItemContent>
-                    <ItemTitle>Instant</ItemTitle>
-                    <ItemDescription className="text-xs">
-                      Answers right away
-                    </ItemDescription>
-                  </ItemContent>
-                </Item>
-              </DropdownMenuRadioItem>
-              <DropdownMenuRadioItem value="thinking">
-                <Item size="xs" className="p-0">
-                  <ItemContent>
-                    <ItemTitle>Thinking</ItemTitle>
-                    <ItemDescription className="text-xs">
-                      Thinks longer for better answers
-                    </ItemDescription>
-                  </ItemContent>
-                </Item>
-              </DropdownMenuRadioItem>
-            </DropdownMenuRadioGroup>
-          </DropdownMenuGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <span className="font-medium">Legacy models</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuGroup>
-                  <DropdownMenuRadioGroup
-                    value={model}
-                    onValueChange={setModel}
-                  >
-                    <DropdownMenuRadioItem value="gpt-4">
-                      GPT-4
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="gpt-4-turbo">
-                      GPT-4 Turbo
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="gpt-3.5">
-                      GPT-3.5
-                    </DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuGroup>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </Example>
-  )
-}
-
-function GroupChatDialog() {
-  return (
-    <Example title="Group Chat Dialog" className="items-center justify-center">
-      <AlertDialog>
-        <AlertDialogTrigger render={<Button />}>
-          Start Group Chat
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>
-            <AlertDialogDescription>
-              Add people to your chats to plan, share ideas, and get creative.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter className="flex-row items-center justify-between sm:justify-between">
-            <a
-              href="#"
-              className="text-muted-foreground hover:text-foreground text-sm underline underline-offset-4"
-            >
-              Learn more
-            </a>
-            <div className="flex gap-2">
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction>Start group chat</AlertDialogAction>
-            </div>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Example>
-  )
-}
-
-const categories = [
-  {
-    id: "homework",
-    label: "Homework",
-  },
-  {
-    id: "writing",
-    label: "Writing",
-  },
-  {
-    id: "health",
-    label: "Health",
-  },
-  {
-    id: "travel",
-    label: "Travel",
-  },
-]
-
-function CreateProjectForm() {
-  const [projectName, setProjectName] = React.useState("")
-  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(
-    categories[0].id
-  )
-  const [memorySetting, setMemorySetting] = React.useState<
-    "default" | "project-only"
-  >("default")
-  const [selectedColor, setSelectedColor] = React.useState<string | null>(
-    "var(--foreground)"
-  )
-
-  return (
-    <Example title="Create Project" className="items-center justify-center">
-      <Card className="w-full max-w-sm">
-        <CardHeader>
-          <CardTitle>Create Project</CardTitle>
-          <CardDescription>
-            Start a new project to keep chats, files, and custom instructions in
-            one place.
-          </CardDescription>
-          <CardAction>
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={<Button variant="ghost" size="icon" />}
-              >
-                <IconPlaceholder
-                  lucide="SettingsIcon"
-                  tabler="IconSettings"
-                  hugeicons="Settings01Icon"
-                  phosphor="GearIcon"
-                  remixicon="RiSettingsLine"
-                />
-                <span className="sr-only">Memory</span>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-72">
-                <DropdownMenuGroup>
-                  <DropdownMenuRadioGroup
-                    value={memorySetting}
-                    onValueChange={(value) => {
-                      setMemorySetting(value as "default" | "project-only")
-                    }}
-                  >
-                    <DropdownMenuRadioItem value="default">
-                      <Item size="xs">
-                        <ItemContent>
-                          <ItemTitle>Default</ItemTitle>
-                          <ItemDescription className="text-xs">
-                            Project can access memories from outside chats, and
-                            vice versa.
-                          </ItemDescription>
-                        </ItemContent>
-                      </Item>
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="project-only">
-                      <Item size="xs">
-                        <ItemContent>
-                          <ItemTitle>Project Only</ItemTitle>
-                          <ItemDescription className="text-xs">
-                            Project can only access its own memories. Its
-                            memories are hidden from outside chats.
-                          </ItemDescription>
-                        </ItemContent>
-                      </Item>
-                    </DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>
-                    Note that this setting can&apos;t be changed later.
-                  </DropdownMenuLabel>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="project-name" className="sr-only">
-                Project Name
-              </FieldLabel>
-              <InputGroup>
-                <InputGroupInput
-                  id="project-name"
-                  placeholder="Copenhagen Trip"
-                  value={projectName}
-                  onChange={(e) => {
-                    setProjectName(e.target.value)
-                  }}
-                />
-                <InputGroupAddon>
-                  <Popover>
-                    <PopoverTrigger
-                      render={
-                        <InputGroupButton variant="ghost" size="icon-xs" />
-                      }
-                    >
-                      <IconPlaceholder
-                        style={
-                          { "--color": selectedColor } as React.CSSProperties
-                        }
-                        lucide="FolderIcon"
-                        tabler="IconFolder"
-                        hugeicons="FolderIcon"
-                        phosphor="FolderIcon"
-                        remixicon="RiFolderLine"
-                        className="text-(--color)"
-                      />
-                    </PopoverTrigger>
-                    <PopoverContent align="start" className="w-60 p-3">
-                      <div className="flex flex-wrap gap-2">
-                        {[
-                          "var(--foreground)",
-                          "#fa423e",
-                          "#f59e0b",
-                          "#8b5cf6",
-                          "#ec4899",
-                          "#10b981",
-                          "#6366f1",
-                          "#14b8a6",
-                          "#f97316",
-                          "#fbbc04",
-                        ].map((color) => (
-                          <Button
-                            key={color}
-                            size="icon"
-                            variant="ghost"
-                            className="rounded-full p-1"
-                            style={{ "--color": color } as React.CSSProperties}
-                            data-checked={selectedColor === color}
-                            onClick={() => {
-                              setSelectedColor(color)
-                            }}
-                          >
-                            <span className="group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)" />
-                            <span className="sr-only">{color}</span>
-                          </Button>
-                        ))}
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                </InputGroupAddon>
-              </InputGroup>
-              <FieldDescription className="flex flex-wrap gap-2">
-                {categories.map((category) => (
-                  <Badge
-                    key={category.id}
-                    variant={
-                      selectedCategory === category.id ? "default" : "outline"
-                    }
-                    data-checked={selectedCategory === category.id}
-                    render={
-                      <button
-                        onClick={() => {
-                          setSelectedCategory(
-                            selectedCategory === category.id
-                              ? null
-                              : category.id
-                          )
-                        }}
-                      />
-                    }
-                  >
-                    <IconPlaceholder
-                      lucide="CircleCheckIcon"
-                      tabler="IconCircleCheck"
-                      hugeicons="CheckmarkCircle02Icon"
-                      phosphor="CheckCircleIcon"
-                      remixicon="RiCheckboxCircleLine"
-                      data-icon="inline-start"
-                      className="hidden group-data-[checked=true]/badge:inline"
-                    />
-                    {category.label}
-                  </Badge>
-                ))}
-              </FieldDescription>
-            </Field>
-            <Field>
-              <Alert className="bg-muted">
-                <IconPlaceholder
-                  lucide="LightbulbIcon"
-                  tabler="IconBulb"
-                  hugeicons="BulbIcon"
-                  phosphor="LightbulbIcon"
-                  remixicon="RiLightbulbLine"
-                />
-                <AlertDescription className="text-xs">
-                  Projects keep chats, files, and custom instructions in one
-                  place. Use them for ongoing work, or just to keep things tidy.
-                </AlertDescription>
-              </Alert>
-            </Field>
-          </FieldGroup>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
diff --git a/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx b/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx
index 0e3d462ccc..c49d0bd224 100644
--- a/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx
+++ b/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx
@@ -115,7 +115,7 @@ function DragHandle({ id }: { id: number }) {
       {...listeners}
       variant="ghost"
       size="icon"
-      className="text-muted-foreground size-7 hover:bg-transparent"
+      className="size-7 text-muted-foreground hover:bg-transparent"
     >
       <IconPlaceholder
         lucide="GripVerticalIcon"
@@ -123,7 +123,7 @@ function DragHandle({ id }: { id: number }) {
         hugeicons="DragDropVerticalIcon"
         phosphor="DotsSixVerticalIcon"
         remixicon="RiDraggable"
-        className="text-muted-foreground size-3"
+        className="size-3 text-muted-foreground"
       />
       <span className="sr-only">Drag to reorder</span>
     </Button>
@@ -175,7 +175,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     header: "Section Type",
     cell: ({ row }) => (
       <div className="w-32">
-        <Badge variant="outline" className="text-muted-foreground px-1.5">
+        <Badge variant="outline" className="px-1.5 text-muted-foreground">
           {row.original.type}
         </Badge>
       </div>
@@ -185,7 +185,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     accessorKey: "status",
     header: "Status",
     cell: ({ row }) => (
-      <Badge variant="outline" className="text-muted-foreground px-1.5">
+      <Badge variant="outline" className="px-1.5 text-muted-foreground">
         {row.original.status === "Done" ? (
           <IconPlaceholder
             lucide="CircleCheckIcon"
@@ -226,7 +226,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Target
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.target}
           id={`${row.original.id}-target`}
         />
@@ -251,7 +251,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Limit
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.limit}
           id={`${row.original.id}-limit`}
         />
@@ -305,7 +305,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           render={
             <Button
               variant="ghost"
-              className="data-open:bg-muted text-muted-foreground flex size-8"
+              className="flex size-8 text-muted-foreground data-open:bg-muted"
               size="icon"
             />
           }
@@ -448,7 +448,7 @@ export function DataTable({
             </SelectGroup>
           </SelectContent>
         </Select>
-        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
           <TabsTrigger value="outline">Outline</TabsTrigger>
           <TabsTrigger value="past-performance">
             Past Performance <Badge variant="secondary">3</Badge>
@@ -530,7 +530,7 @@ export function DataTable({
             id={sortableId}
           >
             <Table>
-              <TableHeader className="bg-muted sticky top-0 z-10">
+              <TableHeader className="sticky top-0 z-10 bg-muted">
                 {table.getHeaderGroups().map((headerGroup) => (
                   <TableRow key={headerGroup.id}>
                     {headerGroup.headers.map((header) => {
@@ -573,7 +573,7 @@ export function DataTable({
           </DndContext>
         </div>
         <div className="flex items-center justify-between px-4">
-          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
             {table.getFilteredSelectedRowModel().rows.length} of{" "}
             {table.getFilteredRowModel().rows.length} row(s) selected.
           </div>
@@ -745,7 +745,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
   return (
     <Drawer direction={isMobile ? "bottom" : "right"}>
       <DrawerTrigger asChild>
-        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+        <Button variant="link" className="w-fit px-0 text-left text-foreground">
           {item.header}
         </Button>
       </DrawerTrigger>
diff --git a/apps/v4/registry/bases/base/blocks/dashboard-01/components/nav-main.tsx b/apps/v4/registry/bases/base/blocks/dashboard-01/components/nav-main.tsx
index 9025c26318..ba3edaaad6 100644
--- a/apps/v4/registry/bases/base/blocks/dashboard-01/components/nav-main.tsx
+++ b/apps/v4/registry/bases/base/blocks/dashboard-01/components/nav-main.tsx
@@ -26,7 +26,7 @@ export function NavMain({
           <SidebarMenuItem className="flex items-center gap-2">
             <SidebarMenuButton
               tooltip="Quick Create"
-              className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
+              className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
             >
               <IconPlaceholder
                 lucide="CirclePlusIcon"
diff --git a/apps/v4/registry/bases/base/blocks/dashboard-01/components/nav-user.tsx b/apps/v4/registry/bases/base/blocks/dashboard-01/components/nav-user.tsx
index bb9798c97f..ab2438159d 100644
--- a/apps/v4/registry/bases/base/blocks/dashboard-01/components/nav-user.tsx
+++ b/apps/v4/registry/bases/base/blocks/dashboard-01/components/nav-user.tsx
@@ -47,7 +47,7 @@ export function NavUser({
             </Avatar>
             <div className="grid flex-1 text-left text-sm leading-tight">
               <span className="truncate font-medium">{user.name}</span>
-              <span className="text-foreground/70 truncate text-xs">
+              <span className="truncate text-xs text-foreground/70">
                 {user.email}
               </span>
             </div>
@@ -75,7 +75,7 @@ export function NavUser({
                   </Avatar>
                   <div className="grid flex-1 text-left text-sm leading-tight">
                     <span className="truncate font-medium">{user.name}</span>
-                    <span className="text-muted-foreground truncate text-xs">
+                    <span className="truncate text-xs text-muted-foreground">
                       {user.email}
                     </span>
                   </div>
diff --git a/apps/v4/registry/bases/base/blocks/dashboard-01/components/section-cards.tsx b/apps/v4/registry/bases/base/blocks/dashboard-01/components/section-cards.tsx
index cd9b0cde66..58ee84ad22 100644
--- a/apps/v4/registry/bases/base/blocks/dashboard-01/components/section-cards.tsx
+++ b/apps/v4/registry/bases/base/blocks/dashboard-01/components/section-cards.tsx
@@ -13,7 +13,7 @@ import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 export function SectionCards() {
   return (
-    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-linear-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
       <Card className="@container/card">
         <CardHeader>
           <CardDescription>Total Revenue</CardDescription>
diff --git a/apps/v4/registry/bases/base/blocks/elevenlabs.tsx b/apps/v4/registry/bases/base/blocks/elevenlabs.tsx
deleted file mode 100644
index 73c31320f7..0000000000
--- a/apps/v4/registry/bases/base/blocks/elevenlabs.tsx
+++ /dev/null
@@ -1,1155 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-
-import { cn } from "@/lib/utils"
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/base/components/example"
-import { Button } from "@/registry/bases/base/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/base/ui/card"
-
-export default function ElevenlabsBlocks() {
-  return (
-    <ExampleWrapper>
-      <BarVisualizerDemo />
-      <WaveformDemo />
-    </ExampleWrapper>
-  )
-}
-
-function BarVisualizerDemo() {
-  const [state, setState] = useState<AgentState>("speaking")
-
-  return (
-    <Example title="Bar Visualizer">
-      <Card className="">
-        <CardHeader>
-          <CardTitle>Audio Frequency Visualizer</CardTitle>
-          <CardDescription>
-            Real-time frequency band visualization with animated state
-            transitions
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <BarVisualizer
-            state={state}
-            demo={true}
-            barCount={20}
-            minHeight={15}
-            maxHeight={90}
-            className="h-40 max-w-full"
-          />
-        </CardContent>
-        <CardFooter className="gap-2">
-          <Button
-            size="sm"
-            variant={state === "connecting" ? "default" : "outline"}
-            onClick={() => setState("connecting")}
-          >
-            Connecting
-          </Button>
-          <Button
-            size="sm"
-            variant={state === "listening" ? "default" : "outline"}
-            onClick={() => setState("listening")}
-          >
-            Listening
-          </Button>
-          <Button
-            size="sm"
-            variant={state === "speaking" ? "default" : "outline"}
-            onClick={() => setState("speaking")}
-          >
-            Speaking
-          </Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-function WaveformDemo() {
-  const [active, setActive] = useState(false)
-  const [processing, setProcessing] = useState(true)
-  const [mode, setMode] = useState<"static" | "scrolling">("static")
-  const handleToggleActive = () => {
-    setActive(!active)
-    if (!active) {
-      setProcessing(false)
-    }
-  }
-  const handleToggleProcessing = () => {
-    setProcessing(!processing)
-    if (!processing) {
-      setActive(false)
-    }
-  }
-  return (
-    <Example title="Waveform" className="items-center justify-center">
-      <Card>
-        <CardHeader>
-          <CardTitle>Live Audio Waveform</CardTitle>
-          <CardDescription>
-            Real-time microphone input visualization with audio reactivity
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <LiveWaveform
-            active={active}
-            processing={processing}
-            height={80}
-            barWidth={3}
-            barGap={2}
-            mode={mode}
-            fadeEdges={true}
-            barColor="gray"
-            historySize={120}
-          />
-        </CardContent>
-        <CardFooter className="gap-2">
-          <Button
-            size="sm"
-            variant={active ? "default" : "outline"}
-            onClick={handleToggleActive}
-          >
-            {active ? "Stop" : "Start"} Listening
-          </Button>
-          <Button
-            size="sm"
-            variant={processing ? "default" : "outline"}
-            onClick={handleToggleProcessing}
-          >
-            {processing ? "Stop" : "Start"} Processing
-          </Button>
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => setMode(mode === "static" ? "scrolling" : "static")}
-          >
-            {mode === "static" ? "Static" : "Scrolling"}
-          </Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-export interface AudioAnalyserOptions {
-  fftSize?: number
-  smoothingTimeConstant?: number
-  minDecibels?: number
-  maxDecibels?: number
-}
-
-function createAudioAnalyser(
-  mediaStream: MediaStream,
-  options: AudioAnalyserOptions = {}
-) {
-  const audioContext = new (window.AudioContext ||
-    (window as unknown as { webkitAudioContext: typeof AudioContext })
-      .webkitAudioContext)()
-  const source = audioContext.createMediaStreamSource(mediaStream)
-  const analyser = audioContext.createAnalyser()
-
-  if (options.fftSize) analyser.fftSize = options.fftSize
-  if (options.smoothingTimeConstant !== undefined) {
-    analyser.smoothingTimeConstant = options.smoothingTimeConstant
-  }
-  if (options.minDecibels !== undefined)
-    analyser.minDecibels = options.minDecibels
-  if (options.maxDecibels !== undefined)
-    analyser.maxDecibels = options.maxDecibels
-
-  source.connect(analyser)
-
-  const cleanup = () => {
-    source.disconnect()
-    audioContext.close()
-  }
-
-  return { analyser, audioContext, cleanup }
-}
-
-/**
- * Hook for tracking the volume of an audio stream using the Web Audio API.
- * @param mediaStream - The MediaStream to analyze
- * @param options - Audio analyser options
- * @returns The current volume level (0-1)
- */
-export function useAudioVolume(
-  mediaStream?: MediaStream | null,
-  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }
-) {
-  const [volume, setVolume] = useState(0)
-  const volumeRef = useRef(0)
-  const frameId = useRef<number | undefined>(undefined)
-
-  // Memoize options to prevent unnecessary re-renders
-  const memoizedOptions = useMemo(() => options, [options])
-
-  useEffect(() => {
-    if (!mediaStream) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setVolume(0)
-      volumeRef.current = 0
-      return
-    }
-
-    const { analyser, cleanup } = createAudioAnalyser(
-      mediaStream,
-      memoizedOptions
-    )
-
-    const bufferLength = analyser.frequencyBinCount
-    const dataArray = new Uint8Array(bufferLength)
-    let lastUpdate = 0
-    const updateInterval = 1000 / 30 // 30 FPS
-
-    const updateVolume = (timestamp: number) => {
-      if (timestamp - lastUpdate >= updateInterval) {
-        analyser.getByteFrequencyData(dataArray)
-        let sum = 0
-        for (let i = 0; i < dataArray.length; i++) {
-          const a = dataArray[i]
-          sum += a * a
-        }
-        const newVolume = Math.sqrt(sum / dataArray.length) / 255
-
-        // Only update state if volume changed significantly
-        if (Math.abs(newVolume - volumeRef.current) > 0.01) {
-          volumeRef.current = newVolume
-          setVolume(newVolume)
-        }
-        lastUpdate = timestamp
-      }
-      frameId.current = requestAnimationFrame(updateVolume)
-    }
-
-    frameId.current = requestAnimationFrame(updateVolume)
-
-    return () => {
-      cleanup()
-      if (frameId.current) {
-        cancelAnimationFrame(frameId.current)
-      }
-    }
-  }, [mediaStream, memoizedOptions])
-
-  return volume
-}
-
-export interface MultiBandVolumeOptions {
-  bands?: number
-  loPass?: number // Low frequency cutoff
-  hiPass?: number // High frequency cutoff
-  updateInterval?: number // Update interval in ms
-  analyserOptions?: AudioAnalyserOptions
-}
-
-const multibandDefaults: MultiBandVolumeOptions = {
-  bands: 5,
-  loPass: 100,
-  hiPass: 600,
-  updateInterval: 32,
-  analyserOptions: { fftSize: 2048 },
-}
-
-// Memoized normalization function to avoid recreating on each render
-const normalizeDb = (value: number) => {
-  if (value === -Infinity) return 0
-  const minDb = -100
-  const maxDb = -10
-  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100
-  return Math.sqrt(db)
-}
-
-/**
- * Hook for tracking volume across multiple frequency bands
- * @param mediaStream - The MediaStream to analyze
- * @param options - Multiband options
- * @returns Array of volume levels for each frequency band
- */
-export function useMultibandVolume(
-  mediaStream?: MediaStream | null,
-  options: MultiBandVolumeOptions = {}
-) {
-  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])
-
-  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>
-    new Array(opts.bands).fill(0)
-  )
-  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))
-  const frameId = useRef<number | undefined>(undefined)
-
-  useEffect(() => {
-    if (!mediaStream) {
-      const emptyBands = new Array(opts.bands).fill(0)
-      setTimeout(() => {
-        setFrequencyBands(emptyBands)
-      }, 0)
-      bandsRef.current = emptyBands
-      return
-    }
-
-    const { analyser, cleanup } = createAudioAnalyser(
-      mediaStream,
-      opts.analyserOptions
-    )
-
-    const bufferLength = analyser.frequencyBinCount
-    const dataArray = new Float32Array(bufferLength)
-    const sliceStart = opts.loPass!
-    const sliceEnd = opts.hiPass!
-    const sliceLength = sliceEnd - sliceStart
-    const chunkSize = Math.ceil(sliceLength / opts.bands!)
-
-    let lastUpdate = 0
-    const updateInterval = opts.updateInterval!
-
-    const updateVolume = (timestamp: number) => {
-      if (timestamp - lastUpdate >= updateInterval) {
-        analyser.getFloatFrequencyData(dataArray)
-
-        // Process directly without creating intermediate arrays
-        const chunks = new Array(opts.bands!)
-
-        for (let i = 0; i < opts.bands!; i++) {
-          let sum = 0
-          let count = 0
-          const startIdx = sliceStart + i * chunkSize
-          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)
-
-          for (let j = startIdx; j < endIdx; j++) {
-            sum += normalizeDb(dataArray[j])
-            count++
-          }
-
-          chunks[i] = count > 0 ? sum / count : 0
-        }
-
-        // Only update state if bands changed significantly
-        let hasChanged = false
-        for (let i = 0; i < chunks.length; i++) {
-          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {
-            hasChanged = true
-            break
-          }
-        }
-
-        if (hasChanged) {
-          bandsRef.current = chunks
-          setFrequencyBands(chunks)
-        }
-
-        lastUpdate = timestamp
-      }
-
-      frameId.current = requestAnimationFrame(updateVolume)
-    }
-
-    frameId.current = requestAnimationFrame(updateVolume)
-
-    return () => {
-      cleanup()
-      if (frameId.current) {
-        cancelAnimationFrame(frameId.current)
-      }
-    }
-  }, [mediaStream, opts])
-
-  return frequencyBands
-}
-
-type AnimationState =
-  | "connecting"
-  | "initializing"
-  | "listening"
-  | "speaking"
-  | "thinking"
-  | undefined
-
-export const useBarAnimator = (
-  state: AnimationState,
-  columns: number,
-  interval: number
-): number[] => {
-  const indexRef = useRef(0)
-  const [currentFrame, setCurrentFrame] = useState<number[]>([])
-  const animationFrameId = useRef<number | null>(null)
-
-  // Memoize sequence generation
-  const sequence = useMemo(() => {
-    if (state === "thinking" || state === "listening") {
-      return generateListeningSequenceBar(columns)
-    } else if (state === "connecting" || state === "initializing") {
-      return generateConnectingSequenceBar(columns)
-    } else if (state === undefined || state === "speaking") {
-      return [new Array(columns).fill(0).map((_, idx) => idx)]
-    } else {
-      return [[]]
-    }
-  }, [state, columns])
-
-  useEffect(() => {
-    indexRef.current = 0
-    setTimeout(() => {
-      setCurrentFrame(sequence[0] || [])
-    }, 0)
-  }, [sequence])
-
-  useEffect(() => {
-    let startTime = performance.now()
-
-    const animate = (time: DOMHighResTimeStamp) => {
-      const timeElapsed = time - startTime
-
-      if (timeElapsed >= interval) {
-        indexRef.current = (indexRef.current + 1) % sequence.length
-        setCurrentFrame(sequence[indexRef.current] || [])
-        startTime = time
-      }
-
-      animationFrameId.current = requestAnimationFrame(animate)
-    }
-
-    animationFrameId.current = requestAnimationFrame(animate)
-
-    return () => {
-      if (animationFrameId.current !== null) {
-        cancelAnimationFrame(animationFrameId.current)
-      }
-    }
-  }, [interval, sequence])
-
-  return currentFrame
-}
-
-// Memoize sequence generators
-const generateConnectingSequenceBar = (columns: number): number[][] => {
-  const seq = []
-  for (let x = 0; x < columns; x++) {
-    seq.push([x, columns - 1 - x])
-  }
-  return seq
-}
-
-const generateListeningSequenceBar = (columns: number): number[][] => {
-  const center = Math.floor(columns / 2)
-  const noIndex = -1
-  return [[center], [noIndex]]
-}
-
-export type AgentState =
-  | "connecting"
-  | "initializing"
-  | "listening"
-  | "speaking"
-  | "thinking"
-
-export interface BarVisualizerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /** Voice assistant state */
-  state?: AgentState
-  /** Number of bars to display */
-  barCount?: number
-  /** Audio source */
-  mediaStream?: MediaStream | null
-  /** Min/max height as percentage */
-  minHeight?: number
-  maxHeight?: number
-  /** Enable demo mode with fake audio data */
-  demo?: boolean
-  /** Align bars from center instead of bottom */
-  centerAlign?: boolean
-}
-
-const BarVisualizerComponent = React.forwardRef<
-  HTMLDivElement,
-  BarVisualizerProps
->(
-  (
-    {
-      state,
-      barCount = 15,
-      mediaStream,
-      minHeight = 20,
-      maxHeight = 100,
-      demo = false,
-      centerAlign = false,
-      className,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    // Audio processing
-    const realVolumeBands = useMultibandVolume(mediaStream, {
-      bands: barCount,
-      loPass: 100,
-      hiPass: 200,
-    })
-
-    // Generate fake volume data for demo mode using refs to avoid state updates
-    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))
-    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>
-      new Array(barCount).fill(0.2)
-    )
-    const fakeAnimationRef = useRef<number | undefined>(undefined)
-
-    // Animate fake volume bands for speaking and listening states
-    useEffect(() => {
-      if (!demo) return
-
-      if (state !== "speaking" && state !== "listening") {
-        const bands = new Array(barCount).fill(0.2)
-        fakeVolumeBandsRef.current = bands
-        setTimeout(() => {
-          setFakeVolumeBands(bands)
-        }, 0)
-        return
-      }
-
-      let lastUpdate = 0
-      const updateInterval = 50
-      const startTime = Date.now() / 1000
-
-      const updateFakeVolume = (timestamp: number) => {
-        if (timestamp - lastUpdate >= updateInterval) {
-          const time = Date.now() / 1000 - startTime
-          const newBands = new Array(barCount)
-
-          for (let i = 0; i < barCount; i++) {
-            const waveOffset = i * 0.5
-            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5
-            const randomNoise = Math.random() * 0.2
-            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))
-          }
-
-          // Only update if values changed significantly
-          let hasChanged = false
-          for (let i = 0; i < barCount; i++) {
-            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {
-              hasChanged = true
-              break
-            }
-          }
-
-          if (hasChanged) {
-            fakeVolumeBandsRef.current = newBands
-            setFakeVolumeBands(newBands)
-          }
-
-          lastUpdate = timestamp
-        }
-
-        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)
-      }
-
-      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)
-
-      return () => {
-        if (fakeAnimationRef.current) {
-          cancelAnimationFrame(fakeAnimationRef.current)
-        }
-      }
-    }, [demo, state, barCount])
-
-    // Use fake or real volume data based on demo mode
-    const volumeBands = useMemo(
-      () => (demo ? fakeVolumeBands : realVolumeBands),
-      [demo, fakeVolumeBands, realVolumeBands]
-    )
-
-    // Animation sequencing
-    const highlightedIndices = useBarAnimator(
-      state,
-      barCount,
-      state === "connecting"
-        ? 2000 / barCount
-        : state === "thinking"
-          ? 150
-          : state === "listening"
-            ? 500
-            : 1000
-    )
-
-    return (
-      <div
-        ref={ref}
-        data-state={state}
-        className={cn(
-          "relative flex justify-center gap-1.5",
-          centerAlign ? "items-center" : "items-end",
-          "bg-muted h-32 w-full overflow-hidden rounded-lg p-4",
-          className
-        )}
-        style={{
-          ...style,
-        }}
-        {...props}
-      >
-        {volumeBands.map((volume, index) => {
-          const heightPct = Math.min(
-            maxHeight,
-            Math.max(minHeight, volume * 100 + 5)
-          )
-          const isHighlighted = highlightedIndices?.includes(index) ?? false
-
-          return (
-            <Bar
-              key={index}
-              heightPct={heightPct}
-              isHighlighted={isHighlighted}
-              state={state}
-            />
-          )
-        })}
-      </div>
-    )
-  }
-)
-
-// Memoized Bar component to prevent unnecessary re-renders
-const Bar = React.memo<{
-  heightPct: number
-  isHighlighted: boolean
-  state?: AgentState
-}>(({ heightPct, isHighlighted, state }) => (
-  <div
-    data-highlighted={isHighlighted}
-    className={cn(
-      "max-w-[12px] min-w-[8px] flex-1 transition-all duration-150",
-      "rounded-full",
-      "bg-border data-[highlighted=true]:bg-primary",
-      state === "speaking" && "bg-primary",
-      state === "thinking" && isHighlighted && "animate-pulse"
-    )}
-    style={{
-      height: `${heightPct}%`,
-      animationDuration: state === "thinking" ? "300ms" : undefined,
-    }}
-  />
-))
-
-Bar.displayName = "Bar"
-
-// Wrap the main component with React.memo for prop comparison optimization
-const BarVisualizer = React.memo(
-  BarVisualizerComponent,
-  (prevProps, nextProps) => {
-    return (
-      prevProps.state === nextProps.state &&
-      prevProps.barCount === nextProps.barCount &&
-      prevProps.mediaStream === nextProps.mediaStream &&
-      prevProps.minHeight === nextProps.minHeight &&
-      prevProps.maxHeight === nextProps.maxHeight &&
-      prevProps.demo === nextProps.demo &&
-      prevProps.centerAlign === nextProps.centerAlign &&
-      prevProps.className === nextProps.className &&
-      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)
-    )
-  }
-)
-
-BarVisualizerComponent.displayName = "BarVisualizerComponent"
-BarVisualizer.displayName = "BarVisualizer"
-
-export type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {
-  active?: boolean
-  processing?: boolean
-  deviceId?: string
-  barWidth?: number
-  barHeight?: number
-  barGap?: number
-  barRadius?: number
-  barColor?: string
-  fadeEdges?: boolean
-  fadeWidth?: number
-  height?: string | number
-  sensitivity?: number
-  smoothingTimeConstant?: number
-  fftSize?: number
-  historySize?: number
-  updateRate?: number
-  mode?: "scrolling" | "static"
-  onError?: (error: Error) => void
-  onStreamReady?: (stream: MediaStream) => void
-  onStreamEnd?: () => void
-}
-export const LiveWaveform = ({
-  active = false,
-  processing = false,
-  deviceId,
-  barWidth = 3,
-  barGap = 1,
-  barRadius = 1.5,
-  barColor,
-  fadeEdges = true,
-  fadeWidth = 24,
-  barHeight: baseBarHeight = 4,
-  height = 64,
-  sensitivity = 1,
-  smoothingTimeConstant = 0.8,
-  fftSize = 256,
-  historySize = 60,
-  updateRate = 30,
-  mode = "static",
-  onError,
-  onStreamReady,
-  onStreamEnd,
-  className,
-  ...props
-}: LiveWaveformProps) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const historyRef = useRef<number[]>([])
-  const analyserRef = useRef<AnalyserNode | null>(null)
-  const audioContextRef = useRef<AudioContext | null>(null)
-  const streamRef = useRef<MediaStream | null>(null)
-  const animationRef = useRef<number>(0)
-  const lastUpdateRef = useRef<number>(0)
-  const processingAnimationRef = useRef<number | null>(null)
-  const lastActiveDataRef = useRef<number[]>([])
-  const transitionProgressRef = useRef(0)
-  const staticBarsRef = useRef<number[]>([])
-  const needsRedrawRef = useRef(true)
-  const gradientCacheRef = useRef<CanvasGradient | null>(null)
-  const lastWidthRef = useRef(0)
-  const heightStyle = typeof height === "number" ? `${height}px` : height
-  // Handle canvas resizing
-  useEffect(() => {
-    const canvas = canvasRef.current
-    const container = containerRef.current
-    if (!canvas || !container) return
-    const resizeObserver = new ResizeObserver(() => {
-      const rect = container.getBoundingClientRect()
-      const dpr = window.devicePixelRatio || 1
-      canvas.width = rect.width * dpr
-      canvas.height = rect.height * dpr
-      canvas.style.width = `${rect.width}px`
-      canvas.style.height = `${rect.height}px`
-      const ctx = canvas.getContext("2d")
-      if (ctx) {
-        ctx.scale(dpr, dpr)
-      }
-      gradientCacheRef.current = null
-      lastWidthRef.current = rect.width
-      needsRedrawRef.current = true
-    })
-    resizeObserver.observe(container)
-    return () => resizeObserver.disconnect()
-  }, [])
-  useEffect(() => {
-    if (processing && !active) {
-      let time = 0
-      transitionProgressRef.current = 0
-      const animateProcessing = () => {
-        time += 0.03
-        transitionProgressRef.current = Math.min(
-          1,
-          transitionProgressRef.current + 0.02
-        )
-        const processingData = []
-        const barCount = Math.floor(
-          (containerRef.current?.getBoundingClientRect().width || 200) /
-            (barWidth + barGap)
-        )
-        if (mode === "static") {
-          const halfCount = Math.floor(barCount / 2)
-          for (let i = 0; i < barCount; i++) {
-            const normalizedPosition = (i - halfCount) / halfCount
-            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4
-            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25
-            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2
-            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15
-            const combinedWave = wave1 + wave2 + wave3
-            const processingValue = (0.2 + combinedWave) * centerWeight
-            let finalValue = processingValue
-            if (
-              lastActiveDataRef.current.length > 0 &&
-              transitionProgressRef.current < 1
-            ) {
-              const lastDataIndex = Math.min(
-                i,
-                lastActiveDataRef.current.length - 1
-              )
-              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
-              finalValue =
-                lastValue * (1 - transitionProgressRef.current) +
-                processingValue * transitionProgressRef.current
-            }
-            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
-          }
-        } else {
-          for (let i = 0; i < barCount; i++) {
-            const normalizedPosition = (i - barCount / 2) / (barCount / 2)
-            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4
-            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25
-            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2
-            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15
-            const combinedWave = wave1 + wave2 + wave3
-            const processingValue = (0.2 + combinedWave) * centerWeight
-            let finalValue = processingValue
-            if (
-              lastActiveDataRef.current.length > 0 &&
-              transitionProgressRef.current < 1
-            ) {
-              const lastDataIndex = Math.floor(
-                (i / barCount) * lastActiveDataRef.current.length
-              )
-              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
-              finalValue =
-                lastValue * (1 - transitionProgressRef.current) +
-                processingValue * transitionProgressRef.current
-            }
-            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
-          }
-        }
-        if (mode === "static") {
-          staticBarsRef.current = processingData
-        } else {
-          historyRef.current = processingData
-        }
-        needsRedrawRef.current = true
-        processingAnimationRef.current =
-          requestAnimationFrame(animateProcessing)
-      }
-      animateProcessing()
-      return () => {
-        if (processingAnimationRef.current) {
-          cancelAnimationFrame(processingAnimationRef.current)
-        }
-      }
-    } else if (!active && !processing) {
-      const hasData =
-        mode === "static"
-          ? staticBarsRef.current.length > 0
-          : historyRef.current.length > 0
-      if (hasData) {
-        let fadeProgress = 0
-        const fadeToIdle = () => {
-          fadeProgress += 0.03
-          if (fadeProgress < 1) {
-            if (mode === "static") {
-              staticBarsRef.current = staticBarsRef.current.map(
-                (value) => value * (1 - fadeProgress)
-              )
-            } else {
-              historyRef.current = historyRef.current.map(
-                (value) => value * (1 - fadeProgress)
-              )
-            }
-            needsRedrawRef.current = true
-            requestAnimationFrame(fadeToIdle)
-          } else {
-            if (mode === "static") {
-              staticBarsRef.current = []
-            } else {
-              historyRef.current = []
-            }
-          }
-        }
-        fadeToIdle()
-      }
-    }
-  }, [processing, active, barWidth, barGap, mode])
-  // Handle microphone setup and teardown
-  useEffect(() => {
-    if (!active) {
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach((track) => track.stop())
-        streamRef.current = null
-        onStreamEnd?.()
-      }
-      if (
-        audioContextRef.current &&
-        audioContextRef.current.state !== "closed"
-      ) {
-        audioContextRef.current.close()
-        audioContextRef.current = null
-      }
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
-        animationRef.current = 0
-      }
-      return
-    }
-    const setupMicrophone = async () => {
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({
-          audio: deviceId
-            ? {
-                deviceId: { exact: deviceId },
-                echoCancellation: true,
-                noiseSuppression: true,
-                autoGainControl: true,
-              }
-            : {
-                echoCancellation: true,
-                noiseSuppression: true,
-                autoGainControl: true,
-              },
-        })
-        streamRef.current = stream
-        onStreamReady?.(stream)
-        const AudioContextConstructor =
-          window.AudioContext ||
-          (window as unknown as { webkitAudioContext: typeof AudioContext })
-            .webkitAudioContext
-        const audioContext = new AudioContextConstructor()
-        const analyser = audioContext.createAnalyser()
-        analyser.fftSize = fftSize
-        analyser.smoothingTimeConstant = smoothingTimeConstant
-        const source = audioContext.createMediaStreamSource(stream)
-        source.connect(analyser)
-        audioContextRef.current = audioContext
-        analyserRef.current = analyser
-        // Clear history when starting
-        historyRef.current = []
-      } catch (error) {
-        onError?.(error as Error)
-      }
-    }
-    setupMicrophone()
-    return () => {
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach((track) => track.stop())
-        streamRef.current = null
-        onStreamEnd?.()
-      }
-      if (
-        audioContextRef.current &&
-        audioContextRef.current.state !== "closed"
-      ) {
-        audioContextRef.current.close()
-        audioContextRef.current = null
-      }
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
-        animationRef.current = 0
-      }
-    }
-  }, [
-    active,
-    deviceId,
-    fftSize,
-    smoothingTimeConstant,
-    onError,
-    onStreamReady,
-    onStreamEnd,
-  ])
-  // Animation loop
-  useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-    const ctx = canvas.getContext("2d")
-    if (!ctx) return
-    let rafId: number
-    const animate = (currentTime: number) => {
-      // Render waveform
-      const rect = canvas.getBoundingClientRect()
-      // Update audio data if active
-      if (active && currentTime - lastUpdateRef.current > updateRate) {
-        lastUpdateRef.current = currentTime
-        if (analyserRef.current) {
-          const dataArray = new Uint8Array(
-            analyserRef.current.frequencyBinCount
-          )
-          analyserRef.current.getByteFrequencyData(dataArray)
-          if (mode === "static") {
-            // For static mode, update bars in place
-            const startFreq = Math.floor(dataArray.length * 0.05)
-            const endFreq = Math.floor(dataArray.length * 0.4)
-            const relevantData = dataArray.slice(startFreq, endFreq)
-            const barCount = Math.floor(rect.width / (barWidth + barGap))
-            const halfCount = Math.floor(barCount / 2)
-            const newBars: number[] = []
-            // Mirror the data for symmetric display
-            for (let i = halfCount - 1; i >= 0; i--) {
-              const dataIndex = Math.floor(
-                (i / halfCount) * relevantData.length
-              )
-              const value = Math.min(
-                1,
-                (relevantData[dataIndex] / 255) * sensitivity
-              )
-              newBars.push(Math.max(0.05, value))
-            }
-            for (let i = 0; i < halfCount; i++) {
-              const dataIndex = Math.floor(
-                (i / halfCount) * relevantData.length
-              )
-              const value = Math.min(
-                1,
-                (relevantData[dataIndex] / 255) * sensitivity
-              )
-              newBars.push(Math.max(0.05, value))
-            }
-            staticBarsRef.current = newBars
-            lastActiveDataRef.current = newBars
-          } else {
-            // Scrolling mode - original behavior
-            let sum = 0
-            const startFreq = Math.floor(dataArray.length * 0.05)
-            const endFreq = Math.floor(dataArray.length * 0.4)
-            const relevantData = dataArray.slice(startFreq, endFreq)
-            for (let i = 0; i < relevantData.length; i++) {
-              sum += relevantData[i]
-            }
-            const average = (sum / relevantData.length / 255) * sensitivity
-            // Add to history
-            historyRef.current.push(Math.min(1, Math.max(0.05, average)))
-            lastActiveDataRef.current = [...historyRef.current]
-            // Maintain history size
-            if (historyRef.current.length > historySize) {
-              historyRef.current.shift()
-            }
-          }
-          needsRedrawRef.current = true
-        }
-      }
-      // Only redraw if needed
-      if (!needsRedrawRef.current && !active) {
-        rafId = requestAnimationFrame(animate)
-        return
-      }
-      needsRedrawRef.current = active
-      ctx.clearRect(0, 0, rect.width, rect.height)
-      const computedBarColor =
-        barColor ||
-        (() => {
-          const style = getComputedStyle(canvas)
-          // Try to get the computed color value directly
-          const color = style.color
-          return color || "#000"
-        })()
-      const step = barWidth + barGap
-      const barCount = Math.floor(rect.width / step)
-      const centerY = rect.height / 2
-      // Draw bars based on mode
-      if (mode === "static") {
-        // Static mode - bars in fixed positions
-        const dataToRender = processing
-          ? staticBarsRef.current
-          : active
-            ? staticBarsRef.current
-            : staticBarsRef.current.length > 0
-              ? staticBarsRef.current
-              : []
-        for (let i = 0; i < barCount && i < dataToRender.length; i++) {
-          const value = dataToRender[i] || 0.1
-          const x = i * step
-          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)
-          const y = centerY - barHeight / 2
-          ctx.fillStyle = computedBarColor
-          ctx.globalAlpha = 0.4 + value * 0.6
-          if (barRadius > 0) {
-            ctx.beginPath()
-            ctx.roundRect(x, y, barWidth, barHeight, barRadius)
-            ctx.fill()
-          } else {
-            ctx.fillRect(x, y, barWidth, barHeight)
-          }
-        }
-      } else {
-        // Scrolling mode - original behavior
-        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {
-          const dataIndex = historyRef.current.length - 1 - i
-          const value = historyRef.current[dataIndex] || 0.1
-          const x = rect.width - (i + 1) * step
-          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)
-          const y = centerY - barHeight / 2
-          ctx.fillStyle = computedBarColor
-          ctx.globalAlpha = 0.4 + value * 0.6
-          if (barRadius > 0) {
-            ctx.beginPath()
-            ctx.roundRect(x, y, barWidth, barHeight, barRadius)
-            ctx.fill()
-          } else {
-            ctx.fillRect(x, y, barWidth, barHeight)
-          }
-        }
-      }
-      // Apply edge fading
-      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {
-        // Cache gradient if width hasn't changed
-        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {
-          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)
-          const fadePercent = Math.min(0.3, fadeWidth / rect.width)
-          // destination-out: removes destination where source alpha is high
-          // We want: fade edges out, keep center solid
-          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep
-          gradient.addColorStop(0, "rgba(255,255,255,1)")
-          gradient.addColorStop(fadePercent, "rgba(255,255,255,0)")
-          // Center stays transparent = keep everything
-          gradient.addColorStop(1 - fadePercent, "rgba(255,255,255,0)")
-          // Right edge: fade from transparent (0) = keep to opaque (1) = remove
-          gradient.addColorStop(1, "rgba(255,255,255,1)")
-          gradientCacheRef.current = gradient
-          lastWidthRef.current = rect.width
-        }
-        ctx.globalCompositeOperation = "destination-out"
-        ctx.fillStyle = gradientCacheRef.current
-        ctx.fillRect(0, 0, rect.width, rect.height)
-        ctx.globalCompositeOperation = "source-over"
-      }
-      ctx.globalAlpha = 1
-      rafId = requestAnimationFrame(animate)
-    }
-    rafId = requestAnimationFrame(animate)
-    return () => {
-      if (rafId) {
-        cancelAnimationFrame(rafId)
-      }
-    }
-  }, [
-    active,
-    processing,
-    sensitivity,
-    updateRate,
-    historySize,
-    barWidth,
-    baseBarHeight,
-    barGap,
-    barRadius,
-    barColor,
-    fadeEdges,
-    fadeWidth,
-    mode,
-  ])
-  return (
-    <div
-      className={cn("relative h-full w-full", className)}
-      ref={containerRef}
-      style={{ height: heightStyle }}
-      aria-label={
-        active
-          ? "Live audio waveform"
-          : processing
-            ? "Processing audio"
-            : "Audio waveform idle"
-      }
-      role="img"
-      {...props}
-    >
-      {!active && !processing && (
-        <div className="border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted" />
-      )}
-      <canvas
-        className="block h-full w-full"
-        ref={canvasRef}
-        aria-hidden="true"
-      />
-    </div>
-  )
-}
diff --git a/apps/v4/registry/bases/base/blocks/github.tsx b/apps/v4/registry/bases/base/blocks/github.tsx
deleted file mode 100644
index 437b9adae8..0000000000
--- a/apps/v4/registry/bases/base/blocks/github.tsx
+++ /dev/null
@@ -1,1388 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/base/components/example"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/bases/base/ui/avatar"
-import { Badge } from "@/registry/bases/base/ui/badge"
-import { Button } from "@/registry/bases/base/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/base/ui/card"
-import { Checkbox } from "@/registry/bases/base/ui/checkbox"
-import {
-  Combobox,
-  ComboboxChip,
-  ComboboxChips,
-  ComboboxChipsInput,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxItem,
-  ComboboxList,
-  ComboboxValue,
-  useComboboxAnchor,
-} from "@/registry/bases/base/ui/combobox"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/bases/base/ui/command"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/bases/base/ui/drawer"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/bases/base/ui/dropdown-menu"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/registry/bases/base/ui/empty"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@/registry/bases/base/ui/field"
-import { Input } from "@/registry/bases/base/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupTextarea,
-} from "@/registry/bases/base/ui/input-group"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-} from "@/registry/bases/base/ui/item"
-import { Kbd } from "@/registry/bases/base/ui/kbd"
-import {
-  NativeSelect,
-  NativeSelectOption,
-} from "@/registry/bases/base/ui/native-select"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/bases/base/ui/popover"
-import { Separator } from "@/registry/bases/base/ui/separator"
-import { Spinner } from "@/registry/bases/base/ui/spinner"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/bases/base/ui/tabs"
-import { Textarea } from "@/registry/bases/base/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/bases/base/ui/tooltip"
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
-export default function GithubBlock() {
-  return (
-    <ExampleWrapper>
-      <CodespacesCard />
-      <AssignIssue />
-      <Navbar />
-      <RepositoryToolbar />
-      <Profile />
-      <ContributionsActivity />
-      <Contributors />
-    </ExampleWrapper>
-  )
-}
-function CodespacesCard() {
-  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)
-  return (
-    <Example title="Codespaces" className="min-h-[550px] lg:p-12">
-      <Card className="mx-auto w-full max-w-sm" size="sm">
-        <CardContent>
-          <Tabs defaultValue="codespaces">
-            <TabsList className="w-full">
-              <TabsTrigger value="codespaces">Codespaces</TabsTrigger>
-              <TabsTrigger value="local">Local</TabsTrigger>
-            </TabsList>
-            <TabsContent value="codespaces">
-              <Item size="sm" className="px-1 pt-2">
-                <ItemContent>
-                  <ItemTitle>Codespaces</ItemTitle>
-                  <ItemDescription>
-                    Your workspaces in the cloud
-                  </ItemDescription>
-                </ItemContent>
-                <ItemActions>
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={<Button variant="ghost" size="icon-sm" />}
-                    >
-                      <IconPlaceholder
-                        lucide="PlusIcon"
-                        tabler="IconPlus"
-                        hugeicons="PlusSignIcon"
-                        phosphor="PlusIcon"
-                        remixicon="RiAddLine"
-                      />
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom">
-                      Create a codespace on main
-                    </TooltipContent>
-                  </Tooltip>
-                  <DropdownMenu>
-                    <Tooltip>
-                      <TooltipTrigger
-                        render={
-                          <DropdownMenuTrigger
-                            render={<Button variant="ghost" size="icon-sm" />}
-                          />
-                        }
-                      >
-                        <IconPlaceholder
-                          lucide="MoreHorizontalIcon"
-                          tabler="IconDots"
-                          hugeicons="MoreHorizontalCircle01Icon"
-                          phosphor="DotsThreeOutlineIcon"
-                          remixicon="RiMoreLine"
-                        />
-                      </TooltipTrigger>
-                      <TooltipContent side="bottom">
-                        Codespace repository configuration
-                      </TooltipContent>
-                    </Tooltip>
-                    <DropdownMenuContent align="end" className="w-56">
-                      <DropdownMenuGroup>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="PlusIcon"
-                            tabler="IconPlus"
-                            hugeicons="PlusSignIcon"
-                            phosphor="PlusIcon"
-                            remixicon="RiAddLine"
-                          />
-                          New with options...
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="ContainerIcon"
-                            tabler="IconBox"
-                            hugeicons="CubeIcon"
-                            phosphor="CubeIcon"
-                            remixicon="RiBox1Line"
-                          />
-                          Configure dev container
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="ZapIcon"
-                            tabler="IconBolt"
-                            hugeicons="ZapIcon"
-                            phosphor="LightningIcon"
-                            remixicon="RiFlashlightLine"
-                          />
-                          Set up prebuilds
-                        </DropdownMenuItem>
-                      </DropdownMenuGroup>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuGroup>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="ServerIcon"
-                            tabler="IconServer"
-                            hugeicons="ServerStackIcon"
-                            phosphor="HardDrivesIcon"
-                            remixicon="RiHardDriveLine"
-                          />
-                          Manage codespaces
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="ShareIcon"
-                            tabler="IconShare2"
-                            hugeicons="Share03Icon"
-                            phosphor="ShareIcon"
-                            remixicon="RiShareLine"
-                          />
-                          Share deep link
-                        </DropdownMenuItem>
-                        <DropdownMenuItem>
-                          <IconPlaceholder
-                            lucide="InfoIcon"
-                            tabler="IconInfoCircle"
-                            hugeicons="AlertCircleIcon"
-                            phosphor="InfoIcon"
-                            remixicon="RiInformationLine"
-                          />
-                          What are codespaces?
-                        </DropdownMenuItem>
-                      </DropdownMenuGroup>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </ItemActions>
-              </Item>
-              <Separator className="-mx-2 my-2 w-auto!" />
-              <Empty className="p-4">
-                <EmptyHeader>
-                  <EmptyMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="ServerIcon"
-                      tabler="IconServer"
-                      hugeicons="ServerStackIcon"
-                      phosphor="HardDrivesIcon"
-                      remixicon="RiHardDriveLine"
-                    />
-                  </EmptyMedia>
-                  <EmptyTitle>No codespaces</EmptyTitle>
-                  <EmptyDescription>
-                    You don&apos;t have any codespaces with this repository
-                    checked out
-                  </EmptyDescription>
-                </EmptyHeader>
-                <EmptyContent>
-                  <Button
-                    size="sm"
-                    onClick={() => {
-                      setIsCreatingCodespace(true)
-                      setTimeout(() => {
-                        setIsCreatingCodespace(false)
-                      }, 2000)
-                    }}
-                    disabled={isCreatingCodespace}
-                  >
-                    {isCreatingCodespace ? (
-                      <Spinner data-icon="inline-start" />
-                    ) : (
-                      ""
-                    )}
-                    Create Codespace
-                  </Button>
-                  <a
-                    href="#learn-more"
-                    className="text-muted-foreground text-xs underline underline-offset-4"
-                  >
-                    Learn more about codespaces
-                  </a>
-                </EmptyContent>
-              </Empty>
-              <Separator className="-mx-2 my-2 w-auto!" />
-              <div className="text-muted-foreground p-1.5 text-xs">
-                Codespace usage for this repository is paid for by{" "}
-                <span className="font-medium">shadcn</span>.
-              </div>
-            </TabsContent>
-            <TabsContent value="local">
-              <Item size="sm" className="hidden p-0">
-                <ItemContent>
-                  <ItemTitle className="gap-2">
-                    <IconPlaceholder
-                      lucide="TerminalIcon"
-                      tabler="IconTerminal"
-                      hugeicons="ComputerTerminal01Icon"
-                      phosphor="TerminalIcon"
-                      remixicon="RiTerminalBoxLine"
-                      className="size-4"
-                    />
-                    Clone
-                  </ItemTitle>
-                </ItemContent>
-                <ItemActions>
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={<Button variant="ghost" size="icon" />}
-                    >
-                      <IconPlaceholder
-                        lucide="InfoIcon"
-                        tabler="IconInfoCircle"
-                        hugeicons="AlertCircleIcon"
-                        phosphor="InfoIcon"
-                        remixicon="RiInformationLine"
-                      />
-                    </TooltipTrigger>
-                    <TooltipContent side="left">
-                      Which remote URL should I use?
-                    </TooltipContent>
-                  </Tooltip>
-                </ItemActions>
-              </Item>
-              <Tabs defaultValue="https">
-                <TabsList
-                  variant="line"
-                  className="w-full justify-start border-b *:[button]:flex-0"
-                >
-                  <TabsTrigger value="https">HTTPS</TabsTrigger>
-                  <TabsTrigger value="ssh">SSH</TabsTrigger>
-                  <TabsTrigger value="cli">GitHub CLI</TabsTrigger>
-                </TabsList>
-                <div className="bg-muted/30 rounded-md border p-2">
-                  <TabsContent value="https">
-                    <Field className="gap-2">
-                      <FieldLabel htmlFor="https-url" className="sr-only">
-                        HTTPS URL
-                      </FieldLabel>
-                      <InputGroup>
-                        <InputGroupAddon align="inline-end">
-                          <InputGroupButton variant="ghost" size="icon-xs">
-                            <IconPlaceholder
-                              lucide="CopyIcon"
-                              tabler="IconCopy"
-                              hugeicons="Copy01Icon"
-                              phosphor="CopyIcon"
-                              remixicon="RiFileCopyLine"
-                            />
-                          </InputGroupButton>
-                        </InputGroupAddon>
-                        <InputGroupInput
-                          id="https-url"
-                          defaultValue="https://github.com/shadcn-ui/ui.git"
-                          readOnly
-                        />
-                      </InputGroup>
-                      <FieldDescription>
-                        Clone using the web URL.
-                      </FieldDescription>
-                    </Field>
-                  </TabsContent>
-                  <TabsContent value="ssh">
-                    <Field className="gap-2">
-                      <FieldLabel htmlFor="ssh-url" className="sr-only">
-                        SSH URL
-                      </FieldLabel>
-                      <InputGroup>
-                        <InputGroupAddon align="inline-end">
-                          <InputGroupButton variant="ghost" size="icon-xs">
-                            <IconPlaceholder
-                              lucide="CopyIcon"
-                              tabler="IconCopy"
-                              hugeicons="Copy01Icon"
-                              phosphor="CopyIcon"
-                              remixicon="RiFileCopyLine"
-                            />
-                          </InputGroupButton>
-                        </InputGroupAddon>
-                        <InputGroupInput
-                          id="ssh-url"
-                          defaultValue="git@github.com:shadcn-ui/ui.git"
-                          readOnly
-                        />
-                      </InputGroup>
-                      <FieldDescription>
-                        Use a password-protected SSH key.
-                      </FieldDescription>
-                    </Field>
-                  </TabsContent>
-                  <TabsContent value="cli">
-                    <Field className="gap-2">
-                      <FieldLabel htmlFor="cli-command" className="sr-only">
-                        CLI Command
-                      </FieldLabel>
-                      <InputGroup>
-                        <InputGroupAddon align="inline-end">
-                          <InputGroupButton variant="ghost" size="icon-xs">
-                            <IconPlaceholder
-                              lucide="CopyIcon"
-                              tabler="IconCopy"
-                              hugeicons="Copy01Icon"
-                              phosphor="CopyIcon"
-                              remixicon="RiFileCopyLine"
-                            />
-                          </InputGroupButton>
-                        </InputGroupAddon>
-                        <InputGroupInput
-                          id="cli-command"
-                          defaultValue="gh repo clone shadcn-ui/ui"
-                          readOnly
-                        />
-                      </InputGroup>
-                      <FieldDescription>
-                        Work fast with our official CLI.{" "}
-                        <a href="#learn-more">Learn more</a>
-                      </FieldDescription>
-                    </Field>
-                  </TabsContent>
-                </div>
-              </Tabs>
-              <Separator className="-mx-2 my-2 w-auto!" />
-              <div className="flex flex-col">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="justify-start gap-1.5"
-                >
-                  <IconPlaceholder
-                    lucide="MonitorIcon"
-                    tabler="IconDeviceDesktop"
-                    hugeicons="ComputerIcon"
-                    phosphor="MonitorIcon"
-                    remixicon="RiComputerLine"
-                    data-icon="inline-start"
-                  />
-                  Open with GitHub Desktop
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="justify-start gap-1.5"
-                >
-                  <IconPlaceholder
-                    lucide="DownloadIcon"
-                    tabler="IconDownload"
-                    hugeicons="DownloadIcon"
-                    phosphor="DownloadIcon"
-                    remixicon="RiDownloadLine"
-                    data-icon="inline-start"
-                  />
-                  Download ZIP
-                </Button>
-              </div>
-            </TabsContent>
-          </Tabs>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-function RepositoryToolbar() {
-  const [selectedBranch, setSelectedBranch] = React.useState("main")
-  return (
-    <Example title="Repository Toolbar">
-      <div className="flex items-center gap-2">
-        <InputGroup>
-          <InputGroupInput placeholder="Go to file" />
-          <InputGroupAddon align="inline-start">
-            <InputGroupButton variant="ghost" size="icon-xs">
-              <IconPlaceholder
-                lucide="SearchIcon"
-                tabler="IconSearch"
-                hugeicons="SearchIcon"
-                phosphor="MagnifyingGlassIcon"
-                remixicon="RiSearchLine"
-              />
-            </InputGroupButton>
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">
-            <Kbd>t</Kbd>
-          </InputGroupAddon>
-        </InputGroup>
-        <DropdownMenu>
-          <DropdownMenuTrigger render={<Button variant="outline" />}>
-            Add File
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDown01Icon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              data-icon="inline-end"
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="PlusIcon"
-                  tabler="IconPlus"
-                  hugeicons="PlusSignIcon"
-                  phosphor="PlusIcon"
-                  remixicon="RiAddLine"
-                />
-                Create new file
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="UploadIcon"
-                  hugeicons="Upload01Icon"
-                  tabler="IconUpload"
-                  phosphor="UploadIcon"
-                  remixicon="RiUploadLine"
-                />
-                Upload files
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <Popover>
-          <Tooltip>
-            <TooltipTrigger
-              render={
-                <PopoverTrigger
-                  render={<Button variant="outline" size="icon" />}
-                />
-              }
-            >
-              <IconPlaceholder
-                lucide="CloudCogIcon"
-                hugeicons="AiCloud01Icon"
-                tabler="IconCloudCog"
-                phosphor="CloudArrowUpIcon"
-                remixicon="RiUploadCloudLine"
-              />
-            </TooltipTrigger>
-            <TooltipContent>New Agent Task</TooltipContent>
-          </Tooltip>
-          <PopoverContent side="bottom" align="end" className="w-96">
-            <Field>
-              <FieldLabel htmlFor="new-agent-task">New Agent Task</FieldLabel>
-              <InputGroup>
-                <InputGroupTextarea placeholder="Describe your task in natural language."></InputGroupTextarea>
-                <InputGroupAddon align="block-end">
-                  <Popover>
-                    <Tooltip>
-                      <PopoverTrigger
-                        render={
-                          <TooltipTrigger
-                            render={
-                              <InputGroupButton
-                                variant="outline"
-                                size="icon-sm"
-                              />
-                            }
-                          />
-                        }
-                      >
-                        <IconPlaceholder
-                          lucide="GitBranchIcon"
-                          hugeicons="GitBranchIcon"
-                          tabler="IconGitBranch"
-                          phosphor="GitBranchIcon"
-                          remixicon="RiGitBranchLine"
-                        />
-                      </PopoverTrigger>
-                      <TooltipContent>Select a branch</TooltipContent>
-                    </Tooltip>
-                    <PopoverContent side="bottom" align="start" className="p-1">
-                      <Field>
-                        <FieldLabel htmlFor="select-branch" className="sr-only">
-                          Select a Branch
-                        </FieldLabel>
-                        <Command>
-                          <CommandInput
-                            id="select-branch"
-                            placeholder="Find a branch"
-                          />
-                          <CommandEmpty>No branches found</CommandEmpty>
-                          <CommandList>
-                            <CommandGroup>
-                              {[
-                                "main",
-                                "develop",
-                                "feature/123",
-                                "feature/user-authentication",
-                                "feature/dashboard-redesign",
-                                "bugfix/login-error",
-                                "hotfix/security-patch",
-                                "release/v2.0.0",
-                                "feature/api-integration",
-                                "bugfix/memory-leak",
-                                "feature/dark-mode",
-                                "feature/responsive-design",
-                                "bugfix/typo-fix",
-                                "feature/search-functionality",
-                                "release/v1.9.0",
-                                "feature/notifications",
-                                "bugfix/cache-issue",
-                                "feature/payment-gateway",
-                                "hotfix/critical-bug",
-                                "feature/admin-panel",
-                                "bugfix/validation-error",
-                                "feature/analytics",
-                                "release/v2.1.0",
-                              ].map((branch) => (
-                                <CommandItem
-                                  key={branch}
-                                  value={branch}
-                                  onSelect={() => setSelectedBranch(branch)}
-                                  data-checked={selectedBranch === branch}
-                                >
-                                  {branch}
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </Field>
-                    </PopoverContent>
-                  </Popover>
-                  <Popover>
-                    <Tooltip>
-                      <PopoverTrigger
-                        render={
-                          <TooltipTrigger
-                            render={
-                              <InputGroupButton
-                                variant="outline"
-                                size="icon-sm"
-                              />
-                            }
-                          />
-                        }
-                      >
-                        <IconPlaceholder
-                          lucide="BotIcon"
-                          hugeicons="RoboticIcon"
-                          tabler="IconRobot"
-                          phosphor="RobotIcon"
-                          remixicon="RiRobotLine"
-                        />
-                      </PopoverTrigger>
-                      <TooltipContent>Select Agent</TooltipContent>
-                    </Tooltip>
-                    <PopoverContent side="bottom" align="start">
-                      <Empty className="gap-4 p-0">
-                        <EmptyHeader>
-                          <EmptyTitle className="text-sm">
-                            This repository has no custom agents
-                          </EmptyTitle>
-                          <EmptyDescription className="text-xs">
-                            Custom agents are reusable instructions and tools in
-                            your repository.
-                          </EmptyDescription>
-                        </EmptyHeader>
-                        <EmptyContent>
-                          <Button variant="outline" size="sm">
-                            Create Custom Agent
-                          </Button>
-                        </EmptyContent>
-                      </Empty>
-                    </PopoverContent>
-                  </Popover>
-                  <Tooltip>
-                    <TooltipTrigger
-                      render={
-                        <InputGroupButton
-                          variant="ghost"
-                          size="icon-sm"
-                          className="ml-auto"
-                        />
-                      }
-                    >
-                      <IconPlaceholder
-                        lucide="SendIcon"
-                        hugeicons="SentIcon"
-                        tabler="IconSend"
-                        phosphor="PaperPlaneTiltIcon"
-                        remixicon="RiSendPlaneLine"
-                      />
-                    </TooltipTrigger>
-                    <TooltipContent className="flex items-center gap-2 pr-2">
-                      Start Task <Kbd>⏎</Kbd>
-                    </TooltipContent>
-                  </Tooltip>
-                </InputGroupAddon>
-              </InputGroup>
-            </Field>
-          </PopoverContent>
-        </Popover>
-      </div>
-    </Example>
-  )
-}
-function Navbar() {
-  return (
-    <Example title="Account Menu">
-      <header className="flex h-14 w-full items-center gap-2">
-        <Drawer direction="left">
-          <DrawerTrigger asChild>
-            <Button variant="outline" size="icon">
-              <IconPlaceholder
-                lucide="MenuIcon"
-                hugeicons="Menu09Icon"
-                tabler="IconMenu"
-                phosphor="ListIcon"
-                remixicon="RiListUnordered"
-              />
-              <span className="sr-only">Open menu</span>
-            </Button>
-          </DrawerTrigger>
-          <DrawerContent className="max-w-72">
-            <DrawerHeader className="flex flex-row items-center justify-between px-5 pb-0">
-              <DrawerTitle>Menu</DrawerTitle>
-              <DrawerClose asChild>
-                <Button variant="ghost" size="icon-sm">
-                  <IconPlaceholder
-                    lucide="XIcon"
-                    tabler="IconX"
-                    hugeicons="Cancel01Icon"
-                    phosphor="XIcon"
-                    remixicon="RiCloseLine"
-                  />
-                  <span className="sr-only">Close</span>
-                </Button>
-              </DrawerClose>
-            </DrawerHeader>
-            <div className="p-2">
-              <ItemGroup className="gap-px">
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="HomeIcon"
-                      tabler="IconHome"
-                      hugeicons="HomeIcon"
-                      phosphor="HouseIcon"
-                      remixicon="RiHomeLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Home</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="CircleIcon"
-                      tabler="IconCircle"
-                      hugeicons="CircleIcon"
-                      phosphor="CircleIcon"
-                      remixicon="RiCircleLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Issues</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="GitBranchIcon"
-                      tabler="IconGitBranch"
-                      hugeicons="GitBranchIcon"
-                      phosphor="GitBranchIcon"
-                      remixicon="RiGitBranchLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Pull requests</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="LayoutGridIcon"
-                      tabler="IconLayoutGrid"
-                      hugeicons="GridIcon"
-                      phosphor="GridFourIcon"
-                      remixicon="RiGridLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Projects</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="MailIcon"
-                      tabler="IconMail"
-                      hugeicons="MailIcon"
-                      phosphor="EnvelopeIcon"
-                      remixicon="RiMailLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Discussions</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="ServerIcon"
-                      tabler="IconServer"
-                      hugeicons="ServerStackIcon"
-                      phosphor="HardDrivesIcon"
-                      remixicon="RiHardDriveLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Codespaces</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="BotIcon"
-                      tabler="IconRobot"
-                      hugeicons="RoboticIcon"
-                      phosphor="RobotIcon"
-                      remixicon="RiRobotLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Copilot</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="SparklesIcon"
-                      tabler="IconSparkles"
-                      hugeicons="SparklesIcon"
-                      phosphor="SparkleIcon"
-                      remixicon="RiSparklingLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Spark</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <ItemSeparator />
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="SearchIcon"
-                      tabler="IconSearch"
-                      hugeicons="SearchIcon"
-                      phosphor="MagnifyingGlassIcon"
-                      remixicon="RiSearchLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Explore</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="ShoppingBagIcon"
-                      tabler="IconShoppingBag"
-                      hugeicons="ShoppingBasket01Icon"
-                      phosphor="BagIcon"
-                      remixicon="RiShoppingBagLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>Marketplace</ItemTitle>
-                  </ItemContent>
-                </Item>
-                <Item render={<a href="#" />} size="xs">
-                  <ItemMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="LinkIcon"
-                      tabler="IconLink"
-                      hugeicons="LinkIcon"
-                      phosphor="LinkIcon"
-                      remixicon="RiLinksLine"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle>MCP registry</ItemTitle>
-                  </ItemContent>
-                </Item>
-              </ItemGroup>
-            </div>
-          </DrawerContent>
-        </Drawer>
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={
-              <Button
-                variant="ghost"
-                size="icon"
-                className="ml-auto rounded-full"
-              />
-            }
-          >
-            <Avatar>
-              <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
-              <AvatarFallback>SC</AvatarFallback>
-            </Avatar>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56" align="end">
-            <DropdownMenuGroup>
-              <DropdownMenuLabel className="p-0 font-normal">
-                <Item className="px-2 py-1 pb-0.5" size="sm">
-                  <ItemMedia>
-                    <Avatar>
-                      <AvatarImage
-                        src="https://github.com/shadcn.png"
-                        alt="shadcn"
-                      />
-                      <AvatarFallback>SC</AvatarFallback>
-                    </Avatar>
-                  </ItemMedia>
-                  <ItemContent className="gap-0">
-                    <ItemTitle className="text-foreground text-sm">
-                      shadcn
-                    </ItemTitle>
-                    <ItemDescription className="text-xs">
-                      shadcn@example.com
-                    </ItemDescription>
-                  </ItemContent>
-                </Item>
-              </DropdownMenuLabel>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="SmileIcon"
-                  tabler="IconMoodSmile"
-                  hugeicons="SmileIcon"
-                  phosphor="SmileyIcon"
-                  remixicon="RiEmotionLine"
-                />
-                Set status
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="CircleAlertIcon"
-                  tabler="IconExclamationCircle"
-                  hugeicons="AlertCircleIcon"
-                  phosphor="WarningCircleIcon"
-                  remixicon="RiErrorWarningLine"
-                />
-                Single sign-on
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="UserIcon"
-                  tabler="IconUser"
-                  hugeicons="UserIcon"
-                  phosphor="UserIcon"
-                  remixicon="RiUserLine"
-                />
-                Profile
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="FolderIcon"
-                  tabler="IconFolder"
-                  hugeicons="FolderIcon"
-                  phosphor="FolderIcon"
-                  remixicon="RiFolderLine"
-                />
-                Repositories
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="StarIcon"
-                  tabler="IconStar"
-                  hugeicons="StarIcon"
-                  phosphor="StarIcon"
-                  remixicon="RiStarLine"
-                />
-                Stars
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="CodeIcon"
-                  tabler="IconCode"
-                  hugeicons="CodeIcon"
-                  phosphor="CodeIcon"
-                  remixicon="RiCodeLine"
-                />
-                Gists
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="FolderIcon"
-                  tabler="IconFolder"
-                  hugeicons="FolderIcon"
-                  phosphor="FolderIcon"
-                  remixicon="RiFolderLine"
-                />
-                Organizations
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="ServerIcon"
-                  tabler="IconServer"
-                  hugeicons="ServerStackIcon"
-                  phosphor="HardDrivesIcon"
-                  remixicon="RiHardDriveLine"
-                />
-                Enterprises
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="HeartIcon"
-                  tabler="IconHeart"
-                  hugeicons="FavouriteIcon"
-                  phosphor="HeartIcon"
-                  remixicon="RiHeartLine"
-                />
-                Sponsors
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="SettingsIcon"
-                  tabler="IconSettings"
-                  hugeicons="SettingsIcon"
-                  phosphor="GearIcon"
-                  remixicon="RiSettingsLine"
-                />
-                Settings
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="BotIcon"
-                  tabler="IconRobot"
-                  hugeicons="RoboticIcon"
-                  phosphor="RobotIcon"
-                  remixicon="RiRobotLine"
-                />
-                Copilot settings
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="SparklesIcon"
-                  tabler="IconSparkles"
-                  hugeicons="SparklesIcon"
-                  phosphor="SparkleIcon"
-                  remixicon="RiSparklingLine"
-                />
-                Feature preview
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="MonitorIcon"
-                  tabler="IconDeviceDesktop"
-                  hugeicons="ComputerIcon"
-                  phosphor="MonitorIcon"
-                  remixicon="RiComputerLine"
-                />
-                Appearance
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="UserIcon"
-                  tabler="IconUser"
-                  hugeicons="UserIcon"
-                  phosphor="UserIcon"
-                  remixicon="RiUserLine"
-                />
-                Accessibility
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="ArrowUpIcon"
-                  tabler="IconArrowUp"
-                  hugeicons="ArrowUpIcon"
-                  phosphor="ArrowUpIcon"
-                  remixicon="RiArrowUpLine"
-                />
-                Upgrade
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="LogOutIcon"
-                  tabler="IconLogout"
-                  hugeicons="LogoutIcon"
-                  phosphor="SignOutIcon"
-                  remixicon="RiLogoutBoxLine"
-                />
-                Sign out
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </header>
-    </Example>
-  )
-}
-const usernames = [
-  "shadcn",
-  "vercel",
-  "nextjs",
-  "tailwindlabs",
-  "typescript-lang",
-  "eslint",
-  "prettier",
-  "babel",
-  "webpack",
-  "rollup",
-  "parcel",
-  "vite",
-  "react",
-  "vue",
-  "angular",
-  "solid",
-]
-function Contributors() {
-  return (
-    <Example title="Contributors" className="items-center lg:p-16">
-      <Card className="max-w-sm">
-        <CardHeader>
-          <CardTitle>
-            Contributors <Badge variant="secondary">312</Badge>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-wrap gap-2">
-            {usernames.map((username) => (
-              <Avatar key={username}>
-                <AvatarImage
-                  src={`https://github.com/${username}.png`}
-                  alt={username}
-                />
-                <AvatarFallback>{username.charAt(0)}</AvatarFallback>
-              </Avatar>
-            ))}
-          </div>
-        </CardContent>
-        <CardFooter>
-          <a href="#" className="text-sm underline underline-offset-4">
-            + 810 contributors
-          </a>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-function Profile() {
-  return (
-    <Example title="Profile" className="items-center justify-center">
-      <Card className="mx-auto w-full max-w-md">
-        <CardHeader>
-          <CardTitle>Profile</CardTitle>
-          <CardDescription>Manage your profile information.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form id="profile">
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="name">Name</FieldLabel>
-                <Input id="name" placeholder="shadcn" />
-                <FieldDescription>
-                  Your name may appear around GitHub where you contribute or are
-                  mentioned. You can remove it at any time.
-                </FieldDescription>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="email">Public Email</FieldLabel>
-                <NativeSelect id="email">
-                  <NativeSelectOption value="m@shadcn.com">
-                    m@shadcn.com
-                  </NativeSelectOption>
-                  <NativeSelectOption value="m@gmail.com">
-                    m@gmail.com
-                  </NativeSelectOption>
-                </NativeSelect>
-                <FieldDescription>
-                  You can manage verified email addresses in your{" "}
-                  <a href="#email-settings">email settings</a>.
-                </FieldDescription>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="bio">Bio</FieldLabel>
-                <Textarea
-                  id="bio"
-                  placeholder="Tell us a little bit about yourself"
-                />
-                <FieldDescription>
-                  You can <span>@mention</span> other users and organizations to
-                  link to them.
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-        <CardFooter>
-          <Button form="profile">Save Profile</Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-function ContributionsActivity() {
-  return (
-    <Example title="Contributions Activity" className="justify-center">
-      <Card className="mx-auto w-full max-w-md">
-        <CardHeader>
-          <CardTitle>Contributions & Activity</CardTitle>
-          <CardDescription>
-            Manage your contributions and activity visibility.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form id="contributions-activity">
-            <FieldGroup>
-              <FieldSet>
-                <FieldLegend className="sr-only">
-                  Contributions & activity
-                </FieldLegend>
-                <FieldGroup className="gap-3">
-                  <Field orientation="horizontal">
-                    <Checkbox id="private-profile" />
-                    <FieldContent>
-                      <FieldLabel
-                        htmlFor="private-profile"
-                        className="font-normal"
-                      >
-                        Make profile private and hide activity
-                      </FieldLabel>
-                      <FieldDescription>
-                        Enabling this will hide your contributions and activity
-                        from your GitHub profile and from social features like
-                        followers, stars, feeds, leaderboards and releases.
-                      </FieldDescription>
-                    </FieldContent>
-                  </Field>
-                  <Field orientation="horizontal">
-                    <Checkbox id="private-contributions" defaultChecked />
-                    <FieldContent>
-                      <FieldLabel
-                        htmlFor="private-contributions"
-                        className="font-normal"
-                      >
-                        Include private contributions on my profile
-                      </FieldLabel>
-                      <FieldDescription>
-                        Your contribution graph, achievements, and activity
-                        overview will show your private contributions without
-                        revealing any repository or organization information.{" "}
-                        <a href="#read-more">Read more</a>.
-                      </FieldDescription>
-                    </FieldContent>
-                  </Field>
-                </FieldGroup>
-              </FieldSet>
-            </FieldGroup>
-          </form>
-        </CardContent>
-        <CardFooter>
-          <Button form="contributions-activity">Save Changes</Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-const users = [
-  "shadcn",
-  "maxleiter",
-  "evilrabbit",
-  "pranathip",
-  "jorgezreik",
-  "shuding",
-  "rauchg",
-]
-function AssignIssue() {
-  const anchor = useComboboxAnchor()
-  return (
-    <Example title="User Select" className="items-center justify-center">
-      <Card className="w-full max-w-sm" size="sm">
-        <CardHeader className="border-b">
-          <CardTitle className="text-sm">Assign Issue</CardTitle>
-          <CardDescription className="text-sm">
-            Select users to assign to this issue.
-          </CardDescription>
-          <CardAction>
-            <Tooltip>
-              <TooltipTrigger
-                render={<Button variant="outline" size="icon-xs" />}
-              >
-                <IconPlaceholder
-                  lucide="PlusIcon"
-                  tabler="IconPlus"
-                  hugeicons="PlusSignIcon"
-                  phosphor="PlusIcon"
-                  remixicon="RiAddLine"
-                />
-              </TooltipTrigger>
-              <TooltipContent>Add user</TooltipContent>
-            </Tooltip>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <Combobox
-            multiple
-            autoHighlight
-            items={users}
-            defaultValue={[users[0]]}
-          >
-            <ComboboxChips ref={anchor}>
-              <ComboboxValue>
-                {(values) => (
-                  <React.Fragment>
-                    {values.map((username: string) => (
-                      <ComboboxChip key={username}>
-                        <Avatar className="size-4">
-                          <AvatarImage
-                            src={`https://github.com/${username}.png`}
-                            alt={username}
-                          />
-                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>
-                        </Avatar>
-                        {username}
-                      </ComboboxChip>
-                    ))}
-                    <ComboboxChipsInput
-                      placeholder={
-                        values.length > 0 ? undefined : "Select a item..."
-                      }
-                    />
-                  </React.Fragment>
-                )}
-              </ComboboxValue>
-            </ComboboxChips>
-            <ComboboxContent anchor={anchor}>
-              <ComboboxEmpty>No users found.</ComboboxEmpty>
-              <ComboboxList>
-                {(username) => (
-                  <ComboboxItem key={username} value={username}>
-                    <Avatar className="size-5">
-                      <AvatarImage
-                        src={`https://github.com/${username}.png`}
-                        alt={username}
-                      />
-                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>
-                    </Avatar>
-                    {username}
-                  </ComboboxItem>
-                )}
-              </ComboboxList>
-            </ComboboxContent>
-          </Combobox>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
diff --git a/apps/v4/registry/bases/base/blocks/login-02/components/login-form.tsx b/apps/v4/registry/bases/base/blocks/login-02/components/login-form.tsx
index 42809c1f07..5efb8d1e2c 100644
--- a/apps/v4/registry/bases/base/blocks/login-02/components/login-form.tsx
+++ b/apps/v4/registry/bases/base/blocks/login-02/components/login-form.tsx
@@ -18,7 +18,7 @@ export function LoginForm({
       <FieldGroup>
         <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-2xl font-bold">Login to your account</h1>
-          <p className="text-muted-foreground text-sm text-balance">
+          <p className="text-sm text-balance text-muted-foreground">
             Enter your email below to login to your account
           </p>
         </div>
diff --git a/apps/v4/registry/bases/base/blocks/login-02/page.tsx b/apps/v4/registry/bases/base/blocks/login-02/page.tsx
index 3a7545e18e..24e5fec6f9 100644
--- a/apps/v4/registry/bases/base/blocks/login-02/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/login-02/page.tsx
@@ -9,7 +9,7 @@ export default function LoginPage() {
       <div className="flex flex-col gap-4 p-6 md:p-10">
         <div className="flex justify-center gap-2 md:justify-start">
           <a href="#" className="flex items-center gap-2 font-medium">
-            <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+            <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
               <IconPlaceholder
                 lucide="GalleryVerticalEndIcon"
                 tabler="IconLayoutRows"
@@ -28,7 +28,7 @@ export default function LoginPage() {
           </div>
         </div>
       </div>
-      <div className="bg-muted relative hidden lg:block">
+      <div className="relative hidden bg-muted lg:block">
         <img
           src="/placeholder.svg"
           alt="Image"
diff --git a/apps/v4/registry/bases/base/blocks/login-03/page.tsx b/apps/v4/registry/bases/base/blocks/login-03/page.tsx
index 596e9b30af..5cb0921f4a 100644
--- a/apps/v4/registry/bases/base/blocks/login-03/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/login-03/page.tsx
@@ -5,10 +5,10 @@ import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 export default function LoginPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
         <a href="#" className="flex items-center gap-2 self-center font-medium">
-          <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+          <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
             <IconPlaceholder
               lucide="GalleryVerticalEndIcon"
               tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/base/blocks/login-04/components/login-form.tsx b/apps/v4/registry/bases/base/blocks/login-04/components/login-form.tsx
index 8100399164..6f05df1ec7 100644
--- a/apps/v4/registry/bases/base/blocks/login-04/components/login-form.tsx
+++ b/apps/v4/registry/bases/base/blocks/login-04/components/login-form.tsx
@@ -22,7 +22,7 @@ export function LoginForm({
             <FieldGroup>
               <div className="flex flex-col items-center gap-2 text-center">
                 <h1 className="text-2xl font-bold">Welcome back</h1>
-                <p className="text-muted-foreground text-balance">
+                <p className="text-balance text-muted-foreground">
                   Login to your Acme Inc account
                 </p>
               </div>
@@ -87,7 +87,7 @@ export function LoginForm({
               </FieldDescription>
             </FieldGroup>
           </form>
-          <div className="bg-muted relative hidden md:block">
+          <div className="relative hidden bg-muted md:block">
             <img
               src="/placeholder.svg"
               alt="Image"
diff --git a/apps/v4/registry/bases/base/blocks/login-04/page.tsx b/apps/v4/registry/bases/base/blocks/login-04/page.tsx
index 5295648b8c..46840950fc 100644
--- a/apps/v4/registry/bases/base/blocks/login-04/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/login-04/page.tsx
@@ -2,7 +2,7 @@ import { LoginForm } from "@/registry/bases/base/blocks/login-04/components/logi
 
 export default function LoginPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
       <div className="w-full max-w-sm md:max-w-4xl">
         <LoginForm />
       </div>
diff --git a/apps/v4/registry/bases/base/blocks/login-05/page.tsx b/apps/v4/registry/bases/base/blocks/login-05/page.tsx
index 507529fbeb..9a501593cb 100644
--- a/apps/v4/registry/bases/base/blocks/login-05/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/login-05/page.tsx
@@ -2,7 +2,7 @@ import { LoginForm } from "@/registry/bases/base/blocks/login-05/components/logi
 
 export default function LoginPage() {
   return (
-    <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
       <div className="w-full max-w-sm">
         <LoginForm />
       </div>
diff --git a/apps/v4/registry/bases/base/blocks/preview.tsx b/apps/v4/registry/bases/base/blocks/preview.tsx
deleted file mode 100644
index d37bfc4443..0000000000
--- a/apps/v4/registry/bases/base/blocks/preview.tsx
+++ /dev/null
@@ -1,1699 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useState } from "react"
-
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/base/components/example"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/registry/bases/base/ui/alert-dialog"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarImage,
-} from "@/registry/bases/base/ui/avatar"
-import { Badge } from "@/registry/bases/base/ui/badge"
-import { Button } from "@/registry/bases/base/ui/button"
-import { ButtonGroup } from "@/registry/bases/base/ui/button-group"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/base/ui/card"
-import { Checkbox } from "@/registry/bases/base/ui/checkbox"
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "@/registry/bases/base/ui/combobox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/bases/base/ui/dropdown-menu"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/registry/bases/base/ui/empty"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/bases/base/ui/field"
-import { Input } from "@/registry/bases/base/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/registry/bases/base/ui/input-group"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/registry/bases/base/ui/item"
-import { Label } from "@/registry/bases/base/ui/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-} from "@/registry/bases/base/ui/popover"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/bases/base/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/bases/base/ui/select"
-import { Separator } from "@/registry/bases/base/ui/separator"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/registry/bases/base/ui/sheet"
-import { Slider } from "@/registry/bases/base/ui/slider"
-import { Spinner } from "@/registry/bases/base/ui/spinner"
-import { Switch } from "@/registry/bases/base/ui/switch"
-import { Textarea } from "@/registry/bases/base/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/bases/base/ui/tooltip"
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
-export default function CoverExample() {
-  return (
-    <ExampleWrapper>
-      <ObservabilityCard />
-      <SmallFormExample />
-      <FormExample />
-      <FieldExamples />
-      <ItemExample />
-      <ButtonGroupExamples />
-      <EmptyAvatarGroup />
-      <InputGroupExamples />
-      <SheetExample />
-      <BadgeExamples />
-    </ExampleWrapper>
-  )
-}
-
-function FieldExamples() {
-  const [gpuCount, setGpuCount] = React.useState(8)
-  const [value, setValue] = useState([200, 800])
-
-  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
-    setGpuCount((prevCount) =>
-      Math.max(1, Math.min(99, prevCount + adjustment))
-    )
-  }, [])
-
-  const handleGpuInputChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value, 10)
-      if (!isNaN(value) && value >= 1 && value <= 99) {
-        setGpuCount(value)
-      }
-    },
-    []
-  )
-
-  return (
-    <Example title="Fields">
-      <FieldSet className="w-full max-w-md">
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>Compute Environment</FieldLegend>
-            <FieldDescription>
-              Select the compute environment for your cluster.
-            </FieldDescription>
-            <RadioGroup defaultValue="kubernetes">
-              <FieldLabel htmlFor="kubernetes-r2h">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Kubernetes</FieldTitle>
-                    <FieldDescription>
-                      Run GPU workloads on a K8s configured cluster. This is the
-                      default.
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem
-                    value="kubernetes"
-                    id="kubernetes-r2h"
-                    aria-label="Kubernetes"
-                  />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="vm-z4k">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Virtual Machine</FieldTitle>
-                    <FieldDescription>
-                      Access a VM configured cluster to run workloads. (Coming
-                      soon)
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem
-                    value="vm"
-                    id="vm-z4k"
-                    aria-label="Virtual Machine"
-                  />
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="number-of-gpus-f6l">
-                Number of GPUs
-              </FieldLabel>
-              <FieldDescription>You can add more later.</FieldDescription>
-            </FieldContent>
-            <ButtonGroup>
-              <Input
-                id="number-of-gpus-f6l"
-                value={gpuCount}
-                onChange={handleGpuInputChange}
-                size={3}
-                maxLength={3}
-              />
-              <Button
-                variant="outline"
-                size="icon"
-                type="button"
-                aria-label="Decrement"
-                onClick={() => handleGpuAdjustment(-1)}
-                disabled={gpuCount <= 1}
-              >
-                <IconPlaceholder
-                  lucide="MinusIcon"
-                  tabler="IconMinus"
-                  hugeicons="MinusSignIcon"
-                  phosphor="MinusIcon"
-                  remixicon="RiSubtractLine"
-                />
-              </Button>
-              <Button
-                variant="outline"
-                size="icon"
-                type="button"
-                aria-label="Increment"
-                onClick={() => handleGpuAdjustment(1)}
-                disabled={gpuCount >= 99}
-              >
-                <IconPlaceholder
-                  lucide="PlusIcon"
-                  tabler="IconPlus"
-                  hugeicons="PlusSignIcon"
-                  phosphor="PlusIcon"
-                  remixicon="RiAddLine"
-                />
-              </Button>
-            </ButtonGroup>
-          </Field>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
-              <FieldDescription>
-                Allow the wallpaper to be tinted.
-              </FieldDescription>
-            </FieldContent>
-            <Switch id="tinting" defaultChecked />
-          </Field>
-          <FieldSeparator />
-          <FieldLabel htmlFor="checkbox-demo">
-            <Field orientation="horizontal">
-              <Checkbox id="checkbox-demo" defaultChecked />
-              <FieldLabel htmlFor="checkbox-demo" className="line-clamp-1">
-                I agree to the terms and conditions
-              </FieldLabel>
-            </Field>
-          </FieldLabel>
-          <Field>
-            <FieldTitle>Price Range</FieldTitle>
-            <FieldDescription>
-              Set your budget range ($
-              <span className="font-medium tabular-nums">
-                {value[0]}
-              </span> -{" "}
-              <span className="font-medium tabular-nums">{value[1]}</span>).
-            </FieldDescription>
-            <Slider
-              value={value}
-              onValueChange={(val) => setValue(val as number[])}
-              max={1000}
-              min={0}
-              step={10}
-              className="mt-2 w-full"
-              aria-label="Price Range"
-            />
-          </Field>
-          <Field orientation="horizontal">
-            <Button type="submit">Submit</Button>
-            <Button variant="outline" type="button">
-              Cancel
-            </Button>
-          </Field>
-        </FieldGroup>
-      </FieldSet>
-    </Example>
-  )
-}
-
-function ButtonGroupExamples() {
-  const [label, setLabel] = React.useState("personal")
-
-  return (
-    <Example title="Button Group" className="items-center justify-center">
-      <div className="flex flex-col gap-6">
-        <ButtonGroup>
-          <ButtonGroup className="hidden sm:flex">
-            <Button variant="outline" size="icon-sm" aria-label="Go Back">
-              <IconPlaceholder
-                lucide="ArrowLeftIcon"
-                tabler="IconArrowLeft"
-                hugeicons="ArrowLeft01Icon"
-                phosphor="ArrowLeftIcon"
-                remixicon="RiArrowLeftLine"
-              />
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup>
-            <Button variant="outline" size="sm">
-              Archive
-            </Button>
-            <Button variant="outline" size="sm">
-              Report
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup>
-            <Button variant="outline" size="sm">
-              Snooze
-            </Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={
-                  <Button
-                    variant="outline"
-                    size="icon-sm"
-                    aria-label="More Options"
-                  />
-                }
-              >
-                <IconPlaceholder
-                  lucide="ChevronDownIcon"
-                  tabler="IconChevronDown"
-                  hugeicons="ArrowDown01Icon"
-                  phosphor="CaretDownIcon"
-                  remixicon="RiArrowDownSLine"
-                />
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48">
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="MailCheckIcon"
-                      tabler="IconMailCheck"
-                      hugeicons="MailValidation01Icon"
-                      phosphor="EnvelopeIcon"
-                      remixicon="RiMailLine"
-                    />
-                    Mark as Read
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="ArchiveIcon"
-                      tabler="IconArchive"
-                      hugeicons="ArchiveIcon"
-                      phosphor="ArchiveIcon"
-                      remixicon="RiArchiveLine"
-                    />
-                    Archive
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="ClockIcon"
-                      tabler="IconClock"
-                      hugeicons="ClockIcon"
-                      phosphor="ClockIcon"
-                      remixicon="RiTimeLine"
-                    />
-                    Snooze
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="CalendarPlusIcon"
-                      tabler="IconCalendarPlus"
-                      hugeicons="CalendarAdd01Icon"
-                      phosphor="CalendarPlusIcon"
-                      remixicon="RiCalendarEventLine"
-                    />
-                    Add to Calendar
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="ListFilterIcon"
-                      tabler="IconFilterPlus"
-                      hugeicons="AddToListIcon"
-                      phosphor="ListPlusIcon"
-                      remixicon="RiPlayListAddLine"
-                    />
-                    Add to List
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <IconPlaceholder
-                        lucide="TagIcon"
-                        tabler="IconTag"
-                        hugeicons="TagIcon"
-                        phosphor="TagIcon"
-                        remixicon="RiPriceTagLine"
-                      />
-                      Label As...
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuRadioGroup
-                            value={label}
-                            onValueChange={setLabel}
-                          >
-                            <DropdownMenuRadioItem value="personal">
-                              Personal
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="work">
-                              Work
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="other">
-                              Other
-                            </DropdownMenuRadioItem>
-                          </DropdownMenuRadioGroup>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    <IconPlaceholder
-                      lucide="Trash2Icon"
-                      tabler="IconTrash"
-                      hugeicons="Delete02Icon"
-                      phosphor="TrashIcon"
-                      remixicon="RiDeleteBinLine"
-                    />
-                    Trash
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </ButtonGroup>
-          <ButtonGroup className="hidden sm:flex">
-            <Button variant="outline" size="icon-sm" aria-label="Previous">
-              <IconPlaceholder
-                lucide="ArrowLeftIcon"
-                tabler="IconArrowLeft"
-                hugeicons="ArrowLeft01Icon"
-                phosphor="ArrowLeftIcon"
-                remixicon="RiArrowLeftLine"
-              />
-            </Button>
-            <Button variant="outline" size="icon-sm" aria-label="Next">
-              <IconPlaceholder
-                lucide="ArrowRightIcon"
-                tabler="IconArrowRight"
-                hugeicons="ArrowRight01Icon"
-                phosphor="ArrowRightIcon"
-                remixicon="RiArrowRightLine"
-              />
-            </Button>
-          </ButtonGroup>
-        </ButtonGroup>
-        <div className="flex gap-4">
-          <ButtonGroup className="hidden sm:flex">
-            <ButtonGroup>
-              <Button variant="outline">1</Button>
-              <Button variant="outline">2</Button>
-              <Button variant="outline">3</Button>
-            </ButtonGroup>
-          </ButtonGroup>
-          <ButtonGroup>
-            <ButtonGroup>
-              <Button variant="outline">Follow</Button>
-              <DropdownMenu>
-                <DropdownMenuTrigger
-                  render={<Button variant="outline" size="icon" />}
-                >
-                  <IconPlaceholder
-                    lucide="ChevronDownIcon"
-                    tabler="IconChevronDown"
-                    hugeicons="ArrowDown01Icon"
-                    phosphor="CaretDownIcon"
-                    remixicon="RiArrowDownSLine"
-                  />
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-52">
-                  <DropdownMenuGroup>
-                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="VolumeX"
-                        tabler="IconVolume"
-                        hugeicons="VolumeOffIcon"
-                        phosphor="SpeakerSlashIcon"
-                        remixicon="RiVolumeMuteLine"
-                      />
-                      Mute Conversation
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="CheckIcon"
-                        tabler="IconCheck"
-                        hugeicons="Tick02Icon"
-                        phosphor="CheckIcon"
-                        remixicon="RiCheckLine"
-                      />
-                      Mark as Read
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="UserRoundXIcon"
-                        tabler="IconUserX"
-                        hugeicons="UserRemove01Icon"
-                        phosphor="UserMinusIcon"
-                        remixicon="RiUserUnfollowLine"
-                      />
-                      Block User
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="ShareIcon"
-                        tabler="IconShare"
-                        hugeicons="Share03Icon"
-                        phosphor="ShareIcon"
-                        remixicon="RiShareLine"
-                      />
-                      Share Conversation
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="CopyIcon"
-                        tabler="IconCopy"
-                        hugeicons="Copy01Icon"
-                        phosphor="CopyIcon"
-                        remixicon="RiFileCopyLine"
-                      />
-                      Copy Conversation
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="AlertTriangleIcon"
-                        tabler="IconAlertTriangle"
-                        hugeicons="AlertCircleIcon"
-                        phosphor="WarningIcon"
-                        remixicon="RiErrorWarningLine"
-                      />
-                      Report Conversation
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem variant="destructive">
-                      <IconPlaceholder
-                        lucide="TrashIcon"
-                        tabler="IconTrash"
-                        hugeicons="Delete02Icon"
-                        phosphor="TrashIcon"
-                        remixicon="RiDeleteBinLine"
-                      />
-                      Delete Conversation
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </ButtonGroup>
-            <ButtonGroup>
-              <Button variant="outline">
-                <IconPlaceholder
-                  lucide="BotIcon"
-                  tabler="IconRobot"
-                  hugeicons="BotIcon"
-                  phosphor="RobotIcon"
-                  remixicon="RiRobotLine"
-                />{" "}
-                Copilot
-              </Button>
-              <Popover>
-                <PopoverTrigger
-                  render={
-                    <Button
-                      variant="outline"
-                      size="icon"
-                      aria-label="Open Popover"
-                    />
-                  }
-                >
-                  <IconPlaceholder
-                    lucide="ChevronDownIcon"
-                    tabler="IconChevronDown"
-                    hugeicons="ArrowDown01Icon"
-                    phosphor="CaretDownIcon"
-                    remixicon="RiArrowDownSLine"
-                  />
-                </PopoverTrigger>
-                <PopoverContent align="end" className="w-96">
-                  <PopoverHeader>
-                    <PopoverTitle>Agent Tasks</PopoverTitle>
-                    <PopoverDescription>
-                      Describe your task in natural language. Copilot will work
-                      in the background and open a pull request.
-                    </PopoverDescription>
-                  </PopoverHeader>
-                  <div className="text-sm *:[p:not(:last-child)]:mb-2">
-                    <Textarea
-                      placeholder="Describe your task in natural language."
-                      className="min-h-32 resize-none"
-                    />
-                  </div>
-                </PopoverContent>
-              </Popover>
-            </ButtonGroup>
-          </ButtonGroup>
-        </div>
-      </div>
-    </Example>
-  )
-}
-
-function InputGroupExamples() {
-  const [isFavorite, setIsFavorite] = React.useState(false)
-  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
-
-  return (
-    <Example title="Input Group">
-      <div className="flex flex-col gap-6">
-        <InputGroup>
-          <InputGroupInput placeholder="Search..." />
-          <InputGroupAddon>
-            <IconPlaceholder
-              lucide="SearchIcon"
-              tabler="IconSearch"
-              hugeicons="Search01Icon"
-              phosphor="MagnifyingGlassIcon"
-              remixicon="RiSearchLine"
-            />
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
-        </InputGroup>
-        <InputGroup>
-          <InputGroupInput placeholder="example.com" className="!pl-1" />
-          <InputGroupAddon>
-            <InputGroupText>https://</InputGroupText>
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">
-            <Tooltip>
-              <TooltipTrigger
-                render={
-                  <InputGroupButton
-                    className="rounded-full"
-                    size="icon-xs"
-                    aria-label="Info"
-                  />
-                }
-              >
-                <IconPlaceholder
-                  lucide="InfoIcon"
-                  tabler="IconInfoCircle"
-                  hugeicons="AlertCircleIcon"
-                  phosphor="InfoIcon"
-                  remixicon="RiInformationLine"
-                />
-              </TooltipTrigger>
-              <TooltipContent>This is content in a tooltip.</TooltipContent>
-            </Tooltip>
-          </InputGroupAddon>
-        </InputGroup>
-        <Field>
-          <Label htmlFor="input-secure-19" className="sr-only">
-            Input Secure
-          </Label>
-          <InputGroup>
-            <InputGroupInput id="input-secure-19" className="!pl-0.5" />
-            <InputGroupAddon>
-              <Popover>
-                <PopoverTrigger
-                  render={
-                    <InputGroupButton
-                      variant="secondary"
-                      size="icon-xs"
-                      aria-label="Info"
-                    />
-                  }
-                >
-                  <IconPlaceholder
-                    lucide="InfoIcon"
-                    tabler="IconInfoCircle"
-                    hugeicons="AlertCircleIcon"
-                    phosphor="InfoIcon"
-                    remixicon="RiInformationLine"
-                  />
-                </PopoverTrigger>
-                <PopoverContent
-                  align="start"
-                  alignOffset={10}
-                  className="flex flex-col gap-1 rounded-xl text-sm"
-                >
-                  <p className="font-medium">Your connection is not secure.</p>
-                  <p>
-                    You should not enter any sensitive information on this site.
-                  </p>
-                </PopoverContent>
-              </Popover>
-            </InputGroupAddon>
-            <InputGroupAddon className="text-muted-foreground !pl-1">
-              https://
-            </InputGroupAddon>
-            <InputGroupAddon align="inline-end">
-              <InputGroupButton
-                onClick={() => setIsFavorite(!isFavorite)}
-                size="icon-xs"
-                aria-label="Favorite"
-              >
-                <IconPlaceholder
-                  lucide="StarIcon"
-                  tabler="IconStar"
-                  hugeicons="StarIcon"
-                  phosphor="StarIcon"
-                  remixicon="RiStarLine"
-                  data-favorite={isFavorite}
-                  className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
-                />
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <ButtonGroup className="w-full">
-          <ButtonGroup>
-            <Button variant="outline" size="icon" aria-label="Add">
-              <IconPlaceholder
-                lucide="PlusIcon"
-                tabler="IconPlus"
-                hugeicons="PlusSignIcon"
-                phosphor="PlusIcon"
-                remixicon="RiAddLine"
-              />
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup className="flex-1">
-            <InputGroup>
-              <InputGroupInput
-                placeholder={
-                  voiceEnabled
-                    ? "Record and send audio..."
-                    : "Send a message..."
-                }
-                disabled={voiceEnabled}
-              />
-              <InputGroupAddon align="inline-end">
-                <Tooltip>
-                  <TooltipTrigger
-                    render={
-                      <InputGroupButton
-                        onClick={() => setVoiceEnabled(!voiceEnabled)}
-                        data-active={voiceEnabled}
-                        className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
-                        aria-pressed={voiceEnabled}
-                        size="icon-xs"
-                        aria-label="Voice Mode"
-                      />
-                    }
-                  >
-                    <IconPlaceholder
-                      lucide="AudioLinesIcon"
-                      tabler="IconWaveSine"
-                      hugeicons="AudioWave01Icon"
-                      phosphor="MicrophoneIcon"
-                      remixicon="RiMicLine"
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>Voice Mode</TooltipContent>
-                </Tooltip>
-              </InputGroupAddon>
-            </InputGroup>
-          </ButtonGroup>
-        </ButtonGroup>
-        <InputGroup>
-          <InputGroupTextarea placeholder="Ask, Search or Chat..." />
-          <InputGroupAddon align="block-end">
-            <InputGroupButton
-              variant="outline"
-              className="style-lyra:rounded-none rounded-full"
-              size="icon-xs"
-              aria-label="Add"
-            >
-              <IconPlaceholder
-                lucide="PlusIcon"
-                tabler="IconPlus"
-                hugeicons="PlusSignIcon"
-                phosphor="PlusIcon"
-                remixicon="RiAddLine"
-              />
-            </InputGroupButton>
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={<InputGroupButton variant="ghost" />}
-              >
-                Auto
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                side="top"
-                align="start"
-                className="[--radius:0.95rem]"
-              >
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>Auto</DropdownMenuItem>
-                  <DropdownMenuItem>Agent</DropdownMenuItem>
-                  <DropdownMenuItem>Manual</DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <InputGroupText className="ml-auto">52% used</InputGroupText>
-            <Separator orientation="vertical" className="!h-4" />
-            <InputGroupButton
-              variant="default"
-              className="style-lyra:rounded-none rounded-full"
-              size="icon-xs"
-            >
-              <IconPlaceholder
-                lucide="ArrowUpIcon"
-                tabler="IconArrowUp"
-                hugeicons="ArrowUp01Icon"
-                phosphor="ArrowUpIcon"
-                remixicon="RiArrowUpLine"
-              />
-              <span className="sr-only">Send</span>
-            </InputGroupButton>
-          </InputGroupAddon>
-        </InputGroup>
-      </div>
-    </Example>
-  )
-}
-
-function EmptyAvatarGroup() {
-  return (
-    <Example title="Empty">
-      <Empty className="h-full flex-none border">
-        <EmptyHeader>
-          <EmptyMedia>
-            <AvatarGroup className="grayscale">
-              <Avatar size="lg">
-                <AvatarImage
-                  src="https://github.com/shadcn.png"
-                  alt="@shadcn"
-                />
-                <AvatarFallback>CN</AvatarFallback>
-              </Avatar>
-              <Avatar size="lg">
-                <AvatarImage
-                  src="https://github.com/maxleiter.png"
-                  alt="@maxleiter"
-                />
-                <AvatarFallback>LR</AvatarFallback>
-              </Avatar>
-              <Avatar size="lg">
-                <AvatarImage
-                  src="https://github.com/evilrabbit.png"
-                  alt="@evilrabbit"
-                />
-                <AvatarFallback>ER</AvatarFallback>
-              </Avatar>
-            </AvatarGroup>
-          </EmptyMedia>
-          <EmptyTitle>No Team Members</EmptyTitle>
-          <EmptyDescription>
-            Invite your team to collaborate on this project.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <div className="flex gap-2">
-            <AlertDialog>
-              <AlertDialogTrigger render={<Button variant="outline" />}>
-                Show Dialog
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    This action cannot be undone. This will permanently delete
-                    your account and remove your data from our servers.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                  <AlertDialogAction>Continue</AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-            <AlertDialog>
-              <AlertDialogTrigger render={<Button />}>
-                Connect Mouse
-              </AlertDialogTrigger>
-              <AlertDialogContent size="sm">
-                <AlertDialogHeader>
-                  <AlertDialogMedia>
-                    <IconPlaceholder
-                      lucide="BluetoothIcon"
-                      tabler="IconBluetooth"
-                      hugeicons="BluetoothIcon"
-                      phosphor="BluetoothIcon"
-                      remixicon="RiBluetoothLine"
-                    />
-                  </AlertDialogMedia>
-                  <AlertDialogTitle>
-                    Allow accessory to connect?
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    Do you want to allow the USB accessory to connect to this
-                    device?
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
-                  <AlertDialogAction>Allow</AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-          </div>
-        </EmptyContent>
-      </Empty>
-    </Example>
-  )
-}
-
-function FormExample() {
-  const monthItems = [
-    { label: "MM", value: null },
-    { label: "01", value: "01" },
-    { label: "02", value: "02" },
-    { label: "03", value: "03" },
-    { label: "04", value: "04" },
-    { label: "05", value: "05" },
-    { label: "06", value: "06" },
-    { label: "07", value: "07" },
-    { label: "08", value: "08" },
-    { label: "09", value: "09" },
-    { label: "10", value: "10" },
-    { label: "11", value: "11" },
-    { label: "12", value: "12" },
-  ]
-
-  const yearItems = [
-    { label: "YYYY", value: null },
-    { label: "2024", value: "2024" },
-    { label: "2025", value: "2025" },
-    { label: "2026", value: "2026" },
-    { label: "2027", value: "2027" },
-    { label: "2028", value: "2028" },
-    { label: "2029", value: "2029" },
-  ]
-
-  return (
-    <Example title="Complex Form">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>Payment Method</CardTitle>
-          <CardDescription>
-            All transactions are secure and encrypted
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <FieldGroup>
-              <FieldSet>
-                <FieldGroup>
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-card-name-43j">
-                      Name on Card
-                    </FieldLabel>
-                    <Input
-                      id="checkout-7j9-card-name-43j"
-                      placeholder="John Doe"
-                      required
-                    />
-                  </Field>
-                  <div className="grid grid-cols-3 gap-4">
-                    <Field className="col-span-2">
-                      <FieldLabel htmlFor="checkout-7j9-card-number-uw1">
-                        Card Number
-                      </FieldLabel>
-                      <Input
-                        id="checkout-7j9-card-number-uw1"
-                        placeholder="1234 5678 9012 3456"
-                        required
-                      />
-                      <FieldDescription>
-                        Enter your 16-digit number.
-                      </FieldDescription>
-                    </Field>
-                    <Field className="col-span-1">
-                      <FieldLabel htmlFor="checkout-7j9-cvv">CVV</FieldLabel>
-                      <Input id="checkout-7j9-cvv" placeholder="123" required />
-                    </Field>
-                  </div>
-                  <div className="grid grid-cols-2 gap-4">
-                    <Field>
-                      <FieldLabel htmlFor="checkout-7j9-exp-month-ts6">
-                        Month
-                      </FieldLabel>
-                      <Select items={monthItems} defaultValue={null}>
-                        <SelectTrigger id="checkout-7j9-exp-month-ts6">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            {monthItems.map((item) => (
-                              <SelectItem key={item.value} value={item.value}>
-                                {item.label}
-                              </SelectItem>
-                            ))}
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                    </Field>
-                    <Field>
-                      <FieldLabel htmlFor="checkout-7j9-exp-year-f59">
-                        Year
-                      </FieldLabel>
-                      <Select items={yearItems} defaultValue={null}>
-                        <SelectTrigger id="checkout-7j9-exp-year-f59">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            {yearItems.map((item) => (
-                              <SelectItem key={item.value} value={item.value}>
-                                {item.label}
-                              </SelectItem>
-                            ))}
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                    </Field>
-                  </div>
-                </FieldGroup>
-              </FieldSet>
-              <FieldSeparator />
-              <FieldSet>
-                <FieldLegend>Billing Address</FieldLegend>
-                <FieldDescription>
-                  The billing address associated with your payment.
-                </FieldDescription>
-                <FieldGroup>
-                  <Field orientation="horizontal">
-                    <Checkbox
-                      id="checkout-7j9-same-as-shipping-wgm"
-                      defaultChecked
-                    />
-                    <FieldLabel
-                      htmlFor="checkout-7j9-same-as-shipping-wgm"
-                      className="font-normal"
-                    >
-                      Same as shipping address
-                    </FieldLabel>
-                  </Field>
-                </FieldGroup>
-              </FieldSet>
-              <FieldSeparator />
-              <FieldSet>
-                <FieldGroup>
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-optional-comments">
-                      Comments
-                    </FieldLabel>
-                    <Textarea
-                      id="checkout-7j9-optional-comments"
-                      placeholder="Add any additional comments"
-                    />
-                  </Field>
-                </FieldGroup>
-              </FieldSet>
-              <Field orientation="horizontal">
-                <Button type="submit">Submit</Button>
-                <Button variant="outline" type="button">
-                  Cancel
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-
-const frameworks = [
-  "Next.js",
-  "SvelteKit",
-  "Nuxt.js",
-  "Remix",
-  "Astro",
-] as const
-
-const roleItems = [
-  { label: "Developer", value: "developer" },
-  { label: "Designer", value: "designer" },
-  { label: "Manager", value: "manager" },
-  { label: "Other", value: "other" },
-]
-
-function SmallFormExample() {
-  const [notifications, setNotifications] = React.useState({
-    email: true,
-    sms: false,
-    push: true,
-  })
-  const [theme, setTheme] = React.useState("light")
-
-  return (
-    <Example title="Form">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>User Information</CardTitle>
-          <CardDescription>Please fill in your details below</CardDescription>
-          <CardAction>
-            <DropdownMenu>
-              <DropdownMenuTrigger
-                render={<Button variant="ghost" size="icon" />}
-              >
-                <IconPlaceholder
-                  lucide="MoreVerticalIcon"
-                  tabler="IconDotsVertical"
-                  hugeicons="MoreVerticalCircle01Icon"
-                  phosphor="DotsThreeVerticalIcon"
-                  remixicon="RiMore2Line"
-                />
-                <span className="sr-only">More options</span>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48"
-              >
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>File</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="FileIcon"
-                      tabler="IconFile"
-                      hugeicons="FileIcon"
-                      phosphor="FileIcon"
-                      remixicon="RiFileLine"
-                    />
-                    New File
-                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="FolderIcon"
-                      tabler="IconFolder"
-                      hugeicons="FolderIcon"
-                      phosphor="FolderIcon"
-                      remixicon="RiFolderLine"
-                    />
-                    New Folder
-                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <IconPlaceholder
-                        lucide="FolderOpenIcon"
-                        tabler="IconFolderOpen"
-                        hugeicons="FolderOpenIcon"
-                        phosphor="FolderOpenIcon"
-                        remixicon="RiFolderOpenLine"
-                      />
-                      Open Recent
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <IconPlaceholder
-                              lucide="FileCodeIcon"
-                              tabler="IconFileCode"
-                              hugeicons="CodeIcon"
-                              phosphor="CodeIcon"
-                              remixicon="RiCodeLine"
-                            />
-                            Project Alpha
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <IconPlaceholder
-                              lucide="FileCodeIcon"
-                              tabler="IconFileCode"
-                              hugeicons="CodeIcon"
-                              phosphor="CodeIcon"
-                              remixicon="RiCodeLine"
-                            />
-                            Project Beta
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <IconPlaceholder
-                                lucide="MoreHorizontalIcon"
-                                tabler="IconDots"
-                                hugeicons="MoreHorizontalCircle01Icon"
-                                phosphor="DotsThreeOutlineIcon"
-                                remixicon="RiMoreLine"
-                              />
-                              More Projects
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuItem>
-                                  <IconPlaceholder
-                                    lucide="FileCodeIcon"
-                                    tabler="IconFileCode"
-                                    hugeicons="CodeIcon"
-                                    phosphor="CodeIcon"
-                                    remixicon="RiCodeLine"
-                                  />
-                                  Project Gamma
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                  <IconPlaceholder
-                                    lucide="FileCodeIcon"
-                                    tabler="IconFileCode"
-                                    hugeicons="CodeIcon"
-                                    phosphor="CodeIcon"
-                                    remixicon="RiCodeLine"
-                                  />
-                                  Project Delta
-                                </DropdownMenuItem>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <IconPlaceholder
-                              lucide="FolderSearchIcon"
-                              tabler="IconFolderSearch"
-                              hugeicons="SearchIcon"
-                              phosphor="MagnifyingGlassIcon"
-                              remixicon="RiSearchLine"
-                            />
-                            Browse...
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="SaveIcon"
-                      tabler="IconDeviceFloppy"
-                      hugeicons="FloppyDiskIcon"
-                      phosphor="FloppyDiskIcon"
-                      remixicon="RiSaveLine"
-                    />
-                    Save
-                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="DownloadIcon"
-                      tabler="IconDownload"
-                      hugeicons="DownloadIcon"
-                      phosphor="DownloadIcon"
-                      remixicon="RiDownloadLine"
-                    />
-                    Export
-                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>View</DropdownMenuLabel>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.email}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        email: checked === true,
-                      })
-                    }
-                  >
-                    <IconPlaceholder
-                      lucide="EyeIcon"
-                      tabler="IconEye"
-                      hugeicons="EyeIcon"
-                      phosphor="EyeIcon"
-                      remixicon="RiEyeLine"
-                    />
-                    Show Sidebar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.sms}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        sms: checked === true,
-                      })
-                    }
-                  >
-                    <IconPlaceholder
-                      lucide="LayoutIcon"
-                      tabler="IconLayout"
-                      hugeicons="LayoutIcon"
-                      phosphor="LayoutIcon"
-                      remixicon="RiLayoutLine"
-                    />
-                    Show Status Bar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <IconPlaceholder
-                        lucide="PaletteIcon"
-                        tabler="IconPalette"
-                        hugeicons="PaintBoardIcon"
-                        phosphor="PaletteIcon"
-                        remixicon="RiPaletteLine"
-                      />
-                      Theme
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-                          <DropdownMenuRadioGroup
-                            value={theme}
-                            onValueChange={setTheme}
-                          >
-                            <DropdownMenuRadioItem value="light">
-                              <IconPlaceholder
-                                lucide="SunIcon"
-                                tabler="IconSun"
-                                hugeicons="SunIcon"
-                                phosphor="SunIcon"
-                                remixicon="RiSunLine"
-                              />
-                              Light
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="dark">
-                              <IconPlaceholder
-                                lucide="MoonIcon"
-                                tabler="IconMoon"
-                                hugeicons="MoonIcon"
-                                phosphor="MoonIcon"
-                                remixicon="RiMoonLine"
-                              />
-                              Dark
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="system">
-                              <IconPlaceholder
-                                lucide="MonitorIcon"
-                                tabler="IconDeviceDesktop"
-                                hugeicons="ComputerIcon"
-                                phosphor="MonitorIcon"
-                                remixicon="RiComputerLine"
-                              />
-                              System
-                            </DropdownMenuRadioItem>
-                          </DropdownMenuRadioGroup>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="HelpCircleIcon"
-                      tabler="IconHelpCircle"
-                      hugeicons="HelpCircleIcon"
-                      phosphor="QuestionIcon"
-                      remixicon="RiQuestionLine"
-                    />
-                    Help & Support
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="FileTextIcon"
-                      tabler="IconFileText"
-                      hugeicons="File01Icon"
-                      phosphor="FileTextIcon"
-                      remixicon="RiFileTextLine"
-                    />
-                    Documentation
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    <IconPlaceholder
-                      lucide="LogOutIcon"
-                      tabler="IconLogout"
-                      hugeicons="LogoutIcon"
-                      phosphor="SignOutIcon"
-                      remixicon="RiLogoutBoxLine"
-                    />
-                    Sign Out
-                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <FieldGroup>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="small-form-name">Name</FieldLabel>
-                  <Input
-                    id="small-form-name"
-                    placeholder="Enter your name"
-                    required
-                  />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="small-form-role">Role</FieldLabel>
-                  <Select items={roleItems} defaultValue={null}>
-                    <SelectTrigger id="small-form-role">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        {roleItems.map((item) => (
-                          <SelectItem key={item.value} value={item.value}>
-                            {item.label}
-                          </SelectItem>
-                        ))}
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-              <Field>
-                <FieldLabel htmlFor="small-form-framework">
-                  Framework
-                </FieldLabel>
-                <Combobox items={frameworks}>
-                  <ComboboxInput
-                    id="small-form-framework"
-                    placeholder="Select a framework"
-                    required
-                  />
-                  <ComboboxContent>
-                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
-                    <ComboboxList>
-                      {(item) => (
-                        <ComboboxItem key={item} value={item}>
-                          {item}
-                        </ComboboxItem>
-                      )}
-                    </ComboboxList>
-                  </ComboboxContent>
-                </Combobox>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="small-form-comments">Comments</FieldLabel>
-                <Textarea
-                  id="small-form-comments"
-                  placeholder="Add any additional comments"
-                />
-              </Field>
-              <Field orientation="horizontal">
-                <Button type="submit">Submit</Button>
-                <Button variant="outline" type="button">
-                  Cancel
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-
-function ObservabilityCard() {
-  return (
-    <Example title="Card" className="items-center justify-center">
-      <Card className="relative w-full max-w-sm overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
-        <img
-          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Photo by mymind on Unsplash"
-          title="Photo by mymind on Unsplash"
-          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
-        />
-        <CardHeader>
-          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
-          <CardDescription>
-            Switch to the improved way to explore your data, with natural
-            language. Monitoring will no longer be available on the Pro plan in
-            November, 2025
-          </CardDescription>
-        </CardHeader>
-        <CardFooter>
-          <Button>
-            Create Query{" "}
-            <IconPlaceholder
-              lucide="PlusIcon"
-              tabler="IconPlus"
-              hugeicons="PlusSignIcon"
-              phosphor="PlusIcon"
-              remixicon="RiAddLine"
-              data-icon="inline-end"
-            />
-          </Button>
-          <Badge variant="secondary" className="ml-auto">
-            Warning
-          </Badge>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-function ItemExample() {
-  return (
-    <Example title="Item">
-      <div className="flex w-full max-w-md flex-col gap-6">
-        <Item variant="outline">
-          <ItemContent>
-            <ItemTitle>Two-factor authentication</ItemTitle>
-            <ItemDescription className="text-pretty xl:hidden 2xl:block">
-              Verify via email or phone number.
-            </ItemDescription>
-          </ItemContent>
-          <ItemActions>
-            <Button size="sm" variant="secondary">
-              Enable
-            </Button>
-          </ItemActions>
-        </Item>
-        <Item variant="outline" size="sm" render={<a href="#" />}>
-          <ItemMedia variant="icon">
-            <IconPlaceholder
-              lucide="ShoppingBagIcon"
-              tabler="IconShoppingBag"
-              hugeicons="ShoppingBasket01Icon"
-              phosphor="BagIcon"
-              remixicon="RiShoppingBagLine"
-            />
-          </ItemMedia>
-          <ItemContent>
-            <ItemTitle>Your order has been shipped.</ItemTitle>
-          </ItemContent>
-        </Item>
-      </div>
-    </Example>
-  )
-}
-
-function BadgeExamples() {
-  return (
-    <Example title="Badge" className="items-center justify-center">
-      <div className="flex items-center justify-center gap-2">
-        <Badge>
-          <Spinner data-icon="inline-start" />
-          Syncing
-        </Badge>
-        <Badge variant="secondary">
-          <Spinner data-icon="inline-start" />
-          Updating
-        </Badge>
-        <Badge variant="outline">
-          <Spinner data-icon="inline-start" />
-          Loading
-        </Badge>
-        <Badge variant="link" className="hidden sm:flex">
-          <Spinner data-icon="inline-start" />
-          Link
-        </Badge>
-      </div>
-    </Example>
-  )
-}
-
-function EmptyWithSpinner() {
-  return (
-    <Example title="Empty with Spinner">
-      <Empty className="w-full border">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <Spinner />
-          </EmptyMedia>
-          <EmptyTitle>Processing your request</EmptyTitle>
-          <EmptyDescription>
-            Please wait while we process your request. Do not refresh the page.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <div className="flex gap-2">
-            <Button size="sm">Submit</Button>
-            <Button variant="outline" size="sm">
-              Cancel
-            </Button>
-          </div>
-        </EmptyContent>
-      </Empty>
-    </Example>
-  )
-}
-
-const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
-
-function SheetExample() {
-  return (
-    <Example title="Sheet">
-      <div className="flex gap-2">
-        {SHEET_SIDES.map((side) => (
-          <Sheet key={side}>
-            <SheetTrigger
-              render={
-                <Button variant="secondary" className="flex-1 capitalize" />
-              }
-            >
-              {side}
-            </SheetTrigger>
-            <SheetContent
-              side={side}
-              className="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]"
-            >
-              <SheetHeader>
-                <SheetTitle>Edit profile</SheetTitle>
-                <SheetDescription>
-                  Make changes to your profile here. Click save when you&apos;re
-                  done.
-                </SheetDescription>
-              </SheetHeader>
-              <div className="overflow-y-auto px-4 text-sm">
-                {Array.from({ length: 10 }).map((_, index) => (
-                  <p
-                    key={index}
-                    className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
-                  >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit
-                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-                    occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                  </p>
-                ))}
-              </div>
-              <SheetFooter>
-                <Button type="submit">Save changes</Button>
-                <SheetClose render={<Button variant="outline" />}>
-                  Cancel
-                </SheetClose>
-              </SheetFooter>
-            </SheetContent>
-          </Sheet>
-        ))}
-      </div>
-    </Example>
-  )
-}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx
new file mode 100644
index 0000000000..ad22b7141f
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/activate-agent-dialog.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { Alert, AlertDescription } from "@/registry/bases/base/ui/alert"
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/registry/bases/base/ui/item"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+// Agent feature descriptions.
+const agentFeatures = [
+  {
+    id: "code-reviews",
+    content: (
+      <>
+        <strong>Code reviews</strong> with full codebase context to catch{" "}
+        <strong>hard-to-find</strong> bugs.
+      </>
+    ),
+  },
+  {
+    id: "code-suggestions",
+    content: (
+      <>
+        <strong>Code suggestions</strong> validated in sandboxes before you
+        merge.
+      </>
+    ),
+  },
+  {
+    id: "root-cause",
+    content: (
+      <>
+        <strong>Root-cause analysis</strong> for production issues with
+        deployment context.{" "}
+        <Badge variant="secondary" className="bg-chart-1 text-chart-5">
+          Requires Observability Plus
+        </Badge>
+      </>
+    ),
+  },
+]
+
+export function ActivateAgentDialog() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Ship faster & safer with Vercel Agent</CardTitle>
+        <CardDescription>
+          Your use is subject to Vercel&apos;s{" "}
+          <a href="#">Public Beta Agreement</a> and{" "}
+          <a href="#">AI Product Terms</a>.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <ItemGroup className="gap-0">
+          {agentFeatures.map((feature) => (
+            <Item key={feature.id} size="xs" className="px-0">
+              <ItemMedia variant="icon" className="self-start">
+                <IconPlaceholder
+                  lucide="CheckCircle2Icon"
+                  tabler="IconCircleCheckFilled"
+                  hugeicons="CheckmarkCircle02Icon"
+                  phosphor="CheckCircleIcon"
+                  remixicon="RiCheckboxCircleLine"
+                  className="size-5 fill-primary text-primary-foreground"
+                />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle className="inline leading-relaxed font-normal text-muted-foreground *:[strong]:font-medium *:[strong]:text-foreground">
+                  {feature.content}
+                </ItemTitle>
+              </ItemContent>
+            </Item>
+          ))}
+        </ItemGroup>
+        <Alert>
+          <AlertDescription>
+            Pro teams get $100 in Vercel Agent trial credit for 2 weeks after
+            activation.
+          </AlertDescription>
+        </Alert>
+      </CardContent>
+      <CardFooter className="justify-end gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>Enable with $100 credits</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/analytics-card.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/analytics-card.tsx
new file mode 100644
index 0000000000..6f450900a1
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/analytics-card.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { Area, AreaChart } from "recharts"
+
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/base/ui/chart"
+
+// Monthly visitor data for the area chart.
+const chartData = [
+  { month: "January", visitors: 186 },
+  { month: "February", visitors: 305 },
+  { month: "March", visitors: 237 },
+  { month: "April", visitors: 73 },
+  { month: "May", visitors: 209 },
+  { month: "June", visitors: 214 },
+]
+
+// Chart configuration for the visitors dataset.
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function AnalyticsCard() {
+  return (
+    <Card className="mx-auto w-full max-w-sm data-[size=sm]:pb-0" size="sm">
+      <CardHeader>
+        <CardTitle>Analytics</CardTitle>
+        <CardDescription>
+          418.2K Visitors <Badge>+10%</Badge>
+        </CardDescription>
+        <CardAction>
+          <Button variant="outline" size="sm">
+            View Analytics
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <ChartContainer config={chartConfig} className="aspect-[1/0.35]">
+        <AreaChart
+          accessibilityLayer
+          data={chartData}
+          margin={{
+            left: 0,
+            right: 0,
+          }}
+        >
+          <ChartTooltip
+            cursor={false}
+            content={<ChartTooltipContent indicator="line" hideLabel />}
+          />
+          <Area
+            dataKey="visitors"
+            type="linear"
+            fill="var(--color-visitors)"
+            fillOpacity={0.4}
+            stroke="var(--color-visitors)"
+          />
+        </AreaChart>
+      </ChartContainer>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/anomaly-alert.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/anomaly-alert.tsx
new file mode 100644
index 0000000000..ebdb1b92a9
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/anomaly-alert.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/registry/bases/base/ui/empty"
+
+export function AnomalyAlert() {
+  return (
+    <Card>
+      <CardContent>
+        <Empty className="h-48">
+          <EmptyHeader>
+            <EmptyTitle>Get alerted for anomalies</EmptyTitle>
+            <EmptyDescription>
+              Automatically monitor your projects for anomalies and get
+              notified.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button>Upgrade to Observability Plus</Button>
+          </EmptyContent>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/assign-issue.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/assign-issue.tsx
new file mode 100644
index 0000000000..1078361efc
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/assign-issue.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/bases/base/ui/avatar"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/registry/bases/base/ui/combobox"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/bases/base/ui/tooltip"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+// Users available for assignment.
+const users = [
+  "shadcn",
+  "maxleiter",
+  "evilrabbit",
+  "pranathip",
+  "jorgezreik",
+  "shuding",
+  "rauchg",
+]
+
+export function AssignIssue() {
+  const anchor = useComboboxAnchor()
+  return (
+    <Card className="w-full max-w-sm" size="sm">
+      <CardHeader className="border-b">
+        <CardTitle className="text-sm">Assign Issue</CardTitle>
+        <CardDescription className="text-sm">
+          Select users to assign to this issue.
+        </CardDescription>
+        <CardAction>
+          <Tooltip>
+            <TooltipTrigger
+              render={<Button variant="outline" size="icon-xs" />}
+            >
+              <IconPlaceholder
+                lucide="PlusIcon"
+                tabler="IconPlus"
+                hugeicons="PlusSignIcon"
+                phosphor="PlusIcon"
+                remixicon="RiAddLine"
+              />
+            </TooltipTrigger>
+            <TooltipContent>Add user</TooltipContent>
+          </Tooltip>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Combobox
+          multiple
+          autoHighlight
+          items={users}
+          defaultValue={[users[0]]}
+        >
+          <ComboboxChips ref={anchor}>
+            <ComboboxValue>
+              {(values) => (
+                <React.Fragment>
+                  {values.map((username: string) => (
+                    <ComboboxChip key={username}>
+                      <Avatar className="size-4">
+                        <AvatarImage
+                          src={`https://github.com/${username}.png`}
+                          alt={username}
+                        />
+                        <AvatarFallback>{username.charAt(0)}</AvatarFallback>
+                      </Avatar>
+                      {username}
+                    </ComboboxChip>
+                  ))}
+                  <ComboboxChipsInput
+                    placeholder={
+                      values.length > 0 ? undefined : "Select a item..."
+                    }
+                  />
+                </React.Fragment>
+              )}
+            </ComboboxValue>
+          </ComboboxChips>
+          <ComboboxContent anchor={anchor}>
+            <ComboboxEmpty>No users found.</ComboboxEmpty>
+            <ComboboxList>
+              {(username) => (
+                <ComboboxItem key={username} value={username}>
+                  <Avatar className="size-5">
+                    <AvatarImage
+                      src={`https://github.com/${username}.png`}
+                      alt={username}
+                    />
+                    <AvatarFallback>{username.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                  {username}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
new file mode 100644
index 0000000000..ab78331c85
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/bar-chart-card.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/base/ui/chart"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/bases/base/ui/toggle-group"
+
+const barChartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const barChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+const desktopTotal = barChartData.reduce((sum, item) => sum + item.desktop, 0)
+const mobileTotal = barChartData.reduce((sum, item) => sum + item.mobile, 0)
+const desktopDelta = Math.round(
+  ((desktopTotal - mobileTotal) / mobileTotal) * 100
+)
+const desktopDeltaPrefix = desktopDelta > 0 ? "+" : ""
+
+export function BarChartCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Traffic Channels</CardTitle>
+        <CardDescription>
+          Desktop vs mobile over the last 6 months
+        </CardDescription>
+        <CardAction>
+          <ToggleGroup
+            aria-label="Time range"
+            multiple={false}
+            defaultValue={["6m"]}
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="6m">6M</ToggleGroupItem>
+            <ToggleGroupItem value="12m">12M</ToggleGroupItem>
+          </ToggleGroup>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <ChartContainer
+          config={barChartConfig}
+          className="max-h-[180px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={barChartData}
+            margin={{ left: 0, right: 0, top: 8, bottom: 0 }}
+          >
+            <CartesianGrid vertical={false} strokeDasharray="3 3" />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={8}
+              axisLine={false}
+              tickFormatter={(value) => String(value).slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              radius={[6, 6, 0, 0]}
+            />
+            <Bar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              radius={[6, 6, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="grid w-full grid-cols-3 divide-x divide-border/60">
+          <div className="px-2 text-center">
+            <div className="text-[0.65rem] text-muted-foreground uppercase">
+              Desktop
+            </div>
+            <div className="text-sm font-medium tabular-nums">
+              {desktopTotal.toLocaleString()}
+            </div>
+          </div>
+          <div className="px-2 text-center">
+            <div className="text-[0.65rem] text-muted-foreground uppercase">
+              Mobile
+            </div>
+            <div className="text-sm font-medium tabular-nums">
+              {mobileTotal.toLocaleString()}
+            </div>
+          </div>
+          <div className="px-2 text-center">
+            <div className="text-[0.65rem] text-muted-foreground uppercase">
+              Mix Delta
+            </div>
+            <div className="text-sm font-medium tabular-nums">
+              {desktopDeltaPrefix}
+              {desktopDelta}%
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/bar-visualizer.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/bar-visualizer.tsx
new file mode 100644
index 0000000000..495111b55e
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/bar-visualizer.tsx
@@ -0,0 +1,483 @@
+"use client"
+
+import * as React from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+
+type AgentState =
+  | "connecting"
+  | "initializing"
+  | "listening"
+  | "speaking"
+  | "thinking"
+
+type AnimationState = AgentState | undefined
+
+interface AudioAnalyserOptions {
+  fftSize?: number
+  smoothingTimeConstant?: number
+  minDecibels?: number
+  maxDecibels?: number
+}
+
+interface MultiBandVolumeOptions {
+  bands?: number
+  loPass?: number
+  hiPass?: number
+  updateInterval?: number
+  analyserOptions?: AudioAnalyserOptions
+}
+
+const multibandDefaults: MultiBandVolumeOptions = {
+  bands: 5,
+  loPass: 100,
+  hiPass: 600,
+  updateInterval: 32,
+  analyserOptions: { fftSize: 2048 },
+}
+
+const normalizeDb = (value: number) => {
+  if (value === -Infinity) return 0
+  const minDb = -100
+  const maxDb = -10
+  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100
+  return Math.sqrt(db)
+}
+
+function createAudioAnalyser(
+  mediaStream: MediaStream,
+  options: AudioAnalyserOptions = {}
+) {
+  const audioContext = new (window.AudioContext ||
+    (window as unknown as { webkitAudioContext: typeof AudioContext })
+      .webkitAudioContext)()
+  const source = audioContext.createMediaStreamSource(mediaStream)
+  const analyser = audioContext.createAnalyser()
+
+  if (options.fftSize) analyser.fftSize = options.fftSize
+  if (options.smoothingTimeConstant !== undefined) {
+    analyser.smoothingTimeConstant = options.smoothingTimeConstant
+  }
+  if (options.minDecibels !== undefined)
+    analyser.minDecibels = options.minDecibels
+  if (options.maxDecibels !== undefined)
+    analyser.maxDecibels = options.maxDecibels
+
+  source.connect(analyser)
+
+  const cleanup = () => {
+    source.disconnect()
+    audioContext.close()
+  }
+
+  return { analyser, audioContext, cleanup }
+}
+
+function useMultibandVolume(
+  mediaStream?: MediaStream | null,
+  options: MultiBandVolumeOptions = {}
+) {
+  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])
+
+  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>
+    new Array(opts.bands).fill(0)
+  )
+  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))
+  const frameId = useRef<number | undefined>(undefined)
+
+  useEffect(() => {
+    if (!mediaStream) {
+      const emptyBands = new Array(opts.bands).fill(0)
+      setTimeout(() => {
+        setFrequencyBands(emptyBands)
+      }, 0)
+      bandsRef.current = emptyBands
+      return
+    }
+
+    const { analyser, cleanup } = createAudioAnalyser(
+      mediaStream,
+      opts.analyserOptions
+    )
+
+    const bufferLength = analyser.frequencyBinCount
+    const dataArray = new Float32Array(bufferLength)
+    const sliceStart = opts.loPass!
+    const sliceEnd = opts.hiPass!
+    const sliceLength = sliceEnd - sliceStart
+    const chunkSize = Math.ceil(sliceLength / opts.bands!)
+
+    let lastUpdate = 0
+    const updateInterval = opts.updateInterval!
+
+    const updateVolume = (timestamp: number) => {
+      if (timestamp - lastUpdate >= updateInterval) {
+        analyser.getFloatFrequencyData(dataArray)
+
+        const chunks = new Array(opts.bands!)
+
+        for (let i = 0; i < opts.bands!; i++) {
+          let sum = 0
+          let count = 0
+          const startIdx = sliceStart + i * chunkSize
+          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)
+
+          for (let j = startIdx; j < endIdx; j++) {
+            sum += normalizeDb(dataArray[j])
+            count++
+          }
+
+          chunks[i] = count > 0 ? sum / count : 0
+        }
+
+        let hasChanged = false
+        for (let i = 0; i < chunks.length; i++) {
+          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {
+            hasChanged = true
+            break
+          }
+        }
+
+        if (hasChanged) {
+          bandsRef.current = chunks
+          setFrequencyBands(chunks)
+        }
+
+        lastUpdate = timestamp
+      }
+
+      frameId.current = requestAnimationFrame(updateVolume)
+    }
+
+    frameId.current = requestAnimationFrame(updateVolume)
+
+    return () => {
+      cleanup()
+      if (frameId.current) {
+        cancelAnimationFrame(frameId.current)
+      }
+    }
+  }, [mediaStream, opts])
+
+  return frequencyBands
+}
+
+const generateConnectingSequenceBar = (columns: number): number[][] => {
+  const seq = []
+  for (let x = 0; x < columns; x++) {
+    seq.push([x, columns - 1 - x])
+  }
+  return seq
+}
+
+const generateListeningSequenceBar = (columns: number): number[][] => {
+  const center = Math.floor(columns / 2)
+  const noIndex = -1
+  return [[center], [noIndex]]
+}
+
+const useBarAnimator = (
+  state: AnimationState,
+  columns: number,
+  interval: number
+): number[] => {
+  const indexRef = useRef(0)
+  const [currentFrame, setCurrentFrame] = useState<number[]>([])
+  const animationFrameId = useRef<number | null>(null)
+
+  const sequence = useMemo(() => {
+    if (state === "thinking" || state === "listening") {
+      return generateListeningSequenceBar(columns)
+    } else if (state === "connecting" || state === "initializing") {
+      return generateConnectingSequenceBar(columns)
+    } else if (state === undefined || state === "speaking") {
+      return [new Array(columns).fill(0).map((_, idx) => idx)]
+    } else {
+      return [[]]
+    }
+  }, [state, columns])
+
+  useEffect(() => {
+    indexRef.current = 0
+    setTimeout(() => {
+      setCurrentFrame(sequence[0] || [])
+    }, 0)
+  }, [sequence])
+
+  useEffect(() => {
+    let startTime = performance.now()
+
+    const animate = (time: DOMHighResTimeStamp) => {
+      const timeElapsed = time - startTime
+
+      if (timeElapsed >= interval) {
+        indexRef.current = (indexRef.current + 1) % sequence.length
+        setCurrentFrame(sequence[indexRef.current] || [])
+        startTime = time
+      }
+
+      animationFrameId.current = requestAnimationFrame(animate)
+    }
+
+    animationFrameId.current = requestAnimationFrame(animate)
+
+    return () => {
+      if (animationFrameId.current !== null) {
+        cancelAnimationFrame(animationFrameId.current)
+      }
+    }
+  }, [interval, sequence])
+
+  return currentFrame
+}
+
+// Memoized Bar component to prevent unnecessary re-renders.
+const Bar = React.memo<{
+  heightPct: number
+  isHighlighted: boolean
+  state?: AgentState
+}>(({ heightPct, isHighlighted, state }) => (
+  <div
+    data-highlighted={isHighlighted}
+    className={cn(
+      "max-w-[12px] min-w-[8px] flex-1 transition-all duration-150",
+      "rounded-full",
+      "bg-border data-[highlighted=true]:bg-chart-3",
+      state === "speaking" && "bg-chart-3",
+      state === "thinking" && isHighlighted && "animate-pulse"
+    )}
+    style={{
+      height: `${heightPct}%`,
+      animationDuration: state === "thinking" ? "300ms" : undefined,
+    }}
+  />
+))
+
+Bar.displayName = "Bar"
+
+const BarVisualizerComponent = React.forwardRef<
+  HTMLDivElement,
+  {
+    state?: AgentState
+    barCount?: number
+    mediaStream?: MediaStream | null
+    minHeight?: number
+    maxHeight?: number
+    demo?: boolean
+    centerAlign?: boolean
+  } & React.HTMLAttributes<HTMLDivElement>
+>(
+  (
+    {
+      state,
+      barCount = 15,
+      mediaStream,
+      minHeight = 20,
+      maxHeight = 100,
+      demo = false,
+      centerAlign = false,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const realVolumeBands = useMultibandVolume(mediaStream, {
+      bands: barCount,
+      loPass: 100,
+      hiPass: 200,
+    })
+
+    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))
+    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>
+      new Array(barCount).fill(0.2)
+    )
+    const fakeAnimationRef = useRef<number | undefined>(undefined)
+
+    useEffect(() => {
+      if (!demo) return
+
+      if (state !== "speaking" && state !== "listening") {
+        const bands = new Array(barCount).fill(0.2)
+        fakeVolumeBandsRef.current = bands
+        setTimeout(() => {
+          setFakeVolumeBands(bands)
+        }, 0)
+        return
+      }
+
+      let lastUpdate = 0
+      const updateInterval = 50
+      const startTime = Date.now() / 1000
+
+      const updateFakeVolume = (timestamp: number) => {
+        if (timestamp - lastUpdate >= updateInterval) {
+          const time = Date.now() / 1000 - startTime
+          const newBands = new Array(barCount)
+
+          for (let i = 0; i < barCount; i++) {
+            const waveOffset = i * 0.5
+            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5
+            const randomNoise = Math.random() * 0.2
+            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))
+          }
+
+          let hasChanged = false
+          for (let i = 0; i < barCount; i++) {
+            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {
+              hasChanged = true
+              break
+            }
+          }
+
+          if (hasChanged) {
+            fakeVolumeBandsRef.current = newBands
+            setFakeVolumeBands(newBands)
+          }
+
+          lastUpdate = timestamp
+        }
+
+        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)
+      }
+
+      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)
+
+      return () => {
+        if (fakeAnimationRef.current) {
+          cancelAnimationFrame(fakeAnimationRef.current)
+        }
+      }
+    }, [demo, state, barCount])
+
+    const volumeBands = useMemo(
+      () => (demo ? fakeVolumeBands : realVolumeBands),
+      [demo, fakeVolumeBands, realVolumeBands]
+    )
+
+    const highlightedIndices = useBarAnimator(
+      state,
+      barCount,
+      state === "connecting"
+        ? 2000 / barCount
+        : state === "thinking"
+          ? 150
+          : state === "listening"
+            ? 500
+            : 1000
+    )
+
+    return (
+      <div
+        ref={ref}
+        data-state={state}
+        className={cn(
+          "relative flex justify-center gap-1.5",
+          centerAlign ? "items-center" : "items-end",
+          "h-32 w-full overflow-hidden rounded-lg bg-muted p-4",
+          className
+        )}
+        style={{
+          ...style,
+        }}
+        {...props}
+      >
+        {volumeBands.map((volume, index) => {
+          const heightPct = Math.min(
+            maxHeight,
+            Math.max(minHeight, volume * 100 + 5)
+          )
+          const isHighlighted = highlightedIndices?.includes(index) ?? false
+
+          return (
+            <Bar
+              key={index}
+              heightPct={heightPct}
+              isHighlighted={isHighlighted}
+              state={state}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+BarVisualizerComponent.displayName = "BarVisualizerComponent"
+
+const BarVisualizer = React.memo(
+  BarVisualizerComponent,
+  (prevProps, nextProps) => {
+    return (
+      prevProps.state === nextProps.state &&
+      prevProps.barCount === nextProps.barCount &&
+      prevProps.mediaStream === nextProps.mediaStream &&
+      prevProps.minHeight === nextProps.minHeight &&
+      prevProps.maxHeight === nextProps.maxHeight &&
+      prevProps.demo === nextProps.demo &&
+      prevProps.centerAlign === nextProps.centerAlign &&
+      prevProps.className === nextProps.className &&
+      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)
+    )
+  }
+)
+
+BarVisualizer.displayName = "BarVisualizer"
+
+export function BarVisualizerCard() {
+  const [state, setState] = useState<AgentState>("speaking")
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Audio Frequency Visualizer</CardTitle>
+        <CardDescription>
+          Real-time frequency band visualization with animated state transitions
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <BarVisualizer
+          state={state}
+          demo={true}
+          barCount={20}
+          minHeight={15}
+          maxHeight={90}
+          className="h-40 max-w-full"
+        />
+      </CardContent>
+      <CardFooter className="gap-2">
+        <Button
+          size="sm"
+          variant={state === "connecting" ? "default" : "outline"}
+          onClick={() => setState("connecting")}
+        >
+          Connecting
+        </Button>
+        <Button
+          size="sm"
+          variant={state === "listening" ? "default" : "outline"}
+          onClick={() => setState("listening")}
+        >
+          Listening
+        </Button>
+        <Button
+          size="sm"
+          variant={state === "speaking" ? "default" : "outline"}
+          onClick={() => setState("speaking")}
+        >
+          Speaking
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/book-appointment.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/book-appointment.tsx
new file mode 100644
index 0000000000..86856dac4f
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/book-appointment.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/bases/base/ui/alert"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/base/ui/field"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/bases/base/ui/toggle-group"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function BookAppointment() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Book Appointment</CardTitle>
+        <CardDescription>Dr. Sarah Chen · Cardiology</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <FieldGroup>
+          <Field>
+            <FieldLabel>Available on March 18, 2026</FieldLabel>
+            <ToggleGroup spacing={2} defaultValue={["slot-0"]}>
+              {["9:00 AM", "10:30 AM", "11:00 AM", "1:30 PM"].map(
+                (time, index) => (
+                  <ToggleGroupItem key={time} value={`slot-${index}`}>
+                    {time}
+                  </ToggleGroupItem>
+                )
+              )}
+            </ToggleGroup>
+          </Field>
+        </FieldGroup>
+        <Alert>
+          <AlertTitle>New patient?</AlertTitle>
+          <AlertDescription>Please arrive 15 minutes early.</AlertDescription>
+        </Alert>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Book Appointment</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/codespaces-card.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/codespaces-card.tsx
new file mode 100644
index 0000000000..c54af32587
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/codespaces-card.tsx
@@ -0,0 +1,399 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/bases/base/ui/dropdown-menu"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/registry/bases/base/ui/empty"
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+} from "@/registry/bases/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/registry/bases/base/ui/input-group"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/registry/bases/base/ui/item"
+import { Separator } from "@/registry/bases/base/ui/separator"
+import { Spinner } from "@/registry/bases/base/ui/spinner"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/bases/base/ui/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/bases/base/ui/tooltip"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function CodespacesCard() {
+  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)
+  return (
+    <Card>
+      <CardContent>
+        <Tabs defaultValue="codespaces">
+          <TabsList className="w-full">
+            <TabsTrigger value="codespaces">Codespaces</TabsTrigger>
+            <TabsTrigger value="local">Local</TabsTrigger>
+          </TabsList>
+          <TabsContent value="codespaces">
+            <Item size="sm" className="px-1 pt-2">
+              <ItemContent>
+                <ItemTitle>Codespaces</ItemTitle>
+                <ItemDescription>Your workspaces in the cloud</ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={<Button variant="ghost" size="icon-sm" />}
+                  >
+                    <IconPlaceholder
+                      lucide="PlusIcon"
+                      tabler="IconPlus"
+                      hugeicons="PlusSignIcon"
+                      phosphor="PlusIcon"
+                      remixicon="RiAddLine"
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    Create a codespace on main
+                  </TooltipContent>
+                </Tooltip>
+                <DropdownMenu>
+                  <Tooltip>
+                    <TooltipTrigger
+                      render={
+                        <DropdownMenuTrigger
+                          render={<Button variant="ghost" size="icon-sm" />}
+                        />
+                      }
+                    >
+                      <IconPlaceholder
+                        lucide="MoreHorizontalIcon"
+                        tabler="IconDots"
+                        hugeicons="MoreHorizontalCircle01Icon"
+                        phosphor="DotsThreeOutlineIcon"
+                        remixicon="RiMoreLine"
+                      />
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      Codespace repository configuration
+                    </TooltipContent>
+                  </Tooltip>
+                  <DropdownMenuContent align="end" className="w-56">
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="PlusIcon"
+                          tabler="IconPlus"
+                          hugeicons="PlusSignIcon"
+                          phosphor="PlusIcon"
+                          remixicon="RiAddLine"
+                        />
+                        New with options...
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="ContainerIcon"
+                          tabler="IconBox"
+                          hugeicons="CubeIcon"
+                          phosphor="CubeIcon"
+                          remixicon="RiBox1Line"
+                        />
+                        Configure dev container
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="ZapIcon"
+                          tabler="IconBolt"
+                          hugeicons="ZapIcon"
+                          phosphor="LightningIcon"
+                          remixicon="RiFlashlightLine"
+                        />
+                        Set up prebuilds
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="ServerIcon"
+                          tabler="IconServer"
+                          hugeicons="ServerStackIcon"
+                          phosphor="HardDrivesIcon"
+                          remixicon="RiHardDriveLine"
+                        />
+                        Manage codespaces
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="ShareIcon"
+                          tabler="IconShare2"
+                          hugeicons="Share03Icon"
+                          phosphor="ShareIcon"
+                          remixicon="RiShareLine"
+                        />
+                        Share deep link
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="InfoIcon"
+                          tabler="IconInfoCircle"
+                          hugeicons="AlertCircleIcon"
+                          phosphor="InfoIcon"
+                          remixicon="RiInformationLine"
+                        />
+                        What are codespaces?
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </ItemActions>
+            </Item>
+            <Separator className="-mx-2 my-2 w-auto!" />
+            <Empty className="p-4">
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <IconPlaceholder
+                    lucide="ServerIcon"
+                    tabler="IconServer"
+                    hugeicons="ServerStackIcon"
+                    phosphor="HardDrivesIcon"
+                    remixicon="RiHardDriveLine"
+                  />
+                </EmptyMedia>
+                <EmptyTitle>No codespaces</EmptyTitle>
+                <EmptyDescription>
+                  You don&apos;t have any codespaces with this repository
+                  checked out
+                </EmptyDescription>
+              </EmptyHeader>
+              <EmptyContent>
+                <Button
+                  size="sm"
+                  onClick={() => {
+                    setIsCreatingCodespace(true)
+                    setTimeout(() => {
+                      setIsCreatingCodespace(false)
+                    }, 2000)
+                  }}
+                  disabled={isCreatingCodespace}
+                >
+                  {isCreatingCodespace ? (
+                    <Spinner data-icon="inline-start" />
+                  ) : (
+                    ""
+                  )}
+                  Create Codespace
+                </Button>
+                <a
+                  href="#learn-more"
+                  className="text-xs text-muted-foreground underline underline-offset-4"
+                >
+                  Learn more about codespaces
+                </a>
+              </EmptyContent>
+            </Empty>
+            <Separator className="-mx-2 my-2 w-auto!" />
+            <div className="p-1.5 text-xs text-muted-foreground">
+              Codespace usage for this repository is paid for by{" "}
+              <span className="font-medium">shadcn</span>.
+            </div>
+          </TabsContent>
+          <TabsContent value="local">
+            <Item size="sm" className="hidden p-0">
+              <ItemContent>
+                <ItemTitle className="gap-2">
+                  <IconPlaceholder
+                    lucide="TerminalIcon"
+                    tabler="IconTerminal"
+                    hugeicons="ComputerTerminal01Icon"
+                    phosphor="TerminalIcon"
+                    remixicon="RiTerminalBoxLine"
+                    className="size-4"
+                  />
+                  Clone
+                </ItemTitle>
+              </ItemContent>
+              <ItemActions>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={<Button variant="ghost" size="icon" />}
+                  >
+                    <IconPlaceholder
+                      lucide="InfoIcon"
+                      tabler="IconInfoCircle"
+                      hugeicons="AlertCircleIcon"
+                      phosphor="InfoIcon"
+                      remixicon="RiInformationLine"
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent side="left">
+                    Which remote URL should I use?
+                  </TooltipContent>
+                </Tooltip>
+              </ItemActions>
+            </Item>
+            <Tabs defaultValue="https">
+              <TabsList
+                variant="line"
+                className="w-full justify-start border-b *:[button]:flex-0"
+              >
+                <TabsTrigger value="https">HTTPS</TabsTrigger>
+                <TabsTrigger value="ssh">SSH</TabsTrigger>
+                <TabsTrigger value="cli">GitHub CLI</TabsTrigger>
+              </TabsList>
+              <div className="rounded-md border bg-muted/30 p-2">
+                <TabsContent value="https">
+                  <Field className="gap-2">
+                    <FieldLabel htmlFor="https-url" className="sr-only">
+                      HTTPS URL
+                    </FieldLabel>
+                    <InputGroup>
+                      <InputGroupAddon align="inline-end">
+                        <InputGroupButton variant="ghost" size="icon-xs">
+                          <IconPlaceholder
+                            lucide="CopyIcon"
+                            tabler="IconCopy"
+                            hugeicons="Copy01Icon"
+                            phosphor="CopyIcon"
+                            remixicon="RiFileCopyLine"
+                          />
+                        </InputGroupButton>
+                      </InputGroupAddon>
+                      <InputGroupInput
+                        id="https-url"
+                        defaultValue="https://github.com/shadcn-ui/ui.git"
+                        readOnly
+                      />
+                    </InputGroup>
+                    <FieldDescription>
+                      Clone using the web URL.
+                    </FieldDescription>
+                  </Field>
+                </TabsContent>
+                <TabsContent value="ssh">
+                  <Field className="gap-2">
+                    <FieldLabel htmlFor="ssh-url" className="sr-only">
+                      SSH URL
+                    </FieldLabel>
+                    <InputGroup>
+                      <InputGroupAddon align="inline-end">
+                        <InputGroupButton variant="ghost" size="icon-xs">
+                          <IconPlaceholder
+                            lucide="CopyIcon"
+                            tabler="IconCopy"
+                            hugeicons="Copy01Icon"
+                            phosphor="CopyIcon"
+                            remixicon="RiFileCopyLine"
+                          />
+                        </InputGroupButton>
+                      </InputGroupAddon>
+                      <InputGroupInput
+                        id="ssh-url"
+                        defaultValue="git@github.com:shadcn-ui/ui.git"
+                        readOnly
+                      />
+                    </InputGroup>
+                    <FieldDescription>
+                      Use a password-protected SSH key.
+                    </FieldDescription>
+                  </Field>
+                </TabsContent>
+                <TabsContent value="cli">
+                  <Field className="gap-2">
+                    <FieldLabel htmlFor="cli-command" className="sr-only">
+                      CLI Command
+                    </FieldLabel>
+                    <InputGroup>
+                      <InputGroupAddon align="inline-end">
+                        <InputGroupButton variant="ghost" size="icon-xs">
+                          <IconPlaceholder
+                            lucide="CopyIcon"
+                            tabler="IconCopy"
+                            hugeicons="Copy01Icon"
+                            phosphor="CopyIcon"
+                            remixicon="RiFileCopyLine"
+                          />
+                        </InputGroupButton>
+                      </InputGroupAddon>
+                      <InputGroupInput
+                        id="cli-command"
+                        defaultValue="gh repo clone shadcn-ui/ui"
+                        readOnly
+                      />
+                    </InputGroup>
+                    <FieldDescription>
+                      Work fast with our official CLI.{" "}
+                      <a href="#learn-more">Learn more</a>
+                    </FieldDescription>
+                  </Field>
+                </TabsContent>
+              </div>
+            </Tabs>
+            <Separator className="-mx-2 my-2 w-auto!" />
+            <div className="flex flex-col">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="justify-start gap-1.5"
+              >
+                <IconPlaceholder
+                  lucide="MonitorIcon"
+                  tabler="IconDeviceDesktop"
+                  hugeicons="ComputerIcon"
+                  phosphor="MonitorIcon"
+                  remixicon="RiComputerLine"
+                  data-icon="inline-start"
+                />
+                Open with GitHub Desktop
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="justify-start gap-1.5"
+              >
+                <IconPlaceholder
+                  lucide="DownloadIcon"
+                  tabler="IconDownload"
+                  hugeicons="DownloadIcon"
+                  phosphor="DownloadIcon"
+                  remixicon="RiDownloadLine"
+                  data-icon="inline-start"
+                />
+                Download ZIP
+              </Button>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx
new file mode 100644
index 0000000000..e39bff08a2
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/contributions-activity.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import { Checkbox } from "@/registry/bases/base/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/registry/bases/base/ui/field"
+
+export function ContributionsActivity() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Contributions & Activity</CardTitle>
+        <CardDescription>
+          Manage your contributions and activity visibility.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="contributions-activity">
+          <FieldGroup>
+            <FieldSet>
+              <FieldLegend className="sr-only">
+                Contributions & activity
+              </FieldLegend>
+              <FieldGroup>
+                <Field orientation="horizontal">
+                  <Checkbox id="activity-private-profile" />
+                  <FieldContent>
+                    <FieldLabel htmlFor="activity-private-profile">
+                      Make profile private and hide activity
+                    </FieldLabel>
+                    <FieldDescription>
+                      Enabling this will hide your contributions and activity
+                      from your GitHub profile and from social features like
+                      followers, stars, feeds, leaderboards and releases.
+                    </FieldDescription>
+                  </FieldContent>
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button form="contributions-activity">Save Changes</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/contributors.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/contributors.tsx
new file mode 100644
index 0000000000..fe0752e403
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/contributors.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/bases/base/ui/avatar"
+import { Badge } from "@/registry/bases/base/ui/badge"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+
+// GitHub usernames displayed as contributor avatars.
+const usernames = [
+  "shadcn",
+  "vercel",
+  "nextjs",
+  "tailwindlabs",
+  "typescript-lang",
+  "eslint",
+  "prettier",
+  "babel",
+  "webpack",
+  "rollup",
+  "parcel",
+  "vite",
+  "react",
+  "vue",
+  "angular",
+  "solid",
+]
+
+export function Contributors() {
+  return (
+    <Card className="max-w-sm">
+      <CardHeader>
+        <CardTitle>
+          Contributors <Badge variant="secondary">312</Badge>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-wrap gap-2">
+          {usernames.map((username) => (
+            <Avatar key={username}>
+              <AvatarImage
+                src={`https://github.com/${username}.png`}
+                alt={username}
+              />
+              <AvatarFallback>{username.charAt(0)}</AvatarFallback>
+            </Avatar>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <a href="#" className="text-sm underline underline-offset-4">
+          + 810 contributors
+        </a>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/environment-variables.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/environment-variables.tsx
new file mode 100644
index 0000000000..970be94c51
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/environment-variables.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+
+export function EnvironmentVariables() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Environment Variables</CardTitle>
+        <CardDescription>Production · 8 variables</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2">
+        {[
+          { key: "DATABASE_URL", masked: true },
+          { key: "NEXT_PUBLIC_API", masked: false },
+          { key: "STRIPE_SECRET", masked: true },
+        ].map((env) => (
+          <div
+            key={env.key}
+            className="flex items-center gap-2 rounded-md px-2.5 py-2 font-mono text-xs ring ring-border"
+          >
+            <span className="font-medium">{env.key}</span>
+            <span className="ml-auto text-muted-foreground">
+              {env.masked ? "••••••••" : "https://api.example.com"}
+            </span>
+          </div>
+        ))}
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline">Edit</Button>
+        <Button className="ml-auto">Deploy</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx
new file mode 100644
index 0000000000..17b0d0f50d
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/feedback-form.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import { Card, CardContent, CardFooter } from "@/registry/bases/base/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/base/ui/field"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/registry/bases/base/ui/native-select"
+import { Textarea } from "@/registry/bases/base/ui/textarea"
+
+export function FeedbackForm() {
+  return (
+    <Card>
+      <CardContent>
+        <form id="feedback-form">
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="topic">Topic</FieldLabel>
+              <NativeSelect id="topic">
+                <NativeSelectOption value="">Select a topic</NativeSelectOption>
+                <NativeSelectOption value="ai">AI</NativeSelectOption>
+                <NativeSelectOption value="accounts-and-access-controls">
+                  Accounts and Access Controls
+                </NativeSelectOption>
+                <NativeSelectOption value="billing">Billing</NativeSelectOption>
+                <NativeSelectOption value="cdn">
+                  CDN (Firewall, Caching)
+                </NativeSelectOption>
+                <NativeSelectOption value="ci-cd">
+                  CI/CD (Builds, Deployments, Environment Variables)
+                </NativeSelectOption>
+                <NativeSelectOption value="dashboard-interface">
+                  Dashboard Interface (Navigation, UI Issues)
+                </NativeSelectOption>
+                <NativeSelectOption value="domains">Domains</NativeSelectOption>
+                <NativeSelectOption value="frameworks">
+                  Frameworks
+                </NativeSelectOption>
+                <NativeSelectOption value="marketplace-and-integrations">
+                  Marketplace and Integrations
+                </NativeSelectOption>
+                <NativeSelectOption value="observability">
+                  Observability (Observability, Logs, Monitoring)
+                </NativeSelectOption>
+                <NativeSelectOption value="storage">Storage</NativeSelectOption>
+              </NativeSelect>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="feedback">Feedback</FieldLabel>
+              <Textarea
+                id="feedback"
+                placeholder="Your feedback helps us improve..."
+              />
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button type="submit" form="feedback-form">
+          Submit
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/file-upload.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/file-upload.tsx
new file mode 100644
index 0000000000..1054b74758
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/file-upload.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/registry/bases/base/ui/empty"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function FileUpload() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>File Upload</CardTitle>
+        <CardDescription>Drag and drop or browse</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Empty className="border">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconPlaceholder
+                lucide="UploadCloudIcon"
+                tabler="IconCloudUpload"
+                hugeicons="CloudUploadIcon"
+                phosphor="CloudArrowUpIcon"
+                remixicon="RiUploadCloudLine"
+              />
+            </EmptyMedia>
+            <EmptyTitle>Upload files</EmptyTitle>
+            <EmptyDescription>PNG, JPG, PDF up to 10MB</EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button>Browse Files</Button>
+          </EmptyContent>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx
new file mode 100644
index 0000000000..9889111861
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/github-profile.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/registry/bases/base/ui/field"
+import { Input } from "@/registry/bases/base/ui/input"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/registry/bases/base/ui/native-select"
+import { Textarea } from "@/registry/bases/base/ui/textarea"
+
+export function GithubProfile() {
+  return (
+    <Card className="mx-auto w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Profile</CardTitle>
+        <CardDescription>Manage your profile information.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="profile">
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="name">Name</FieldLabel>
+              <Input id="name" placeholder="shadcn" />
+              <FieldDescription>
+                Your name may appear around GitHub where you contribute or are
+                mentioned. You can remove it at any time.
+              </FieldDescription>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="email">Public Email</FieldLabel>
+              <NativeSelect id="email">
+                <NativeSelectOption value="m@shadcn.com">
+                  m@shadcn.com
+                </NativeSelectOption>
+                <NativeSelectOption value="m@gmail.com">
+                  m@gmail.com
+                </NativeSelectOption>
+              </NativeSelect>
+              <FieldDescription>
+                You can manage verified email addresses in your{" "}
+                <a href="#email-settings">email settings</a>.
+              </FieldDescription>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="bio">Bio</FieldLabel>
+              <Textarea
+                id="bio"
+                placeholder="Tell us a little bit about yourself"
+              />
+              <FieldDescription>
+                You can <span>@mention</span> other users and organizations to
+                link to them.
+              </FieldDescription>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button form="profile">Save Profile</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx
new file mode 100644
index 0000000000..f2840e034c
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/icon-preview-grid.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { type IconLibraryName } from "shadcn/icons"
+
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+const PREVIEW_ICONS = [
+  {
+    lucide: "CopyIcon",
+    tabler: "IconCopy",
+    hugeicons: "Copy01Icon",
+    phosphor: "CopyIcon",
+    remixicon: "RiFileCopyLine",
+  },
+  {
+    lucide: "CircleAlertIcon",
+    tabler: "IconExclamationCircle",
+    hugeicons: "AlertCircleIcon",
+    phosphor: "WarningCircleIcon",
+    remixicon: "RiErrorWarningLine",
+  },
+  {
+    lucide: "TrashIcon",
+    tabler: "IconTrash",
+    hugeicons: "Delete02Icon",
+    phosphor: "TrashIcon",
+    remixicon: "RiDeleteBinLine",
+  },
+  {
+    lucide: "ShareIcon",
+    tabler: "IconShare",
+    hugeicons: "Share03Icon",
+    phosphor: "ShareIcon",
+    remixicon: "RiShareLine",
+  },
+  {
+    lucide: "ShoppingBagIcon",
+    tabler: "IconShoppingBag",
+    hugeicons: "ShoppingBag01Icon",
+    phosphor: "BagIcon",
+    remixicon: "RiShoppingBagLine",
+  },
+  {
+    lucide: "MoreHorizontalIcon",
+    tabler: "IconDots",
+    hugeicons: "MoreHorizontalCircle01Icon",
+    phosphor: "DotsThreeIcon",
+    remixicon: "RiMoreLine",
+  },
+  {
+    lucide: "Loader2Icon",
+    tabler: "IconLoader",
+    hugeicons: "Loading03Icon",
+    phosphor: "SpinnerIcon",
+    remixicon: "RiLoaderLine",
+  },
+  {
+    lucide: "PlusIcon",
+    tabler: "IconPlus",
+    hugeicons: "PlusSignIcon",
+    phosphor: "PlusIcon",
+    remixicon: "RiAddLine",
+  },
+  {
+    lucide: "MinusIcon",
+    tabler: "IconMinus",
+    hugeicons: "MinusSignIcon",
+    phosphor: "MinusIcon",
+    remixicon: "RiSubtractLine",
+  },
+  {
+    lucide: "ArrowLeftIcon",
+    tabler: "IconArrowLeft",
+    hugeicons: "ArrowLeft02Icon",
+    phosphor: "ArrowLeftIcon",
+    remixicon: "RiArrowLeftLine",
+  },
+  {
+    lucide: "ArrowRightIcon",
+    tabler: "IconArrowRight",
+    hugeicons: "ArrowRight02Icon",
+    phosphor: "ArrowRightIcon",
+    remixicon: "RiArrowRightLine",
+  },
+  {
+    lucide: "CheckIcon",
+    tabler: "IconCheck",
+    hugeicons: "Tick02Icon",
+    phosphor: "CheckIcon",
+    remixicon: "RiCheckLine",
+  },
+  {
+    lucide: "ChevronDownIcon",
+    tabler: "IconChevronDown",
+    hugeicons: "ArrowDown01Icon",
+    phosphor: "CaretDownIcon",
+    remixicon: "RiArrowDownSLine",
+  },
+  {
+    lucide: "ChevronRightIcon",
+    tabler: "IconChevronRight",
+    hugeicons: "ArrowRight01Icon",
+    phosphor: "CaretRightIcon",
+    remixicon: "RiArrowRightSLine",
+  },
+  {
+    lucide: "SearchIcon",
+    tabler: "IconSearch",
+    hugeicons: "Search01Icon",
+    phosphor: "MagnifyingGlassIcon",
+    remixicon: "RiSearchLine",
+  },
+  {
+    lucide: "SettingsIcon",
+    tabler: "IconSettings",
+    hugeicons: "Settings01Icon",
+    phosphor: "GearIcon",
+    remixicon: "RiSettingsLine",
+  },
+] satisfies Record<IconLibraryName, string>[]
+
+export function IconPreviewGrid() {
+  return (
+    <Card>
+      <CardContent>
+        <div className="grid grid-cols-8 place-items-center gap-4">
+          {PREVIEW_ICONS.map((icon, index) => (
+            <Card
+              key={index}
+              className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4"
+            >
+              <IconPlaceholder
+                lucide={icon.lucide}
+                tabler={icon.tabler}
+                hugeicons={icon.hugeicons}
+                phosphor={icon.phosphor}
+                remixicon={icon.remixicon}
+              />
+            </Card>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/invite-team.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/invite-team.tsx
new file mode 100644
index 0000000000..435ad28c11
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/invite-team.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import { Field, FieldLabel } from "@/registry/bases/base/ui/field"
+import { Input } from "@/registry/bases/base/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/registry/bases/base/ui/input-group"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/bases/base/ui/select"
+import { Separator } from "@/registry/bases/base/ui/separator"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function InviteTeam() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Invite Team</CardTitle>
+        <CardDescription>Add members to your workspace</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="flex flex-col gap-3">
+          {[
+            { email: "alex@example.com", role: "Editor" },
+            { email: "sam@example.com", role: "Viewer" },
+          ].map((invite) => (
+            <div key={invite.email} className="flex items-center gap-2">
+              <Input defaultValue={invite.email} className="flex-1" />
+              <Select
+                items={[
+                  { label: "Admin", value: "admin" },
+                  { label: "Editor", value: "editor" },
+                  { label: "Viewer", value: "viewer" },
+                ]}
+                defaultValue={invite.role.toLowerCase()}
+              >
+                <SelectTrigger className="w-24">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent alignItemWithTrigger={false} align="end">
+                  <SelectGroup>
+                    <SelectItem value="admin">Admin</SelectItem>
+                    <SelectItem value="editor">Editor</SelectItem>
+                    <SelectItem value="viewer">Viewer</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          ))}
+        </div>
+        <Button variant="outline">
+          <IconPlaceholder
+            lucide="PlusIcon"
+            tabler="IconPlus"
+            hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
+            remixicon="RiAddLine"
+            data-icon="inline-start"
+          />
+          Add another
+        </Button>
+        <Separator />
+        <Field>
+          <FieldLabel htmlFor="invite-link">Or share invite link</FieldLabel>
+          <InputGroup>
+            <InputGroupInput
+              id="invite-link"
+              defaultValue="https://app.co/invite/x8f2k"
+              readOnly
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="icon-xs" aria-label="Copy link">
+                <IconPlaceholder
+                  lucide="CopyIcon"
+                  tabler="IconCopy"
+                  hugeicons="Copy01Icon"
+                  phosphor="CopyIcon"
+                  remixicon="RiFileCopyLine"
+                />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </Field>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Send Invites</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/invoice.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/invoice.tsx
new file mode 100644
index 0000000000..ea3485dbfb
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/invoice.tsx
@@ -0,0 +1,115 @@
+"use client"
+
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/bases/base/ui/table"
+
+const INVOICE_ITEMS = [
+  { item: "Design System License", qty: 1, unitPrice: 499 },
+  { item: "Priority Support", qty: 12, unitPrice: 99 },
+  { item: "Custom Components", qty: 3, unitPrice: 250 },
+] as const
+
+const subtotal = INVOICE_ITEMS.reduce(
+  (sum, row) => sum + row.qty * row.unitPrice,
+  0
+)
+const tax = 0
+const totalDue = subtotal + tax
+
+function formatCurrency(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 2,
+  }).format(value)
+}
+
+export function Invoice() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Invoice #INV-2847</CardTitle>
+        <CardDescription>Due March 30, 2026</CardDescription>
+        <CardAction>
+          <Badge variant="secondary">Pending</Badge>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Item</TableHead>
+              <TableHead className="text-right">Qty</TableHead>
+              <TableHead className="text-right">Rate</TableHead>
+              <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {INVOICE_ITEMS.map((row) => (
+              <TableRow key={row.item}>
+                <TableCell className="text-sm">{row.item}</TableCell>
+                <TableCell className="text-right tabular-nums">
+                  {row.qty}
+                </TableCell>
+                <TableCell className="text-right tabular-nums">
+                  {formatCurrency(row.unitPrice)}
+                </TableCell>
+                <TableCell className="text-right tabular-nums">
+                  {formatCurrency(row.qty * row.unitPrice)}
+                </TableCell>
+              </TableRow>
+            ))}
+            <TableRow>
+              <TableCell colSpan={3} className="text-right">
+                Subtotal
+              </TableCell>
+              <TableCell className="text-right tabular-nums">
+                {formatCurrency(subtotal)}
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell colSpan={3} className="text-right">
+                Tax
+              </TableCell>
+              <TableCell className="text-right tabular-nums">$0.00</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell colSpan={3} className="text-right">
+                Total Due
+              </TableCell>
+              <TableCell className="text-right tabular-nums">
+                {formatCurrency(totalDue)}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" size="sm">
+          Download PDF
+        </Button>
+        <Button size="sm" className="ml-auto">
+          Pay Now
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/live-waveform.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/live-waveform.tsx
new file mode 100644
index 0000000000..5533c6ebb4
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/live-waveform.tsx
@@ -0,0 +1,556 @@
+"use client"
+
+import * as React from "react"
+import { useEffect, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+
+const LiveWaveform = ({
+  active = false,
+  processing = false,
+  deviceId,
+  barWidth = 3,
+  barGap = 1,
+  barRadius = 1.5,
+  barColor,
+  fadeEdges = true,
+  fadeWidth = 24,
+  barHeight: baseBarHeight = 4,
+  height = 64,
+  sensitivity = 1,
+  smoothingTimeConstant = 0.8,
+  fftSize = 256,
+  historySize = 60,
+  updateRate = 30,
+  mode = "static",
+  onError,
+  onStreamReady,
+  onStreamEnd,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  active?: boolean
+  processing?: boolean
+  deviceId?: string
+  barWidth?: number
+  barHeight?: number
+  barGap?: number
+  barRadius?: number
+  barColor?: string
+  fadeEdges?: boolean
+  fadeWidth?: number
+  height?: string | number
+  sensitivity?: number
+  smoothingTimeConstant?: number
+  fftSize?: number
+  historySize?: number
+  updateRate?: number
+  mode?: "scrolling" | "static"
+  onError?: (error: Error) => void
+  onStreamReady?: (stream: MediaStream) => void
+  onStreamEnd?: () => void
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const historyRef = useRef<number[]>([])
+  const analyserRef = useRef<AnalyserNode | null>(null)
+  const audioContextRef = useRef<AudioContext | null>(null)
+  const streamRef = useRef<MediaStream | null>(null)
+  const animationRef = useRef<number>(0)
+  const lastUpdateRef = useRef<number>(0)
+  const processingAnimationRef = useRef<number | null>(null)
+  const lastActiveDataRef = useRef<number[]>([])
+  const transitionProgressRef = useRef(0)
+  const staticBarsRef = useRef<number[]>([])
+  const needsRedrawRef = useRef(true)
+  const gradientCacheRef = useRef<CanvasGradient | null>(null)
+  const lastWidthRef = useRef(0)
+  const heightStyle = typeof height === "number" ? `${height}px` : height
+
+  // Handle canvas resizing.
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const container = containerRef.current
+    if (!canvas || !container) return
+    const resizeObserver = new ResizeObserver(() => {
+      const rect = container.getBoundingClientRect()
+      const dpr = window.devicePixelRatio || 1
+      canvas.width = rect.width * dpr
+      canvas.height = rect.height * dpr
+      canvas.style.width = `${rect.width}px`
+      canvas.style.height = `${rect.height}px`
+      const ctx = canvas.getContext("2d")
+      if (ctx) {
+        ctx.scale(dpr, dpr)
+      }
+      gradientCacheRef.current = null
+      lastWidthRef.current = rect.width
+      needsRedrawRef.current = true
+    })
+    resizeObserver.observe(container)
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (processing && !active) {
+      let time = 0
+      transitionProgressRef.current = 0
+      const animateProcessing = () => {
+        time += 0.03
+        transitionProgressRef.current = Math.min(
+          1,
+          transitionProgressRef.current + 0.02
+        )
+        const processingData = []
+        const barCount = Math.floor(
+          (containerRef.current?.getBoundingClientRect().width || 200) /
+            (barWidth + barGap)
+        )
+        if (mode === "static") {
+          const halfCount = Math.floor(barCount / 2)
+          for (let i = 0; i < barCount; i++) {
+            const normalizedPosition = (i - halfCount) / halfCount
+            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4
+            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25
+            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2
+            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15
+            const combinedWave = wave1 + wave2 + wave3
+            const processingValue = (0.2 + combinedWave) * centerWeight
+            let finalValue = processingValue
+            if (
+              lastActiveDataRef.current.length > 0 &&
+              transitionProgressRef.current < 1
+            ) {
+              const lastDataIndex = Math.min(
+                i,
+                lastActiveDataRef.current.length - 1
+              )
+              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
+              finalValue =
+                lastValue * (1 - transitionProgressRef.current) +
+                processingValue * transitionProgressRef.current
+            }
+            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
+          }
+        } else {
+          for (let i = 0; i < barCount; i++) {
+            const normalizedPosition = (i - barCount / 2) / (barCount / 2)
+            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4
+            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25
+            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2
+            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15
+            const combinedWave = wave1 + wave2 + wave3
+            const processingValue = (0.2 + combinedWave) * centerWeight
+            let finalValue = processingValue
+            if (
+              lastActiveDataRef.current.length > 0 &&
+              transitionProgressRef.current < 1
+            ) {
+              const lastDataIndex = Math.floor(
+                (i / barCount) * lastActiveDataRef.current.length
+              )
+              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
+              finalValue =
+                lastValue * (1 - transitionProgressRef.current) +
+                processingValue * transitionProgressRef.current
+            }
+            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
+          }
+        }
+        if (mode === "static") {
+          staticBarsRef.current = processingData
+        } else {
+          historyRef.current = processingData
+        }
+        needsRedrawRef.current = true
+        processingAnimationRef.current =
+          requestAnimationFrame(animateProcessing)
+      }
+      animateProcessing()
+      return () => {
+        if (processingAnimationRef.current) {
+          cancelAnimationFrame(processingAnimationRef.current)
+        }
+      }
+    } else if (!active && !processing) {
+      const hasData =
+        mode === "static"
+          ? staticBarsRef.current.length > 0
+          : historyRef.current.length > 0
+      if (hasData) {
+        let fadeProgress = 0
+        const fadeToIdle = () => {
+          fadeProgress += 0.03
+          if (fadeProgress < 1) {
+            if (mode === "static") {
+              staticBarsRef.current = staticBarsRef.current.map(
+                (value) => value * (1 - fadeProgress)
+              )
+            } else {
+              historyRef.current = historyRef.current.map(
+                (value) => value * (1 - fadeProgress)
+              )
+            }
+            needsRedrawRef.current = true
+            requestAnimationFrame(fadeToIdle)
+          } else {
+            if (mode === "static") {
+              staticBarsRef.current = []
+            } else {
+              historyRef.current = []
+            }
+          }
+        }
+        fadeToIdle()
+      }
+    }
+  }, [processing, active, barWidth, barGap, mode])
+
+  // Handle microphone setup and teardown.
+  useEffect(() => {
+    if (!active) {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop())
+        streamRef.current = null
+        onStreamEnd?.()
+      }
+      if (
+        audioContextRef.current &&
+        audioContextRef.current.state !== "closed"
+      ) {
+        audioContextRef.current.close()
+        audioContextRef.current = null
+      }
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = 0
+      }
+      return
+    }
+    const setupMicrophone = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: deviceId
+            ? {
+                deviceId: { exact: deviceId },
+                echoCancellation: true,
+                noiseSuppression: true,
+                autoGainControl: true,
+              }
+            : {
+                echoCancellation: true,
+                noiseSuppression: true,
+                autoGainControl: true,
+              },
+        })
+        streamRef.current = stream
+        onStreamReady?.(stream)
+        const AudioContextConstructor =
+          window.AudioContext ||
+          (window as unknown as { webkitAudioContext: typeof AudioContext })
+            .webkitAudioContext
+        const audioContext = new AudioContextConstructor()
+        const analyser = audioContext.createAnalyser()
+        analyser.fftSize = fftSize
+        analyser.smoothingTimeConstant = smoothingTimeConstant
+        const source = audioContext.createMediaStreamSource(stream)
+        source.connect(analyser)
+        audioContextRef.current = audioContext
+        analyserRef.current = analyser
+        historyRef.current = []
+      } catch (error) {
+        onError?.(error as Error)
+      }
+    }
+    setupMicrophone()
+    return () => {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop())
+        streamRef.current = null
+        onStreamEnd?.()
+      }
+      if (
+        audioContextRef.current &&
+        audioContextRef.current.state !== "closed"
+      ) {
+        audioContextRef.current.close()
+        audioContextRef.current = null
+      }
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = 0
+      }
+    }
+  }, [
+    active,
+    deviceId,
+    fftSize,
+    smoothingTimeConstant,
+    onError,
+    onStreamReady,
+    onStreamEnd,
+  ])
+
+  // Animation loop.
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    let rafId: number
+    const animate = (currentTime: number) => {
+      const rect = canvas.getBoundingClientRect()
+      if (active && currentTime - lastUpdateRef.current > updateRate) {
+        lastUpdateRef.current = currentTime
+        if (analyserRef.current) {
+          const dataArray = new Uint8Array(
+            analyserRef.current.frequencyBinCount
+          )
+          analyserRef.current.getByteFrequencyData(dataArray)
+          if (mode === "static") {
+            const startFreq = Math.floor(dataArray.length * 0.05)
+            const endFreq = Math.floor(dataArray.length * 0.4)
+            const relevantData = dataArray.slice(startFreq, endFreq)
+            const barCount = Math.floor(rect.width / (barWidth + barGap))
+            const halfCount = Math.floor(barCount / 2)
+            const newBars: number[] = []
+            for (let i = halfCount - 1; i >= 0; i--) {
+              const dataIndex = Math.floor(
+                (i / halfCount) * relevantData.length
+              )
+              const value = Math.min(
+                1,
+                (relevantData[dataIndex] / 255) * sensitivity
+              )
+              newBars.push(Math.max(0.05, value))
+            }
+            for (let i = 0; i < halfCount; i++) {
+              const dataIndex = Math.floor(
+                (i / halfCount) * relevantData.length
+              )
+              const value = Math.min(
+                1,
+                (relevantData[dataIndex] / 255) * sensitivity
+              )
+              newBars.push(Math.max(0.05, value))
+            }
+            staticBarsRef.current = newBars
+            lastActiveDataRef.current = newBars
+          } else {
+            let sum = 0
+            const startFreq = Math.floor(dataArray.length * 0.05)
+            const endFreq = Math.floor(dataArray.length * 0.4)
+            const relevantData = dataArray.slice(startFreq, endFreq)
+            for (let i = 0; i < relevantData.length; i++) {
+              sum += relevantData[i]
+            }
+            const average = (sum / relevantData.length / 255) * sensitivity
+            historyRef.current.push(Math.min(1, Math.max(0.05, average)))
+            lastActiveDataRef.current = [...historyRef.current]
+            if (historyRef.current.length > historySize) {
+              historyRef.current.shift()
+            }
+          }
+          needsRedrawRef.current = true
+        }
+      }
+      if (!needsRedrawRef.current && !active) {
+        rafId = requestAnimationFrame(animate)
+        return
+      }
+      needsRedrawRef.current = active
+      ctx.clearRect(0, 0, rect.width, rect.height)
+      const computedBarColor =
+        barColor ||
+        (() => {
+          const style = getComputedStyle(canvas)
+          const color = style.color
+          return color || "#000"
+        })()
+      const step = barWidth + barGap
+      const barCount = Math.floor(rect.width / step)
+      const centerY = rect.height / 2
+      if (mode === "static") {
+        const dataToRender = processing
+          ? staticBarsRef.current
+          : active
+            ? staticBarsRef.current
+            : staticBarsRef.current.length > 0
+              ? staticBarsRef.current
+              : []
+        for (let i = 0; i < barCount && i < dataToRender.length; i++) {
+          const value = dataToRender[i] || 0.1
+          const x = i * step
+          const bh = Math.max(baseBarHeight, value * rect.height * 0.8)
+          const y = centerY - bh / 2
+          ctx.fillStyle = computedBarColor
+          ctx.globalAlpha = 0.4 + value * 0.6
+          if (barRadius > 0) {
+            ctx.beginPath()
+            ctx.roundRect(x, y, barWidth, bh, barRadius)
+            ctx.fill()
+          } else {
+            ctx.fillRect(x, y, barWidth, bh)
+          }
+        }
+      } else {
+        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {
+          const dataIndex = historyRef.current.length - 1 - i
+          const value = historyRef.current[dataIndex] || 0.1
+          const x = rect.width - (i + 1) * step
+          const bh = Math.max(baseBarHeight, value * rect.height * 0.8)
+          const y = centerY - bh / 2
+          ctx.fillStyle = computedBarColor
+          ctx.globalAlpha = 0.4 + value * 0.6
+          if (barRadius > 0) {
+            ctx.beginPath()
+            ctx.roundRect(x, y, barWidth, bh, barRadius)
+            ctx.fill()
+          } else {
+            ctx.fillRect(x, y, barWidth, bh)
+          }
+        }
+      }
+      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {
+        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {
+          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)
+          const fadePercent = Math.min(0.3, fadeWidth / rect.width)
+          gradient.addColorStop(0, "rgba(255,255,255,1)")
+          gradient.addColorStop(fadePercent, "rgba(255,255,255,0)")
+          gradient.addColorStop(1 - fadePercent, "rgba(255,255,255,0)")
+          gradient.addColorStop(1, "rgba(255,255,255,1)")
+          gradientCacheRef.current = gradient
+          lastWidthRef.current = rect.width
+        }
+        ctx.globalCompositeOperation = "destination-out"
+        ctx.fillStyle = gradientCacheRef.current
+        ctx.fillRect(0, 0, rect.width, rect.height)
+        ctx.globalCompositeOperation = "source-over"
+      }
+      ctx.globalAlpha = 1
+      rafId = requestAnimationFrame(animate)
+    }
+    rafId = requestAnimationFrame(animate)
+    return () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId)
+      }
+    }
+  }, [
+    active,
+    processing,
+    sensitivity,
+    updateRate,
+    historySize,
+    barWidth,
+    baseBarHeight,
+    barGap,
+    barRadius,
+    barColor,
+    fadeEdges,
+    fadeWidth,
+    mode,
+  ])
+
+  return (
+    <div
+      className={cn("relative h-full w-full", className)}
+      ref={containerRef}
+      style={{ height: heightStyle }}
+      aria-label={
+        active
+          ? "Live audio waveform"
+          : processing
+            ? "Processing audio"
+            : "Audio waveform idle"
+      }
+      role="img"
+      {...props}
+    >
+      {!active && !processing && (
+        <div className="absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted border-muted-foreground/20" />
+      )}
+      <canvas
+        className="block h-full w-full"
+        ref={canvasRef}
+        aria-hidden="true"
+      />
+    </div>
+  )
+}
+
+export function LiveWaveformCard() {
+  const [active, setActive] = useState(false)
+  const [processing, setProcessing] = useState(true)
+  const [mode, setMode] = useState<"static" | "scrolling">("static")
+
+  const handleToggleActive = () => {
+    setActive(!active)
+    if (!active) {
+      setProcessing(false)
+    }
+  }
+
+  const handleToggleProcessing = () => {
+    setProcessing(!processing)
+    if (!processing) {
+      setActive(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Live Audio Waveform</CardTitle>
+        <CardDescription>
+          Real-time microphone input visualization with audio reactivity
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <LiveWaveform
+          active={active}
+          processing={processing}
+          height={80}
+          barWidth={3}
+          barGap={2}
+          mode={mode}
+          fadeEdges={true}
+          barColor="gray"
+          historySize={120}
+        />
+      </CardContent>
+      <CardFooter className="gap-2">
+        <Button
+          size="sm"
+          variant={active ? "default" : "outline"}
+          onClick={handleToggleActive}
+        >
+          {active ? "Stop" : "Start"} Listening
+        </Button>
+        <Button
+          size="sm"
+          variant={processing ? "default" : "outline"}
+          onClick={handleToggleProcessing}
+        >
+          {processing ? "Stop" : "Start"} Processing
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => setMode(mode === "static" ? "scrolling" : "static")}
+        >
+          {mode === "static" ? "Static" : "Scrolling"}
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/no-team-members.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/no-team-members.tsx
new file mode 100644
index 0000000000..76262ccf71
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/no-team-members.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/registry/bases/base/ui/avatar"
+import { Button } from "@/registry/bases/base/ui/button"
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/registry/bases/base/ui/empty"
+
+export function NoTeamMembers() {
+  return (
+    <Card>
+      <CardContent>
+        <Empty className="h-56 border">
+          <EmptyHeader>
+            <EmptyMedia>
+              <AvatarGroup className="grayscale">
+                <Avatar size="lg">
+                  <AvatarImage
+                    src="https://github.com/shadcn.png"
+                    alt="@shadcn"
+                  />
+                  <AvatarFallback>CN</AvatarFallback>
+                </Avatar>
+                <Avatar size="lg">
+                  <AvatarImage
+                    src="https://github.com/maxleiter.png"
+                    alt="@maxleiter"
+                  />
+                  <AvatarFallback>LR</AvatarFallback>
+                </Avatar>
+                <Avatar size="lg">
+                  <AvatarImage
+                    src="https://github.com/evilrabbit.png"
+                    alt="@evilrabbit"
+                  />
+                  <AvatarFallback>ER</AvatarFallback>
+                </Avatar>
+              </AvatarGroup>
+            </EmptyMedia>
+            <EmptyTitle>No Team Members</EmptyTitle>
+            <EmptyDescription>
+              Invite your team to collaborate on this project.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button size="sm">Invite Members</Button>
+          </EmptyContent>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/not-found.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/not-found.tsx
new file mode 100644
index 0000000000..92bc1fd9b4
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/not-found.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/registry/bases/base/ui/empty"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/registry/bases/base/ui/input-group"
+import { Kbd } from "@/registry/bases/base/ui/kbd"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function NotFound() {
+  return (
+    <Card>
+      <CardContent>
+        <Empty className="h-72">
+          <EmptyHeader>
+            <EmptyTitle>404 - Not Found</EmptyTitle>
+            <EmptyDescription>
+              The page you&apos;re looking for doesn&apos;t exist. Try searching
+              for what you need below.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <InputGroup className="w-3/4">
+              <InputGroupInput placeholder="Try searching for pages..." />
+              <InputGroupAddon>
+                <IconPlaceholder
+                  lucide="SearchIcon"
+                  tabler="IconSearch"
+                  hugeicons="Search01Icon"
+                  phosphor="MagnifyingGlassIcon"
+                  remixicon="RiSearchLine"
+                />
+              </InputGroupAddon>
+              <InputGroupAddon align="inline-end">
+                <Kbd>/</Kbd>
+              </InputGroupAddon>
+            </InputGroup>
+            <Button variant="link">Go to homepage</Button>
+          </EmptyContent>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/observability-card.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/observability-card.tsx
new file mode 100644
index 0000000000..6ba293ead7
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/observability-card.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function ObservabilityCard() {
+  return (
+    <Card className="relative w-full max-w-md overflow-hidden pt-0">
+      <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
+      <img
+        src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Photo by mymind on Unsplash"
+        title="Photo by mymind on Unsplash"
+        className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
+      />
+      <CardHeader>
+        <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
+        <CardDescription>
+          Switch to the improved way to explore your data, with natural
+          language. Monitoring will no longer be available on the Pro plan in
+          November, 2025
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button>
+          Create Query{" "}
+          <IconPlaceholder
+            lucide="PlusIcon"
+            tabler="IconPlus"
+            hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
+            remixicon="RiAddLine"
+            data-icon="inline-end"
+          />
+        </Button>
+        <Badge variant="secondary" className="ml-auto">
+          Warning
+        </Badge>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/pie-chart-card.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/pie-chart-card.tsx
new file mode 100644
index 0000000000..b5acd0b47f
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/pie-chart-card.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { Label, Pie, PieChart } from "recharts"
+
+import { Badge } from "@/registry/bases/base/ui/badge"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/base/ui/chart"
+import { Progress } from "@/registry/bases/base/ui/progress"
+
+const pieChartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const pieChartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function PieChartCard() {
+  const totalVisitors = pieChartData.reduce(
+    (sum, item) => sum + item.visitors,
+    0
+  )
+  const topBrowser = pieChartData.reduce((max, item) =>
+    item.visitors > max.visitors ? item : max
+  )
+  const topBrowserShare = Math.round(
+    (topBrowser.visitors / totalVisitors) * 100
+  )
+  const topBrowserLabel =
+    pieChartConfig[topBrowser.browser as keyof typeof pieChartConfig]?.label ??
+    "Top"
+
+  return (
+    <Card>
+      <CardHeader className="pb-0">
+        <CardTitle>Browser Share</CardTitle>
+        <CardDescription>January - June 2026</CardDescription>
+        <CardAction>
+          <Badge variant="outline">{topBrowserLabel}</Badge>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <ChartContainer
+          config={pieChartConfig}
+          className="mx-auto aspect-square max-h-[190px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={pieChartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={50}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-2xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 20}
+                          className="fill-muted-foreground text-xs"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+            <ChartLegend
+              content={<ChartLegendContent nameKey="browser" />}
+              className="translate-y-2"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-stretch gap-2">
+        <div className="flex items-center text-xs">
+          <span className="font-medium">{topBrowserLabel}</span>
+          <span className="ml-auto text-muted-foreground tabular-nums">
+            {topBrowserShare}%
+          </span>
+        </div>
+        <Progress
+          value={topBrowserShare}
+          className="**:data-[slot=progress-indicator]:bg-chart-3"
+        />
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx
new file mode 100644
index 0000000000..c2d01be313
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/report-bug.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/base/ui/field"
+import { Input } from "@/registry/bases/base/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/bases/base/ui/select"
+import { Textarea } from "@/registry/bases/base/ui/textarea"
+
+export function ReportBug() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Report Bug</CardTitle>
+        <CardDescription>Help us fix issues faster.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="bug-title">Title</FieldLabel>
+            <Input
+              id="bug-title"
+              placeholder="Brief description of the issue"
+            />
+          </Field>
+          <div className="grid grid-cols-2 gap-3">
+            <Field>
+              <FieldLabel htmlFor="bug-severity">Severity</FieldLabel>
+              <Select
+                items={[
+                  { label: "Critical", value: "critical" },
+                  { label: "High", value: "high" },
+                  { label: "Medium", value: "medium" },
+                  { label: "Low", value: "low" },
+                ]}
+                defaultValue="medium"
+              >
+                <SelectTrigger id="bug-severity" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="critical">Critical</SelectItem>
+                    <SelectItem value="high">High</SelectItem>
+                    <SelectItem value="medium">Medium</SelectItem>
+                    <SelectItem value="low">Low</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="bug-component">Component</FieldLabel>
+              <Select
+                items={[
+                  { label: "Dashboard", value: "dashboard" },
+                  { label: "Auth", value: "auth" },
+                  { label: "API", value: "api" },
+                  { label: "Billing", value: "billing" },
+                ]}
+                defaultValue="dashboard"
+              >
+                <SelectTrigger id="bug-component" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="dashboard">Dashboard</SelectItem>
+                    <SelectItem value="auth">Auth</SelectItem>
+                    <SelectItem value="api">API</SelectItem>
+                    <SelectItem value="billing">Billing</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+          </div>
+          <Field>
+            <FieldLabel htmlFor="bug-steps">Steps to reproduce</FieldLabel>
+            <Textarea
+              id="bug-steps"
+              placeholder="1. Go to&#10;2. Click on&#10;3. Observe..."
+              className="min-h-24 resize-none"
+            />
+          </Field>
+        </FieldGroup>
+      </CardContent>
+      <CardFooter>
+        <Field orientation="horizontal" className="justify-end">
+          <Button variant="outline">Attach File</Button>
+          <Button>Submit Bug</Button>
+        </Field>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/shipping-address.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/shipping-address.tsx
new file mode 100644
index 0000000000..3543ab1921
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/shipping-address.tsx
@@ -0,0 +1,115 @@
+"use client"
+
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import { Checkbox } from "@/registry/bases/base/ui/checkbox"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/base/ui/field"
+import { Input } from "@/registry/bases/base/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/bases/base/ui/select"
+
+export function ShippingAddress() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Shipping Address</CardTitle>
+        <CardDescription>Where should we deliver?</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="shipping-street">Street address</FieldLabel>
+            <Input id="shipping-street" placeholder="123 Main Street" />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="shipping-apt">Apt / Suite</FieldLabel>
+            <Input id="shipping-apt" placeholder="Apt 4B" />
+          </Field>
+          <FieldGroup className="grid grid-cols-2">
+            <Field>
+              <FieldLabel htmlFor="shipping-city">City</FieldLabel>
+              <Input id="shipping-city" placeholder="San Francisco" />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="shipping-state">State</FieldLabel>
+              <Select
+                items={[
+                  { label: "California", value: "CA" },
+                  { label: "New York", value: "NY" },
+                  { label: "Texas", value: "TX" },
+                ]}
+                defaultValue="CA"
+              >
+                <SelectTrigger id="shipping-state" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="CA">California</SelectItem>
+                    <SelectItem value="NY">New York</SelectItem>
+                    <SelectItem value="TX">Texas</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+          </FieldGroup>
+          <FieldGroup className="grid grid-cols-2">
+            <Field>
+              <FieldLabel htmlFor="shipping-zip">ZIP Code</FieldLabel>
+              <Input id="shipping-zip" placeholder="94102" />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="shipping-country">Country</FieldLabel>
+              <Select
+                items={[
+                  { label: "United States", value: "US" },
+                  { label: "Canada", value: "CA" },
+                  { label: "United Kingdom", value: "UK" },
+                ]}
+                defaultValue="US"
+              >
+                <SelectTrigger id="shipping-country" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="US">United States</SelectItem>
+                    <SelectItem value="CA">Canada</SelectItem>
+                    <SelectItem value="UK">United Kingdom</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+          </FieldGroup>
+          <Field orientation="horizontal">
+            <Checkbox id="shipping-save" defaultChecked />
+            <FieldLabel htmlFor="shipping-save" className="font-normal">
+              Save as default address
+            </FieldLabel>
+          </Field>
+        </FieldGroup>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" size="sm">
+          Cancel
+        </Button>
+        <Button size="sm" className="ml-auto">
+          Save Address
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/shortcuts.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/shortcuts.tsx
new file mode 100644
index 0000000000..00f681a08e
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/shortcuts.tsx
@@ -0,0 +1,56 @@
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import { Kbd } from "@/registry/bases/base/ui/kbd"
+import { Separator } from "@/registry/bases/base/ui/separator"
+
+export function Shortcuts() {
+  return (
+    <Card>
+      <CardContent>
+        <div className="flex flex-col gap-3">
+          <div className="text-sm font-medium">Shortcuts</div>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>Search</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>K</Kbd>
+              </div>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>Quick Actions</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>J</Kbd>
+              </div>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>New File</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>N</Kbd>
+              </div>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>Save</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>S</Kbd>
+              </div>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>Toggle Sidebar</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>B</Kbd>
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/skeleton-loading.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/skeleton-loading.tsx
new file mode 100644
index 0000000000..9b58099b47
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/skeleton-loading.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import { Skeleton } from "@/registry/bases/base/ui/skeleton"
+
+export function SkeletonLoading() {
+  return (
+    <Card>
+      <CardContent className="flex flex-col gap-4">
+        <div className="flex items-center gap-3">
+          <Skeleton className="size-10 rounded-full" />
+          <div className="flex flex-1 flex-col gap-2">
+            <Skeleton className="h-4 w-3/4" />
+            <Skeleton className="h-3 w-1/2" />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-4/5" />
+        </div>
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-20" />
+          <Skeleton className="h-8 w-20" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/sleep-report.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/sleep-report.tsx
new file mode 100644
index 0000000000..19e5aee290
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/sleep-report.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { Bar, BarChart } from "recharts"
+
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Button } from "@/registry/bases/base/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  ChartContainer,
+  type ChartConfig,
+} from "@/registry/bases/base/ui/chart"
+
+const sleepChartData = [
+  { hour: "10pm", deep: 0, light: 30, rem: 0 },
+  { hour: "11pm", deep: 20, light: 10, rem: 0 },
+  { hour: "12am", deep: 40, light: 0, rem: 10 },
+  { hour: "1am", deep: 30, light: 5, rem: 15 },
+  { hour: "2am", deep: 10, light: 20, rem: 30 },
+  { hour: "3am", deep: 25, light: 10, rem: 20 },
+  { hour: "4am", deep: 15, light: 25, rem: 10 },
+  { hour: "5am", deep: 5, light: 35, rem: 15 },
+  { hour: "6am", deep: 0, light: 20, rem: 25 },
+]
+
+const sleepChartConfig = {
+  deep: {
+    label: "Deep",
+    color: "var(--chart-1)",
+  },
+  light: {
+    label: "Light",
+    color: "var(--chart-2)",
+  },
+  rem: {
+    label: "REM",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig
+
+export function SleepReport() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sleep Report</CardTitle>
+        <CardDescription>Last night · 7h 24m</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <ChartContainer config={sleepChartConfig} className="h-32 w-full">
+          <BarChart
+            accessibilityLayer
+            data={sleepChartData}
+            margin={{ left: 0, right: 0 }}
+            barSize={16}
+          >
+            <Bar
+              dataKey="deep"
+              stackId="a"
+              fill="var(--color-deep)"
+              radius={0}
+            />
+            <Bar
+              dataKey="light"
+              stackId="a"
+              fill="var(--color-light)"
+              radius={0}
+            />
+            <Bar
+              dataKey="rem"
+              stackId="a"
+              fill="var(--color-rem)"
+              radius={[2, 2, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+        <div className="grid grid-cols-4 gap-2">
+          {[
+            { label: "Deep", value: "2h 10m" },
+            { label: "Light", value: "3h 48m" },
+            { label: "REM", value: "1h 26m" },
+            { label: "Score", value: "84" },
+          ].map((s) => (
+            <div key={s.label} className="text-center">
+              <div className="text-sm font-medium tabular-nums">{s.value}</div>
+              <div className="text-xs text-muted-foreground">{s.label}</div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Badge variant="outline">Good</Badge>
+        <Button variant="outline" size="sm" className="ml-auto">
+          Details
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/style-overview.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/style-overview.tsx
new file mode 100644
index 0000000000..4154bc8292
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/style-overview.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import { STYLES } from "@/registry/styles"
+import { FONTS } from "@/app/(create)/lib/fonts"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function StyleOverview() {
+  const [params] = useDesignSystemSearchParams()
+
+  const currentFont = React.useMemo(
+    () => FONTS.find((font) => font.value === params.font),
+    [params.font]
+  )
+
+  const currentStyle = React.useMemo(
+    () => STYLES.find((style) => style.name === params.style),
+    [params.style]
+  )
+
+  return (
+    <Card>
+      <CardContent className="flex flex-col gap-6">
+        <div className="flex flex-col gap-1">
+          <div className="text-2xl font-medium">
+            {currentStyle?.title} - {currentFont?.name}
+          </div>
+          <div className="line-clamp-2 text-base text-muted-foreground">
+            Designers love packing quirky glyphs into test phrases. This is a
+            preview of the typography styles.
+          </div>
+        </div>
+        <div className="grid grid-cols-6 gap-3">
+          {[
+            "--background",
+            "--foreground",
+            "--primary",
+            "--secondary",
+            "--muted",
+            "--accent",
+            "--destructive",
+            "--chart-1",
+            "--chart-2",
+            "--chart-3",
+            "--chart-4",
+            "--chart-5",
+          ].map((variant) => (
+            <div
+              key={variant}
+              className="flex flex-col flex-wrap items-center gap-2"
+            >
+              <div
+                className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten"
+                style={
+                  {
+                    "--color": `var(${variant})`,
+                  } as React.CSSProperties
+                }
+              />
+              <div className="hidden max-w-14 truncate font-mono text-[0.60rem] md:block">
+                {variant}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx
new file mode 100644
index 0000000000..0a657fac4d
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/ui-elements.tsx
@@ -0,0 +1,197 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/bases/base/ui/alert-dialog"
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Button } from "@/registry/bases/base/ui/button"
+import { ButtonGroup } from "@/registry/bases/base/ui/button-group"
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import { Checkbox } from "@/registry/bases/base/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/bases/base/ui/dropdown-menu"
+import { Field, FieldGroup } from "@/registry/bases/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@/registry/bases/base/ui/input-group"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/registry/bases/base/ui/item"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/bases/base/ui/radio-group"
+import { Slider } from "@/registry/bases/base/ui/slider"
+import { Switch } from "@/registry/bases/base/ui/switch"
+import { Textarea } from "@/registry/bases/base/ui/textarea"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function UIElements() {
+  const [sliderValue, setSliderValue] = React.useState<number[]>([500])
+  const handleSliderValueChange = React.useCallback(
+    (value: number | readonly number[]) => {
+      if (typeof value === "number") {
+        setSliderValue([value])
+      } else {
+        setSliderValue([...value])
+      }
+    },
+    []
+  )
+
+  return (
+    <Card className="w-full">
+      <CardContent className="flex flex-col gap-6">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-wrap gap-2">
+            <Button>Button</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="destructive">Delete</Button>
+          </div>
+          <Item variant="outline">
+            <ItemContent>
+              <ItemTitle>Two-factor authentication</ItemTitle>
+              <ItemDescription className="text-pretty xl:hidden 2xl:block">
+                Verify via email or phone number.
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions className="hidden md:flex">
+              <Button size="sm" variant="secondary">
+                Enable
+              </Button>
+            </ItemActions>
+          </Item>
+        </div>
+        <Slider
+          value={sliderValue}
+          onValueChange={handleSliderValueChange}
+          max={1000}
+          min={0}
+          step={10}
+          className="flex-1"
+          aria-label="Slider"
+        />
+        <FieldGroup>
+          <Field>
+            <InputGroup>
+              <InputGroupInput placeholder="Name" />
+              <InputGroupAddon align="inline-end">
+                <InputGroupText>
+                  <IconPlaceholder
+                    lucide="SearchIcon"
+                    tabler="IconSearch"
+                    hugeicons="Search01Icon"
+                    phosphor="MagnifyingGlassIcon"
+                    remixicon="RiSearchLine"
+                  />
+                </InputGroupText>
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field className="flex-1">
+            <Textarea placeholder="Message" className="resize-none" />
+          </Field>
+        </FieldGroup>
+        <div className="flex items-center gap-2">
+          <div className="flex gap-2">
+            <Badge>Badge</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="outline">Outline</Badge>
+          </div>
+          <RadioGroup defaultValue="apple" className="ml-auto flex w-fit gap-3">
+            <RadioGroupItem value="apple" />
+            <RadioGroupItem value="banana" />
+          </RadioGroup>
+          <div className="flex gap-3">
+            <Checkbox defaultChecked />
+            <Checkbox />
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <AlertDialog>
+            <AlertDialogTrigger render={<Button variant="outline" />}>
+              <span className="hidden md:block">Alert Dialog</span>
+              <span className="block md:hidden">Dialog</span>
+            </AlertDialogTrigger>
+            <AlertDialogContent size="sm">
+              <AlertDialogHeader>
+                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Do you want to allow the USB accessory to connect to this
+                  device and your data?
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
+                <AlertDialogAction>Allow</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+          <ButtonGroup>
+            <Button variant="outline">Button Group</Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={<Button variant="outline" size="icon" />}
+              >
+                <IconPlaceholder
+                  lucide="ChevronUpIcon"
+                  tabler="IconChevronUp"
+                  hugeicons="ArrowUp01Icon"
+                  phosphor="CaretUpIcon"
+                  remixicon="RiArrowUpSLine"
+                />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" side="top" className="w-40">
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
+                  <DropdownMenuItem>Mute Conversation</DropdownMenuItem>
+                  <DropdownMenuItem>Mark as Read</DropdownMenuItem>
+                  <DropdownMenuItem>Block User</DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>Conversation</DropdownMenuLabel>
+                  <DropdownMenuItem>Share Conversation</DropdownMenuItem>
+                  <DropdownMenuItem>Copy Conversation</DropdownMenuItem>
+                  <DropdownMenuItem>Report Conversation</DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem variant="destructive">
+                    Delete Conversation
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </ButtonGroup>
+          <Switch defaultChecked className="ml-auto" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/usage-card.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/usage-card.tsx
new file mode 100644
index 0000000000..601a0a4c9a
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/usage-card.tsx
@@ -0,0 +1,134 @@
+"use client"
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/registry/bases/base/ui/item"
+
+// Usage items with percentage and value.
+const items = [
+  {
+    name: "Edge Requests",
+    value: "$1.83K",
+    percentage: 67.34,
+  },
+  {
+    name: "Fast Data Transfer",
+    percentage: 52.18,
+    value: "$952.51",
+  },
+  {
+    name: "Monitoring data points",
+    percentage: 89.42,
+    value: "$901.20",
+  },
+  {
+    name: "Web Analytics Events",
+    percentage: 45.67,
+    value: "$603.71",
+  },
+  {
+    name: "ISR Writes",
+    percentage: 26.23,
+    value: "524.52K / 2M",
+  },
+  {
+    name: "Function Duration",
+    percentage: 5.11,
+    value: "5.11 GB Hrs / 1K GB Hrs",
+  },
+]
+
+// Circular gauge SVG component for displaying a percentage.
+function CircularGauge({ percentage }: { percentage: number }) {
+  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)
+  const circumference = 2 * Math.PI * 42.5
+  const strokePercent = (normalizedPercentage / 100) * circumference
+
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="16"
+      width="16"
+      strokeWidth="2"
+      viewBox="0 0 100 100"
+      className="-rotate-90"
+    >
+      <circle
+        cx="50"
+        cy="50"
+        r="42.5"
+        strokeWidth="12"
+        strokeDashoffset="0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="opacity-20"
+        stroke="currentColor"
+        style={{
+          strokeDasharray: `${circumference} ${circumference}`,
+        }}
+      />
+      <circle
+        cx="50"
+        cy="50"
+        r="42.5"
+        strokeWidth="12"
+        strokeDashoffset="0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+        className="transition-all duration-300"
+        style={{
+          strokeDasharray: `${strokePercent} ${circumference}`,
+        }}
+      />
+    </svg>
+  )
+}
+
+export function UsageCard() {
+  return (
+    <Card className="w-full max-w-sm gap-4">
+      <CardHeader>
+        <CardTitle className="px-1 text-sm">
+          5 days remaining in cycle
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ItemGroup className="gap-0">
+          {items.map((item) => (
+            <Item
+              key={item.name}
+              size="xs"
+              className="px-0 group-hover/item-group:bg-transparent"
+              render={<a href="#" />}
+            >
+              <ItemMedia variant="icon" className="text-primary">
+                <CircularGauge percentage={item.percentage} />
+              </ItemMedia>
+              <ItemContent className="inline-block truncate">
+                <ItemTitle className="inline">{item.name}</ItemTitle>
+              </ItemContent>
+              <ItemActions>
+                <span className="font-mono text-xs font-medium text-muted-foreground tabular-nums">
+                  {item.value}
+                </span>
+              </ItemActions>
+            </Item>
+          ))}
+        </ItemGroup>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/visitors.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/visitors.tsx
new file mode 100644
index 0000000000..49cf97827a
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/visitors.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { Area, AreaChart, XAxis } from "recharts"
+
+import { Badge } from "@/registry/bases/base/ui/badge"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/base/ui/chart"
+
+const areaChartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const areaChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+const latestVisitors = areaChartData[areaChartData.length - 1]?.desktop ?? 0
+const previousVisitors =
+  areaChartData[areaChartData.length - 2]?.desktop ?? latestVisitors
+const trendPercent =
+  previousVisitors === 0
+    ? 0
+    : Math.round(((latestVisitors - previousVisitors) / previousVisitors) * 100)
+const trendPrefix = trendPercent > 0 ? "+" : ""
+
+export function Visitors() {
+  return (
+    <Card className="pb-0">
+      <CardHeader>
+        <CardTitle>Visitors</CardTitle>
+        <CardDescription>Last 6 months </CardDescription>
+        <CardAction>
+          <Badge variant={trendPercent >= 0 ? "secondary" : "destructive"}>
+            {trendPrefix}
+            {trendPercent}% vs last month
+          </Badge>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-0">
+        <ChartContainer config={areaChartConfig} className="h-48 w-full">
+          <AreaChart
+            accessibilityLayer
+            data={areaChartData}
+            margin={{ left: 0, right: 0, top: 6, bottom: 0 }}
+          >
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              hide
+              axisLine={false}
+              tickMargin={6}
+              tickFormatter={(value) => String(value).slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.15}
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/cards/weekly-fitness-summary.tsx b/apps/v4/registry/bases/base/blocks/preview/cards/weekly-fitness-summary.tsx
new file mode 100644
index 0000000000..d6bb1c2b18
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/cards/weekly-fitness-summary.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/base/ui/card"
+
+const FITNESS_WEEKLY_LOAD = [
+  { day: "M", load: 84 },
+  { day: "T", load: 52 },
+  { day: "W", load: 73 },
+  { day: "T", load: 66 },
+  { day: "F", load: 91 },
+  { day: "S", load: 48 },
+  { day: "S", load: 61 },
+]
+
+export function WeeklyFitnessSummary() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Weekly Fitness Summary</CardTitle>
+        <CardDescription>Calories and workout load by day</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="grid grid-cols-7 gap-1.5">
+          {FITNESS_WEEKLY_LOAD.map((day, index) => (
+            <div
+              key={`${day.day}-${index}`}
+              className="rounded-md p-1.5 text-center ring ring-border"
+            >
+              <div className="text-sm text-muted-foreground">{day.day}</div>
+              <div className="relative mt-1 h-16 overflow-hidden rounded-sm bg-muted">
+                <div
+                  className="absolute inset-x-0 bottom-0 rounded-sm bg-chart-3"
+                  style={
+                    {
+                      height: `${day.load}%`,
+                    } as React.CSSProperties
+                  }
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/preview/index.tsx b/apps/v4/registry/bases/base/blocks/preview/index.tsx
new file mode 100644
index 0000000000..20fc960a21
--- /dev/null
+++ b/apps/v4/registry/bases/base/blocks/preview/index.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { ActivateAgentDialog } from "@/registry/bases/base/blocks/preview/cards/activate-agent-dialog"
+import { AnalyticsCard } from "@/registry/bases/base/blocks/preview/cards/analytics-card"
+import { AnomalyAlert } from "@/registry/bases/base/blocks/preview/cards/anomaly-alert"
+import { AssignIssue } from "@/registry/bases/base/blocks/preview/cards/assign-issue"
+import { BarChartCard } from "@/registry/bases/base/blocks/preview/cards/bar-chart-card"
+import { BarVisualizerCard } from "@/registry/bases/base/blocks/preview/cards/bar-visualizer"
+import { BookAppointment } from "@/registry/bases/base/blocks/preview/cards/book-appointment"
+import { CodespacesCard } from "@/registry/bases/base/blocks/preview/cards/codespaces-card"
+import { ContributionsActivity } from "@/registry/bases/base/blocks/preview/cards/contributions-activity"
+import { Contributors } from "@/registry/bases/base/blocks/preview/cards/contributors"
+import { EnvironmentVariables } from "@/registry/bases/base/blocks/preview/cards/environment-variables"
+import { FeedbackForm } from "@/registry/bases/base/blocks/preview/cards/feedback-form"
+import { FileUpload } from "@/registry/bases/base/blocks/preview/cards/file-upload"
+import { GithubProfile } from "@/registry/bases/base/blocks/preview/cards/github-profile"
+import { IconPreviewGrid } from "@/registry/bases/base/blocks/preview/cards/icon-preview-grid"
+import { InviteTeam } from "@/registry/bases/base/blocks/preview/cards/invite-team"
+import { Invoice } from "@/registry/bases/base/blocks/preview/cards/invoice"
+import { LiveWaveformCard } from "@/registry/bases/base/blocks/preview/cards/live-waveform"
+import { NoTeamMembers } from "@/registry/bases/base/blocks/preview/cards/no-team-members"
+import { NotFound } from "@/registry/bases/base/blocks/preview/cards/not-found"
+import { ObservabilityCard } from "@/registry/bases/base/blocks/preview/cards/observability-card"
+import { PieChartCard } from "@/registry/bases/base/blocks/preview/cards/pie-chart-card"
+import { ReportBug } from "@/registry/bases/base/blocks/preview/cards/report-bug"
+import { ShippingAddress } from "@/registry/bases/base/blocks/preview/cards/shipping-address"
+import { Shortcuts } from "@/registry/bases/base/blocks/preview/cards/shortcuts"
+import { SkeletonLoading } from "@/registry/bases/base/blocks/preview/cards/skeleton-loading"
+import { SleepReport } from "@/registry/bases/base/blocks/preview/cards/sleep-report"
+import { StyleOverview } from "@/registry/bases/base/blocks/preview/cards/style-overview"
+import { UIElements } from "@/registry/bases/base/blocks/preview/cards/ui-elements"
+import { UsageCard } from "@/registry/bases/base/blocks/preview/cards/usage-card"
+import { Visitors } from "@/registry/bases/base/blocks/preview/cards/visitors"
+import { WeeklyFitnessSummary } from "@/registry/bases/base/blocks/preview/cards/weekly-fitness-summary"
+
+export default function PreviewExample() {
+  return (
+    <div className="overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]">
+      <div
+        className="grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)"
+        data-slot="capture-target"
+      >
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <StyleOverview />
+          <div className="md:hidden">
+            <UIElements />
+          </div>
+          <CodespacesCard />
+          <BarVisualizerCard />
+          <Invoice />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <IconPreviewGrid />
+          <div className="hidden w-full md:flex">
+            <UIElements />
+          </div>
+          <ObservabilityCard />
+          <Visitors />
+          <Shortcuts />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <EnvironmentVariables />
+          <BarChartCard />
+          <InviteTeam />
+          <ActivateAgentDialog />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <SkeletonLoading />
+          <PieChartCard />
+          <NoTeamMembers />
+          <ReportBug />
+          <Contributors />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <FeedbackForm />
+          <BookAppointment />
+          <SleepReport />
+          <GithubProfile />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <AssignIssue />
+          <WeeklyFitnessSummary />
+          <FileUpload />
+          <AnalyticsCard />
+          <UsageCard />
+          <ContributionsActivity />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <AnomalyAlert />
+          <LiveWaveformCard />
+          <ShippingAddress />
+          <NotFound />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-01/components/version-switcher.tsx b/apps/v4/registry/bases/base/blocks/sidebar-01/components/version-switcher.tsx
index 320766eeee..d0d67e7e22 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-01/components/version-switcher.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-01/components/version-switcher.tsx
@@ -35,7 +35,7 @@ export function VersionSwitcher({
               />
             }
           >
-            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
               <IconPlaceholder
                 lucide="GalleryVerticalEndIcon"
                 tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-01/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-01/page.tsx
index 86c2ee7504..3dde24cb09 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-01/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-01/page.tsx
@@ -39,11 +39,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-02/components/app-sidebar.tsx b/apps/v4/registry/bases/base/blocks/sidebar-02/components/app-sidebar.tsx
index 88edb5ede7..1c6507524a 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-02/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-02/components/app-sidebar.tsx
@@ -185,7 +185,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           >
             <SidebarGroup>
               <SidebarGroupLabel
-                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
+                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                 render={<CollapsibleTrigger />}
               >
                 {item.title}{" "}
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-02/components/version-switcher.tsx b/apps/v4/registry/bases/base/blocks/sidebar-02/components/version-switcher.tsx
index 320766eeee..d0d67e7e22 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-02/components/version-switcher.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-02/components/version-switcher.tsx
@@ -35,7 +35,7 @@ export function VersionSwitcher({
               />
             }
           >
-            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
               <IconPlaceholder
                 lucide="GalleryVerticalEndIcon"
                 tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-02/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-02/page.tsx
index 62d50e77f3..a9861431d5 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-02/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-02/page.tsx
@@ -19,7 +19,7 @@ export default function Page() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
           <SidebarTrigger className="-ml-1" />
           <Separator
             orientation="vertical"
@@ -41,7 +41,7 @@ export default function Page() {
           {Array.from({ length: 24 }).map((_, index) => (
             <div
               key={index}
-              className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
             />
           ))}
         </div>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-03/components/app-sidebar.tsx b/apps/v4/registry/bases/base/blocks/sidebar-03/components/app-sidebar.tsx
index 6003d909f8..26df01e494 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-03/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-03/components/app-sidebar.tsx
@@ -164,7 +164,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" render={<a href="#" />}>
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <IconPlaceholder
                   lucide="GalleryVerticalEndIcon"
                   tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-03/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-03/page.tsx
index 9f248ccc4b..3dea7a20d1 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-03/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-03/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-04/components/app-sidebar.tsx b/apps/v4/registry/bases/base/blocks/sidebar-04/components/app-sidebar.tsx
index bb77525021..7f2f20d95f 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-04/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-04/components/app-sidebar.tsx
@@ -163,7 +163,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" render={<a href="#" />}>
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <IconPlaceholder
                   lucide="GalleryVerticalEndIcon"
                   tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-04/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-04/page.tsx
index 0eeb2b44f1..c0c08e0f3a 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-04/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-04/page.tsx
@@ -45,11 +45,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-05/components/app-sidebar.tsx b/apps/v4/registry/bases/base/blocks/sidebar-05/components/app-sidebar.tsx
index 235d70219c..67dce250fc 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-05/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-05/components/app-sidebar.tsx
@@ -170,7 +170,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" render={<a href="#" />}>
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <IconPlaceholder
                   lucide="GalleryVerticalEndIcon"
                   tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-05/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-05/page.tsx
index 32dcfd02c2..eb4266dec9 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-05/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-05/page.tsx
@@ -39,11 +39,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-06/components/app-sidebar.tsx b/apps/v4/registry/bases/base/blocks/sidebar-06/components/app-sidebar.tsx
index 163a643847..2575227d35 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-06/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-06/components/app-sidebar.tsx
@@ -153,7 +153,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" render={<a href="#" />}>
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <IconPlaceholder
                   lucide="GalleryVerticalEndIcon"
                   tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/v4/registry/bases/base/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
index 084e760fb7..a0bbe24479 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
@@ -21,7 +21,7 @@ export function SidebarOptInForm() {
         <form>
           <div className="grid gap-2.5">
             <SidebarInput type="email" placeholder="Email" />
-            <Button className="bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none">
+            <Button className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none">
               Subscribe
             </Button>
           </div>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-06/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-06/page.tsx
index 625b10121d..fff79187af 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-06/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-06/page.tsx
@@ -39,11 +39,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-07/components/team-switcher.tsx b/apps/v4/registry/bases/base/blocks/sidebar-07/components/team-switcher.tsx
index 726f325f5d..67c20d9c95 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-07/components/team-switcher.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-07/components/team-switcher.tsx
@@ -46,7 +46,7 @@ export function TeamSwitcher({
               />
             }
           >
-            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
               {activeTeam.logo}
             </div>
             <div className="grid flex-1 text-left text-sm leading-tight">
@@ -69,7 +69,7 @@ export function TeamSwitcher({
             sideOffset={4}
           >
             <DropdownMenuGroup>
-              <DropdownMenuLabel className="text-muted-foreground text-xs">
+              <DropdownMenuLabel className="text-xs text-muted-foreground">
                 Teams
               </DropdownMenuLabel>
               {teams.map((team, index) => (
@@ -99,7 +99,7 @@ export function TeamSwitcher({
                     className="size-4"
                   />
                 </div>
-                <div className="text-muted-foreground font-medium">
+                <div className="font-medium text-muted-foreground">
                   Add team
                 </div>
               </DropdownMenuItem>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-07/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-07/page.tsx
index 313a66f373..e42aa48cc0 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-07/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-07/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-08/components/app-sidebar.tsx b/apps/v4/registry/bases/base/blocks/sidebar-08/components/app-sidebar.tsx
index aa1763b47d..44dccd3c97 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-08/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-08/components/app-sidebar.tsx
@@ -219,7 +219,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" render={<a href="#" />}>
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <IconPlaceholder
                   lucide="TerminalIcon"
                   tabler="IconCommand"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-08/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-08/page.tsx
index 7445a09264..6f58b22637 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-08/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-08/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-09/components/app-sidebar.tsx b/apps/v4/registry/bases/base/blocks/sidebar-09/components/app-sidebar.tsx
index 253d785e39..e7690a8b65 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-09/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-09/components/app-sidebar.tsx
@@ -209,7 +209,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 className="md:h-8 md:p-0"
                 render={<a href="#" />}
               >
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <IconPlaceholder
                     lucide="TerminalIcon"
                     tabler="IconCommand"
@@ -271,7 +271,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       <Sidebar collapsible="none" className="hidden flex-1 md:flex">
         <SidebarHeader className="gap-3.5 border-b p-4">
           <div className="flex w-full items-center justify-between">
-            <div className="text-foreground text-base font-medium">
+            <div className="text-base font-medium text-foreground">
               {activeItem?.title}
             </div>
             <Label className="flex items-center gap-2 text-sm">
@@ -288,7 +288,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 <a
                   href="#"
                   key={mail.email}
-                  className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0"
+                  className="flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                 >
                   <div className="flex w-full items-center gap-2">
                     <span>{mail.name}</span>{" "}
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-09/components/nav-user.tsx b/apps/v4/registry/bases/base/blocks/sidebar-09/components/nav-user.tsx
index e8c1dbdfb7..8a4127b60d 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-09/components/nav-user.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-09/components/nav-user.tsx
@@ -40,7 +40,7 @@ export function NavUser({
             render={
               <SidebarMenuButton
                 size="lg"
-                className="data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground md:h-8 md:p-0"
+                className="md:h-8 md:p-0 data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground"
               />
             }
           >
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-09/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-09/page.tsx
index f2b25e95c5..275e70d2b2 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-09/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-09/page.tsx
@@ -25,7 +25,7 @@ export default function Page() {
     >
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4">
+        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
           <SidebarTrigger className="-ml-1" />
           <Separator
             orientation="vertical"
@@ -47,7 +47,7 @@ export default function Page() {
           {Array.from({ length: 24 }).map((_, index) => (
             <div
               key={index}
-              className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
             />
           ))}
         </div>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-10/components/nav-actions.tsx b/apps/v4/registry/bases/base/blocks/sidebar-10/components/nav-actions.tsx
index 3889d37341..94a0b7c735 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-10/components/nav-actions.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-10/components/nav-actions.tsx
@@ -192,7 +192,7 @@ export function NavActions() {
   }, [])
   return (
     <div className="flex items-center gap-2 text-sm">
-      <div className="text-muted-foreground hidden font-medium md:inline-block">
+      <div className="hidden font-medium text-muted-foreground md:inline-block">
         Edit Oct 08
       </div>
       <Button variant="ghost" size="icon" className="h-7 w-7">
@@ -210,7 +210,7 @@ export function NavActions() {
             <Button
               variant="ghost"
               size="icon"
-              className="data-open:bg-accent h-7 w-7"
+              className="h-7 w-7 data-open:bg-accent"
             />
           }
         >
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-10/components/nav-workspaces.tsx b/apps/v4/registry/bases/base/blocks/sidebar-10/components/nav-workspaces.tsx
index b851cca2b1..bd6bed9188 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-10/components/nav-workspaces.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-10/components/nav-workspaces.tsx
@@ -45,7 +45,7 @@ export function NavWorkspaces({
                 </SidebarMenuButton>
                 <SidebarMenuAction
                   render={<CollapsibleTrigger />}
-                  className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90"
+                  className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90"
                   showOnHover
                 >
                   <IconPlaceholder
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-10/components/team-switcher.tsx b/apps/v4/registry/bases/base/blocks/sidebar-10/components/team-switcher.tsx
index 0095529d13..4ecb1d020c 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-10/components/team-switcher.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-10/components/team-switcher.tsx
@@ -39,7 +39,7 @@ export function TeamSwitcher({
           <DropdownMenuTrigger
             render={<SidebarMenuButton className="w-fit px-1.5" />}
           >
-            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+            <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
               {activeTeam.logo}
             </div>
             <span className="truncate font-medium">{activeTeam.name}</span>
@@ -59,7 +59,7 @@ export function TeamSwitcher({
             sideOffset={4}
           >
             <DropdownMenuGroup>
-              <DropdownMenuLabel className="text-muted-foreground text-xs">
+              <DropdownMenuLabel className="text-xs text-muted-foreground">
                 Teams
               </DropdownMenuLabel>
               {teams.map((team, index) => (
@@ -79,7 +79,7 @@ export function TeamSwitcher({
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
               <DropdownMenuItem className="gap-2 p-2">
-                <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+                <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                   <IconPlaceholder
                     lucide="PlusIcon"
                     tabler="IconPlus"
@@ -89,7 +89,7 @@ export function TeamSwitcher({
                     className="size-4"
                   />
                 </div>
-                <div className="text-muted-foreground font-medium">
+                <div className="font-medium text-muted-foreground">
                   Add team
                 </div>
               </DropdownMenuItem>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-10/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-10/page.tsx
index 7b0205eb70..f73475c82a 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-10/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-10/page.tsx
@@ -40,8 +40,8 @@ export default function Page() {
           </div>
         </header>
         <div className="flex flex-1 flex-col gap-4 px-4 py-10">
-          <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-          <div className="bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl" />
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-11/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-11/page.tsx
index f95356b5a3..58e6c0bd51 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-11/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-11/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-12/components/app-sidebar.tsx b/apps/v4/registry/bases/base/blocks/sidebar-12/components/app-sidebar.tsx
index a21f0a9656..bdb51a2d2f 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-12/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-12/components/app-sidebar.tsx
@@ -44,7 +44,7 @@ const data = {
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar {...props}>
-      <SidebarHeader className="border-sidebar-border h-16 border-b">
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
         <NavUser user={data.user} />
       </SidebarHeader>
       <SidebarContent>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-12/components/calendars.tsx b/apps/v4/registry/bases/base/blocks/sidebar-12/components/calendars.tsx
index bfd1d4b78a..b03f9dae47 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-12/components/calendars.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-12/components/calendars.tsx
@@ -36,7 +36,7 @@ export function Calendars({
               className="group/collapsible"
             >
               <SidebarGroupLabel
-                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                 render={<CollapsibleTrigger />}
               >
                 {calendar.name}{" "}
@@ -57,7 +57,7 @@ export function Calendars({
                         <SidebarMenuButton>
                           <div
                             data-active={index < 2}
-                            className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
                           >
                             <IconPlaceholder
                               lucide="CheckIcon"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-12/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-12/page.tsx
index 927489c7aa..c2bf46559c 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-12/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-12/page.tsx
@@ -17,7 +17,7 @@ export default function Page() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
           <SidebarTrigger className="-ml-1" />
           <Separator
             orientation="vertical"
@@ -34,7 +34,7 @@ export default function Page() {
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-5">
             {Array.from({ length: 20 }).map((_, i) => (
-              <div key={i} className="bg-muted/50 aspect-square rounded-xl" />
+              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
             ))}
           </div>
         </div>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-13/components/settings-dialog.tsx b/apps/v4/registry/bases/base/blocks/sidebar-13/components/settings-dialog.tsx
index ea9b4e8534..5212bb4d3f 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-13/components/settings-dialog.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-13/components/settings-dialog.tsx
@@ -233,7 +233,7 @@ export function SettingsDialog() {
               }).map((_, i) => (
                 <div
                   key={i}
-                  className="bg-muted/50 aspect-video max-w-3xl rounded-xl"
+                  className="aspect-video max-w-3xl rounded-xl bg-muted/50"
                 />
               ))}
             </div>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-14/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-14/page.tsx
index 5e1eb3e6ad..05dccb2532 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-14/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-14/page.tsx
@@ -33,11 +33,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
       <AppSidebar side="right" />
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-15/components/calendars.tsx b/apps/v4/registry/bases/base/blocks/sidebar-15/components/calendars.tsx
index 34960e1142..a6a3ff8fe0 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-15/components/calendars.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-15/components/calendars.tsx
@@ -36,7 +36,7 @@ export function Calendars({
               className="group/collapsible"
             >
               <SidebarGroupLabel
-                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                 render={<CollapsibleTrigger />}
               >
                 {calendar.name}{" "}
@@ -57,7 +57,7 @@ export function Calendars({
                         <SidebarMenuButton>
                           <div
                             data-active={index < 2}
-                            className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border"
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
                           >
                             <IconPlaceholder
                               lucide="CheckIcon"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-15/components/nav-workspaces.tsx b/apps/v4/registry/bases/base/blocks/sidebar-15/components/nav-workspaces.tsx
index b851cca2b1..bd6bed9188 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-15/components/nav-workspaces.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-15/components/nav-workspaces.tsx
@@ -45,7 +45,7 @@ export function NavWorkspaces({
                 </SidebarMenuButton>
                 <SidebarMenuAction
                   render={<CollapsibleTrigger />}
-                  className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-open:rotate-90"
+                  className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-open:rotate-90"
                   showOnHover
                 >
                   <IconPlaceholder
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-15/components/sidebar-right.tsx b/apps/v4/registry/bases/base/blocks/sidebar-15/components/sidebar-right.tsx
index 73351f330a..b0a745d137 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-15/components/sidebar-right.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-15/components/sidebar-right.tsx
@@ -50,7 +50,7 @@ export function SidebarRight({
       className="sticky top-0 hidden h-svh border-l lg:flex"
       {...props}
     >
-      <SidebarHeader className="border-sidebar-border h-16 border-b">
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
         <NavUser user={data.user} />
       </SidebarHeader>
       <SidebarContent>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-15/components/team-switcher.tsx b/apps/v4/registry/bases/base/blocks/sidebar-15/components/team-switcher.tsx
index 9590270cf5..adbc7deb38 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-15/components/team-switcher.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-15/components/team-switcher.tsx
@@ -38,10 +38,10 @@ export function TeamSwitcher({
         <DropdownMenu>
           <DropdownMenuTrigger
             render={
-              <SidebarMenuButton className="aria-expanded:bg-muted aria-expanded:text-foreground w-fit px-1.5" />
+              <SidebarMenuButton className="w-fit px-1.5 aria-expanded:bg-muted aria-expanded:text-foreground" />
             }
           >
-            <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+            <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
               {activeTeam.logo}
             </div>
             <span className="truncate font-medium">{activeTeam.name}</span>
@@ -61,7 +61,7 @@ export function TeamSwitcher({
             sideOffset={4}
           >
             <DropdownMenuGroup>
-              <DropdownMenuLabel className="text-muted-foreground text-xs">
+              <DropdownMenuLabel className="text-xs text-muted-foreground">
                 Teams
               </DropdownMenuLabel>
               {teams.map((team, index) => (
@@ -81,7 +81,7 @@ export function TeamSwitcher({
             <DropdownMenuSeparator />
             <DropdownMenuGroup>
               <DropdownMenuItem className="gap-2 p-2">
-                <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+                <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                   <IconPlaceholder
                     lucide="PlusIcon"
                     tabler="IconPlus"
@@ -91,7 +91,7 @@ export function TeamSwitcher({
                     className="size-4"
                   />
                 </div>
-                <div className="text-muted-foreground font-medium">
+                <div className="font-medium text-muted-foreground">
                   Add team
                 </div>
               </DropdownMenuItem>
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-15/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-15/page.tsx
index c4da7dd97d..14e086b612 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-15/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-15/page.tsx
@@ -18,7 +18,7 @@ export default function Page() {
     <SidebarProvider>
       <SidebarLeft />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2">
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
           <div className="flex flex-1 items-center gap-2 px-3">
             <SidebarTrigger />
             <Separator
@@ -37,8 +37,8 @@ export default function Page() {
           </div>
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
-          <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-          <div className="bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl" />
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
         </div>
       </SidebarInset>
       <SidebarRight />
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-16/components/app-sidebar.tsx b/apps/v4/registry/bases/base/blocks/sidebar-16/components/app-sidebar.tsx
index c5a4ef7d9c..85454eebd9 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-16/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-16/components/app-sidebar.tsx
@@ -222,7 +222,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
         <SidebarMenu>
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" render={<a href="#" />}>
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <IconPlaceholder
                   lucide="TerminalIcon"
                   tabler="IconCommand"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-16/components/site-header.tsx b/apps/v4/registry/bases/base/blocks/sidebar-16/components/site-header.tsx
index dd206f7160..98feeb2931 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-16/components/site-header.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-16/components/site-header.tsx
@@ -18,7 +18,7 @@ export function SiteHeader() {
   const { toggleSidebar } = useSidebar()
 
   return (
-    <header className="bg-background sticky top-0 z-50 flex w-full items-center border-b">
+    <header className="sticky top-0 z-50 flex w-full items-center border-b bg-background">
       <div className="flex h-(--header-height) w-full items-center gap-2 px-4">
         <Button
           className="h-8 w-8"
diff --git a/apps/v4/registry/bases/base/blocks/sidebar-16/page.tsx b/apps/v4/registry/bases/base/blocks/sidebar-16/page.tsx
index 5c43124f14..ef83dddfbf 100644
--- a/apps/v4/registry/bases/base/blocks/sidebar-16/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/sidebar-16/page.tsx
@@ -16,11 +16,11 @@ export default function Page() {
           <SidebarInset>
             <div className="flex flex-1 flex-col gap-4 p-4">
               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div className="bg-muted/50 aspect-video rounded-xl" />
-                <div className="bg-muted/50 aspect-video rounded-xl" />
-                <div className="bg-muted/50 aspect-video rounded-xl" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
               </div>
-              <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+              <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
             </div>
           </SidebarInset>
         </div>
diff --git a/apps/v4/registry/bases/base/blocks/signup-02/components/signup-form.tsx b/apps/v4/registry/bases/base/blocks/signup-02/components/signup-form.tsx
index 0a2dfcc221..ad796c3881 100644
--- a/apps/v4/registry/bases/base/blocks/signup-02/components/signup-form.tsx
+++ b/apps/v4/registry/bases/base/blocks/signup-02/components/signup-form.tsx
@@ -18,7 +18,7 @@ export function SignupForm({
       <FieldGroup>
         <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-2xl font-bold">Create your account</h1>
-          <p className="text-muted-foreground text-sm text-balance">
+          <p className="text-sm text-balance text-muted-foreground">
             Fill in the form below to create your account
           </p>
         </div>
diff --git a/apps/v4/registry/bases/base/blocks/signup-02/page.tsx b/apps/v4/registry/bases/base/blocks/signup-02/page.tsx
index fa688fe1fb..df07d048cb 100644
--- a/apps/v4/registry/bases/base/blocks/signup-02/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/signup-02/page.tsx
@@ -9,7 +9,7 @@ export default function SignupPage() {
       <div className="flex flex-col gap-4 p-6 md:p-10">
         <div className="flex justify-center gap-2 md:justify-start">
           <a href="#" className="flex items-center gap-2 font-medium">
-            <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+            <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
               <IconPlaceholder
                 lucide="GalleryVerticalEndIcon"
                 tabler="IconLayoutRows"
@@ -28,7 +28,7 @@ export default function SignupPage() {
           </div>
         </div>
       </div>
-      <div className="bg-muted relative hidden lg:block">
+      <div className="relative hidden bg-muted lg:block">
         <img
           src="/placeholder.svg"
           alt="Image"
diff --git a/apps/v4/registry/bases/base/blocks/signup-03/page.tsx b/apps/v4/registry/bases/base/blocks/signup-03/page.tsx
index ff9c00acfe..e11cb6018d 100644
--- a/apps/v4/registry/bases/base/blocks/signup-03/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/signup-03/page.tsx
@@ -5,10 +5,10 @@ import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 export default function SignupPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
         <a href="#" className="flex items-center gap-2 self-center font-medium">
-          <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+          <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
             <IconPlaceholder
               lucide="GalleryVerticalEndIcon"
               tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/base/blocks/signup-04/components/signup-form.tsx b/apps/v4/registry/bases/base/blocks/signup-04/components/signup-form.tsx
index d864a09e4a..8791e3de11 100644
--- a/apps/v4/registry/bases/base/blocks/signup-04/components/signup-form.tsx
+++ b/apps/v4/registry/bases/base/blocks/signup-04/components/signup-form.tsx
@@ -22,7 +22,7 @@ export function SignupForm({
             <FieldGroup>
               <div className="flex flex-col items-center gap-2 text-center">
                 <h1 className="text-2xl font-bold">Create your account</h1>
-                <p className="text-muted-foreground text-sm text-balance">
+                <p className="text-sm text-balance text-muted-foreground">
                   Enter your email below to create your account
                 </p>
               </div>
@@ -96,7 +96,7 @@ export function SignupForm({
               </FieldDescription>
             </FieldGroup>
           </form>
-          <div className="bg-muted relative hidden md:block">
+          <div className="relative hidden bg-muted md:block">
             <img
               src="/placeholder.svg"
               alt="Image"
diff --git a/apps/v4/registry/bases/base/blocks/signup-04/page.tsx b/apps/v4/registry/bases/base/blocks/signup-04/page.tsx
index 271edbfdd6..ec7ded9fed 100644
--- a/apps/v4/registry/bases/base/blocks/signup-04/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/signup-04/page.tsx
@@ -2,7 +2,7 @@ import { SignupForm } from "@/registry/bases/base/blocks/signup-04/components/si
 
 export default function SignupPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
       <div className="w-full max-w-sm md:max-w-4xl">
         <SignupForm />
       </div>
diff --git a/apps/v4/registry/bases/base/blocks/signup-05/page.tsx b/apps/v4/registry/bases/base/blocks/signup-05/page.tsx
index bd266ab419..f8612f2ce2 100644
--- a/apps/v4/registry/bases/base/blocks/signup-05/page.tsx
+++ b/apps/v4/registry/bases/base/blocks/signup-05/page.tsx
@@ -2,7 +2,7 @@ import { SignupForm } from "@/registry/bases/base/blocks/signup-05/components/si
 
 export default function SignupPage() {
   return (
-    <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
       <div className="w-full max-w-sm">
         <SignupForm />
       </div>
diff --git a/apps/v4/registry/bases/base/blocks/vercel.tsx b/apps/v4/registry/bases/base/blocks/vercel.tsx
deleted file mode 100644
index e794796ecd..0000000000
--- a/apps/v4/registry/bases/base/blocks/vercel.tsx
+++ /dev/null
@@ -1,825 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { format } from "date-fns"
-import { type DateRange } from "react-day-picker"
-import { Area, AreaChart } from "recharts"
-
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/base/components/example"
-import { Alert, AlertDescription } from "@/registry/bases/base/ui/alert"
-import { Badge } from "@/registry/bases/base/ui/badge"
-import { Button } from "@/registry/bases/base/ui/button"
-import { Calendar } from "@/registry/bases/base/ui/calendar"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/base/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/bases/base/ui/chart"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/bases/base/ui/dialog"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/bases/base/ui/dropdown-menu"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyTitle,
-} from "@/registry/bases/base/ui/empty"
-import { Field, FieldGroup, FieldLabel } from "@/registry/bases/base/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/registry/bases/base/ui/input-group"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemFooter,
-  ItemGroup,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-} from "@/registry/bases/base/ui/item"
-import {
-  NativeSelect,
-  NativeSelectOption,
-} from "@/registry/bases/base/ui/native-select"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/bases/base/ui/popover"
-import { Textarea } from "@/registry/bases/base/ui/textarea"
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
-export default function VercelBlock() {
-  return (
-    <ExampleWrapper>
-      <DeploymentFilter />
-      <UsageCard />
-      <ObservabilityCard />
-      <BillingList />
-      <AnomalyAlert />
-      <ActivateAgentDialog />
-      <FeedbackForm />
-      <AnalyticsCard />
-    </ExampleWrapper>
-  )
-}
-
-const items = [
-  {
-    name: "Edge Requests",
-    value: "$1.83K",
-    percentage: 67.34,
-  },
-  {
-    name: "Fast Data Transfer",
-    percentage: 52.18,
-    value: "$952.51",
-  },
-  {
-    name: "Monitoring data points",
-    percentage: 89.42,
-    value: "$901.20",
-  },
-  {
-    name: "Web Analytics Events",
-    percentage: 45.67,
-    value: "$603.71",
-  },
-  {
-    name: "Edge Request CPU Duration",
-    percentage: 23.91,
-    value: "$4.65",
-  },
-  {
-    name: "Fast Origin Transfer",
-    percentage: 38.75,
-    value: "$3.85",
-  },
-  {
-    name: "ISR Reads",
-    percentage: 71.24,
-    value: "$2.86",
-  },
-  {
-    name: "Function Invocations",
-    percentage: 15.83,
-    value: "$0.60",
-  },
-  {
-    name: "ISR Writes",
-    percentage: 26.23,
-    value: "524.52K / 2M",
-  },
-  {
-    name: "Function Duration",
-    percentage: 5.11,
-    value: "5.11 GB Hrs / 1K GB Hrs",
-  },
-]
-
-function UsageCard() {
-  return (
-    <Example title="Usage" className="items-center">
-      <Card className="w-full max-w-sm gap-4">
-        <CardHeader>
-          <CardTitle className="px-1 text-sm">
-            5 days remaining in cycle
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ItemGroup className="gap-0">
-            {items.map((item) => (
-              <Item
-                key={item.name}
-                size="xs"
-                className="px-0 group-hover/item-group:bg-transparent"
-                render={<a href="#" />}
-              >
-                <ItemMedia variant="icon" className="text-primary">
-                  <CircularGauge percentage={item.percentage} />
-                </ItemMedia>
-                <ItemContent className="inline-block truncate">
-                  <ItemTitle className="inline">{item.name}</ItemTitle>
-                </ItemContent>
-                <ItemActions>
-                  <span className="text-muted-foreground font-mono text-xs font-medium tabular-nums">
-                    {item.value}
-                  </span>
-                </ItemActions>
-              </Item>
-            ))}
-          </ItemGroup>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-
-function AnomalyAlert() {
-  return (
-    <Example
-      title="Anomaly Alert"
-      className="aspect-square items-center justify-center"
-    >
-      <Card className="w-full max-w-xs">
-        <CardContent className="p-6">
-          <Empty className="mx-auto p-0">
-            <EmptyHeader>
-              <EmptyTitle>Get alerted for anomalies</EmptyTitle>
-              <EmptyDescription>
-                Automatically monitor your projects for anomalies and get
-                notified.
-              </EmptyDescription>
-            </EmptyHeader>
-            <EmptyContent>
-              <Button>Upgrade to Observability Plus</Button>
-            </EmptyContent>
-          </Empty>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-
-const environments = [
-  "All Environments",
-  "Production",
-  "Preview",
-  "Development",
-  "Staging",
-  "Test",
-  "Other",
-]
-
-const statuses = [
-  { name: "Ready", color: "oklch(0.72 0.19 150)" },
-  { name: "Error", color: "oklch(0.64 0.21 25)" },
-  { name: "Building", color: "oklch(0.77 0.16 70)" },
-  { name: "Queued", color: "oklch(0.72 0.00 0)" },
-  { name: "Provisioning", color: "oklch(0.72 0.00 0)" },
-  { name: "Canceled", color: "oklch(0.72 0.00 0)" },
-]
-
-function DeploymentFilter() {
-  const [selectedEnvironment, setSelectedEnvironment] = React.useState(
-    environments[0]
-  )
-  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(
-    new Set(statuses.slice(0, 5).map((s) => s.name))
-  )
-  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()
-
-  const toggleStatus = (statusName: string) => {
-    setSelectedStatuses((prev) => {
-      const next = new Set(prev)
-      if (next.has(statusName)) {
-        next.delete(statusName)
-      } else {
-        next.add(statusName)
-      }
-      return next
-    })
-  }
-
-  return (
-    <Example title="Deployment Filter" containerClassName="col-span-full">
-      <div className="flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto">
-        <Popover>
-          <PopoverTrigger
-            render={<Button variant="outline" className="justify-start" />}
-          >
-            <IconPlaceholder
-              lucide="CalendarIcon"
-              tabler="IconCalendar"
-              hugeicons="Calendar01Icon"
-              phosphor="CalendarIcon"
-              remixicon="RiCalendarLine"
-              data-icon="inline-start"
-              className="text-muted-foreground"
-            />
-            {dateRange?.from ? (
-              dateRange.to ? (
-                <>
-                  {format(dateRange.from, "LLL dd, y")} -{" "}
-                  {format(dateRange.to, "LLL dd, y")}
-                </>
-              ) : (
-                format(dateRange.from, "LLL dd, y")
-              )
-            ) : (
-              "Select Date Range"
-            )}
-          </PopoverTrigger>
-          <PopoverContent className="w-auto p-0" align="start">
-            <Calendar
-              mode="range"
-              defaultMonth={dateRange?.from}
-              selected={dateRange}
-              onSelect={setDateRange}
-              numberOfMonths={2}
-            />
-          </PopoverContent>
-        </Popover>
-        <InputGroup className="lg:ml-auto lg:max-w-72">
-          <InputGroupAddon>
-            <IconPlaceholder
-              lucide="Search"
-              tabler="IconSearch"
-              hugeicons="Search01Icon"
-              phosphor="MagnifyingGlassIcon"
-              remixicon="RiSearchLine"
-            />
-          </InputGroupAddon>
-          <InputGroupInput placeholder="All Authors..." />
-          <InputGroupAddon align="inline-end">
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDown01Icon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              className="text-muted-foreground"
-            />
-          </InputGroupAddon>
-        </InputGroup>
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={<Button variant="outline" className="justify-between" />}
-          >
-            {selectedEnvironment}
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDown01Icon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              data-icon="inline-end"
-              className="text-muted-foreground"
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56" align="end">
-            {environments.map((environment) => (
-              <DropdownMenuItem
-                key={environment}
-                onSelect={() => setSelectedEnvironment(environment)}
-                data-active={selectedEnvironment === environment}
-              >
-                {environment}
-                <IconPlaceholder
-                  lucide="CheckIcon"
-                  tabler="IconCheck"
-                  hugeicons="Tick02Icon"
-                  phosphor="CheckIcon"
-                  remixicon="RiCheckLine"
-                  className="ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100"
-                />
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={<Button variant="outline" className="justify-between" />}
-          >
-            <div className="flex items-center -space-x-0.5">
-              {statuses.map((status) => (
-                <div
-                  key={status.name}
-                  style={
-                    {
-                      "--color": status.color,
-                    } as React.CSSProperties
-                  }
-                  className="size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0"
-                  data-active={selectedStatuses.has(status.name)}
-                />
-              ))}
-            </div>
-            Status {selectedStatuses.size}/{statuses.length}
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDown01Icon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              data-icon="inline-end"
-              className="text-muted-foreground ml-auto"
-            />
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56" align="end">
-            {statuses.map((status) => {
-              const isSelected = selectedStatuses.has(status.name)
-              return (
-                <DropdownMenuItem
-                  key={status.name}
-                  onSelect={() => toggleStatus(status.name)}
-                  data-active={isSelected}
-                  style={
-                    {
-                      "--color": status.color,
-                    } as React.CSSProperties
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="size-2 rounded-full bg-(--color)" />
-                    {status.name}
-                  </div>
-                  <IconPlaceholder
-                    lucide="CheckIcon"
-                    tabler="IconCheck"
-                    hugeicons="Tick02Icon"
-                    phosphor="CheckIcon"
-                    remixicon="RiCheckLine"
-                    className="ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100"
-                  />
-                </DropdownMenuItem>
-              )
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </Example>
-  )
-}
-
-const billingItems = [
-  {
-    month: "November 2025",
-    invoiceDate: new Date(2025, 10, 5),
-    amount: "$10.00",
-    status: "Paid" as const,
-  },
-  {
-    month: "October 2025",
-    invoiceDate: new Date(2025, 9, 4),
-    amount: "$10.00",
-    status: "Paid" as const,
-  },
-  {
-    month: "September 2025",
-    invoiceDate: new Date(2025, 8, 4),
-    amount: "$10.00",
-    status: "Paid" as const,
-  },
-]
-
-function BillingList() {
-  return (
-    <Example
-      title="Billing"
-      className="items-center lg:p-16"
-      containerClassName="col-span-full"
-    >
-      <ItemGroup className="max-w-7xl gap-0 rounded-lg border">
-        {billingItems.map((item, index) => (
-          <React.Fragment key={item.month}>
-            <Item className="grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]">
-              <ItemContent>
-                <ItemTitle>
-                  {item.month}
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700 hover:bg-green-100"
-                  >
-                    {item.status}
-                  </Badge>
-                </ItemTitle>
-                <ItemDescription>
-                  Infrastructure usage & Vercel platform
-                </ItemDescription>
-              </ItemContent>
-              <ItemContent className="hidden lg:flex">
-                <ItemTitle>Total Due</ItemTitle>
-                <ItemDescription>{item.amount}</ItemDescription>
-              </ItemContent>
-              <ItemContent className="hidden lg:flex">
-                <ItemDescription>
-                  Invoiced {format(item.invoiceDate, "d MMM yyyy")}
-                </ItemDescription>
-              </ItemContent>
-              <ItemActions>
-                <DropdownMenu>
-                  <DropdownMenuTrigger
-                    render={<Button variant="ghost" size="icon" />}
-                  >
-                    <IconPlaceholder
-                      lucide="MoreHorizontalIcon"
-                      tabler="IconDots"
-                      hugeicons="MoreHorizontalCircle01Icon"
-                      phosphor="DotsThreeOutlineIcon"
-                      remixicon="RiMoreLine"
-                    />
-                    <span className="sr-only">More options</span>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>View invoice</DropdownMenuItem>
-                    <DropdownMenuItem>Download PDF</DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem>Contact support</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </ItemActions>
-              <ItemFooter className="col-span-full w-full border-t pt-4 lg:hidden">
-                <ItemContent>
-                  <ItemTitle>Total Due</ItemTitle>
-                  <ItemDescription>{item.amount}</ItemDescription>
-                </ItemContent>
-                <ItemContent>
-                  <ItemDescription>
-                    Invoiced {format(item.invoiceDate, "d MMM yyyy")}
-                  </ItemDescription>
-                </ItemContent>
-              </ItemFooter>
-            </Item>
-            {index !== billingItems.length - 1 && (
-              <ItemSeparator className="my-0" />
-            )}
-          </React.Fragment>
-        ))}
-      </ItemGroup>
-    </Example>
-  )
-}
-
-function CircularGauge({ percentage }: { percentage: number }) {
-  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)
-  const circumference = 2 * Math.PI * 42.5
-  const strokePercent = (normalizedPercentage / 100) * circumference
-
-  return (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      height="16"
-      width="16"
-      strokeWidth="2"
-      viewBox="0 0 100 100"
-      className="-rotate-90"
-    >
-      <circle
-        cx="50"
-        cy="50"
-        r="42.5"
-        strokeWidth="12"
-        strokeDashoffset="0"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="opacity-20"
-        stroke="currentColor"
-        style={{
-          strokeDasharray: `${circumference} ${circumference}`,
-        }}
-      />
-      <circle
-        cx="50"
-        cy="50"
-        r="42.5"
-        strokeWidth="12"
-        strokeDashoffset="0"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        stroke="currentColor"
-        className="transition-all duration-300"
-        style={{
-          strokeDasharray: `${strokePercent} ${circumference}`,
-        }}
-      />
-    </svg>
-  )
-}
-
-const agentFeatures = [
-  {
-    id: "code-reviews",
-    content: (
-      <>
-        <strong>Code reviews</strong> with full codebase context to catch{" "}
-        <strong>hard-to-find</strong> bugs. bugs.
-      </>
-    ),
-  },
-  {
-    id: "code-suggestions",
-    content: (
-      <>
-        <strong>Code suggestions</strong> validated in sandboxes before you
-        merge.
-      </>
-    ),
-  },
-  {
-    id: "root-cause",
-    content: (
-      <>
-        <strong>Root-cause analysis</strong> for production issues with
-        deployment context.{" "}
-        <Badge
-          variant="secondary"
-          className="bg-blue-100 text-blue-700 hover:bg-blue-100"
-        >
-          Requires Observability Plus
-        </Badge>
-      </>
-    ),
-  },
-]
-
-function ActivateAgentDialog() {
-  return (
-    <Example title="Activate Agent" className="items-center justify-center">
-      <Dialog>
-        <DialogTrigger render={<Button variant="outline" />}>
-          Activate Agent
-        </DialogTrigger>
-        <DialogContent showCloseButton={false}>
-          <DialogHeader>
-            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>
-            <DialogDescription>
-              Your use is subject to Vercel&apos;s{" "}
-              <a href="#">Public Beta Agreement</a> and{" "}
-              <a href="#">AI Product Terms</a>.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto">
-            <ItemGroup className="gap-0 pr-2">
-              {agentFeatures.map((feature) => (
-                <Item key={feature.id} size="xs" className="px-0">
-                  <ItemMedia variant="icon" className="self-start">
-                    <IconPlaceholder
-                      lucide="CheckCircle2Icon"
-                      tabler="IconCircleCheckFilled"
-                      hugeicons="CheckmarkCircle02Icon"
-                      phosphor="CheckCircleIcon"
-                      remixicon="RiCheckboxCircleLine"
-                      className="fill-primary text-primary-foreground size-5"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle className="text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium">
-                      {feature.content}
-                    </ItemTitle>
-                  </ItemContent>
-                </Item>
-              ))}
-            </ItemGroup>
-            <Alert className="hidden sm:grid">
-              <IconPlaceholder
-                lucide="CircleDollarSignIcon"
-                hugeicons="DollarCircleIcon"
-                tabler="IconCoin"
-                phosphor="CurrencyCircleDollarIcon"
-                remixicon="RiMoneyDollarCircleLine"
-              />
-              <AlertDescription>
-                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.
-              </AlertDescription>
-            </Alert>
-          </div>
-          <DialogFooter>
-            <DialogClose render={<Button variant="outline" />}>
-              Cancel
-            </DialogClose>
-            <Button>Enable with $100 credits</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Example>
-  )
-}
-
-function ObservabilityCard() {
-  return (
-    <Example title="Observability" className="items-center justify-center">
-      <Card className="relative w-full max-w-md overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
-        <img
-          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Photo by mymind on Unsplash"
-          title="Photo by mymind on Unsplash"
-          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
-        />
-        <CardHeader>
-          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
-          <CardDescription>
-            Switch to the improved way to explore your data, with natural
-            language. Monitoring will no longer be available on the Pro plan in
-            November, 2025
-          </CardDescription>
-        </CardHeader>
-        <CardFooter>
-          <Button>
-            Create Query{" "}
-            <IconPlaceholder
-              lucide="PlusIcon"
-              tabler="IconPlus"
-              hugeicons="PlusSignIcon"
-              phosphor="PlusIcon"
-              remixicon="RiAddLine"
-              data-icon="inline-end"
-            />
-          </Button>
-          <Badge variant="secondary" className="ml-auto">
-            Warning
-          </Badge>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-function FeedbackForm() {
-  return (
-    <Example title="Feedback Form" className="items-center justify-center">
-      <Card className="w-full max-w-sm" size="sm">
-        <CardContent>
-          <form id="feedback-form">
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="topic">Topic</FieldLabel>
-                <NativeSelect id="topic">
-                  <NativeSelectOption value="">
-                    Select a topic
-                  </NativeSelectOption>
-                  <NativeSelectOption value="ai">AI</NativeSelectOption>
-                  <NativeSelectOption value="accounts-and-access-controls">
-                    Accounts and Access Controls
-                  </NativeSelectOption>
-                  <NativeSelectOption value="billing">
-                    Billing
-                  </NativeSelectOption>
-                  <NativeSelectOption value="cdn">
-                    CDN (Firewall, Caching)
-                  </NativeSelectOption>
-                  <NativeSelectOption value="ci-cd">
-                    CI/CD (Builds, Deployments, Environment Variables)
-                  </NativeSelectOption>
-                  <NativeSelectOption value="dashboard-interface">
-                    Dashboard Interface (Navigation, UI Issues)
-                  </NativeSelectOption>
-                  <NativeSelectOption value="domains">
-                    Domains
-                  </NativeSelectOption>
-                  <NativeSelectOption value="frameworks">
-                    Frameworks
-                  </NativeSelectOption>
-                  <NativeSelectOption value="marketplace-and-integrations">
-                    Marketplace and Integrations
-                  </NativeSelectOption>
-                  <NativeSelectOption value="observability">
-                    Observability (Observability, Logs, Monitoring)
-                  </NativeSelectOption>
-                  <NativeSelectOption value="storage">
-                    Storage
-                  </NativeSelectOption>
-                </NativeSelect>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="feedback">Feedback</FieldLabel>
-                <Textarea
-                  id="feedback"
-                  placeholder="Your feedback helps us improve..."
-                />
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-        <CardFooter>
-          <Button type="submit" form="feedback-form">
-            Submit
-          </Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-const chartData = [
-  { month: "January", visitors: 186 },
-  { month: "February", visitors: 305 },
-  { month: "March", visitors: 237 },
-  { month: "April", visitors: 73 },
-  { month: "May", visitors: 209 },
-  { month: "June", visitors: 214 },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-    color: "var(--chart-1)",
-  },
-} satisfies ChartConfig
-
-function AnalyticsCard() {
-  return (
-    <Example title="Analytics Card" className="justify-center">
-      <Card className="mx-auto w-full max-w-sm data-[size=sm]:pb-0" size="sm">
-        <CardHeader>
-          <CardTitle>Analytics</CardTitle>
-          <CardDescription>
-            418.2K Visitors <Badge>+10%</Badge>
-          </CardDescription>
-          <CardAction>
-            <Button variant="outline" size="sm">
-              View Analytics
-            </Button>
-          </CardAction>
-        </CardHeader>
-        <ChartContainer config={chartConfig} className="aspect-[1/0.35]">
-          <AreaChart
-            accessibilityLayer
-            data={chartData}
-            margin={{
-              left: 0,
-              right: 0,
-            }}
-          >
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="line" hideLabel />}
-              defaultIndex={2}
-            />
-            <Area
-              dataKey="visitors"
-              type="linear"
-              fill="var(--color-visitors)"
-              fillOpacity={0.4}
-              stroke="var(--color-visitors)"
-            />
-          </AreaChart>
-        </ChartContainer>
-      </Card>
-    </Example>
-  )
-}
diff --git a/apps/v4/registry/bases/base/components/example.tsx b/apps/v4/registry/bases/base/components/example.tsx
index 9c2dfa1091..1f83f1df9f 100644
--- a/apps/v4/registry/bases/base/components/example.tsx
+++ b/apps/v4/registry/bases/base/components/example.tsx
@@ -2,7 +2,7 @@ import { cn } from "@/registry/bases/base/lib/utils"
 
 function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div className="bg-background w-full">
+    <div className="w-full bg-muted dark:bg-background">
       <div
         data-slot="example-wrapper"
         className={cn(
@@ -36,14 +36,14 @@ function Example({
       {...props}
     >
       {title && (
-        <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
+        <div className="px-1.5 py-2 text-xs font-medium text-muted-foreground">
           {title}
         </div>
       )}
       <div
         data-slot="example-content"
         className={cn(
-          "bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full",
+          "flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full",
           className
         )}
       >
diff --git a/apps/v4/registry/bases/base/examples/_registry.ts b/apps/v4/registry/bases/base/examples/_registry.ts
index bc205a263b..93ea9a2469 100644
--- a/apps/v4/registry/bases/base/examples/_registry.ts
+++ b/apps/v4/registry/bases/base/examples/_registry.ts
@@ -854,6 +854,33 @@ export const examples: Registry["items"] = [
       },
     ],
   },
+  {
+    name: "demo",
+    title: "Demo",
+    type: "registry:example",
+    registryDependencies: [
+      "alert-dialog",
+      "badge",
+      "button",
+      "button-group",
+      "card",
+      "checkbox",
+      "dropdown-menu",
+      "field",
+      "input-group",
+      "item",
+      "radio-group",
+      "slider",
+      "switch",
+      "textarea",
+    ],
+    files: [
+      {
+        path: "examples/demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "component-example",
     title: "Example",
diff --git a/apps/v4/registry/bases/base/examples/accordion-example.tsx b/apps/v4/registry/bases/base/examples/accordion-example.tsx
index 8ed79cabfd..574117dd99 100644
--- a/apps/v4/registry/bases/base/examples/accordion-example.tsx
+++ b/apps/v4/registry/bases/base/examples/accordion-example.tsx
@@ -132,17 +132,17 @@ function AccordionWithBorders() {
 
   return (
     <Example title="With Borders">
-      <Accordion className="style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg">
+      <Accordion className="mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2">
         {items.map((item) => (
           <AccordionItem
             key={item.value}
             value={item.value}
-            className="style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg"
+            className="style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border"
           >
-            <AccordionTrigger className="style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium">
+            <AccordionTrigger className="font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs">
               {item.trigger}
             </AccordionTrigger>
-            <AccordionContent className="text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0">
+            <AccordionContent className="text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0">
               {item.content}
             </AccordionContent>
           </AccordionItem>
@@ -314,18 +314,18 @@ function AccordionWithDisabled() {
 
   return (
     <Example title="With Disabled">
-      <Accordion className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border">
+      <Accordion className="mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg">
         {items.map((item) => (
           <AccordionItem
             key={item.value}
             value={item.value}
             disabled={item.disabled}
-            className="data-open:bg-muted/50 p-1"
+            className="p-1 data-open:bg-muted/50"
           >
-            <AccordionTrigger className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            <AccordionTrigger className="style-vega:px-4 style-nova:px-2.5 style-lyra:px-2">
               {item.trigger}
             </AccordionTrigger>
-            <AccordionContent className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            <AccordionContent className="style-vega:px-4 style-nova:px-2.5 style-lyra:px-2">
               {item.content}
             </AccordionContent>
           </AccordionItem>
diff --git a/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx b/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx
index 3d2677b032..9514dce598 100644
--- a/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx
+++ b/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx
@@ -20,7 +20,7 @@ export default function AspectRatioExample() {
 function AspectRatio16x9() {
   return (
     <Example title="16:9" className="items-center justify-center">
-      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
@@ -35,7 +35,7 @@ function AspectRatio16x9() {
 function AspectRatio1x1() {
   return (
     <Example title="1:1" className="items-start">
-      <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
+      <AspectRatio ratio={1 / 1} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
@@ -50,7 +50,7 @@ function AspectRatio1x1() {
 function AspectRatio9x16() {
   return (
     <Example title="9:16" className="items-center justify-center">
-      <AspectRatio ratio={9 / 16} className="bg-muted rounded-lg">
+      <AspectRatio ratio={9 / 16} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
@@ -65,7 +65,7 @@ function AspectRatio9x16() {
 function AspectRatio21x9() {
   return (
     <Example title="21:9" className="items-center justify-center">
-      <AspectRatio ratio={21 / 9} className="bg-muted rounded-lg">
+      <AspectRatio ratio={21 / 9} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
diff --git a/apps/v4/registry/bases/base/examples/calendar-example.tsx b/apps/v4/registry/bases/base/examples/calendar-example.tsx
index d4b08ebace..2bce0ddfa0 100644
--- a/apps/v4/registry/bases/base/examples/calendar-example.tsx
+++ b/apps/v4/registry/bases/base/examples/calendar-example.tsx
@@ -222,7 +222,7 @@ function CalendarWithTime() {
             className="p-0"
           />
         </CardContent>
-        <CardFooter className="bg-card border-t">
+        <CardFooter className="border-t bg-card">
           <FieldGroup>
             <Field>
               <FieldLabel htmlFor="time-from">Start Time</FieldLabel>
diff --git a/apps/v4/registry/bases/base/examples/card-example.tsx b/apps/v4/registry/bases/base/examples/card-example.tsx
index e5d2fbf469..bbc9e4303b 100644
--- a/apps/v4/registry/bases/base/examples/card-example.tsx
+++ b/apps/v4/registry/bases/base/examples/card-example.tsx
@@ -166,7 +166,7 @@ function CardWithImage() {
   return (
     <Example title="With Image">
       <Card size="default" className="relative mx-auto w-full max-w-sm pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+        <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
         <img
           src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Photo by mymind on Unsplash"
@@ -201,7 +201,7 @@ function CardWithImageSmall() {
   return (
     <Example title="With Image (Small)">
       <Card size="sm" className="relative mx-auto w-full max-w-sm pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+        <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
         <img
           src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Photo by mymind on Unsplash"
diff --git a/apps/v4/registry/bases/base/examples/chart-example.tsx b/apps/v4/registry/bases/base/examples/chart-example.tsx
index 638573a92b..aa9643aff4 100644
--- a/apps/v4/registry/bases/base/examples/chart-example.tsx
+++ b/apps/v4/registry/bases/base/examples/chart-example.tsx
@@ -126,7 +126,7 @@ function ChartAreaExample() {
                   className="size-4"
                 />
               </div>
-              <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              <div className="flex items-center gap-2 leading-none text-muted-foreground">
                 January - June 2024
               </div>
             </div>
@@ -197,7 +197,7 @@ function ChartBarExample() {
               className="size-4"
             />
           </div>
-          <div className="text-muted-foreground leading-none">
+          <div className="leading-none text-muted-foreground">
             Showing total visitors for the last 6 months
           </div>
         </CardFooter>
@@ -284,7 +284,7 @@ function ChartLineExample() {
                   className="size-4"
                 />
               </div>
-              <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              <div className="flex items-center gap-2 leading-none text-muted-foreground">
                 Showing total visitors for the last 6 months
               </div>
             </div>
@@ -403,7 +403,7 @@ function ChartPieExample() {
               className="size-4"
             />
           </div>
-          <div className="text-muted-foreground leading-none">
+          <div className="leading-none text-muted-foreground">
             Showing total visitors for the last 6 months
           </div>
         </CardFooter>
@@ -475,7 +475,7 @@ function ChartRadarExample() {
               className="size-4"
             />
           </div>
-          <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          <div className="flex items-center gap-2 leading-none text-muted-foreground">
             January - June 2024
           </div>
         </CardFooter>
@@ -571,7 +571,7 @@ function ChartRadialExample() {
               className="size-4"
             />
           </div>
-          <div className="text-muted-foreground leading-none">
+          <div className="leading-none text-muted-foreground">
             Showing total visitors for the last 6 months
           </div>
         </CardFooter>
diff --git a/apps/v4/registry/bases/base/examples/collapsible-example.tsx b/apps/v4/registry/bases/base/examples/collapsible-example.tsx
index 992b0de6e7..f5de33e89c 100644
--- a/apps/v4/registry/bases/base/examples/collapsible-example.tsx
+++ b/apps/v4/registry/bases/base/examples/collapsible-example.tsx
@@ -97,7 +97,7 @@ function CollapsibleFileTree() {
               <Button
                 variant="ghost"
                 size="sm"
-                className="group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none"
+                className="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground"
               />
             }
           >
@@ -118,7 +118,7 @@ function CollapsibleFileTree() {
             />
             {fileItem.name}
           </CollapsibleTrigger>
-          <CollapsibleContent className="style-lyra:ml-4 mt-1 ml-5">
+          <CollapsibleContent className="mt-1 ml-5 style-lyra:ml-4">
             <div className="flex flex-col gap-1">
               {fileItem.items.map((child) => renderItem(child))}
             </div>
@@ -131,7 +131,7 @@ function CollapsibleFileTree() {
         key={fileItem.name}
         variant="link"
         size="sm"
-        className="text-foreground w-full justify-start gap-2"
+        className="w-full justify-start gap-2 text-foreground"
       >
         <IconPlaceholder
           lucide="FileIcon"
diff --git a/apps/v4/registry/bases/base/examples/combobox-example.tsx b/apps/v4/registry/bases/base/examples/combobox-example.tsx
index 16d948e90b..d6d15c6551 100644
--- a/apps/v4/registry/bases/base/examples/combobox-example.tsx
+++ b/apps/v4/registry/bases/base/examples/combobox-example.tsx
@@ -1292,7 +1292,7 @@ function ComboboxWithOtherInputs() {
       </Select>
       <Button
         variant="outline"
-        className="text-muted-foreground w-52 justify-between font-normal"
+        className="w-52 justify-between font-normal text-muted-foreground"
       >
         Select a framework
         <IconPlaceholder
diff --git a/apps/v4/registry/bases/base/examples/component-example.tsx b/apps/v4/registry/bases/base/examples/component-example.tsx
index b7b82696fc..b021940c14 100644
--- a/apps/v4/registry/bases/base/examples/component-example.tsx
+++ b/apps/v4/registry/bases/base/examples/component-example.tsx
@@ -80,7 +80,7 @@ function CardExample() {
   return (
     <Example title="Card" className="items-center justify-center">
       <Card className="relative w-full max-w-sm overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+        <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
         <img
           src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Photo by mymind on Unsplash"
diff --git a/apps/v4/registry/bases/base/examples/demo.tsx b/apps/v4/registry/bases/base/examples/demo.tsx
new file mode 100644
index 0000000000..7919148c27
--- /dev/null
+++ b/apps/v4/registry/bases/base/examples/demo.tsx
@@ -0,0 +1,408 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/bases/base/ui/alert-dialog"
+import { Badge } from "@/registry/bases/base/ui/badge"
+import { Button } from "@/registry/bases/base/ui/button"
+import { ButtonGroup } from "@/registry/bases/base/ui/button-group"
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
+import { Checkbox } from "@/registry/bases/base/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/bases/base/ui/dropdown-menu"
+import { Field, FieldGroup } from "@/registry/bases/base/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@/registry/bases/base/ui/input-group"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/registry/bases/base/ui/item"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/bases/base/ui/radio-group"
+import { Slider } from "@/registry/bases/base/ui/slider"
+import { Switch } from "@/registry/bases/base/ui/switch"
+import { Textarea } from "@/registry/bases/base/ui/textarea"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function Demo() {
+  const [sliderValue, setSliderValue] = React.useState<number[]>([500])
+  const handleSliderValueChange = React.useCallback(
+    (value: number | readonly number[]) => {
+      if (typeof value === "number") {
+        setSliderValue([value])
+      } else {
+        setSliderValue([...value])
+      }
+    },
+    []
+  )
+
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background">
+      <div className="grid max-w-3xl gap-4 sm:grid-cols-2">
+        <div className="flex flex-col gap-4">
+          <Card>
+            <CardContent className="flex flex-col gap-6">
+              <div className="flex flex-col gap-1">
+                <div className="text-2xl font-medium">Style Overview</div>
+                <div className="line-clamp-2 text-base text-muted-foreground">
+                  Designers love packing quirky glyphs into test phrases. This
+                  is a preview of the typography styles.
+                </div>
+              </div>
+              <div className="grid grid-cols-6 gap-3">
+                {[
+                  "--background",
+                  "--foreground",
+                  "--primary",
+                  "--secondary",
+                  "--muted",
+                  "--accent",
+                  "--destructive",
+                  "--chart-1",
+                  "--chart-2",
+                  "--chart-3",
+                  "--chart-4",
+                  "--chart-5",
+                ].map((variant) => (
+                  <div
+                    key={variant}
+                    className="flex flex-col flex-wrap items-center gap-2"
+                  >
+                    <div
+                      className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten"
+                      style={
+                        {
+                          "--color": `var(${variant})`,
+                        } as React.CSSProperties
+                      }
+                    />
+                    <div className="hidden max-w-14 truncate font-mono text-[0.60rem] md:block">
+                      {variant}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent>
+              <div className="grid grid-cols-8 place-items-center gap-4">
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CopyIcon"
+                    tabler="IconCopy"
+                    hugeicons="Copy01Icon"
+                    phosphor="CopyIcon"
+                    remixicon="RiFileCopyLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CircleAlertIcon"
+                    tabler="IconExclamationCircle"
+                    hugeicons="AlertCircleIcon"
+                    phosphor="WarningCircleIcon"
+                    remixicon="RiErrorWarningLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="TrashIcon"
+                    tabler="IconTrash"
+                    hugeicons="Delete02Icon"
+                    phosphor="TrashIcon"
+                    remixicon="RiDeleteBinLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ShareIcon"
+                    tabler="IconShare"
+                    hugeicons="Share03Icon"
+                    phosphor="ShareIcon"
+                    remixicon="RiShareLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ShoppingBagIcon"
+                    tabler="IconShoppingBag"
+                    hugeicons="ShoppingBag01Icon"
+                    phosphor="BagIcon"
+                    remixicon="RiShoppingBagLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="MoreHorizontalIcon"
+                    tabler="IconDots"
+                    hugeicons="MoreHorizontalCircle01Icon"
+                    phosphor="DotsThreeIcon"
+                    remixicon="RiMoreLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="Loader2Icon"
+                    tabler="IconLoader"
+                    hugeicons="Loading03Icon"
+                    phosphor="SpinnerIcon"
+                    remixicon="RiLoaderLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="PlusIcon"
+                    tabler="IconPlus"
+                    hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
+                    remixicon="RiAddLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="MinusIcon"
+                    tabler="IconMinus"
+                    hugeicons="MinusSignIcon"
+                    phosphor="MinusIcon"
+                    remixicon="RiSubtractLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ArrowLeftIcon"
+                    tabler="IconArrowLeft"
+                    hugeicons="ArrowLeft02Icon"
+                    phosphor="ArrowLeftIcon"
+                    remixicon="RiArrowLeftLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ArrowRightIcon"
+                    tabler="IconArrowRight"
+                    hugeicons="ArrowRight02Icon"
+                    phosphor="ArrowRightIcon"
+                    remixicon="RiArrowRightLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CheckIcon"
+                    tabler="IconCheck"
+                    hugeicons="Tick02Icon"
+                    phosphor="CheckIcon"
+                    remixicon="RiCheckLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ChevronDownIcon"
+                    tabler="IconChevronDown"
+                    hugeicons="ArrowDown01Icon"
+                    phosphor="CaretDownIcon"
+                    remixicon="RiArrowDownSLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ChevronRightIcon"
+                    tabler="IconChevronRight"
+                    hugeicons="ArrowRight01Icon"
+                    phosphor="CaretRightIcon"
+                    remixicon="RiArrowRightSLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="SearchIcon"
+                    tabler="IconSearch"
+                    hugeicons="Search01Icon"
+                    phosphor="MagnifyingGlassIcon"
+                    remixicon="RiSearchLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="SettingsIcon"
+                    tabler="IconSettings"
+                    hugeicons="Settings01Icon"
+                    phosphor="GearIcon"
+                    remixicon="RiSettingsLine"
+                  />
+                </Card>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+        <div className="flex flex-col gap-4">
+          <Card className="w-full">
+            <CardContent className="flex flex-col gap-6">
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-wrap gap-2">
+                  <Button>Button</Button>
+                  <Button variant="secondary">Secondary</Button>
+                  <Button variant="outline">Outline</Button>
+                  <Button variant="destructive">Delete</Button>
+                </div>
+                <Item variant="outline">
+                  <ItemContent>
+                    <ItemTitle>Two-factor authentication</ItemTitle>
+                    <ItemDescription className="text-pretty xl:hidden 2xl:block">
+                      Verify via email or phone number.
+                    </ItemDescription>
+                  </ItemContent>
+                  <ItemActions className="hidden md:flex">
+                    <Button size="sm" variant="secondary">
+                      Enable
+                    </Button>
+                  </ItemActions>
+                </Item>
+              </div>
+              <Slider
+                value={sliderValue}
+                onValueChange={handleSliderValueChange}
+                max={1000}
+                min={0}
+                step={10}
+                className="flex-1"
+                aria-label="Slider"
+              />
+              <FieldGroup>
+                <Field>
+                  <InputGroup>
+                    <InputGroupInput placeholder="Name" />
+                    <InputGroupAddon align="inline-end">
+                      <InputGroupText>
+                        <IconPlaceholder
+                          lucide="SearchIcon"
+                          tabler="IconSearch"
+                          hugeicons="Search01Icon"
+                          phosphor="MagnifyingGlassIcon"
+                          remixicon="RiSearchLine"
+                        />
+                      </InputGroupText>
+                    </InputGroupAddon>
+                  </InputGroup>
+                </Field>
+                <Field className="flex-1">
+                  <Textarea placeholder="Message" className="resize-none" />
+                </Field>
+              </FieldGroup>
+              <div className="flex items-center gap-2">
+                <div className="flex gap-2">
+                  <Badge>Badge</Badge>
+                  <Badge variant="secondary">Secondary</Badge>
+                  <Badge variant="outline">Outline</Badge>
+                </div>
+                <RadioGroup
+                  defaultValue="apple"
+                  className="ml-auto flex w-fit gap-3"
+                >
+                  <RadioGroupItem value="apple" />
+                  <RadioGroupItem value="banana" />
+                </RadioGroup>
+                <div className="flex gap-3">
+                  <Checkbox defaultChecked />
+                  <Checkbox />
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <AlertDialog>
+                  <AlertDialogTrigger render={<Button variant="outline" />}>
+                    <span className="hidden md:block">Alert Dialog</span>
+                    <span className="block md:hidden">Dialog</span>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent size="sm">
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>
+                        Allow accessory to connect?
+                      </AlertDialogTitle>
+                      <AlertDialogDescription>
+                        Do you want to allow the USB accessory to connect to
+                        this device and your data?
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
+                      <AlertDialogAction>Allow</AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+                <ButtonGroup>
+                  <Button variant="outline">Button Group</Button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger
+                      render={<Button variant="outline" size="icon" />}
+                    >
+                      <IconPlaceholder
+                        lucide="ChevronUpIcon"
+                        tabler="IconChevronUp"
+                        hugeicons="ArrowUp01Icon"
+                        phosphor="CaretUpIcon"
+                        remixicon="RiArrowUpSLine"
+                      />
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="end"
+                      side="top"
+                      className="w-40"
+                    >
+                      <DropdownMenuGroup>
+                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
+                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>
+                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>
+                        <DropdownMenuItem>Block User</DropdownMenuItem>
+                      </DropdownMenuGroup>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuGroup>
+                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>
+                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>
+                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>
+                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>
+                      </DropdownMenuGroup>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuGroup>
+                        <DropdownMenuItem variant="destructive">
+                          Delete Conversation
+                        </DropdownMenuItem>
+                      </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </ButtonGroup>
+                <Switch defaultChecked className="ml-auto" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/bases/base/examples/dialog-example.tsx b/apps/v4/registry/bases/base/examples/dialog-example.tsx
index f754396a6c..73ffa06149 100644
--- a/apps/v4/registry/bases/base/examples/dialog-example.tsx
+++ b/apps/v4/registry/bases/base/examples/dialog-example.tsx
@@ -133,11 +133,11 @@ function DialogScrollableContent() {
               This is a dialog with scrollable content.
             </DialogDescription>
           </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          <div className="no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4">
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
-                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
               >
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
@@ -169,11 +169,11 @@ function DialogWithStickyFooter() {
               This is a dialog with scrollable content.
             </DialogDescription>
           </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          <div className="no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4">
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
-                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
               >
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
@@ -314,7 +314,7 @@ function DialogChatSettings() {
                 </TabsTrigger>
                 <TabsTrigger value="security">Security</TabsTrigger>
               </TabsList>
-              <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
+              <div className="border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]">
                 <TabsContent value="general">
                   <FieldSet>
                     <FieldGroup>
diff --git a/apps/v4/registry/bases/base/examples/drawer-example.tsx b/apps/v4/registry/bases/base/examples/drawer-example.tsx
index f40b0fd8a2..f6bd63ee7c 100644
--- a/apps/v4/registry/bases/base/examples/drawer-example.tsx
+++ b/apps/v4/registry/bases/base/examples/drawer-example.tsx
@@ -54,7 +54,7 @@ function DrawerWithSides() {
                 {Array.from({ length: 10 }).map((_, index) => (
                   <p
                     key={index}
-                    className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                    className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
                   >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                     do eiusmod tempor incididunt ut labore et dolore magna
@@ -97,7 +97,7 @@ function DrawerScrollableContent() {
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
-                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
               >
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
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 0ec414a235..7ad597aa76 100644
--- a/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
+++ b/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
@@ -620,7 +620,7 @@ function DropdownMenuWithAvatar() {
             </Avatar>
             <div className="grid flex-1 text-left text-sm leading-tight">
               <span className="truncate font-semibold">shadcn</span>
-              <span className="text-muted-foreground truncate text-xs">
+              <span className="truncate text-xs text-muted-foreground">
                 shadcn@example.com
               </span>
             </div>
@@ -630,7 +630,7 @@ function DropdownMenuWithAvatar() {
               hugeicons="UnfoldMoreIcon"
               phosphor="CaretUpDownIcon"
               remixicon="RiArrowUpDownLine"
-              className="text-muted-foreground ml-auto"
+              className="ml-auto text-muted-foreground"
             />
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-(--anchor-width) min-w-56">
@@ -845,7 +845,7 @@ function DropdownMenuComplex() {
         >
           Complex Menu
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48">
+        <DropdownMenuContent className="style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48">
           <DropdownMenuGroup>
             <DropdownMenuLabel>File</DropdownMenuLabel>
             <DropdownMenuItem>
diff --git a/apps/v4/registry/bases/base/examples/hover-card-example.tsx b/apps/v4/registry/bases/base/examples/hover-card-example.tsx
index 2c72395f35..bf6a0167ff 100644
--- a/apps/v4/registry/bases/base/examples/hover-card-example.tsx
+++ b/apps/v4/registry/bases/base/examples/hover-card-example.tsx
@@ -49,7 +49,7 @@ function HoverCardSides() {
               {side.replace("-", " ")}
             </HoverCardTrigger>
             <HoverCardContent side={side}>
-              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <div className="flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1">
                 <h4 className="font-medium">Hover Card</h4>
                 <p>
                   This hover card appears on the {side.replace("-", " ")} side
@@ -87,7 +87,7 @@ function HoverCardInDialog() {
               Hover me
             </HoverCardTrigger>
             <HoverCardContent>
-              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <div className="flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1">
                 <h4 className="font-medium">Hover Card</h4>
                 <p>
                   This hover card appears inside a dialog. Hover over the button
diff --git a/apps/v4/registry/bases/base/examples/input-group-example.tsx b/apps/v4/registry/bases/base/examples/input-group-example.tsx
index 1a5a16e4d1..28213666b7 100644
--- a/apps/v4/registry/bases/base/examples/input-group-example.tsx
+++ b/apps/v4/registry/bases/base/examples/input-group-example.tsx
@@ -195,7 +195,7 @@ function InputGroupWithAddons() {
                 hugeicons="AlertCircleIcon"
                 phosphor="InfoIcon"
                 remixicon="RiInformationLine"
-                className="text-muted-foreground ml-auto"
+                className="ml-auto text-muted-foreground"
               />
             </InputGroupAddon>
           </InputGroup>
@@ -212,7 +212,7 @@ function InputGroupWithAddons() {
                 hugeicons="AlertCircleIcon"
                 phosphor="InfoIcon"
                 remixicon="RiInformationLine"
-                className="text-muted-foreground ml-auto"
+                className="ml-auto text-muted-foreground"
               />
             </InputGroupAddon>
           </InputGroup>
@@ -460,7 +460,7 @@ function InputGroupWithTooltip({
                 </PopoverHeader>
               </PopoverContent>
             </Popover>
-            <InputGroupAddon className="text-muted-foreground pl-1">
+            <InputGroupAddon className="pl-1 text-muted-foreground">
               https://
             </InputGroupAddon>
             <InputGroupInput id="input-secure-19" />
@@ -807,7 +807,7 @@ function InputGroupTextareaExamples() {
                 hugeicons="AlertCircleIcon"
                 phosphor="InfoIcon"
                 remixicon="RiInformationLine"
-                className="text-muted-foreground ml-auto"
+                className="ml-auto text-muted-foreground"
               />
             </InputGroupAddon>
           </InputGroup>
diff --git a/apps/v4/registry/bases/base/examples/input-otp-example.tsx b/apps/v4/registry/bases/base/examples/input-otp-example.tsx
index d34b4806d2..5e40828761 100644
--- a/apps/v4/registry/bases/base/examples/input-otp-example.tsx
+++ b/apps/v4/registry/bases/base/examples/input-otp-example.tsx
@@ -254,13 +254,13 @@ function InputOTPForm() {
                 </Button>
               </div>
               <InputOTP maxLength={6} id="otp-verification" required>
-                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPGroup className="*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11">
                   <InputOTPSlot index={0} />
                   <InputOTPSlot index={1} />
                   <InputOTPSlot index={2} />
                 </InputOTPGroup>
                 <InputOTPSeparator />
-                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPGroup className="*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11">
                   <InputOTPSlot index={3} />
                   <InputOTPSlot index={4} />
                   <InputOTPSlot index={5} />
@@ -276,11 +276,11 @@ function InputOTPForm() {
           <Button type="submit" className="w-full">
             Verify
           </Button>
-          <div className="text-muted-foreground text-sm">
+          <div className="text-sm text-muted-foreground">
             Having trouble signing in?{" "}
             <a
               href="#"
-              className="hover:text-primary underline underline-offset-4 transition-colors"
+              className="underline underline-offset-4 transition-colors hover:text-primary"
             >
               Contact support
             </a>
diff --git a/apps/v4/registry/bases/base/examples/item-example.tsx b/apps/v4/registry/bases/base/examples/item-example.tsx
index e0ea21c493..5ae63ab73b 100644
--- a/apps/v4/registry/bases/base/examples/item-example.tsx
+++ b/apps/v4/registry/bases/base/examples/item-example.tsx
@@ -1620,7 +1620,7 @@ function ItemFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Last updated 2 hours ago
           </span>
         </ItemFooter>
@@ -1634,7 +1634,7 @@ function ItemFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Created by Sarah Chen
           </span>
         </ItemFooter>
@@ -1648,7 +1648,7 @@ function ItemFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">12 comments</span>
+          <span className="text-sm text-muted-foreground">12 comments</span>
         </ItemFooter>
       </Item>
     </Example>
@@ -1670,7 +1670,7 @@ function ItemHeaderAndFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Updated 5 minutes ago
           </span>
         </ItemFooter>
@@ -1687,7 +1687,7 @@ function ItemHeaderAndFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Status: In Progress
           </span>
         </ItemFooter>
@@ -1704,7 +1704,7 @@ function ItemHeaderAndFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Category: Technical • 3 attachments
           </span>
         </ItemFooter>
diff --git a/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx b/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx
index b784bebaf0..96cc393fa7 100644
--- a/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx
+++ b/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx
@@ -175,9 +175,9 @@ function ListItem({
   return (
     <li {...props}>
       <NavigationMenuLink render={<Link href={href} />}>
-        <div className="style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1">
+        <div className="flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs">
           <div className="leading-none font-medium">{title}</div>
-          <div className="text-muted-foreground line-clamp-2">{children}</div>
+          <div className="line-clamp-2 text-muted-foreground">{children}</div>
         </div>
       </NavigationMenuLink>
     </li>
diff --git a/apps/v4/registry/bases/base/examples/progress-example.tsx b/apps/v4/registry/bases/base/examples/progress-example.tsx
index a150ac899f..233f62bcf6 100644
--- a/apps/v4/registry/bases/base/examples/progress-example.tsx
+++ b/apps/v4/registry/bases/base/examples/progress-example.tsx
@@ -130,7 +130,7 @@ function FileUploadList() {
               <Progress value={file.progress} className="w-32" />
             </ItemContent>
             <ItemActions className="w-16 justify-end">
-              <span className="text-muted-foreground text-sm">
+              <span className="text-sm text-muted-foreground">
                 {file.timeRemaining}
               </span>
             </ItemActions>
diff --git a/apps/v4/registry/bases/base/examples/scroll-area-example.tsx b/apps/v4/registry/bases/base/examples/scroll-area-example.tsx
index e507bb19a0..b0a6a3b9bc 100644
--- a/apps/v4/registry/bases/base/examples/scroll-area-example.tsx
+++ b/apps/v4/registry/bases/base/examples/scroll-area-example.tsx
@@ -70,9 +70,9 @@ function ScrollAreaHorizontal() {
                   height={400}
                 />
               </div>
-              <figcaption className="text-muted-foreground pt-2 text-xs">
+              <figcaption className="pt-2 text-xs text-muted-foreground">
                 Photo by{" "}
-                <span className="text-foreground font-semibold">
+                <span className="font-semibold text-foreground">
                   {artwork.artist}
                 </span>
               </figcaption>
diff --git a/apps/v4/registry/bases/base/examples/separator-example.tsx b/apps/v4/registry/bases/base/examples/separator-example.tsx
index 60982e4285..c703724c97 100644
--- a/apps/v4/registry/bases/base/examples/separator-example.tsx
+++ b/apps/v4/registry/bases/base/examples/separator-example.tsx
@@ -18,7 +18,7 @@ export default function SeparatorExample() {
 function SeparatorHorizontal() {
   return (
     <Example title="Horizontal">
-      <div className="style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm">
+      <div className="flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed">
         <div className="flex flex-col gap-1">
           <div className="leading-none font-medium">shadcn/ui</div>
           <div className="text-muted-foreground">
@@ -38,7 +38,7 @@ function SeparatorHorizontal() {
 function SeparatorVertical() {
   return (
     <Example title="Vertical">
-      <div className="style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm">
+      <div className="flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed">
         <div>Blog</div>
         <Separator orientation="vertical" />
         <div>Docs</div>
@@ -52,24 +52,24 @@ function SeparatorVertical() {
 function SeparatorVerticalMenu() {
   return (
     <Example title="Vertical Menu">
-      <div className="style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4">
+      <div className="flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed">
         <div className="flex flex-col gap-1">
           <span className="font-medium">Settings</span>
-          <span className="text-muted-foreground text-xs">
+          <span className="text-xs text-muted-foreground">
             Manage preferences
           </span>
         </div>
         <Separator orientation="vertical" />
         <div className="flex flex-col gap-1">
           <span className="font-medium">Account</span>
-          <span className="text-muted-foreground text-xs">
+          <span className="text-xs text-muted-foreground">
             Profile & security
           </span>
         </div>
         <Separator orientation="vertical" />
         <div className="flex flex-col gap-1">
           <span className="font-medium">Help</span>
-          <span className="text-muted-foreground text-xs">Support & docs</span>
+          <span className="text-xs text-muted-foreground">Support & docs</span>
         </div>
       </div>
     </Example>
@@ -79,7 +79,7 @@ function SeparatorVerticalMenu() {
 function SeparatorInList() {
   return (
     <Example title="In List">
-      <div className="style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm">
+      <div className="flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed">
         <dl className="flex items-center justify-between">
           <dt>Item 1</dt>
           <dd className="text-muted-foreground">Value 1</dd>
diff --git a/apps/v4/registry/bases/base/examples/sheet-example.tsx b/apps/v4/registry/bases/base/examples/sheet-example.tsx
index 2b83512a9f..c4dfd1a716 100644
--- a/apps/v4/registry/bases/base/examples/sheet-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sheet-example.tsx
@@ -39,7 +39,7 @@ function SheetWithForm() {
               done.
             </SheetDescription>
           </SheetHeader>
-          <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4">
+          <div className="style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6">
             <FieldGroup>
               <Field>
                 <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
@@ -106,11 +106,11 @@ function SheetWithSides() {
                   done.
                 </SheetDescription>
               </SheetHeader>
-              <div className="no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto">
+              <div className="no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6">
                 {Array.from({ length: 10 }).map((_, index) => (
                   <p
                     key={index}
-                    className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                    className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
                   >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                     do eiusmod tempor incididunt ut labore et dolore magna
diff --git a/apps/v4/registry/bases/base/examples/sidebar-example.tsx b/apps/v4/registry/bases/base/examples/sidebar-example.tsx
index 627496b45c..4c87d74b30 100644
--- a/apps/v4/registry/bases/base/examples/sidebar-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sidebar-example.tsx
@@ -274,11 +274,11 @@ export default function SidebarExample() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/examples/sidebar-floating-example.tsx b/apps/v4/registry/bases/base/examples/sidebar-floating-example.tsx
index d6150b601f..15d5efe06e 100644
--- a/apps/v4/registry/bases/base/examples/sidebar-floating-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sidebar-floating-example.tsx
@@ -244,7 +244,7 @@ export default function SidebarFloatingExample() {
                   <Field>
                     <SidebarInput type="email" placeholder="Email" />
                     <Button
-                      className="bg-sidebar-primary text-sidebar-primary-foreground w-full"
+                      className="w-full bg-sidebar-primary text-sidebar-primary-foreground"
                       size="sm"
                     >
                       Subscribe
@@ -263,11 +263,11 @@ export default function SidebarFloatingExample() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/examples/sidebar-icon-example.tsx b/apps/v4/registry/bases/base/examples/sidebar-icon-example.tsx
index 75a6bc86f6..0bd87b3750 100644
--- a/apps/v4/registry/bases/base/examples/sidebar-icon-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sidebar-icon-example.tsx
@@ -326,36 +326,36 @@ export default function SidebarIconExample() {
                   key={item.title}
                   defaultOpen={item.isActive}
                   className="group/collapsible"
-                  render={<SidebarMenuItem />}
                 >
-                  <SidebarMenuButton
-                    tooltip={item.title}
-                    render={<CollapsibleTrigger />}
-                  >
-                    {item.icon}
-                    <span>{item.title}</span>
-                    <IconPlaceholder
-                      lucide="ChevronRightIcon"
-                      tabler="IconChevronRight"
-                      hugeicons="ArrowRight01Icon"
-                      phosphor="CaretRightIcon"
-                      remixicon="RiArrowRightSLine"
-                      className="ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90"
-                    />
-                  </SidebarMenuButton>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {item.items?.map((subItem) => (
-                        <SidebarMenuSubItem key={subItem.title}>
-                          <SidebarMenuSubButton
-                            render={<a href={subItem.url} />}
-                          >
-                            {subItem.title}
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
+                  <SidebarMenuItem>
+                    <CollapsibleTrigger
+                      render={<SidebarMenuButton tooltip={item.title} />}
+                    >
+                      {item.icon}
+                      <span>{item.title}</span>
+                      <IconPlaceholder
+                        lucide="ChevronRightIcon"
+                        tabler="IconChevronRight"
+                        hugeicons="ArrowRight01Icon"
+                        phosphor="CaretRightIcon"
+                        remixicon="RiArrowRightSLine"
+                        className="ml-auto transition-transform duration-100 group-data-open/collapsible:rotate-90"
+                      />
+                    </CollapsibleTrigger>
+                    <CollapsibleContent>
+                      <SidebarMenuSub>
+                        {item.items?.map((subItem) => (
+                          <SidebarMenuSubItem key={subItem.title}>
+                            <SidebarMenuSubButton
+                              render={<a href={subItem.url} />}
+                            >
+                              {subItem.title}
+                            </SidebarMenuSubButton>
+                          </SidebarMenuSubItem>
+                        ))}
+                      </SidebarMenuSub>
+                    </CollapsibleContent>
+                  </SidebarMenuItem>
                 </Collapsible>
               ))}
             </SidebarMenu>
@@ -449,11 +449,11 @@ export default function SidebarIconExample() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/examples/sidebar-inset-example.tsx b/apps/v4/registry/bases/base/examples/sidebar-inset-example.tsx
index 0e01369fa2..529b64160b 100644
--- a/apps/v4/registry/bases/base/examples/sidebar-inset-example.tsx
+++ b/apps/v4/registry/bases/base/examples/sidebar-inset-example.tsx
@@ -275,11 +275,11 @@ export default function SidebarInsetExample() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/base/examples/slider-example.tsx b/apps/v4/registry/bases/base/examples/slider-example.tsx
index e6a049fcee..cefed17d90 100644
--- a/apps/v4/registry/bases/base/examples/slider-example.tsx
+++ b/apps/v4/registry/bases/base/examples/slider-example.tsx
@@ -77,7 +77,7 @@ function SliderControlled() {
       <div className="grid w-full gap-3">
         <div className="flex items-center justify-between gap-2">
           <Label htmlFor="slider-demo-temperature">Temperature</Label>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             {value.join(", ")}
           </span>
         </div>
diff --git a/apps/v4/registry/bases/base/examples/tabs-example.tsx b/apps/v4/registry/bases/base/examples/tabs-example.tsx
index a539d26cdf..16c1f0c9ea 100644
--- a/apps/v4/registry/bases/base/examples/tabs-example.tsx
+++ b/apps/v4/registry/bases/base/examples/tabs-example.tsx
@@ -195,7 +195,7 @@ function TabsWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -220,7 +220,7 @@ function TabsLineWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -284,7 +284,7 @@ function TabsWithDropdown() {
           </DropdownMenu>
         </div>
 
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>
@@ -309,7 +309,7 @@ function TabsVertical() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -342,7 +342,7 @@ function TabsWithInputAndButton() {
             <Button>Action</Button>
           </div>
         </div>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>
diff --git a/apps/v4/registry/bases/base/examples/toggle-group-example.tsx b/apps/v4/registry/bases/base/examples/toggle-group-example.tsx
index 7059795e53..95745cd490 100644
--- a/apps/v4/registry/bases/base/examples/toggle-group-example.tsx
+++ b/apps/v4/registry/bases/base/examples/toggle-group-example.tsx
@@ -205,7 +205,7 @@ function ToggleGroupWithIcons() {
         <ToggleGroupItem
           value="star"
           aria-label="Toggle star"
-          className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+          className="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground"
         >
           <IconPlaceholder
             lucide="StarIcon"
@@ -219,7 +219,7 @@ function ToggleGroupWithIcons() {
         <ToggleGroupItem
           value="heart"
           aria-label="Toggle heart"
-          className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+          className="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground"
         >
           <IconPlaceholder
             lucide="HeartIcon"
@@ -233,7 +233,7 @@ function ToggleGroupWithIcons() {
         <ToggleGroupItem
           value="bookmark"
           aria-label="Toggle bookmark"
-          className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+          className="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground"
         >
           <IconPlaceholder
             lucide="BookmarkIcon"
@@ -489,7 +489,7 @@ function ToggleGroupFontWeightSelector() {
             className="flex size-16 flex-col items-center justify-center rounded-xl"
           >
             <span className="text-2xl leading-none font-light">Aa</span>
-            <span className="text-muted-foreground text-xs">Light</span>
+            <span className="text-xs text-muted-foreground">Light</span>
           </ToggleGroupItem>
           <ToggleGroupItem
             value="normal"
@@ -497,7 +497,7 @@ function ToggleGroupFontWeightSelector() {
             className="flex size-16 flex-col items-center justify-center rounded-xl"
           >
             <span className="text-2xl leading-none font-normal">Aa</span>
-            <span className="text-muted-foreground text-xs">Normal</span>
+            <span className="text-xs text-muted-foreground">Normal</span>
           </ToggleGroupItem>
           <ToggleGroupItem
             value="medium"
@@ -505,7 +505,7 @@ function ToggleGroupFontWeightSelector() {
             className="flex size-16 flex-col items-center justify-center rounded-xl"
           >
             <span className="text-2xl leading-none font-medium">Aa</span>
-            <span className="text-muted-foreground text-xs">Medium</span>
+            <span className="text-xs text-muted-foreground">Medium</span>
           </ToggleGroupItem>
           <ToggleGroupItem
             value="bold"
@@ -513,12 +513,12 @@ function ToggleGroupFontWeightSelector() {
             className="flex size-16 flex-col items-center justify-center rounded-xl"
           >
             <span className="text-2xl leading-none font-bold">Aa</span>
-            <span className="text-muted-foreground text-xs">Bold</span>
+            <span className="text-xs text-muted-foreground">Bold</span>
           </ToggleGroupItem>
         </ToggleGroup>
         <FieldDescription>
           Use{" "}
-          <code className="bg-muted rounded-md px-1 py-0.5 font-mono">
+          <code className="rounded-md bg-muted px-1 py-0.5 font-mono">
             font-{fontWeight}
           </code>{" "}
           to set the font weight.
diff --git a/apps/v4/registry/bases/base/examples/tooltip-example.tsx b/apps/v4/registry/bases/base/examples/tooltip-example.tsx
index e368c25250..1353c9e4a8 100644
--- a/apps/v4/registry/bases/base/examples/tooltip-example.tsx
+++ b/apps/v4/registry/bases/base/examples/tooltip-example.tsx
@@ -141,10 +141,8 @@ function TooltipWithKeyboard() {
             remixicon="RiSaveLine"
           />
         </TooltipTrigger>
-        <TooltipContent className="pr-1.5">
-          <div className="flex items-center gap-2">
-            Save Changes <Kbd>S</Kbd>
-          </div>
+        <TooltipContent>
+          Save Changes <Kbd>S</Kbd>
         </TooltipContent>
       </Tooltip>
     </Example>
@@ -159,7 +157,7 @@ function TooltipOnLink() {
           render={
             <a
               href="#"
-              className="text-primary w-fit text-sm underline-offset-4 hover:underline"
+              className="w-fit text-sm text-primary underline-offset-4 hover:underline"
               onClick={(e) => e.preventDefault()}
             />
           }
diff --git a/apps/v4/registry/bases/base/registry.ts b/apps/v4/registry/bases/base/registry.ts
index 4f803f3cd1..e2e9bc7c17 100644
--- a/apps/v4/registry/bases/base/registry.ts
+++ b/apps/v4/registry/bases/base/registry.ts
@@ -11,19 +11,47 @@ import { internal } from "./internal/_registry"
 import { lib } from "./lib/_registry"
 import { ui } from "./ui/_registry"
 
+// Shared between index and style.
+const BASE_STYLE = {
+  type: "registry:style",
+  dependencies: ["class-variance-authority", "lucide-react", "@base-ui/react"],
+  devDependencies: ["tw-animate-css", "shadcn"],
+  registryDependencies: ["utils"],
+  css: {
+    '@import "tw-animate-css"': {},
+    '@import "shadcn/tailwind.css"': {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {},
+      },
+      body: {
+        "@apply bg-background text-foreground": {},
+      },
+    },
+  },
+  cssVars: {},
+  files: [],
+}
+
 export const registry = {
   name: "shadcn/ui",
   homepage: "https://ui.shadcn.com",
-  items: z
-    .array(registryItemSchema)
-    .parse([
-      ...ui,
-      ...examples,
-      ...lib,
-      ...components,
-      ...blocks,
-      ...hooks,
-      ...internal,
-      ...fonts,
-    ]),
+  items: z.array(registryItemSchema).parse([
+    {
+      name: "index",
+      ...BASE_STYLE,
+    },
+    {
+      name: "style",
+      ...BASE_STYLE,
+    },
+    ...ui,
+    ...examples,
+    ...lib,
+    ...components,
+    ...blocks,
+    ...hooks,
+    ...internal,
+    ...fonts,
+  ]),
 } satisfies Registry
diff --git a/apps/v4/registry/bases/base/ui/_registry.ts b/apps/v4/registry/bases/base/ui/_registry.ts
index f6993983fc..0b38fc3a6b 100644
--- a/apps/v4/registry/bases/base/ui/_registry.ts
+++ b/apps/v4/registry/bases/base/ui/_registry.ts
@@ -10,6 +10,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/accordion",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/accordion-example.tsx",
+        api: "https://base-ui.com/react/components/accordion.md",
+      },
+    },
   },
   {
     name: "alert",
@@ -20,6 +28,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/alert",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-example.tsx",
+      },
+    },
   },
   {
     name: "alert-dialog",
@@ -31,6 +46,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/alert-dialog",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/alert-dialog-example.tsx",
+        api: "https://base-ui.com/react/components/alert-dialog.md",
+      },
+    },
   },
   {
     name: "aspect-ratio",
@@ -41,6 +64,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/aspect-ratio",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/aspect-ratio-example.tsx",
+      },
+    },
   },
   {
     name: "avatar",
@@ -51,6 +81,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/avatar",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/avatar-example.tsx",
+        api: "https://base-ui.com/react/components/avatar.md",
+      },
+    },
   },
   {
     name: "badge",
@@ -61,6 +99,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/badge",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/badge-example.tsx",
+      },
+    },
   },
   {
     name: "breadcrumb",
@@ -71,6 +116,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/breadcrumb",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/breadcrumb-example.tsx",
+      },
+    },
   },
   {
     name: "button",
@@ -81,6 +133,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/button",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-example.tsx",
+      },
+    },
   },
   {
     name: "button-group",
@@ -92,6 +151,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/button-group",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/button-group-example.tsx",
+      },
+    },
   },
   {
     name: "calendar",
@@ -104,6 +170,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/calendar",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/calendar-example.tsx",
+        api: "https://react-day-picker.js.org",
+      },
+    },
   },
   {
     name: "card",
@@ -114,6 +188,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/card",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/card-example.tsx",
+      },
+    },
   },
   {
     name: "carousel",
@@ -126,6 +207,14 @@ export const ui: Registry["items"] = [
     ],
     registryDependencies: ["button"],
     dependencies: ["embla-carousel-react"],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/carousel",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/carousel-example.tsx",
+        api: "https://www.embla-carousel.com/get-started/react",
+      },
+    },
   },
   {
     name: "chart",
@@ -138,6 +227,13 @@ export const ui: Registry["items"] = [
     ],
     registryDependencies: ["card"],
     dependencies: ["recharts@2.15.4"],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/chart",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/chart-example.tsx",
+      },
+    },
   },
   {
     name: "checkbox",
@@ -148,6 +244,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/checkbox",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/checkbox-example.tsx",
+        api: "https://base-ui.com/react/components/checkbox.md",
+      },
+    },
   },
   {
     name: "collapsible",
@@ -158,6 +262,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/collapsible",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/collapsible-example.tsx",
+        api: "https://base-ui.com/react/components/collapsible.md",
+      },
+    },
   },
   {
     name: "combobox",
@@ -170,6 +282,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/combobox",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/combobox-example.tsx",
+        api: "https://base-ui.com/react/components/combobox.md",
+      },
+    },
   },
   {
     name: "command",
@@ -182,6 +302,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/command",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/command-example.tsx",
+        api: "https://github.com/dip/cmdk",
+      },
+    },
   },
   {
     name: "context-menu",
@@ -192,6 +320,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/context-menu",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/context-menu-example.tsx",
+        api: "https://base-ui.com/react/components/context-menu.md",
+      },
+    },
   },
   {
     name: "dialog",
@@ -203,6 +339,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/dialog",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dialog-example.tsx",
+        api: "https://base-ui.com/react/components/dialog.md",
+      },
+    },
   },
   {
     name: "drawer",
@@ -214,6 +358,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/drawer",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/drawer-example.tsx",
+        api: "https://vaul.emilkowal.ski/getting-started",
+      },
+    },
   },
   {
     name: "dropdown-menu",
@@ -224,6 +376,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/dropdown-menu",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx",
+        api: "https://base-ui.com/react/components/menu.md",
+      },
+    },
   },
   {
     name: "empty",
@@ -234,6 +394,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/empty",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/empty-example.tsx",
+      },
+    },
   },
   {
     name: "field",
@@ -245,6 +412,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/field",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/field-example.tsx",
+      },
+    },
   },
   {
     name: "form",
@@ -259,6 +433,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/hover-card",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/hover-card-example.tsx",
+        api: "https://base-ui.com/react/components/hover-card.md",
+      },
+    },
   },
   {
     name: "input",
@@ -269,6 +451,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/input",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-example.tsx",
+      },
+    },
   },
   {
     name: "input-group",
@@ -280,6 +469,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/input-group",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-group-example.tsx",
+      },
+    },
   },
   {
     name: "input-otp",
@@ -291,6 +487,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/input-otp",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/input-otp-example.tsx",
+        api: "https://input-otp.rodz.dev",
+      },
+    },
   },
   {
     name: "item",
@@ -302,6 +506,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/item",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/item-example.tsx",
+      },
+    },
   },
   {
     name: "label",
@@ -312,6 +523,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/label",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/label-example.tsx",
+        api: "https://base-ui.com/react/components/label.md",
+      },
+    },
   },
   {
     name: "menubar",
@@ -323,6 +542,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/menubar",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/menubar-example.tsx",
+        api: "https://base-ui.com/react/components/menubar.md",
+      },
+    },
   },
   {
     name: "navigation-menu",
@@ -333,6 +560,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/navigation-menu",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/navigation-menu-example.tsx",
+        api: "https://base-ui.com/react/components/navigation-menu.md",
+      },
+    },
   },
   {
     name: "pagination",
@@ -344,6 +579,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/pagination",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/pagination-example.tsx",
+      },
+    },
   },
   {
     name: "popover",
@@ -354,6 +596,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/popover",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/popover-example.tsx",
+        api: "https://base-ui.com/react/components/popover.md",
+      },
+    },
   },
   {
     name: "progress",
@@ -364,6 +614,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/progress",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/progress-example.tsx",
+        api: "https://base-ui.com/react/components/progress.md",
+      },
+    },
   },
   {
     name: "radio-group",
@@ -374,6 +632,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/radio-group",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/radio-group-example.tsx",
+        api: "https://base-ui.com/react/components/radio-group.md",
+      },
+    },
   },
   {
     name: "resizable",
@@ -385,6 +651,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/resizable",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/resizable-example.tsx",
+        api: "https://github.com/bvaughn/react-resizable-panels",
+      },
+    },
   },
   {
     name: "scroll-area",
@@ -395,6 +669,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/scroll-area",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/scroll-area-example.tsx",
+        api: "https://base-ui.com/react/components/scroll-area.md",
+      },
+    },
   },
   {
     name: "select",
@@ -405,6 +687,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/select",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/select-example.tsx",
+        api: "https://base-ui.com/react/components/select.md",
+      },
+    },
   },
   {
     name: "separator",
@@ -415,6 +705,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/separator",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/separator-example.tsx",
+        api: "https://base-ui.com/react/components/separator.md",
+      },
+    },
   },
   {
     name: "sheet",
@@ -426,6 +724,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/sheet",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sheet-example.tsx",
+        api: "https://base-ui.com/react/components/dialog.md",
+      },
+    },
   },
   {
     name: "sidebar",
@@ -445,6 +751,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/sidebar",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sidebar-example.tsx",
+      },
+    },
   },
   {
     name: "skeleton",
@@ -455,6 +768,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/skeleton",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/skeleton-example.tsx",
+      },
+    },
   },
   {
     name: "slider",
@@ -465,6 +785,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/slider",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/slider-example.tsx",
+        api: "https://base-ui.com/react/components/slider.md",
+      },
+    },
   },
   {
     name: "sonner",
@@ -476,6 +804,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/sonner",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/sonner-example.tsx",
+        api: "https://sonner.emilkowal.ski",
+      },
+    },
   },
   {
     name: "spinner",
@@ -486,6 +822,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/spinner",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/spinner-example.tsx",
+      },
+    },
   },
   {
     name: "switch",
@@ -496,6 +839,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/switch",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/switch-example.tsx",
+        api: "https://base-ui.com/react/components/switch.md",
+      },
+    },
   },
   {
     name: "table",
@@ -506,6 +857,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/table",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/table-example.tsx",
+      },
+    },
   },
   {
     name: "tabs",
@@ -516,6 +874,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/tabs",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tabs-example.tsx",
+        api: "https://base-ui.com/react/components/tabs.md",
+      },
+    },
   },
   {
     name: "textarea",
@@ -526,6 +892,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/textarea",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/textarea-example.tsx",
+      },
+    },
   },
   {
     name: "toggle",
@@ -536,6 +909,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/toggle",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-example.tsx",
+        api: "https://base-ui.com/react/components/toggle.md",
+      },
+    },
   },
   {
     name: "toggle-group",
@@ -547,6 +928,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/toggle-group",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/toggle-group-example.tsx",
+        api: "https://base-ui.com/react/components/toggle-group.md",
+      },
+    },
   },
   {
     name: "tooltip",
@@ -573,6 +962,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/tooltip",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/tooltip-example.tsx",
+        api: "https://base-ui.com/react/components/tooltip.md",
+      },
+    },
   },
   {
     name: "kbd",
@@ -583,6 +980,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/kbd",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/kbd-example.tsx",
+      },
+    },
   },
   {
     name: "native-select",
@@ -593,6 +997,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/native-select",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/base/examples/native-select-example.tsx",
+      },
+    },
   },
   {
     name: "direction",
@@ -604,5 +1015,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/base/direction",
+        api: "https://base-ui.com/react/utils/direction-provider.md",
+      },
+    },
   },
 ]
diff --git a/apps/v4/registry/bases/base/ui/accordion.tsx b/apps/v4/registry/bases/base/ui/accordion.tsx
index f119098e8b..b2128b5905 100644
--- a/apps/v4/registry/bases/base/ui/accordion.tsx
+++ b/apps/v4/registry/bases/base/ui/accordion.tsx
@@ -77,7 +77,7 @@ function AccordionContent({
     >
       <div
         className={cn(
-          "cn-accordion-content-inner [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          "cn-accordion-content-inner h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
           className
         )}
       >
diff --git a/apps/v4/registry/bases/base/ui/alert.tsx b/apps/v4/registry/bases/base/ui/alert.tsx
index a221b15dc3..f1b6630100 100644
--- a/apps/v4/registry/bases/base/ui/alert.tsx
+++ b/apps/v4/registry/bases/base/ui/alert.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/registry/bases/base/lib/utils"
 
-const alertVariants = cva("cn-alert w-full relative group/alert", {
+const alertVariants = cva("cn-alert group/alert relative w-full", {
   variants: {
     variant: {
       default: "cn-alert-variant-default",
@@ -35,7 +35,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "cn-alert-title [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        "cn-alert-title [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
@@ -51,7 +51,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "cn-alert-description [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        "cn-alert-description [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/base/ui/avatar.tsx b/apps/v4/registry/bases/base/ui/avatar.tsx
index 507657a309..39c33e3ff1 100644
--- a/apps/v4/registry/bases/base/ui/avatar.tsx
+++ b/apps/v4/registry/bases/base/ui/avatar.tsx
@@ -17,7 +17,7 @@ function Avatar({
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "cn-avatar after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+        "cn-avatar group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
         className
       )}
       {...props}
@@ -75,7 +75,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="avatar-group"
       className={cn(
-        "cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        "cn-avatar-group group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
         className
       )}
       {...props}
@@ -91,7 +91,7 @@ function AvatarGroupCount({
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "cn-avatar-group-count ring-background relative flex shrink-0 items-center justify-center ring-2",
+        "cn-avatar-group-count relative flex shrink-0 items-center justify-center ring-2 ring-background",
         "",
         className
       )}
diff --git a/apps/v4/registry/bases/base/ui/badge.tsx b/apps/v4/registry/bases/base/ui/badge.tsx
index 9fee4b486d..c67b787699 100644
--- a/apps/v4/registry/bases/base/ui/badge.tsx
+++ b/apps/v4/registry/bases/base/ui/badge.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/registry/bases/base/lib/utils"
 
 const badgeVariants = cva(
-  "cn-badge inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  "cn-badge group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/registry/bases/base/ui/button-group.tsx b/apps/v4/registry/bases/base/ui/button-group.tsx
index 661d8cadea..c1f1aeaa23 100644
--- a/apps/v4/registry/bases/base/ui/button-group.tsx
+++ b/apps/v4/registry/bases/base/ui/button-group.tsx
@@ -6,14 +6,14 @@ import { cn } from "@/registry/bases/base/lib/utils"
 import { Separator } from "@/registry/bases/base/ui/separator"
 
 const buttonGroupVariants = cva(
-  "cn-button-group flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "cn-button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "cn-button-group-orientation-horizontal [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none",
+          "cn-button-group-orientation-horizontal *:data-slot:rounded-r-none [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0",
         vertical:
-          "cn-button-group-orientation-vertical flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none",
+          "cn-button-group-orientation-vertical flex-col *:data-slot:rounded-b-none [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0",
       },
     },
     defaultVariants: {
diff --git a/apps/v4/registry/bases/base/ui/button.tsx b/apps/v4/registry/bases/base/ui/button.tsx
index 628925b0af..94ada62406 100644
--- a/apps/v4/registry/bases/base/ui/button.tsx
+++ b/apps/v4/registry/bases/base/ui/button.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/registry/bases/base/lib/utils"
 
 const buttonVariants = cva(
-  "cn-button inline-flex items-center justify-center whitespace-nowrap  transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "cn-button group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/apps/v4/registry/bases/base/ui/calendar.tsx b/apps/v4/registry/bases/base/ui/calendar.tsx
index 7dd3a0f341..f51425ec2b 100644
--- a/apps/v4/registry/bases/base/ui/calendar.tsx
+++ b/apps/v4/registry/bases/base/ui/calendar.tsx
@@ -31,7 +31,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "cn-calendar bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        "cn-calendar group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -46,80 +46,80 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
+          "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
+          "absolute inset-0 bg-popover opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
             : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate",
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate",
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
           defaultClassNames.range_end
         ),
         today: cn(
-          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -233,7 +233,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "cn-calendar-day-button data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        "cn-calendar-day-button relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/registry/bases/base/ui/chart.tsx b/apps/v4/registry/bases/base/ui/chart.tsx
index 3037b03b05..d6333032d5 100644
--- a/apps/v4/registry/bases/base/ui/chart.tsx
+++ b/apps/v4/registry/bases/base/ui/chart.tsx
@@ -55,7 +55,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "cn-chart [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "cn-chart flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -187,7 +187,7 @@ function ChartTooltipContent({
               <div
                 key={item.dataKey}
                 className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
                 )}
               >
@@ -232,7 +232,7 @@ function ChartTooltipContent({
                         </span>
                       </div>
                       {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
+                        <span className="font-mono font-medium text-foreground tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -284,7 +284,7 @@ function ChartLegendContent({
             <div
               key={item.value}
               className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
diff --git a/apps/v4/registry/bases/base/ui/dropdown-menu.tsx b/apps/v4/registry/bases/base/ui/dropdown-menu.tsx
index c6fb95c031..a223d9d1b6 100644
--- a/apps/v4/registry/bases/base/ui/dropdown-menu.tsx
+++ b/apps/v4/registry/bases/base/ui/dropdown-menu.tsx
@@ -113,7 +113,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "cn-dropdown-menu-sub-trigger data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "cn-dropdown-menu-sub-trigger flex cursor-default items-center outline-hidden select-none data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/base/ui/empty.tsx b/apps/v4/registry/bases/base/ui/empty.tsx
index 1f4509d955..6a3241f7d0 100644
--- a/apps/v4/registry/bases/base/ui/empty.tsx
+++ b/apps/v4/registry/bases/base/ui/empty.tsx
@@ -73,7 +73,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
     <div
       data-slot="empty-description"
       className={cn(
-        "cn-empty-description text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "cn-empty-description text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/base/ui/field.tsx b/apps/v4/registry/bases/base/ui/field.tsx
index 2d7827c0ef..04a06b9024 100644
--- a/apps/v4/registry/bases/base/ui/field.tsx
+++ b/apps/v4/registry/bases/base/ui/field.tsx
@@ -51,9 +51,9 @@ const fieldVariants = cva("cn-field group/field flex w-full", {
       vertical:
         "cn-field-orientation-vertical flex-col *:w-full [&>.sr-only]:w-auto",
       horizontal:
-        "cn-field-orientation-horizontal flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        "cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       responsive:
-        "cn-field-orientation-responsive flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        "cn-field-orientation-responsive flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
     },
   },
   defaultVariants: {
@@ -127,7 +127,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
       className={cn(
         "cn-field-description leading-normal font-normal group-has-data-horizontal/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
@@ -152,7 +152,7 @@ function FieldSeparator({
       <Separator className="absolute inset-0 top-1/2" />
       {children && (
         <span
-          className="cn-field-separator-content bg-background relative mx-auto block w-fit"
+          className="cn-field-separator-content relative mx-auto block w-fit bg-background"
           data-slot="field-separator-content"
         >
           {children}
diff --git a/apps/v4/registry/bases/base/ui/input-group.tsx b/apps/v4/registry/bases/base/ui/input-group.tsx
index e38ba36bf4..3aea74ebd0 100644
--- a/apps/v4/registry/bases/base/ui/input-group.tsx
+++ b/apps/v4/registry/bases/base/ui/input-group.tsx
@@ -64,7 +64,7 @@ function InputGroupAddon({
 }
 
 const inputGroupButtonVariants = cva(
-  "cn-input-group-button shadow-none flex items-center",
+  "cn-input-group-button flex items-center shadow-none",
   {
     variants: {
       size: {
diff --git a/apps/v4/registry/bases/base/ui/input.tsx b/apps/v4/registry/bases/base/ui/input.tsx
index e1ecc86c9a..d45a0b058b 100644
--- a/apps/v4/registry/bases/base/ui/input.tsx
+++ b/apps/v4/registry/bases/base/ui/input.tsx
@@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "cn-input file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "cn-input w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/base/ui/item.tsx b/apps/v4/registry/bases/base/ui/item.tsx
index 58c6697dd6..6230a49158 100644
--- a/apps/v4/registry/bases/base/ui/item.tsx
+++ b/apps/v4/registry/bases/base/ui/item.tsx
@@ -35,7 +35,7 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "cn-item w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  "cn-item group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
   {
     variants: {
       variant: {
@@ -142,7 +142,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="item-description"
       className={cn(
-        "cn-item-description [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
+        "cn-item-description line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/base/ui/navigation-menu.tsx b/apps/v4/registry/bases/base/ui/navigation-menu.tsx
index d210c3bdcb..e3d12d0d44 100644
--- a/apps/v4/registry/bases/base/ui/navigation-menu.tsx
+++ b/apps/v4/registry/bases/base/ui/navigation-menu.tsx
@@ -56,7 +56,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "cn-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "cn-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none"
 )
 
 function NavigationMenuTrigger({
diff --git a/apps/v4/registry/bases/base/ui/resizable.tsx b/apps/v4/registry/bases/base/ui/resizable.tsx
index 193b380200..0e6a967d56 100644
--- a/apps/v4/registry/bases/base/ui/resizable.tsx
+++ b/apps/v4/registry/bases/base/ui/resizable.tsx
@@ -35,7 +35,7 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "cn-resizable-handle bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "cn-resizable-handle relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/base/ui/scroll-area.tsx b/apps/v4/registry/bases/base/ui/scroll-area.tsx
index 878e281809..7d251e056d 100644
--- a/apps/v4/registry/bases/base/ui/scroll-area.tsx
+++ b/apps/v4/registry/bases/base/ui/scroll-area.tsx
@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="cn-scroll-area-viewport size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -46,7 +46,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.Thumb
         data-slot="scroll-area-thumb"
-        className="cn-scroll-area-thumb bg-border relative flex-1"
+        className="cn-scroll-area-thumb relative flex-1 bg-border"
       />
     </ScrollAreaPrimitive.Scrollbar>
   )
diff --git a/apps/v4/registry/bases/base/ui/separator.tsx b/apps/v4/registry/bases/base/ui/separator.tsx
index efdfd168bd..cf212eb4de 100644
--- a/apps/v4/registry/bases/base/ui/separator.tsx
+++ b/apps/v4/registry/bases/base/ui/separator.tsx
@@ -14,7 +14,7 @@ function Separator({
       data-slot="separator"
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/base/ui/sidebar.tsx b/apps/v4/registry/bases/base/ui/sidebar.tsx
index 22d64a9a9b..cfeb87df42 100644
--- a/apps/v4/registry/bases/base/ui/sidebar.tsx
+++ b/apps/v4/registry/bases/base/ui/sidebar.tsx
@@ -138,7 +138,7 @@ function SidebarProvider({
           } as React.CSSProperties
         }
         className={cn(
-          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
           className
         )}
         {...props}
@@ -169,7 +169,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
           className
         )}
         {...props}
@@ -187,7 +187,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -207,7 +207,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer hidden text-sidebar-foreground md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -299,7 +299,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
         "cn-sidebar-rail absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
@@ -434,7 +434,7 @@ function SidebarGroupAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "cn-sidebar-group-action flex aspect-square items-center justify-center outline-hidden transition-transform [&>svg]:shrink-0 after:absolute after:-inset-2 md:after:hidden group-data-[collapsible=icon]:hidden",
+          "cn-sidebar-group-action flex aspect-square items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
           className
         ),
       },
@@ -485,11 +485,11 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "cn-sidebar-menu-button peer/menu-button flex w-full items-center  overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  "cn-sidebar-menu-button peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
-        default: "cn-sidebar-menu-button-variant-default ",
+        default: "cn-sidebar-menu-button-variant-default",
         outline: "cn-sidebar-menu-button-variant-outline",
       },
       size: {
@@ -527,7 +527,7 @@ function SidebarMenuButton({
       },
       props
     ),
-    render: !tooltip ? render : TooltipTrigger,
+    render: !tooltip ? render : <TooltipTrigger render={render} />,
     state: {
       slot: "sidebar-menu-button",
       sidebar: "menu-button",
@@ -575,7 +575,7 @@ function SidebarMenuAction({
         className: cn(
           "cn-sidebar-menu-action flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
           showOnHover &&
-            "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+            "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
         ),
       },
diff --git a/apps/v4/registry/bases/base/ui/tabs.tsx b/apps/v4/registry/bases/base/ui/tabs.tsx
index 4bacae859c..a9f20615cc 100644
--- a/apps/v4/registry/bases/base/ui/tabs.tsx
+++ b/apps/v4/registry/bases/base/ui/tabs.tsx
@@ -24,7 +24,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "cn-tabs-list group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  "cn-tabs-list group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
   {
     variants: {
       variant: {
@@ -58,10 +58,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "cn-tabs-trigger focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "cn-tabs-trigger relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-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",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/base/ui/textarea.tsx b/apps/v4/registry/bases/base/ui/textarea.tsx
index 33ae92b167..e703bf57c6 100644
--- a/apps/v4/registry/bases/base/ui/textarea.tsx
+++ b/apps/v4/registry/bases/base/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "cn-textarea placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "cn-textarea flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/base/ui/toggle.tsx b/apps/v4/registry/bases/base/ui/toggle.tsx
index c70287c0df..dc7c644e9e 100644
--- a/apps/v4/registry/bases/base/ui/toggle.tsx
+++ b/apps/v4/registry/bases/base/ui/toggle.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/registry/bases/base/lib/utils"
 
 const toggleVariants = cva(
-  "cn-toggle group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "cn-toggle group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/apps/v4/registry/bases/base/ui/tooltip.tsx b/apps/v4/registry/bases/base/ui/tooltip.tsx
index 58beb12fca..f145a091ac 100644
--- a/apps/v4/registry/bases/base/ui/tooltip.tsx
+++ b/apps/v4/registry/bases/base/ui/tooltip.tsx
@@ -50,13 +50,13 @@ function TooltipContent({
         <TooltipPrimitive.Popup
           data-slot="tooltip-content"
           className={cn(
-            "cn-tooltip-content cn-tooltip-content-logical bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)",
+            "cn-tooltip-content cn-tooltip-content-logical z-50 w-fit max-w-xs origin-(--transform-origin) bg-foreground text-background",
             className
           )}
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="cn-tooltip-arrow cn-tooltip-arrow-logical bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+          <TooltipPrimitive.Arrow className="cn-tooltip-arrow cn-tooltip-arrow-logical z-50 bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
         </TooltipPrimitive.Popup>
       </TooltipPrimitive.Positioner>
     </TooltipPrimitive.Portal>
diff --git a/apps/v4/registry/bases/radix/blocks/_registry.ts b/apps/v4/registry/bases/radix/blocks/_registry.ts
index 7598bfd009..ff62199297 100644
--- a/apps/v4/registry/bases/radix/blocks/_registry.ts
+++ b/apps/v4/registry/bases/radix/blocks/_registry.ts
@@ -3,7 +3,7 @@ import { type Registry } from "shadcn/schema"
 export const blocks: Registry["items"] = [
   {
     name: "preview",
-    title: "Home",
+    title: "Preview",
     type: "registry:block",
     registryDependencies: [
       "alert-dialog",
@@ -35,110 +35,7 @@ export const blocks: Registry["items"] = [
     ],
     files: [
       {
-        path: "blocks/preview.tsx",
-        type: "registry:block",
-      },
-    ],
-  },
-  {
-    name: "elevenlabs",
-    title: "Elevenlabs",
-    type: "registry:block",
-    registryDependencies: ["example", "button", "card"],
-    files: [
-      {
-        path: "blocks/elevenlabs.tsx",
-        type: "registry:block",
-      },
-    ],
-  },
-  {
-    name: "github",
-    title: "GitHub",
-    type: "registry:block",
-    registryDependencies: [
-      "avatar",
-      "badge",
-      "button",
-      "card",
-      "checkbox",
-      "combobox",
-      "command",
-      "drawer",
-      "dropdown-menu",
-      "empty",
-      "field",
-      "input",
-      "input-group",
-      "item",
-      "kbd",
-      "native-select",
-      "popover",
-      "separator",
-      "spinner",
-      "tabs",
-      "textarea",
-      "tooltip",
-      "example",
-    ],
-    files: [
-      {
-        path: "blocks/github.tsx",
-        type: "registry:block",
-      },
-    ],
-  },
-  {
-    name: "vercel",
-    title: "Vercel",
-    type: "registry:block",
-    registryDependencies: [
-      "alert",
-      "badge",
-      "button",
-      "calendar",
-      "card",
-      "chart",
-      "dialog",
-      "dropdown-menu",
-      "empty",
-      "field",
-      "input-group",
-      "item",
-      "native-select",
-      "popover",
-      "textarea",
-      "example",
-    ],
-    files: [
-      {
-        path: "blocks/vercel.tsx",
-        type: "registry:block",
-      },
-    ],
-  },
-  {
-    name: "chatgpt",
-    title: "ChatGPT",
-    type: "registry:block",
-    registryDependencies: [
-      "alert",
-      "alert-dialog",
-      "badge",
-      "button",
-      "card",
-      "dropdown-menu",
-      "field",
-      "input-group",
-      "item",
-      "kbd",
-      "popover",
-      "tooltip",
-      "example",
-    ],
-    files: [
-      {
-        path: "blocks/chatgpt.tsx",
+        path: "blocks/preview/index.tsx",
         type: "registry:block",
       },
     ],
diff --git a/apps/v4/registry/bases/radix/blocks/chatgpt.tsx b/apps/v4/registry/bases/radix/blocks/chatgpt.tsx
deleted file mode 100644
index 8b45b43ad6..0000000000
--- a/apps/v4/registry/bases/radix/blocks/chatgpt.tsx
+++ /dev/null
@@ -1,605 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/radix/components/example"
-import { Alert, AlertDescription } from "@/registry/bases/radix/ui/alert"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/registry/bases/radix/ui/alert-dialog"
-import { Badge } from "@/registry/bases/radix/ui/badge"
-import { Button } from "@/registry/bases/radix/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/radix/ui/card"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/bases/radix/ui/dropdown-menu"
-import {
-  Field,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-} from "@/registry/bases/radix/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupTextarea,
-} from "@/registry/bases/radix/ui/input-group"
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemTitle,
-} from "@/registry/bases/radix/ui/item"
-import { Kbd } from "@/registry/bases/radix/ui/kbd"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/bases/radix/ui/popover"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/bases/radix/ui/tooltip"
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
-export default function ChatGPTBlock() {
-  return (
-    <ExampleWrapper>
-      <PromptForm />
-      <ModelSelector />
-      <GroupChatDialog />
-      <CreateProjectForm />
-    </ExampleWrapper>
-  )
-}
-
-function PromptForm() {
-  const [dictateEnabled, setDictateEnabled] = React.useState(false)
-
-  return (
-    <Example title="Prompt Form">
-      <Field>
-        <FieldLabel htmlFor="prompt" className="sr-only">
-          Prompt
-        </FieldLabel>
-        <InputGroup>
-          <InputGroupTextarea id="prompt" placeholder="Ask anything" />
-          <InputGroupAddon align="block-end">
-            <DropdownMenu>
-              <Tooltip>
-                <DropdownMenuTrigger asChild>
-                  <TooltipTrigger asChild>
-                    <InputGroupButton
-                      variant="ghost"
-                      size="icon-sm"
-                      onClick={() => setDictateEnabled(!dictateEnabled)}
-                      className="rounded-4xl"
-                    >
-                      <IconPlaceholder
-                        lucide="PlusIcon"
-                        tabler="IconPlus"
-                        hugeicons="PlusSignIcon"
-                        phosphor="PlusIcon"
-                        remixicon="RiAddLine"
-                      />
-                    </InputGroupButton>
-                  </TooltipTrigger>
-                </DropdownMenuTrigger>
-                <TooltipContent>
-                  Add files and more <Kbd>/</Kbd>
-                </TooltipContent>
-              </Tooltip>
-              <DropdownMenuContent
-                className="w-56"
-                onCloseAutoFocus={(e) => e.preventDefault()}
-              >
-                <DropdownMenuItem>
-                  <IconPlaceholder
-                    lucide="PaperclipIcon"
-                    tabler="IconPaperclip"
-                    hugeicons="AttachmentIcon"
-                    phosphor="PaperclipIcon"
-                    remixicon="RiAttachmentLine"
-                  />
-                  Add photos & files
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <IconPlaceholder
-                    lucide="SparklesIcon"
-                    tabler="IconSparkles"
-                    hugeicons="SparklesIcon"
-                    phosphor="SparkleIcon"
-                    remixicon="RiSparklingLine"
-                  />
-                  Deep research
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <IconPlaceholder
-                    lucide="ShoppingBagIcon"
-                    tabler="IconShoppingBag"
-                    hugeicons="ShoppingBag01Icon"
-                    phosphor="BagIcon"
-                    remixicon="RiShoppingBagLine"
-                  />
-                  Shopping research
-                </DropdownMenuItem>
-                <DropdownMenuItem>
-                  <IconPlaceholder
-                    lucide="WandIcon"
-                    tabler="IconWand"
-                    hugeicons="MagicWand05Icon"
-                    phosphor="MagicWandIcon"
-                    remixicon="RiMagicLine"
-                  />
-                  Create image
-                </DropdownMenuItem>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="MousePointerIcon"
-                        tabler="IconPointer"
-                        hugeicons="Cursor01Icon"
-                        phosphor="HandPointingIcon"
-                        remixicon="RiHand"
-                      />
-                      Agent mode
-                    </DropdownMenuItem>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    <div className="font-medium">35 left</div>
-                    <div className="text-primary-foreground/80 text-xs">
-                      More available for purchase
-                    </div>
-                  </TooltipContent>
-                </Tooltip>
-                <DropdownMenuSub>
-                  <DropdownMenuSubTrigger>
-                    <IconPlaceholder
-                      lucide="MoreHorizontalIcon"
-                      tabler="IconDots"
-                      hugeicons="MoreHorizontalCircle01Icon"
-                      phosphor="DotsThreeOutlineIcon"
-                      remixicon="RiMoreLine"
-                    />
-                    More
-                  </DropdownMenuSubTrigger>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="ShareIcon"
-                        tabler="IconShare"
-                        hugeicons="Share03Icon"
-                        phosphor="ShareIcon"
-                        remixicon="RiShareLine"
-                      />
-                      Add sources
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="BookOpenIcon"
-                        tabler="IconBook"
-                        hugeicons="BookIcon"
-                        phosphor="BookOpenIcon"
-                        remixicon="RiBookOpenLine"
-                      />
-                      Study and learn
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="GlobeIcon"
-                        tabler="IconWorld"
-                        hugeicons="GlobalIcon"
-                        phosphor="GlobeIcon"
-                        remixicon="RiGlobeLine"
-                      />
-                      Web search
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="PenToolIcon"
-                        tabler="IconPencil"
-                        hugeicons="PenIcon"
-                        phosphor="PencilIcon"
-                        remixicon="RiPencilLine"
-                      />
-                      Canvas
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuSub>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <InputGroupButton
-                  variant="ghost"
-                  size="icon-sm"
-                  onClick={() => setDictateEnabled(!dictateEnabled)}
-                  className="ml-auto rounded-4xl"
-                >
-                  <IconPlaceholder
-                    lucide="AudioLinesIcon"
-                    tabler="IconMicrophone"
-                    hugeicons="AudioWave01Icon"
-                    phosphor="MicrophoneIcon"
-                    remixicon="RiMicLine"
-                  />
-                </InputGroupButton>
-              </TooltipTrigger>
-              <TooltipContent>Dictate</TooltipContent>
-            </Tooltip>
-            <InputGroupButton
-              size="icon-sm"
-              variant="default"
-              className="rounded-4xl"
-            >
-              <IconPlaceholder
-                lucide="ArrowUpIcon"
-                tabler="IconArrowUp"
-                hugeicons="ArrowUp02Icon"
-                phosphor="ArrowUpIcon"
-                remixicon="RiArrowUpLine"
-              />
-            </InputGroupButton>
-          </InputGroupAddon>
-        </InputGroup>
-      </Field>
-    </Example>
-  )
-}
-
-function ModelSelector() {
-  const [mode, setMode] = React.useState("auto")
-  const [model, setModel] = React.useState("gpt-5.1")
-
-  return (
-    <Example title="Model Selector">
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="ghost" className="gap-2">
-            ChatGPT 5.1
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDown01Icon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              className="text-muted-foreground size-4"
-            />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent className="w-60" align="start">
-          <DropdownMenuLabel className="text-muted-foreground text-xs font-normal">
-            GPT-5.1
-          </DropdownMenuLabel>
-          <DropdownMenuRadioGroup value={mode} onValueChange={setMode}>
-            <DropdownMenuRadioItem value="auto">
-              <Item size="xs" className="p-0">
-                <ItemContent>
-                  <ItemTitle>Auto</ItemTitle>
-                  <ItemDescription className="text-xs">
-                    Decides how long to think
-                  </ItemDescription>
-                </ItemContent>
-              </Item>
-            </DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="instant">
-              <Item size="xs" className="p-0">
-                <ItemContent>
-                  <ItemTitle>Instant</ItemTitle>
-                  <ItemDescription className="text-xs">
-                    Answers right away
-                  </ItemDescription>
-                </ItemContent>
-              </Item>
-            </DropdownMenuRadioItem>
-            <DropdownMenuRadioItem value="thinking">
-              <Item size="xs" className="p-0">
-                <ItemContent>
-                  <ItemTitle>Thinking</ItemTitle>
-                  <ItemDescription className="text-xs">
-                    Thinks longer for better answers
-                  </ItemDescription>
-                </ItemContent>
-              </Item>
-            </DropdownMenuRadioItem>
-          </DropdownMenuRadioGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <span className="font-medium">Legacy models</span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent>
-              <DropdownMenuRadioGroup value={model} onValueChange={setModel}>
-                <DropdownMenuRadioItem value="gpt-4">
-                  GPT-4
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="gpt-4-turbo">
-                  GPT-4 Turbo
-                </DropdownMenuRadioItem>
-                <DropdownMenuRadioItem value="gpt-3.5">
-                  GPT-3.5
-                </DropdownMenuRadioItem>
-              </DropdownMenuRadioGroup>
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </Example>
-  )
-}
-
-function GroupChatDialog() {
-  return (
-    <Example title="Group Chat Dialog" className="items-center justify-center">
-      <AlertDialog>
-        <AlertDialogTrigger asChild>
-          <Button>Start Group Chat</Button>
-        </AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Use ChatGPT together</AlertDialogTitle>
-            <AlertDialogDescription>
-              Add people to your chats to plan, share ideas, and get creative.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter className="flex-row items-center justify-between sm:justify-between">
-            <a
-              href="#"
-              className="text-muted-foreground hover:text-foreground text-sm underline underline-offset-4"
-            >
-              Learn more
-            </a>
-            <div className="flex gap-2">
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
-              <AlertDialogAction>Start group chat</AlertDialogAction>
-            </div>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </Example>
-  )
-}
-
-const categories = [
-  {
-    id: "homework",
-    label: "Homework",
-  },
-  {
-    id: "writing",
-    label: "Writing",
-  },
-  {
-    id: "health",
-    label: "Health",
-  },
-  {
-    id: "travel",
-    label: "Travel",
-  },
-]
-
-function CreateProjectForm() {
-  const [projectName, setProjectName] = React.useState("")
-  const [selectedCategory, setSelectedCategory] = React.useState<string | null>(
-    categories[0].id
-  )
-  const [memorySetting, setMemorySetting] = React.useState<
-    "default" | "project-only"
-  >("default")
-  const [selectedColor, setSelectedColor] = React.useState<string | null>(
-    "var(--foreground)"
-  )
-
-  return (
-    <Example title="Create Project" className="items-center justify-center">
-      <Card className="w-full max-w-sm">
-        <CardHeader>
-          <CardTitle>Create Project</CardTitle>
-          <CardDescription>
-            Start a new project to keep chats, files, and custom instructions in
-            one place.
-          </CardDescription>
-          <CardAction>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon">
-                  <IconPlaceholder
-                    lucide="SettingsIcon"
-                    tabler="IconSettings"
-                    hugeicons="Settings01Icon"
-                    phosphor="GearIcon"
-                    remixicon="RiSettingsLine"
-                  />
-                  <span className="sr-only">Memory</span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-72">
-                <DropdownMenuRadioGroup
-                  value={memorySetting}
-                  onValueChange={(value) => {
-                    setMemorySetting(value as "default" | "project-only")
-                  }}
-                >
-                  <DropdownMenuRadioItem value="default">
-                    <Item size="xs">
-                      <ItemContent>
-                        <ItemTitle>Default</ItemTitle>
-                        <ItemDescription className="text-xs">
-                          Project can access memories from outside chats, and
-                          vice versa.
-                        </ItemDescription>
-                      </ItemContent>
-                    </Item>
-                  </DropdownMenuRadioItem>
-                  <DropdownMenuRadioItem value="project-only">
-                    <Item size="xs">
-                      <ItemContent>
-                        <ItemTitle>Project Only</ItemTitle>
-                        <ItemDescription className="text-xs">
-                          Project can only access its own memories. Its memories
-                          are hidden from outside chats.
-                        </ItemDescription>
-                      </ItemContent>
-                    </Item>
-                  </DropdownMenuRadioItem>
-                </DropdownMenuRadioGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuLabel>
-                  Note that this setting can&apos;t be changed later.
-                </DropdownMenuLabel>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <FieldGroup>
-            <Field>
-              <FieldLabel htmlFor="project-name" className="sr-only">
-                Project Name
-              </FieldLabel>
-              <InputGroup>
-                <InputGroupInput
-                  id="project-name"
-                  placeholder="Copenhagen Trip"
-                  value={projectName}
-                  onChange={(e) => {
-                    setProjectName(e.target.value)
-                  }}
-                />
-                <InputGroupAddon>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <InputGroupButton variant="ghost" size="icon-xs">
-                        <IconPlaceholder
-                          style={
-                            { "--color": selectedColor } as React.CSSProperties
-                          }
-                          lucide="FolderIcon"
-                          phosphor="FolderIcon"
-                          remixicon="RiFolderLine"
-                          tabler="IconFolder"
-                          hugeicons="FolderIcon"
-                          className="text-(--color)"
-                        />
-                      </InputGroupButton>
-                    </PopoverTrigger>
-                    <PopoverContent align="start" className="w-60 p-3">
-                      <div className="flex flex-wrap gap-2">
-                        {[
-                          "var(--foreground)",
-                          "#fa423e",
-                          "#f59e0b",
-                          "#8b5cf6",
-                          "#ec4899",
-                          "#10b981",
-                          "#6366f1",
-                          "#14b8a6",
-                          "#f97316",
-                          "#fbbc04",
-                        ].map((color) => (
-                          <Button
-                            key={color}
-                            size="icon"
-                            variant="ghost"
-                            className="rounded-full p-1"
-                            style={{ "--color": color } as React.CSSProperties}
-                            data-checked={selectedColor === color}
-                            onClick={() => {
-                              setSelectedColor(color)
-                            }}
-                          >
-                            <span className="group-data-[checked=true]/button:ring-offset-background size-5 rounded-full bg-(--color) ring-2 ring-transparent ring-offset-2 ring-offset-(--color) group-data-[checked=true]/button:ring-(--color)" />
-                            <span className="sr-only">{color}</span>
-                          </Button>
-                        ))}
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                </InputGroupAddon>
-              </InputGroup>
-              <FieldDescription className="flex flex-wrap gap-2">
-                {categories.map((category) => (
-                  <Badge
-                    key={category.id}
-                    variant={
-                      selectedCategory === category.id ? "default" : "outline"
-                    }
-                    data-checked={selectedCategory === category.id}
-                    asChild
-                  >
-                    <button
-                      onClick={() => {
-                        setSelectedCategory(
-                          selectedCategory === category.id ? null : category.id
-                        )
-                      }}
-                    >
-                      <IconPlaceholder
-                        lucide="CircleCheckIcon"
-                        tabler="IconCircleCheck"
-                        hugeicons="CheckmarkCircle02Icon"
-                        phosphor="CheckCircleIcon"
-                        remixicon="RiCheckboxCircleLine"
-                        data-icon="inline-start"
-                        className="hidden group-data-[checked=true]/badge:inline"
-                      />
-                      {category.label}
-                    </button>
-                  </Badge>
-                ))}
-              </FieldDescription>
-            </Field>
-            <Field>
-              <Alert className="bg-muted">
-                <IconPlaceholder
-                  lucide="LightbulbIcon"
-                  tabler="IconBulb"
-                  hugeicons="BulbIcon"
-                  phosphor="LightbulbIcon"
-                  remixicon="RiLightbulbLine"
-                />
-                <AlertDescription className="text-xs">
-                  Projects keep chats, files, and custom instructions in one
-                  place. Use them for ongoing work, or just to keep things tidy.
-                </AlertDescription>
-              </Alert>
-            </Field>
-          </FieldGroup>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
diff --git a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/data-table.tsx b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/data-table.tsx
index 4c4ae04004..16a08dea2a 100644
--- a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/data-table.tsx
+++ b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/data-table.tsx
@@ -116,7 +116,7 @@ function DragHandle({ id }: { id: number }) {
       {...listeners}
       variant="ghost"
       size="icon"
-      className="text-muted-foreground size-7 hover:bg-transparent"
+      className="size-7 text-muted-foreground hover:bg-transparent"
     >
       <IconPlaceholder
         lucide="GripVerticalIcon"
@@ -124,7 +124,7 @@ function DragHandle({ id }: { id: number }) {
         hugeicons="DragDropVerticalIcon"
         phosphor="DotsSixVerticalIcon"
         remixicon="RiDraggable"
-        className="text-muted-foreground size-3"
+        className="size-3 text-muted-foreground"
       />
       <span className="sr-only">Drag to reorder</span>
     </Button>
@@ -176,7 +176,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     header: "Section Type",
     cell: ({ row }) => (
       <div className="w-32">
-        <Badge variant="outline" className="text-muted-foreground px-1.5">
+        <Badge variant="outline" className="px-1.5 text-muted-foreground">
           {row.original.type}
         </Badge>
       </div>
@@ -186,7 +186,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     accessorKey: "status",
     header: "Status",
     cell: ({ row }) => (
-      <Badge variant="outline" className="text-muted-foreground px-1.5">
+      <Badge variant="outline" className="px-1.5 text-muted-foreground">
         {row.original.status === "Done" ? (
           <IconPlaceholder
             lucide="CircleCheckIcon"
@@ -227,7 +227,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Target
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.target}
           id={`${row.original.id}-target`}
         />
@@ -252,7 +252,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Limit
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.limit}
           id={`${row.original.id}-limit`}
         />
@@ -302,7 +302,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
             size="icon"
           >
             <IconPlaceholder
@@ -443,7 +443,7 @@ export function DataTable({
             </SelectGroup>
           </SelectContent>
         </Select>
-        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
           <TabsTrigger value="outline">Outline</TabsTrigger>
           <TabsTrigger value="past-performance">
             Past Performance <Badge variant="secondary">3</Badge>
@@ -525,7 +525,7 @@ export function DataTable({
             id={sortableId}
           >
             <Table>
-              <TableHeader className="bg-muted sticky top-0 z-10">
+              <TableHeader className="sticky top-0 z-10 bg-muted">
                 {table.getHeaderGroups().map((headerGroup) => (
                   <TableRow key={headerGroup.id}>
                     {headerGroup.headers.map((header) => {
@@ -568,7 +568,7 @@ export function DataTable({
           </DndContext>
         </div>
         <div className="flex items-center justify-between px-4">
-          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
             {table.getFilteredSelectedRowModel().rows.length} of{" "}
             {table.getFilteredRowModel().rows.length} row(s) selected.
           </div>
@@ -716,7 +716,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
   return (
     <Drawer direction={isMobile ? "bottom" : "right"}>
       <DrawerTrigger asChild>
-        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+        <Button variant="link" className="w-fit px-0 text-left text-foreground">
           {item.header}
         </Button>
       </DrawerTrigger>
diff --git a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-documents.tsx b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-documents.tsx
index 33869bfa56..31d1a8a7d7 100644
--- a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-documents.tsx
+++ b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-documents.tsx
@@ -45,7 +45,7 @@ export function NavDocuments({
               <DropdownMenuTrigger asChild>
                 <SidebarMenuAction
                   showOnHover
-                  className="data-[state=open]:bg-accent rounded-sm"
+                  className="rounded-sm data-[state=open]:bg-accent"
                 >
                   <IconPlaceholder
                     lucide="MoreHorizontalIcon"
diff --git a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-main.tsx b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-main.tsx
index 05c295d779..345893e899 100644
--- a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-main.tsx
+++ b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-main.tsx
@@ -26,7 +26,7 @@ export function NavMain({
           <SidebarMenuItem className="flex items-center gap-2">
             <SidebarMenuButton
               tooltip="Quick Create"
-              className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
+              className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
             >
               <IconPlaceholder
                 lucide="CirclePlusIcon"
diff --git a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-user.tsx b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-user.tsx
index 8ce7ccd2f7..1d84f46084 100644
--- a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-user.tsx
+++ b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/nav-user.tsx
@@ -48,7 +48,7 @@ export function NavUser({
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{user.name}</span>
-                <span className="text-muted-foreground truncate text-xs">
+                <span className="truncate text-xs text-muted-foreground">
                   {user.email}
                 </span>
               </div>
@@ -76,7 +76,7 @@ export function NavUser({
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{user.name}</span>
-                  <span className="text-muted-foreground truncate text-xs">
+                  <span className="truncate text-xs text-muted-foreground">
                     {user.email}
                   </span>
                 </div>
diff --git a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/section-cards.tsx b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/section-cards.tsx
index b1772059a0..9ab72bc56e 100644
--- a/apps/v4/registry/bases/radix/blocks/dashboard-01/components/section-cards.tsx
+++ b/apps/v4/registry/bases/radix/blocks/dashboard-01/components/section-cards.tsx
@@ -13,7 +13,7 @@ import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 export function SectionCards() {
   return (
-    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
       <Card className="@container/card">
         <CardHeader>
           <CardDescription>Total Revenue</CardDescription>
diff --git a/apps/v4/registry/bases/radix/blocks/elevenlabs.tsx b/apps/v4/registry/bases/radix/blocks/elevenlabs.tsx
deleted file mode 100644
index 6f9fdd0a18..0000000000
--- a/apps/v4/registry/bases/radix/blocks/elevenlabs.tsx
+++ /dev/null
@@ -1,1155 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-
-import { cn } from "@/lib/utils"
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/radix/components/example"
-import { Button } from "@/registry/bases/radix/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/radix/ui/card"
-
-export default function ElevenlabsBlocks() {
-  return (
-    <ExampleWrapper>
-      <BarVisualizerDemo />
-      <WaveformDemo />
-    </ExampleWrapper>
-  )
-}
-
-function BarVisualizerDemo() {
-  const [state, setState] = useState<AgentState>("speaking")
-
-  return (
-    <Example title="Bar Visualizer">
-      <Card className="">
-        <CardHeader>
-          <CardTitle>Audio Frequency Visualizer</CardTitle>
-          <CardDescription>
-            Real-time frequency band visualization with animated state
-            transitions
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <BarVisualizer
-            state={state}
-            demo={true}
-            barCount={20}
-            minHeight={15}
-            maxHeight={90}
-            className="h-40 max-w-full"
-          />
-        </CardContent>
-        <CardFooter className="gap-2">
-          <Button
-            size="sm"
-            variant={state === "connecting" ? "default" : "outline"}
-            onClick={() => setState("connecting")}
-          >
-            Connecting
-          </Button>
-          <Button
-            size="sm"
-            variant={state === "listening" ? "default" : "outline"}
-            onClick={() => setState("listening")}
-          >
-            Listening
-          </Button>
-          <Button
-            size="sm"
-            variant={state === "speaking" ? "default" : "outline"}
-            onClick={() => setState("speaking")}
-          >
-            Speaking
-          </Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-function WaveformDemo() {
-  const [active, setActive] = useState(false)
-  const [processing, setProcessing] = useState(true)
-  const [mode, setMode] = useState<"static" | "scrolling">("static")
-  const handleToggleActive = () => {
-    setActive(!active)
-    if (!active) {
-      setProcessing(false)
-    }
-  }
-  const handleToggleProcessing = () => {
-    setProcessing(!processing)
-    if (!processing) {
-      setActive(false)
-    }
-  }
-  return (
-    <Example title="Waveform" className="items-center justify-center">
-      <Card>
-        <CardHeader>
-          <CardTitle>Live Audio Waveform</CardTitle>
-          <CardDescription>
-            Real-time microphone input visualization with audio reactivity
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <LiveWaveform
-            active={active}
-            processing={processing}
-            height={80}
-            barWidth={3}
-            barGap={2}
-            mode={mode}
-            fadeEdges={true}
-            barColor="gray"
-            historySize={120}
-          />
-        </CardContent>
-        <CardFooter className="gap-2">
-          <Button
-            size="sm"
-            variant={active ? "default" : "outline"}
-            onClick={handleToggleActive}
-          >
-            {active ? "Stop" : "Start"} Listening
-          </Button>
-          <Button
-            size="sm"
-            variant={processing ? "default" : "outline"}
-            onClick={handleToggleProcessing}
-          >
-            {processing ? "Stop" : "Start"} Processing
-          </Button>
-          <Button
-            size="sm"
-            variant="outline"
-            onClick={() => setMode(mode === "static" ? "scrolling" : "static")}
-          >
-            {mode === "static" ? "Static" : "Scrolling"}
-          </Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-export interface AudioAnalyserOptions {
-  fftSize?: number
-  smoothingTimeConstant?: number
-  minDecibels?: number
-  maxDecibels?: number
-}
-
-function createAudioAnalyser(
-  mediaStream: MediaStream,
-  options: AudioAnalyserOptions = {}
-) {
-  const audioContext = new (window.AudioContext ||
-    (window as unknown as { webkitAudioContext: typeof AudioContext })
-      .webkitAudioContext)()
-  const source = audioContext.createMediaStreamSource(mediaStream)
-  const analyser = audioContext.createAnalyser()
-
-  if (options.fftSize) analyser.fftSize = options.fftSize
-  if (options.smoothingTimeConstant !== undefined) {
-    analyser.smoothingTimeConstant = options.smoothingTimeConstant
-  }
-  if (options.minDecibels !== undefined)
-    analyser.minDecibels = options.minDecibels
-  if (options.maxDecibels !== undefined)
-    analyser.maxDecibels = options.maxDecibels
-
-  source.connect(analyser)
-
-  const cleanup = () => {
-    source.disconnect()
-    audioContext.close()
-  }
-
-  return { analyser, audioContext, cleanup }
-}
-
-/**
- * Hook for tracking the volume of an audio stream using the Web Audio API.
- * @param mediaStream - The MediaStream to analyze
- * @param options - Audio analyser options
- * @returns The current volume level (0-1)
- */
-export function useAudioVolume(
-  mediaStream?: MediaStream | null,
-  options: AudioAnalyserOptions = { fftSize: 32, smoothingTimeConstant: 0 }
-) {
-  const [volume, setVolume] = useState(0)
-  const volumeRef = useRef(0)
-  const frameId = useRef<number | undefined>(undefined)
-
-  // Memoize options to prevent unnecessary re-renders
-  const memoizedOptions = useMemo(() => options, [options])
-
-  useEffect(() => {
-    if (!mediaStream) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setVolume(0)
-      volumeRef.current = 0
-      return
-    }
-
-    const { analyser, cleanup } = createAudioAnalyser(
-      mediaStream,
-      memoizedOptions
-    )
-
-    const bufferLength = analyser.frequencyBinCount
-    const dataArray = new Uint8Array(bufferLength)
-    let lastUpdate = 0
-    const updateInterval = 1000 / 30 // 30 FPS
-
-    const updateVolume = (timestamp: number) => {
-      if (timestamp - lastUpdate >= updateInterval) {
-        analyser.getByteFrequencyData(dataArray)
-        let sum = 0
-        for (let i = 0; i < dataArray.length; i++) {
-          const a = dataArray[i]
-          sum += a * a
-        }
-        const newVolume = Math.sqrt(sum / dataArray.length) / 255
-
-        // Only update state if volume changed significantly
-        if (Math.abs(newVolume - volumeRef.current) > 0.01) {
-          volumeRef.current = newVolume
-          setVolume(newVolume)
-        }
-        lastUpdate = timestamp
-      }
-      frameId.current = requestAnimationFrame(updateVolume)
-    }
-
-    frameId.current = requestAnimationFrame(updateVolume)
-
-    return () => {
-      cleanup()
-      if (frameId.current) {
-        cancelAnimationFrame(frameId.current)
-      }
-    }
-  }, [mediaStream, memoizedOptions])
-
-  return volume
-}
-
-export interface MultiBandVolumeOptions {
-  bands?: number
-  loPass?: number // Low frequency cutoff
-  hiPass?: number // High frequency cutoff
-  updateInterval?: number // Update interval in ms
-  analyserOptions?: AudioAnalyserOptions
-}
-
-const multibandDefaults: MultiBandVolumeOptions = {
-  bands: 5,
-  loPass: 100,
-  hiPass: 600,
-  updateInterval: 32,
-  analyserOptions: { fftSize: 2048 },
-}
-
-// Memoized normalization function to avoid recreating on each render
-const normalizeDb = (value: number) => {
-  if (value === -Infinity) return 0
-  const minDb = -100
-  const maxDb = -10
-  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100
-  return Math.sqrt(db)
-}
-
-/**
- * Hook for tracking volume across multiple frequency bands
- * @param mediaStream - The MediaStream to analyze
- * @param options - Multiband options
- * @returns Array of volume levels for each frequency band
- */
-export function useMultibandVolume(
-  mediaStream?: MediaStream | null,
-  options: MultiBandVolumeOptions = {}
-) {
-  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])
-
-  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>
-    new Array(opts.bands).fill(0)
-  )
-  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))
-  const frameId = useRef<number | undefined>(undefined)
-
-  useEffect(() => {
-    if (!mediaStream) {
-      const emptyBands = new Array(opts.bands).fill(0)
-      setTimeout(() => {
-        setFrequencyBands(emptyBands)
-      }, 0)
-      bandsRef.current = emptyBands
-      return
-    }
-
-    const { analyser, cleanup } = createAudioAnalyser(
-      mediaStream,
-      opts.analyserOptions
-    )
-
-    const bufferLength = analyser.frequencyBinCount
-    const dataArray = new Float32Array(bufferLength)
-    const sliceStart = opts.loPass!
-    const sliceEnd = opts.hiPass!
-    const sliceLength = sliceEnd - sliceStart
-    const chunkSize = Math.ceil(sliceLength / opts.bands!)
-
-    let lastUpdate = 0
-    const updateInterval = opts.updateInterval!
-
-    const updateVolume = (timestamp: number) => {
-      if (timestamp - lastUpdate >= updateInterval) {
-        analyser.getFloatFrequencyData(dataArray)
-
-        // Process directly without creating intermediate arrays
-        const chunks = new Array(opts.bands!)
-
-        for (let i = 0; i < opts.bands!; i++) {
-          let sum = 0
-          let count = 0
-          const startIdx = sliceStart + i * chunkSize
-          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)
-
-          for (let j = startIdx; j < endIdx; j++) {
-            sum += normalizeDb(dataArray[j])
-            count++
-          }
-
-          chunks[i] = count > 0 ? sum / count : 0
-        }
-
-        // Only update state if bands changed significantly
-        let hasChanged = false
-        for (let i = 0; i < chunks.length; i++) {
-          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {
-            hasChanged = true
-            break
-          }
-        }
-
-        if (hasChanged) {
-          bandsRef.current = chunks
-          setFrequencyBands(chunks)
-        }
-
-        lastUpdate = timestamp
-      }
-
-      frameId.current = requestAnimationFrame(updateVolume)
-    }
-
-    frameId.current = requestAnimationFrame(updateVolume)
-
-    return () => {
-      cleanup()
-      if (frameId.current) {
-        cancelAnimationFrame(frameId.current)
-      }
-    }
-  }, [mediaStream, opts])
-
-  return frequencyBands
-}
-
-type AnimationState =
-  | "connecting"
-  | "initializing"
-  | "listening"
-  | "speaking"
-  | "thinking"
-  | undefined
-
-export const useBarAnimator = (
-  state: AnimationState,
-  columns: number,
-  interval: number
-): number[] => {
-  const indexRef = useRef(0)
-  const [currentFrame, setCurrentFrame] = useState<number[]>([])
-  const animationFrameId = useRef<number | null>(null)
-
-  // Memoize sequence generation
-  const sequence = useMemo(() => {
-    if (state === "thinking" || state === "listening") {
-      return generateListeningSequenceBar(columns)
-    } else if (state === "connecting" || state === "initializing") {
-      return generateConnectingSequenceBar(columns)
-    } else if (state === undefined || state === "speaking") {
-      return [new Array(columns).fill(0).map((_, idx) => idx)]
-    } else {
-      return [[]]
-    }
-  }, [state, columns])
-
-  useEffect(() => {
-    indexRef.current = 0
-    setTimeout(() => {
-      setCurrentFrame(sequence[0] || [])
-    }, 0)
-  }, [sequence])
-
-  useEffect(() => {
-    let startTime = performance.now()
-
-    const animate = (time: DOMHighResTimeStamp) => {
-      const timeElapsed = time - startTime
-
-      if (timeElapsed >= interval) {
-        indexRef.current = (indexRef.current + 1) % sequence.length
-        setCurrentFrame(sequence[indexRef.current] || [])
-        startTime = time
-      }
-
-      animationFrameId.current = requestAnimationFrame(animate)
-    }
-
-    animationFrameId.current = requestAnimationFrame(animate)
-
-    return () => {
-      if (animationFrameId.current !== null) {
-        cancelAnimationFrame(animationFrameId.current)
-      }
-    }
-  }, [interval, sequence])
-
-  return currentFrame
-}
-
-// Memoize sequence generators
-const generateConnectingSequenceBar = (columns: number): number[][] => {
-  const seq = []
-  for (let x = 0; x < columns; x++) {
-    seq.push([x, columns - 1 - x])
-  }
-  return seq
-}
-
-const generateListeningSequenceBar = (columns: number): number[][] => {
-  const center = Math.floor(columns / 2)
-  const noIndex = -1
-  return [[center], [noIndex]]
-}
-
-export type AgentState =
-  | "connecting"
-  | "initializing"
-  | "listening"
-  | "speaking"
-  | "thinking"
-
-export interface BarVisualizerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /** Voice assistant state */
-  state?: AgentState
-  /** Number of bars to display */
-  barCount?: number
-  /** Audio source */
-  mediaStream?: MediaStream | null
-  /** Min/max height as percentage */
-  minHeight?: number
-  maxHeight?: number
-  /** Enable demo mode with fake audio data */
-  demo?: boolean
-  /** Align bars from center instead of bottom */
-  centerAlign?: boolean
-}
-
-const BarVisualizerComponent = React.forwardRef<
-  HTMLDivElement,
-  BarVisualizerProps
->(
-  (
-    {
-      state,
-      barCount = 15,
-      mediaStream,
-      minHeight = 20,
-      maxHeight = 100,
-      demo = false,
-      centerAlign = false,
-      className,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    // Audio processing
-    const realVolumeBands = useMultibandVolume(mediaStream, {
-      bands: barCount,
-      loPass: 100,
-      hiPass: 200,
-    })
-
-    // Generate fake volume data for demo mode using refs to avoid state updates
-    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))
-    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>
-      new Array(barCount).fill(0.2)
-    )
-    const fakeAnimationRef = useRef<number | undefined>(undefined)
-
-    // Animate fake volume bands for speaking and listening states
-    useEffect(() => {
-      if (!demo) return
-
-      if (state !== "speaking" && state !== "listening") {
-        const bands = new Array(barCount).fill(0.2)
-        fakeVolumeBandsRef.current = bands
-        setTimeout(() => {
-          setFakeVolumeBands(bands)
-        }, 0)
-        return
-      }
-
-      let lastUpdate = 0
-      const updateInterval = 50
-      const startTime = Date.now() / 1000
-
-      const updateFakeVolume = (timestamp: number) => {
-        if (timestamp - lastUpdate >= updateInterval) {
-          const time = Date.now() / 1000 - startTime
-          const newBands = new Array(barCount)
-
-          for (let i = 0; i < barCount; i++) {
-            const waveOffset = i * 0.5
-            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5
-            const randomNoise = Math.random() * 0.2
-            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))
-          }
-
-          // Only update if values changed significantly
-          let hasChanged = false
-          for (let i = 0; i < barCount; i++) {
-            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {
-              hasChanged = true
-              break
-            }
-          }
-
-          if (hasChanged) {
-            fakeVolumeBandsRef.current = newBands
-            setFakeVolumeBands(newBands)
-          }
-
-          lastUpdate = timestamp
-        }
-
-        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)
-      }
-
-      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)
-
-      return () => {
-        if (fakeAnimationRef.current) {
-          cancelAnimationFrame(fakeAnimationRef.current)
-        }
-      }
-    }, [demo, state, barCount])
-
-    // Use fake or real volume data based on demo mode
-    const volumeBands = useMemo(
-      () => (demo ? fakeVolumeBands : realVolumeBands),
-      [demo, fakeVolumeBands, realVolumeBands]
-    )
-
-    // Animation sequencing
-    const highlightedIndices = useBarAnimator(
-      state,
-      barCount,
-      state === "connecting"
-        ? 2000 / barCount
-        : state === "thinking"
-          ? 150
-          : state === "listening"
-            ? 500
-            : 1000
-    )
-
-    return (
-      <div
-        ref={ref}
-        data-state={state}
-        className={cn(
-          "relative flex justify-center gap-1.5",
-          centerAlign ? "items-center" : "items-end",
-          "bg-muted h-32 w-full overflow-hidden rounded-lg p-4",
-          className
-        )}
-        style={{
-          ...style,
-        }}
-        {...props}
-      >
-        {volumeBands.map((volume, index) => {
-          const heightPct = Math.min(
-            maxHeight,
-            Math.max(minHeight, volume * 100 + 5)
-          )
-          const isHighlighted = highlightedIndices?.includes(index) ?? false
-
-          return (
-            <Bar
-              key={index}
-              heightPct={heightPct}
-              isHighlighted={isHighlighted}
-              state={state}
-            />
-          )
-        })}
-      </div>
-    )
-  }
-)
-
-// Memoized Bar component to prevent unnecessary re-renders
-const Bar = React.memo<{
-  heightPct: number
-  isHighlighted: boolean
-  state?: AgentState
-}>(({ heightPct, isHighlighted, state }) => (
-  <div
-    data-highlighted={isHighlighted}
-    className={cn(
-      "max-w-[12px] min-w-[8px] flex-1 transition-all duration-150",
-      "rounded-full",
-      "bg-border data-[highlighted=true]:bg-primary",
-      state === "speaking" && "bg-primary",
-      state === "thinking" && isHighlighted && "animate-pulse"
-    )}
-    style={{
-      height: `${heightPct}%`,
-      animationDuration: state === "thinking" ? "300ms" : undefined,
-    }}
-  />
-))
-
-Bar.displayName = "Bar"
-
-// Wrap the main component with React.memo for prop comparison optimization
-const BarVisualizer = React.memo(
-  BarVisualizerComponent,
-  (prevProps, nextProps) => {
-    return (
-      prevProps.state === nextProps.state &&
-      prevProps.barCount === nextProps.barCount &&
-      prevProps.mediaStream === nextProps.mediaStream &&
-      prevProps.minHeight === nextProps.minHeight &&
-      prevProps.maxHeight === nextProps.maxHeight &&
-      prevProps.demo === nextProps.demo &&
-      prevProps.centerAlign === nextProps.centerAlign &&
-      prevProps.className === nextProps.className &&
-      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)
-    )
-  }
-)
-
-BarVisualizerComponent.displayName = "BarVisualizerComponent"
-BarVisualizer.displayName = "BarVisualizer"
-
-export type LiveWaveformProps = React.HTMLAttributes<HTMLDivElement> & {
-  active?: boolean
-  processing?: boolean
-  deviceId?: string
-  barWidth?: number
-  barHeight?: number
-  barGap?: number
-  barRadius?: number
-  barColor?: string
-  fadeEdges?: boolean
-  fadeWidth?: number
-  height?: string | number
-  sensitivity?: number
-  smoothingTimeConstant?: number
-  fftSize?: number
-  historySize?: number
-  updateRate?: number
-  mode?: "scrolling" | "static"
-  onError?: (error: Error) => void
-  onStreamReady?: (stream: MediaStream) => void
-  onStreamEnd?: () => void
-}
-export const LiveWaveform = ({
-  active = false,
-  processing = false,
-  deviceId,
-  barWidth = 3,
-  barGap = 1,
-  barRadius = 1.5,
-  barColor,
-  fadeEdges = true,
-  fadeWidth = 24,
-  barHeight: baseBarHeight = 4,
-  height = 64,
-  sensitivity = 1,
-  smoothingTimeConstant = 0.8,
-  fftSize = 256,
-  historySize = 60,
-  updateRate = 30,
-  mode = "static",
-  onError,
-  onStreamReady,
-  onStreamEnd,
-  className,
-  ...props
-}: LiveWaveformProps) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const historyRef = useRef<number[]>([])
-  const analyserRef = useRef<AnalyserNode | null>(null)
-  const audioContextRef = useRef<AudioContext | null>(null)
-  const streamRef = useRef<MediaStream | null>(null)
-  const animationRef = useRef<number>(0)
-  const lastUpdateRef = useRef<number>(0)
-  const processingAnimationRef = useRef<number | null>(null)
-  const lastActiveDataRef = useRef<number[]>([])
-  const transitionProgressRef = useRef(0)
-  const staticBarsRef = useRef<number[]>([])
-  const needsRedrawRef = useRef(true)
-  const gradientCacheRef = useRef<CanvasGradient | null>(null)
-  const lastWidthRef = useRef(0)
-  const heightStyle = typeof height === "number" ? `${height}px` : height
-  // Handle canvas resizing
-  useEffect(() => {
-    const canvas = canvasRef.current
-    const container = containerRef.current
-    if (!canvas || !container) return
-    const resizeObserver = new ResizeObserver(() => {
-      const rect = container.getBoundingClientRect()
-      const dpr = window.devicePixelRatio || 1
-      canvas.width = rect.width * dpr
-      canvas.height = rect.height * dpr
-      canvas.style.width = `${rect.width}px`
-      canvas.style.height = `${rect.height}px`
-      const ctx = canvas.getContext("2d")
-      if (ctx) {
-        ctx.scale(dpr, dpr)
-      }
-      gradientCacheRef.current = null
-      lastWidthRef.current = rect.width
-      needsRedrawRef.current = true
-    })
-    resizeObserver.observe(container)
-    return () => resizeObserver.disconnect()
-  }, [])
-  useEffect(() => {
-    if (processing && !active) {
-      let time = 0
-      transitionProgressRef.current = 0
-      const animateProcessing = () => {
-        time += 0.03
-        transitionProgressRef.current = Math.min(
-          1,
-          transitionProgressRef.current + 0.02
-        )
-        const processingData = []
-        const barCount = Math.floor(
-          (containerRef.current?.getBoundingClientRect().width || 200) /
-            (barWidth + barGap)
-        )
-        if (mode === "static") {
-          const halfCount = Math.floor(barCount / 2)
-          for (let i = 0; i < barCount; i++) {
-            const normalizedPosition = (i - halfCount) / halfCount
-            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4
-            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25
-            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2
-            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15
-            const combinedWave = wave1 + wave2 + wave3
-            const processingValue = (0.2 + combinedWave) * centerWeight
-            let finalValue = processingValue
-            if (
-              lastActiveDataRef.current.length > 0 &&
-              transitionProgressRef.current < 1
-            ) {
-              const lastDataIndex = Math.min(
-                i,
-                lastActiveDataRef.current.length - 1
-              )
-              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
-              finalValue =
-                lastValue * (1 - transitionProgressRef.current) +
-                processingValue * transitionProgressRef.current
-            }
-            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
-          }
-        } else {
-          for (let i = 0; i < barCount; i++) {
-            const normalizedPosition = (i - barCount / 2) / (barCount / 2)
-            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4
-            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25
-            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2
-            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15
-            const combinedWave = wave1 + wave2 + wave3
-            const processingValue = (0.2 + combinedWave) * centerWeight
-            let finalValue = processingValue
-            if (
-              lastActiveDataRef.current.length > 0 &&
-              transitionProgressRef.current < 1
-            ) {
-              const lastDataIndex = Math.floor(
-                (i / barCount) * lastActiveDataRef.current.length
-              )
-              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
-              finalValue =
-                lastValue * (1 - transitionProgressRef.current) +
-                processingValue * transitionProgressRef.current
-            }
-            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
-          }
-        }
-        if (mode === "static") {
-          staticBarsRef.current = processingData
-        } else {
-          historyRef.current = processingData
-        }
-        needsRedrawRef.current = true
-        processingAnimationRef.current =
-          requestAnimationFrame(animateProcessing)
-      }
-      animateProcessing()
-      return () => {
-        if (processingAnimationRef.current) {
-          cancelAnimationFrame(processingAnimationRef.current)
-        }
-      }
-    } else if (!active && !processing) {
-      const hasData =
-        mode === "static"
-          ? staticBarsRef.current.length > 0
-          : historyRef.current.length > 0
-      if (hasData) {
-        let fadeProgress = 0
-        const fadeToIdle = () => {
-          fadeProgress += 0.03
-          if (fadeProgress < 1) {
-            if (mode === "static") {
-              staticBarsRef.current = staticBarsRef.current.map(
-                (value) => value * (1 - fadeProgress)
-              )
-            } else {
-              historyRef.current = historyRef.current.map(
-                (value) => value * (1 - fadeProgress)
-              )
-            }
-            needsRedrawRef.current = true
-            requestAnimationFrame(fadeToIdle)
-          } else {
-            if (mode === "static") {
-              staticBarsRef.current = []
-            } else {
-              historyRef.current = []
-            }
-          }
-        }
-        fadeToIdle()
-      }
-    }
-  }, [processing, active, barWidth, barGap, mode])
-  // Handle microphone setup and teardown
-  useEffect(() => {
-    if (!active) {
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach((track) => track.stop())
-        streamRef.current = null
-        onStreamEnd?.()
-      }
-      if (
-        audioContextRef.current &&
-        audioContextRef.current.state !== "closed"
-      ) {
-        audioContextRef.current.close()
-        audioContextRef.current = null
-      }
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
-        animationRef.current = 0
-      }
-      return
-    }
-    const setupMicrophone = async () => {
-      try {
-        const stream = await navigator.mediaDevices.getUserMedia({
-          audio: deviceId
-            ? {
-                deviceId: { exact: deviceId },
-                echoCancellation: true,
-                noiseSuppression: true,
-                autoGainControl: true,
-              }
-            : {
-                echoCancellation: true,
-                noiseSuppression: true,
-                autoGainControl: true,
-              },
-        })
-        streamRef.current = stream
-        onStreamReady?.(stream)
-        const AudioContextConstructor =
-          window.AudioContext ||
-          (window as unknown as { webkitAudioContext: typeof AudioContext })
-            .webkitAudioContext
-        const audioContext = new AudioContextConstructor()
-        const analyser = audioContext.createAnalyser()
-        analyser.fftSize = fftSize
-        analyser.smoothingTimeConstant = smoothingTimeConstant
-        const source = audioContext.createMediaStreamSource(stream)
-        source.connect(analyser)
-        audioContextRef.current = audioContext
-        analyserRef.current = analyser
-        // Clear history when starting
-        historyRef.current = []
-      } catch (error) {
-        onError?.(error as Error)
-      }
-    }
-    setupMicrophone()
-    return () => {
-      if (streamRef.current) {
-        streamRef.current.getTracks().forEach((track) => track.stop())
-        streamRef.current = null
-        onStreamEnd?.()
-      }
-      if (
-        audioContextRef.current &&
-        audioContextRef.current.state !== "closed"
-      ) {
-        audioContextRef.current.close()
-        audioContextRef.current = null
-      }
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current)
-        animationRef.current = 0
-      }
-    }
-  }, [
-    active,
-    deviceId,
-    fftSize,
-    smoothingTimeConstant,
-    onError,
-    onStreamReady,
-    onStreamEnd,
-  ])
-  // Animation loop
-  useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-    const ctx = canvas.getContext("2d")
-    if (!ctx) return
-    let rafId: number
-    const animate = (currentTime: number) => {
-      // Render waveform
-      const rect = canvas.getBoundingClientRect()
-      // Update audio data if active
-      if (active && currentTime - lastUpdateRef.current > updateRate) {
-        lastUpdateRef.current = currentTime
-        if (analyserRef.current) {
-          const dataArray = new Uint8Array(
-            analyserRef.current.frequencyBinCount
-          )
-          analyserRef.current.getByteFrequencyData(dataArray)
-          if (mode === "static") {
-            // For static mode, update bars in place
-            const startFreq = Math.floor(dataArray.length * 0.05)
-            const endFreq = Math.floor(dataArray.length * 0.4)
-            const relevantData = dataArray.slice(startFreq, endFreq)
-            const barCount = Math.floor(rect.width / (barWidth + barGap))
-            const halfCount = Math.floor(barCount / 2)
-            const newBars: number[] = []
-            // Mirror the data for symmetric display
-            for (let i = halfCount - 1; i >= 0; i--) {
-              const dataIndex = Math.floor(
-                (i / halfCount) * relevantData.length
-              )
-              const value = Math.min(
-                1,
-                (relevantData[dataIndex] / 255) * sensitivity
-              )
-              newBars.push(Math.max(0.05, value))
-            }
-            for (let i = 0; i < halfCount; i++) {
-              const dataIndex = Math.floor(
-                (i / halfCount) * relevantData.length
-              )
-              const value = Math.min(
-                1,
-                (relevantData[dataIndex] / 255) * sensitivity
-              )
-              newBars.push(Math.max(0.05, value))
-            }
-            staticBarsRef.current = newBars
-            lastActiveDataRef.current = newBars
-          } else {
-            // Scrolling mode - original behavior
-            let sum = 0
-            const startFreq = Math.floor(dataArray.length * 0.05)
-            const endFreq = Math.floor(dataArray.length * 0.4)
-            const relevantData = dataArray.slice(startFreq, endFreq)
-            for (let i = 0; i < relevantData.length; i++) {
-              sum += relevantData[i]
-            }
-            const average = (sum / relevantData.length / 255) * sensitivity
-            // Add to history
-            historyRef.current.push(Math.min(1, Math.max(0.05, average)))
-            lastActiveDataRef.current = [...historyRef.current]
-            // Maintain history size
-            if (historyRef.current.length > historySize) {
-              historyRef.current.shift()
-            }
-          }
-          needsRedrawRef.current = true
-        }
-      }
-      // Only redraw if needed
-      if (!needsRedrawRef.current && !active) {
-        rafId = requestAnimationFrame(animate)
-        return
-      }
-      needsRedrawRef.current = active
-      ctx.clearRect(0, 0, rect.width, rect.height)
-      const computedBarColor =
-        barColor ||
-        (() => {
-          const style = getComputedStyle(canvas)
-          // Try to get the computed color value directly
-          const color = style.color
-          return color || "#000"
-        })()
-      const step = barWidth + barGap
-      const barCount = Math.floor(rect.width / step)
-      const centerY = rect.height / 2
-      // Draw bars based on mode
-      if (mode === "static") {
-        // Static mode - bars in fixed positions
-        const dataToRender = processing
-          ? staticBarsRef.current
-          : active
-            ? staticBarsRef.current
-            : staticBarsRef.current.length > 0
-              ? staticBarsRef.current
-              : []
-        for (let i = 0; i < barCount && i < dataToRender.length; i++) {
-          const value = dataToRender[i] || 0.1
-          const x = i * step
-          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)
-          const y = centerY - barHeight / 2
-          ctx.fillStyle = computedBarColor
-          ctx.globalAlpha = 0.4 + value * 0.6
-          if (barRadius > 0) {
-            ctx.beginPath()
-            ctx.roundRect(x, y, barWidth, barHeight, barRadius)
-            ctx.fill()
-          } else {
-            ctx.fillRect(x, y, barWidth, barHeight)
-          }
-        }
-      } else {
-        // Scrolling mode - original behavior
-        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {
-          const dataIndex = historyRef.current.length - 1 - i
-          const value = historyRef.current[dataIndex] || 0.1
-          const x = rect.width - (i + 1) * step
-          const barHeight = Math.max(baseBarHeight, value * rect.height * 0.8)
-          const y = centerY - barHeight / 2
-          ctx.fillStyle = computedBarColor
-          ctx.globalAlpha = 0.4 + value * 0.6
-          if (barRadius > 0) {
-            ctx.beginPath()
-            ctx.roundRect(x, y, barWidth, barHeight, barRadius)
-            ctx.fill()
-          } else {
-            ctx.fillRect(x, y, barWidth, barHeight)
-          }
-        }
-      }
-      // Apply edge fading
-      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {
-        // Cache gradient if width hasn't changed
-        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {
-          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)
-          const fadePercent = Math.min(0.3, fadeWidth / rect.width)
-          // destination-out: removes destination where source alpha is high
-          // We want: fade edges out, keep center solid
-          // Left edge: start opaque (1) = remove, fade to transparent (0) = keep
-          gradient.addColorStop(0, "rgba(255,255,255,1)")
-          gradient.addColorStop(fadePercent, "rgba(255,255,255,0)")
-          // Center stays transparent = keep everything
-          gradient.addColorStop(1 - fadePercent, "rgba(255,255,255,0)")
-          // Right edge: fade from transparent (0) = keep to opaque (1) = remove
-          gradient.addColorStop(1, "rgba(255,255,255,1)")
-          gradientCacheRef.current = gradient
-          lastWidthRef.current = rect.width
-        }
-        ctx.globalCompositeOperation = "destination-out"
-        ctx.fillStyle = gradientCacheRef.current
-        ctx.fillRect(0, 0, rect.width, rect.height)
-        ctx.globalCompositeOperation = "source-over"
-      }
-      ctx.globalAlpha = 1
-      rafId = requestAnimationFrame(animate)
-    }
-    rafId = requestAnimationFrame(animate)
-    return () => {
-      if (rafId) {
-        cancelAnimationFrame(rafId)
-      }
-    }
-  }, [
-    active,
-    processing,
-    sensitivity,
-    updateRate,
-    historySize,
-    barWidth,
-    baseBarHeight,
-    barGap,
-    barRadius,
-    barColor,
-    fadeEdges,
-    fadeWidth,
-    mode,
-  ])
-  return (
-    <div
-      className={cn("relative h-full w-full", className)}
-      ref={containerRef}
-      style={{ height: heightStyle }}
-      aria-label={
-        active
-          ? "Live audio waveform"
-          : processing
-            ? "Processing audio"
-            : "Audio waveform idle"
-      }
-      role="img"
-      {...props}
-    >
-      {!active && !processing && (
-        <div className="border-muted-foreground/20 absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted" />
-      )}
-      <canvas
-        className="block h-full w-full"
-        ref={canvasRef}
-        aria-hidden="true"
-      />
-    </div>
-  )
-}
diff --git a/apps/v4/registry/bases/radix/blocks/github.tsx b/apps/v4/registry/bases/radix/blocks/github.tsx
deleted file mode 100644
index fbd46ae1a8..0000000000
--- a/apps/v4/registry/bases/radix/blocks/github.tsx
+++ /dev/null
@@ -1,1396 +0,0 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  Combobox,
-  ComboboxChip,
-  ComboboxChips,
-  ComboboxChipsInput,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxItem,
-  ComboboxList,
-  ComboboxValue,
-  useComboboxAnchor,
-} from "@/registry/bases/base/ui/combobox"
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/radix/components/example"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarImage,
-} from "@/registry/bases/radix/ui/avatar"
-import { Badge } from "@/registry/bases/radix/ui/badge"
-import { Button } from "@/registry/bases/radix/ui/button"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/radix/ui/card"
-import { Checkbox } from "@/registry/bases/radix/ui/checkbox"
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/registry/bases/radix/ui/command"
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from "@/registry/bases/radix/ui/drawer"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/bases/radix/ui/dropdown-menu"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/registry/bases/radix/ui/empty"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSet,
-} from "@/registry/bases/radix/ui/field"
-import { Input } from "@/registry/bases/radix/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupTextarea,
-} from "@/registry/bases/radix/ui/input-group"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-} from "@/registry/bases/radix/ui/item"
-import { Kbd } from "@/registry/bases/radix/ui/kbd"
-import { NativeSelect } from "@/registry/bases/radix/ui/native-select"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/bases/radix/ui/popover"
-import { Separator } from "@/registry/bases/radix/ui/separator"
-import { Spinner } from "@/registry/bases/radix/ui/spinner"
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/registry/bases/radix/ui/tabs"
-import { Textarea } from "@/registry/bases/radix/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/bases/radix/ui/tooltip"
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
-export default function GithubBlock() {
-  return (
-    <ExampleWrapper>
-      <CodespacesCard />
-      <AssignIssue />
-      <Navbar />
-      <RepositoryToolbar />
-      <Profile />
-      <ContributionsActivity />
-      <Contributors />
-    </ExampleWrapper>
-  )
-}
-
-function CodespacesCard() {
-  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)
-
-  return (
-    <Example title="Codespaces" className="min-h-[550px] lg:p-12">
-      <Card className="mx-auto w-full max-w-sm" size="sm">
-        <CardContent>
-          <Tabs defaultValue="codespaces">
-            <TabsList className="w-full">
-              <TabsTrigger value="codespaces">Codespaces</TabsTrigger>
-              <TabsTrigger value="local">Local</TabsTrigger>
-            </TabsList>
-            <TabsContent value="codespaces">
-              <Item size="sm" className="px-1 pt-2">
-                <ItemContent>
-                  <ItemTitle>Codespaces</ItemTitle>
-                  <ItemDescription>
-                    Your workspaces in the cloud
-                  </ItemDescription>
-                </ItemContent>
-                <ItemActions>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button variant="ghost" size="icon-sm">
-                        <IconPlaceholder
-                          lucide="PlusIcon"
-                          tabler="IconPlus"
-                          hugeicons="PlusSignIcon"
-                          phosphor="PlusIcon"
-                          remixicon="RiAddLine"
-                        />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent side="bottom">
-                      Create a codespace on main
-                    </TooltipContent>
-                  </Tooltip>
-                  <DropdownMenu>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="ghost" size="icon-sm">
-                            <IconPlaceholder
-                              lucide="MoreHorizontalIcon"
-                              tabler="IconDots"
-                              hugeicons="MoreHorizontalCircle01Icon"
-                              phosphor="DotsThreeOutlineIcon"
-                              remixicon="RiMoreLine"
-                            />
-                          </Button>
-                        </DropdownMenuTrigger>
-                      </TooltipTrigger>
-                      <TooltipContent side="bottom">
-                        Codespace repository configuration
-                      </TooltipContent>
-                    </Tooltip>
-                    <DropdownMenuContent
-                      align="end"
-                      onCloseAutoFocus={(e) => e.preventDefault()}
-                      className="w-56"
-                    >
-                      <DropdownMenuItem>
-                        <IconPlaceholder
-                          lucide="PlusIcon"
-                          tabler="IconPlus"
-                          hugeicons="PlusSignIcon"
-                          phosphor="PlusIcon"
-                          remixicon="RiAddLine"
-                        />
-                        New with options...
-                      </DropdownMenuItem>
-                      <DropdownMenuItem>
-                        <IconPlaceholder
-                          lucide="ContainerIcon"
-                          tabler="IconBox"
-                          hugeicons="CubeIcon"
-                          phosphor="CubeIcon"
-                          remixicon="RiBox1Line"
-                        />
-                        Configure dev container
-                      </DropdownMenuItem>
-                      <DropdownMenuItem>
-                        <IconPlaceholder
-                          lucide="ZapIcon"
-                          tabler="IconBolt"
-                          hugeicons="ZapIcon"
-                          phosphor="LightningIcon"
-                          remixicon="RiFlashlightLine"
-                        />
-                        Set up prebuilds
-                      </DropdownMenuItem>
-                      <DropdownMenuSeparator />
-                      <DropdownMenuItem>
-                        <IconPlaceholder
-                          lucide="ServerIcon"
-                          tabler="IconServer"
-                          hugeicons="ServerStackIcon"
-                          phosphor="HardDrivesIcon"
-                          remixicon="RiHardDriveLine"
-                        />
-                        Manage codespaces
-                      </DropdownMenuItem>
-                      <DropdownMenuItem>
-                        <IconPlaceholder
-                          lucide="ShareIcon"
-                          tabler="IconShare2"
-                          hugeicons="Share03Icon"
-                          phosphor="ShareIcon"
-                          remixicon="RiShareLine"
-                        />
-                        Share deep link
-                      </DropdownMenuItem>
-                      <DropdownMenuItem>
-                        <IconPlaceholder
-                          lucide="InfoIcon"
-                          tabler="IconInfoCircle"
-                          hugeicons="AlertCircleIcon"
-                          phosphor="InfoIcon"
-                          remixicon="RiInformationLine"
-                        />
-                        What are codespaces?
-                      </DropdownMenuItem>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                </ItemActions>
-              </Item>
-              <Separator className="-mx-2 my-2 w-auto!" />
-              <Empty className="p-4">
-                <EmptyHeader>
-                  <EmptyMedia variant="icon">
-                    <IconPlaceholder
-                      lucide="ServerIcon"
-                      tabler="IconServer"
-                      hugeicons="ServerStackIcon"
-                      phosphor="HardDrivesIcon"
-                      remixicon="RiHardDriveLine"
-                    />
-                  </EmptyMedia>
-                  <EmptyTitle>No codespaces</EmptyTitle>
-                  <EmptyDescription>
-                    You don&apos;t have any codespaces with this repository
-                    checked out
-                  </EmptyDescription>
-                </EmptyHeader>
-                <EmptyContent>
-                  <Button
-                    size="sm"
-                    onClick={() => {
-                      setIsCreatingCodespace(true)
-                      setTimeout(() => {
-                        setIsCreatingCodespace(false)
-                      }, 2000)
-                    }}
-                    disabled={isCreatingCodespace}
-                  >
-                    {isCreatingCodespace ? (
-                      <Spinner data-icon="inline-start" />
-                    ) : (
-                      ""
-                    )}
-                    Create Codespace
-                  </Button>
-                  <a
-                    href="#learn-more"
-                    className="text-muted-foreground text-xs underline underline-offset-4"
-                  >
-                    Learn more about codespaces
-                  </a>
-                </EmptyContent>
-              </Empty>
-              <Separator className="-mx-2 my-2 w-auto!" />
-              <div className="text-muted-foreground p-1.5 text-xs">
-                Codespace usage for this repository is paid for by{" "}
-                <span className="font-medium">shadcn</span>.
-              </div>
-            </TabsContent>
-            <TabsContent value="local">
-              <Item size="sm" className="hidden p-0">
-                <ItemContent>
-                  <ItemTitle className="gap-2">
-                    <IconPlaceholder
-                      lucide="TerminalIcon"
-                      tabler="IconTerminal"
-                      hugeicons="ComputerTerminal01Icon"
-                      phosphor="TerminalIcon"
-                      remixicon="RiTerminalBoxLine"
-                      className="size-4"
-                    />
-                    Clone
-                  </ItemTitle>
-                </ItemContent>
-                <ItemActions>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Button variant="ghost" size="icon">
-                        <IconPlaceholder
-                          lucide="InfoIcon"
-                          tabler="IconInfoCircle"
-                          hugeicons="AlertCircleIcon"
-                          phosphor="InfoIcon"
-                          remixicon="RiInformationLine"
-                        />
-                      </Button>
-                    </TooltipTrigger>
-                    <TooltipContent side="left">
-                      Which remote URL should I use?
-                    </TooltipContent>
-                  </Tooltip>
-                </ItemActions>
-              </Item>
-              <Tabs defaultValue="https">
-                <TabsList
-                  variant="line"
-                  className="w-full justify-start border-b *:[button]:flex-0"
-                >
-                  <TabsTrigger value="https">HTTPS</TabsTrigger>
-                  <TabsTrigger value="ssh">SSH</TabsTrigger>
-                  <TabsTrigger value="cli">GitHub CLI</TabsTrigger>
-                </TabsList>
-                <div className="bg-muted/30 rounded-md border p-2">
-                  <TabsContent value="https">
-                    <Field className="gap-2">
-                      <FieldLabel htmlFor="https-url" className="sr-only">
-                        HTTPS URL
-                      </FieldLabel>
-                      <InputGroup>
-                        <InputGroupAddon align="inline-end">
-                          <InputGroupButton variant="ghost" size="icon-xs">
-                            <IconPlaceholder
-                              lucide="CopyIcon"
-                              tabler="IconCopy"
-                              hugeicons="Copy01Icon"
-                              phosphor="CopyIcon"
-                              remixicon="RiFileCopyLine"
-                            />
-                          </InputGroupButton>
-                        </InputGroupAddon>
-                        <InputGroupInput
-                          id="https-url"
-                          defaultValue="https://github.com/shadcn-ui/ui.git"
-                          readOnly
-                        />
-                      </InputGroup>
-                      <FieldDescription>
-                        Clone using the web URL.
-                      </FieldDescription>
-                    </Field>
-                  </TabsContent>
-                  <TabsContent value="ssh">
-                    <Field className="gap-2">
-                      <FieldLabel htmlFor="ssh-url" className="sr-only">
-                        SSH URL
-                      </FieldLabel>
-                      <InputGroup>
-                        <InputGroupAddon align="inline-end">
-                          <InputGroupButton variant="ghost" size="icon-xs">
-                            <IconPlaceholder
-                              lucide="CopyIcon"
-                              tabler="IconCopy"
-                              hugeicons="Copy01Icon"
-                              phosphor="CopyIcon"
-                              remixicon="RiFileCopyLine"
-                            />
-                          </InputGroupButton>
-                        </InputGroupAddon>
-                        <InputGroupInput
-                          id="ssh-url"
-                          defaultValue="git@github.com:shadcn-ui/ui.git"
-                          readOnly
-                        />
-                      </InputGroup>
-                      <FieldDescription>
-                        Use a password-protected SSH key.
-                      </FieldDescription>
-                    </Field>
-                  </TabsContent>
-                  <TabsContent value="cli">
-                    <Field className="gap-2">
-                      <FieldLabel htmlFor="cli-command" className="sr-only">
-                        CLI Command
-                      </FieldLabel>
-                      <InputGroup>
-                        <InputGroupAddon align="inline-end">
-                          <InputGroupButton variant="ghost" size="icon-xs">
-                            <IconPlaceholder
-                              lucide="CopyIcon"
-                              tabler="IconCopy"
-                              hugeicons="Copy01Icon"
-                              phosphor="CopyIcon"
-                              remixicon="RiFileCopyLine"
-                            />
-                          </InputGroupButton>
-                        </InputGroupAddon>
-                        <InputGroupInput
-                          id="cli-command"
-                          defaultValue="gh repo clone shadcn-ui/ui"
-                          readOnly
-                        />
-                      </InputGroup>
-                      <FieldDescription>
-                        Work fast with our official CLI.{" "}
-                        <a href="#learn-more">Learn more</a>
-                      </FieldDescription>
-                    </Field>
-                  </TabsContent>
-                </div>
-              </Tabs>
-              <Separator className="-mx-2 my-2 w-auto!" />
-              <div className="flex flex-col">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="justify-start gap-1.5"
-                >
-                  <IconPlaceholder
-                    lucide="MonitorIcon"
-                    tabler="IconDeviceDesktop"
-                    hugeicons="ComputerIcon"
-                    phosphor="MonitorIcon"
-                    remixicon="RiComputerLine"
-                    data-icon="inline-start"
-                  />
-                  Open with GitHub Desktop
-                </Button>
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  className="justify-start gap-1.5"
-                >
-                  <IconPlaceholder
-                    lucide="DownloadIcon"
-                    tabler="IconDownload"
-                    hugeicons="DownloadIcon"
-                    phosphor="DownloadIcon"
-                    remixicon="RiDownloadLine"
-                    data-icon="inline-start"
-                  />
-                  Download ZIP
-                </Button>
-              </div>
-            </TabsContent>
-          </Tabs>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-
-function RepositoryToolbar() {
-  const [selectedBranch, setSelectedBranch] = React.useState("main")
-  return (
-    <Example title="Repository Toolbar">
-      <div className="flex items-center gap-2">
-        <InputGroup>
-          <InputGroupInput placeholder="Go to file" />
-          <InputGroupAddon align="inline-start">
-            <InputGroupButton variant="ghost" size="icon-xs">
-              <IconPlaceholder
-                lucide="SearchIcon"
-                tabler="IconSearch"
-                hugeicons="SearchIcon"
-                phosphor="MagnifyingGlassIcon"
-                remixicon="RiSearchLine"
-              />
-            </InputGroupButton>
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">
-            <Kbd>t</Kbd>
-          </InputGroupAddon>
-        </InputGroup>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline">
-              Add File
-              <IconPlaceholder
-                lucide="ChevronDownIcon"
-                tabler="IconChevronDown"
-                hugeicons="ArrowDown01Icon"
-                phosphor="CaretDownIcon"
-                remixicon="RiArrowDownSLine"
-                data-icon="inline-end"
-              />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem>
-              <IconPlaceholder
-                lucide="PlusIcon"
-                tabler="IconPlus"
-                hugeicons="PlusSignIcon"
-                phosphor="PlusIcon"
-                remixicon="RiAddLine"
-              />
-              Create new file
-            </DropdownMenuItem>
-            <DropdownMenuItem>
-              <IconPlaceholder
-                lucide="UploadIcon"
-                hugeicons="Upload01Icon"
-                tabler="IconUpload"
-                phosphor="UploadIcon"
-                remixicon="RiUploadLine"
-              />
-              Upload files
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <Popover>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <PopoverTrigger asChild>
-                <Button variant="outline" size="icon">
-                  <IconPlaceholder
-                    lucide="CloudCogIcon"
-                    hugeicons="AiCloud01Icon"
-                    tabler="IconCloudCog"
-                    phosphor="CloudArrowUpIcon"
-                    remixicon="RiUploadCloudLine"
-                  />
-                </Button>
-              </PopoverTrigger>
-            </TooltipTrigger>
-            <TooltipContent>New Agent Task</TooltipContent>
-          </Tooltip>
-          <PopoverContent
-            className="w-80"
-            onCloseAutoFocus={(e) => e.preventDefault()}
-          >
-            <Field>
-              <FieldLabel htmlFor="new-agent-task">New Agent Task</FieldLabel>
-              <InputGroup>
-                <InputGroupTextarea placeholder="Describe your task in natural language."></InputGroupTextarea>
-                <InputGroupAddon align="block-end">
-                  <Popover>
-                    <Tooltip>
-                      <PopoverTrigger asChild>
-                        <TooltipTrigger asChild>
-                          <InputGroupButton variant="outline" size="icon-sm">
-                            <IconPlaceholder
-                              lucide="GitBranchIcon"
-                              hugeicons="GitBranchIcon"
-                              tabler="IconGitBranch"
-                              phosphor="GitBranchIcon"
-                              remixicon="RiGitBranchLine"
-                            />
-                          </InputGroupButton>
-                        </TooltipTrigger>
-                      </PopoverTrigger>
-                      <TooltipContent>Select a branch</TooltipContent>
-                    </Tooltip>
-                    <PopoverContent
-                      side="bottom"
-                      align="start"
-                      className="p-1"
-                      onCloseAutoFocus={(e) => e.preventDefault()}
-                    >
-                      <Field>
-                        <FieldLabel htmlFor="select-branch" className="sr-only">
-                          Select a Branch
-                        </FieldLabel>
-                        <Command>
-                          <CommandInput
-                            id="select-branch"
-                            placeholder="Find a branch"
-                          />
-                          <CommandEmpty>No branches found</CommandEmpty>
-                          <CommandList>
-                            <CommandGroup>
-                              {[
-                                "main",
-                                "develop",
-                                "feature/123",
-                                "feature/user-authentication",
-                                "feature/dashboard-redesign",
-                                "bugfix/login-error",
-                                "hotfix/security-patch",
-                                "release/v2.0.0",
-                                "feature/api-integration",
-                                "bugfix/memory-leak",
-                                "feature/dark-mode",
-                                "feature/responsive-design",
-                                "bugfix/typo-fix",
-                                "feature/search-functionality",
-                                "release/v1.9.0",
-                                "feature/notifications",
-                                "bugfix/cache-issue",
-                                "feature/payment-gateway",
-                                "hotfix/critical-bug",
-                                "feature/admin-panel",
-                                "bugfix/validation-error",
-                                "feature/analytics",
-                                "release/v2.1.0",
-                              ].map((branch) => (
-                                <CommandItem
-                                  key={branch}
-                                  value={branch}
-                                  onSelect={() => setSelectedBranch(branch)}
-                                  data-checked={selectedBranch === branch}
-                                >
-                                  {branch}
-                                </CommandItem>
-                              ))}
-                            </CommandGroup>
-                          </CommandList>
-                        </Command>
-                      </Field>
-                    </PopoverContent>
-                  </Popover>
-                  <Popover>
-                    <Tooltip>
-                      <PopoverTrigger asChild>
-                        <TooltipTrigger asChild>
-                          <InputGroupButton variant="outline" size="icon-sm">
-                            <IconPlaceholder
-                              lucide="BotIcon"
-                              hugeicons="RoboticIcon"
-                              tabler="IconRobot"
-                              phosphor="RobotIcon"
-                              remixicon="RiRobotLine"
-                            />
-                          </InputGroupButton>
-                        </TooltipTrigger>
-                      </PopoverTrigger>
-                      <TooltipContent>Select Agent</TooltipContent>
-                    </Tooltip>
-                    <PopoverContent side="top" align="start">
-                      <Empty className="gap-4 p-0">
-                        <EmptyHeader>
-                          <EmptyTitle className="text-sm">
-                            This repository has no custom agents
-                          </EmptyTitle>
-                          <EmptyDescription className="text-xs">
-                            Custom agents are reusable instructions and tools in
-                            your repository.
-                          </EmptyDescription>
-                        </EmptyHeader>
-                        <EmptyContent>
-                          <Button variant="outline" size="sm">
-                            Create Custom Agent
-                          </Button>
-                        </EmptyContent>
-                      </Empty>
-                    </PopoverContent>
-                  </Popover>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <InputGroupButton
-                        variant="ghost"
-                        size="icon-sm"
-                        className="ml-auto"
-                      >
-                        <IconPlaceholder
-                          lucide="SendIcon"
-                          hugeicons="SentIcon"
-                          tabler="IconSend"
-                          phosphor="PaperPlaneTiltIcon"
-                          remixicon="RiSendPlaneLine"
-                        />
-                      </InputGroupButton>
-                    </TooltipTrigger>
-                    <TooltipContent className="flex items-center gap-2 pr-2">
-                      Start Task <Kbd>⏎</Kbd>
-                    </TooltipContent>
-                  </Tooltip>
-                </InputGroupAddon>
-              </InputGroup>
-            </Field>
-          </PopoverContent>
-        </Popover>
-      </div>
-    </Example>
-  )
-}
-
-function Navbar() {
-  return (
-    <Example title="Account Menu">
-      <header className="flex h-14 w-full items-center gap-2">
-        <Drawer direction="left">
-          <DrawerTrigger asChild>
-            <Button variant="outline" size="icon">
-              <IconPlaceholder
-                lucide="MenuIcon"
-                hugeicons="Menu09Icon"
-                tabler="IconMenu"
-                phosphor="ListIcon"
-                remixicon="RiListUnordered"
-              />
-              <span className="sr-only">Open menu</span>
-            </Button>
-          </DrawerTrigger>
-          <DrawerContent className="max-w-72">
-            <DrawerHeader className="flex flex-row items-center justify-between px-5 pb-0">
-              <DrawerTitle>Menu</DrawerTitle>
-              <DrawerClose asChild>
-                <Button variant="ghost" size="icon-sm">
-                  <IconPlaceholder
-                    lucide="XIcon"
-                    tabler="IconX"
-                    hugeicons="Cancel01Icon"
-                    phosphor="XIcon"
-                    remixicon="RiCloseLine"
-                  />
-                  <span className="sr-only">Close</span>
-                </Button>
-              </DrawerClose>
-            </DrawerHeader>
-            <div className="p-2">
-              <ItemGroup className="gap-px">
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="HomeIcon"
-                        tabler="IconHome"
-                        hugeicons="HomeIcon"
-                        phosphor="HouseIcon"
-                        remixicon="RiHomeLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Home</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="CircleIcon"
-                        tabler="IconCircle"
-                        hugeicons="CircleIcon"
-                        phosphor="CircleIcon"
-                        remixicon="RiCircleLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Issues</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="GitBranchIcon"
-                        tabler="IconGitBranch"
-                        hugeicons="GitBranchIcon"
-                        phosphor="GitBranchIcon"
-                        remixicon="RiGitBranchLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Pull requests</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="LayoutGridIcon"
-                        tabler="IconLayoutGrid"
-                        hugeicons="GridIcon"
-                        phosphor="GridFourIcon"
-                        remixicon="RiGridLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Projects</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="MailIcon"
-                        tabler="IconMail"
-                        hugeicons="MailIcon"
-                        phosphor="EnvelopeIcon"
-                        remixicon="RiMailLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Discussions</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="ServerIcon"
-                        tabler="IconServer"
-                        hugeicons="ServerStackIcon"
-                        phosphor="HardDrivesIcon"
-                        remixicon="RiHardDriveLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Codespaces</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="BotIcon"
-                        tabler="IconRobot"
-                        hugeicons="RoboticIcon"
-                        phosphor="RobotIcon"
-                        remixicon="RiRobotLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Copilot</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="SparklesIcon"
-                        tabler="IconSparkles"
-                        hugeicons="SparklesIcon"
-                        phosphor="SparkleIcon"
-                        remixicon="RiSparklingLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Spark</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <ItemSeparator />
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="SearchIcon"
-                        tabler="IconSearch"
-                        hugeicons="SearchIcon"
-                        phosphor="MagnifyingGlassIcon"
-                        remixicon="RiSearchLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Explore</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="ShoppingBagIcon"
-                        tabler="IconShoppingBag"
-                        hugeicons="ShoppingBasket01Icon"
-                        phosphor="BagIcon"
-                        remixicon="RiShoppingBagLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>Marketplace</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-                <Item asChild size="xs">
-                  <a href="#">
-                    <ItemMedia variant="icon">
-                      <IconPlaceholder
-                        lucide="LinkIcon"
-                        tabler="IconLink"
-                        hugeicons="LinkIcon"
-                        phosphor="LinkIcon"
-                        remixicon="RiLinksLine"
-                      />
-                    </ItemMedia>
-                    <ItemContent>
-                      <ItemTitle>MCP registry</ItemTitle>
-                    </ItemContent>
-                  </a>
-                </Item>
-              </ItemGroup>
-            </div>
-          </DrawerContent>
-        </Drawer>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="ml-auto rounded-full"
-            >
-              <Avatar>
-                <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
-                <AvatarFallback>SC</AvatarFallback>
-              </Avatar>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56" align="end">
-            <DropdownMenuLabel className="p-0 font-normal">
-              <Item className="px-2 py-1 pb-0.5" size="sm">
-                <ItemMedia>
-                  <Avatar>
-                    <AvatarImage
-                      src="https://github.com/shadcn.png"
-                      alt="shadcn"
-                    />
-                    <AvatarFallback>SC</AvatarFallback>
-                  </Avatar>
-                </ItemMedia>
-                <ItemContent className="gap-0">
-                  <ItemTitle className="text-foreground text-sm">
-                    shadcn
-                  </ItemTitle>
-                  <ItemDescription className="text-xs">
-                    shadcn@example.com
-                  </ItemDescription>
-                </ItemContent>
-              </Item>
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="SmileIcon"
-                  tabler="IconMoodSmile"
-                  hugeicons="SmileIcon"
-                  phosphor="SmileyIcon"
-                  remixicon="RiEmotionLine"
-                />
-                Set status
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="CircleAlertIcon"
-                  tabler="IconExclamationCircle"
-                  hugeicons="AlertCircleIcon"
-                  phosphor="WarningCircleIcon"
-                  remixicon="RiErrorWarningLine"
-                />
-                Single sign-on
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="UserIcon"
-                  tabler="IconUser"
-                  hugeicons="UserIcon"
-                  phosphor="UserIcon"
-                  remixicon="RiUserLine"
-                />
-                Profile
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="FolderIcon"
-                  tabler="IconFolder"
-                  hugeicons="FolderIcon"
-                  phosphor="FolderIcon"
-                  remixicon="RiFolderLine"
-                />
-                Repositories
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="StarIcon"
-                  tabler="IconStar"
-                  hugeicons="StarIcon"
-                  phosphor="StarIcon"
-                  remixicon="RiStarLine"
-                />
-                Stars
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="CodeIcon"
-                  tabler="IconCode"
-                  hugeicons="CodeIcon"
-                  phosphor="CodeIcon"
-                  remixicon="RiCodeLine"
-                />
-                Gists
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="FolderIcon"
-                  tabler="IconFolder"
-                  hugeicons="FolderIcon"
-                  phosphor="FolderIcon"
-                  remixicon="RiFolderLine"
-                />
-                Organizations
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="ServerIcon"
-                  tabler="IconServer"
-                  hugeicons="ServerStackIcon"
-                  phosphor="HardDrivesIcon"
-                  remixicon="RiHardDriveLine"
-                />
-                Enterprises
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="HeartIcon"
-                  tabler="IconHeart"
-                  hugeicons="FavouriteIcon"
-                  phosphor="HeartIcon"
-                  remixicon="RiHeartLine"
-                />
-                Sponsors
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="SettingsIcon"
-                  tabler="IconSettings"
-                  hugeicons="SettingsIcon"
-                  phosphor="GearIcon"
-                  remixicon="RiSettingsLine"
-                />
-                Settings
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="BotIcon"
-                  tabler="IconRobot"
-                  hugeicons="RoboticIcon"
-                  phosphor="RobotIcon"
-                  remixicon="RiRobotLine"
-                />
-                Copilot settings
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="SparklesIcon"
-                  tabler="IconSparkles"
-                  hugeicons="SparklesIcon"
-                  phosphor="SparkleIcon"
-                  remixicon="RiSparklingLine"
-                />
-                Feature preview
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="MonitorIcon"
-                  tabler="IconDeviceDesktop"
-                  hugeicons="ComputerIcon"
-                  phosphor="MonitorIcon"
-                  remixicon="RiComputerLine"
-                />
-                Appearance
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="UserIcon"
-                  tabler="IconUser"
-                  hugeicons="UserIcon"
-                  phosphor="UserIcon"
-                  remixicon="RiUserLine"
-                />
-                Accessibility
-              </DropdownMenuItem>
-              <DropdownMenuItem>
-                <IconPlaceholder
-                  lucide="ArrowUpIcon"
-                  tabler="IconArrowUp"
-                  hugeicons="ArrowUpIcon"
-                  phosphor="ArrowUpIcon"
-                  remixicon="RiArrowUpLine"
-                />
-                Upgrade
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem>
-              <IconPlaceholder
-                lucide="LogOutIcon"
-                tabler="IconLogout"
-                hugeicons="LogoutIcon"
-                phosphor="SignOutIcon"
-                remixicon="RiLogoutBoxLine"
-              />
-              Sign out
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </header>
-    </Example>
-  )
-}
-
-const usernames = [
-  "shadcn",
-  "vercel",
-  "nextjs",
-  "tailwindlabs",
-  "typescript-lang",
-  "eslint",
-  "prettier",
-  "babel",
-  "webpack",
-  "rollup",
-  "parcel",
-  "vite",
-  "react",
-  "vue",
-  "angular",
-  "solid",
-]
-
-function Contributors() {
-  return (
-    <Example title="Contributors" className="items-center lg:p-16">
-      <Card className="max-w-sm">
-        <CardHeader>
-          <CardTitle>
-            Contributors <Badge variant="secondary">312</Badge>
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <div className="flex flex-wrap gap-2">
-            {usernames.map((username) => (
-              <Avatar key={username}>
-                <AvatarImage
-                  src={`https://github.com/${username}.png`}
-                  alt={username}
-                />
-                <AvatarFallback>{username.charAt(0)}</AvatarFallback>
-              </Avatar>
-            ))}
-          </div>
-        </CardContent>
-        <CardFooter>
-          <a href="#" className="text-sm underline underline-offset-4">
-            + 810 contributors
-          </a>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-function Profile() {
-  return (
-    <Example title="Profile" className="items-center justify-center">
-      <Card className="mx-auto w-full max-w-md">
-        <CardHeader>
-          <CardTitle>Profile</CardTitle>
-          <CardDescription>Manage your profile information.</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form id="profile">
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="name">Name</FieldLabel>
-                <Input id="name" placeholder="shadcn" />
-                <FieldDescription>
-                  Your name may appear around GitHub where you contribute or are
-                  mentioned. You can remove it at any time.
-                </FieldDescription>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="email">Public Email</FieldLabel>
-                <NativeSelect id="email">
-                  <option value="m@shadcn.com">m@shadcn.com</option>
-                  <option value="m@gmail.com">m@gmail.com</option>
-                </NativeSelect>
-                <FieldDescription>
-                  You can manage verified email addresses in your{" "}
-                  <a href="#email-settings">email settings</a>.
-                </FieldDescription>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="bio">Bio</FieldLabel>
-                <Textarea
-                  id="bio"
-                  placeholder="Tell us a little bit about yourself"
-                />
-                <FieldDescription>
-                  You can <span>@mention</span> other users and organizations to
-                  link to them.
-                </FieldDescription>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-        <CardFooter>
-          <Button form="profile">Save Profile</Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-function ContributionsActivity() {
-  return (
-    <Example title="Contributions Activity" className="justify-center">
-      <Card className="mx-auto w-full max-w-md">
-        <CardHeader>
-          <CardTitle>Contributions & Activity</CardTitle>
-          <CardDescription>
-            Manage your contributions and activity visibility.
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form id="contributions-activity">
-            <FieldGroup>
-              <FieldSet>
-                <FieldLegend className="sr-only">
-                  Contributions & activity
-                </FieldLegend>
-                <FieldGroup className="gap-3">
-                  <Field orientation="horizontal">
-                    <Checkbox id="private-profile" />
-                    <FieldContent>
-                      <FieldLabel
-                        htmlFor="private-profile"
-                        className="font-normal"
-                      >
-                        Make profile private and hide activity
-                      </FieldLabel>
-                      <FieldDescription>
-                        Enabling this will hide your contributions and activity
-                        from your GitHub profile and from social features like
-                        followers, stars, feeds, leaderboards and releases.
-                      </FieldDescription>
-                    </FieldContent>
-                  </Field>
-                  <Field orientation="horizontal">
-                    <Checkbox id="private-contributions" defaultChecked />
-                    <FieldContent>
-                      <FieldLabel
-                        htmlFor="private-contributions"
-                        className="font-normal"
-                      >
-                        Include private contributions on my profile
-                      </FieldLabel>
-                      <FieldDescription>
-                        Your contribution graph, achievements, and activity
-                        overview will show your private contributions without
-                        revealing any repository or organization information.{" "}
-                        <a href="#read-more">Read more</a>.
-                      </FieldDescription>
-                    </FieldContent>
-                  </Field>
-                </FieldGroup>
-              </FieldSet>
-            </FieldGroup>
-          </form>
-        </CardContent>
-        <CardFooter>
-          <Button form="contributions-activity">Save Changes</Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-const users = [
-  "shadcn",
-  "maxleiter",
-  "evilrabbit",
-  "pranathip",
-  "jorgezreik",
-  "shuding",
-  "rauchg",
-]
-
-function AssignIssue() {
-  const anchor = useComboboxAnchor()
-
-  return (
-    <Example title="User Select" className="items-center justify-center">
-      <Card className="w-full max-w-sm" size="sm">
-        <CardHeader className="border-b">
-          <CardTitle className="text-sm">Assign Issue</CardTitle>
-          <CardDescription className="text-sm">
-            Select users to assign to this issue.
-          </CardDescription>
-          <CardAction>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <Button variant="outline" size="icon-xs">
-                  <IconPlaceholder
-                    lucide="PlusIcon"
-                    tabler="IconPlus"
-                    hugeicons="PlusSignIcon"
-                    phosphor="PlusIcon"
-                    remixicon="RiAddLine"
-                  />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent>Add user</TooltipContent>
-            </Tooltip>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <Combobox
-            multiple
-            autoHighlight
-            items={users}
-            defaultValue={[users[0]]}
-          >
-            <ComboboxChips ref={anchor}>
-              <ComboboxValue>
-                {(values) => (
-                  <React.Fragment>
-                    {values.map((username: string) => (
-                      <ComboboxChip key={username}>
-                        <Avatar className="size-4">
-                          <AvatarImage
-                            src={`https://github.com/${username}.png`}
-                            alt={username}
-                          />
-                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>
-                        </Avatar>
-                        {username}
-                      </ComboboxChip>
-                    ))}
-                    <ComboboxChipsInput
-                      placeholder={
-                        values.length > 0 ? undefined : "Select a item..."
-                      }
-                    />
-                  </React.Fragment>
-                )}
-              </ComboboxValue>
-            </ComboboxChips>
-            <ComboboxContent anchor={anchor}>
-              <ComboboxEmpty>No users found.</ComboboxEmpty>
-              <ComboboxList>
-                {(username) => (
-                  <ComboboxItem key={username} value={username}>
-                    <Avatar className="size-5">
-                      <AvatarImage
-                        src={`https://github.com/${username}.png`}
-                        alt={username}
-                      />
-                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>
-                    </Avatar>
-                    {username}
-                  </ComboboxItem>
-                )}
-              </ComboboxList>
-            </ComboboxContent>
-          </Combobox>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
diff --git a/apps/v4/registry/bases/radix/blocks/login-02/components/login-form.tsx b/apps/v4/registry/bases/radix/blocks/login-02/components/login-form.tsx
index d4c01695b4..5c6ff05e0c 100644
--- a/apps/v4/registry/bases/radix/blocks/login-02/components/login-form.tsx
+++ b/apps/v4/registry/bases/radix/blocks/login-02/components/login-form.tsx
@@ -18,7 +18,7 @@ export function LoginForm({
       <FieldGroup>
         <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-2xl font-bold">Login to your account</h1>
-          <p className="text-muted-foreground text-sm text-balance">
+          <p className="text-sm text-balance text-muted-foreground">
             Enter your email below to login to your account
           </p>
         </div>
diff --git a/apps/v4/registry/bases/radix/blocks/login-02/page.tsx b/apps/v4/registry/bases/radix/blocks/login-02/page.tsx
index 31b2fa0a24..3c8a17450c 100644
--- a/apps/v4/registry/bases/radix/blocks/login-02/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/login-02/page.tsx
@@ -9,7 +9,7 @@ export default function LoginPage() {
       <div className="flex flex-col gap-4 p-6 md:p-10">
         <div className="flex justify-center gap-2 md:justify-start">
           <a href="#" className="flex items-center gap-2 font-medium">
-            <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+            <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
               <IconPlaceholder
                 lucide="GalleryVerticalEndIcon"
                 tabler="IconLayoutRows"
@@ -28,7 +28,7 @@ export default function LoginPage() {
           </div>
         </div>
       </div>
-      <div className="bg-muted relative hidden lg:block">
+      <div className="relative hidden bg-muted lg:block">
         <img
           src="/placeholder.svg"
           alt="Image"
diff --git a/apps/v4/registry/bases/radix/blocks/login-03/page.tsx b/apps/v4/registry/bases/radix/blocks/login-03/page.tsx
index f8ca779388..887954a965 100644
--- a/apps/v4/registry/bases/radix/blocks/login-03/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/login-03/page.tsx
@@ -5,10 +5,10 @@ import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 export default function LoginPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
         <a href="#" className="flex items-center gap-2 self-center font-medium">
-          <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+          <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
             <IconPlaceholder
               lucide="GalleryVerticalEndIcon"
               tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/radix/blocks/login-04/components/login-form.tsx b/apps/v4/registry/bases/radix/blocks/login-04/components/login-form.tsx
index f8b2f5abf3..10292194c3 100644
--- a/apps/v4/registry/bases/radix/blocks/login-04/components/login-form.tsx
+++ b/apps/v4/registry/bases/radix/blocks/login-04/components/login-form.tsx
@@ -22,7 +22,7 @@ export function LoginForm({
             <FieldGroup>
               <div className="flex flex-col items-center gap-2 text-center">
                 <h1 className="text-2xl font-bold">Welcome back</h1>
-                <p className="text-muted-foreground text-balance">
+                <p className="text-balance text-muted-foreground">
                   Login to your Acme Inc account
                 </p>
               </div>
@@ -87,7 +87,7 @@ export function LoginForm({
               </FieldDescription>
             </FieldGroup>
           </form>
-          <div className="bg-muted relative hidden md:block">
+          <div className="relative hidden bg-muted md:block">
             <img
               src="/placeholder.svg"
               alt="Image"
diff --git a/apps/v4/registry/bases/radix/blocks/login-04/page.tsx b/apps/v4/registry/bases/radix/blocks/login-04/page.tsx
index ec3a1e7057..b58364f04b 100644
--- a/apps/v4/registry/bases/radix/blocks/login-04/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/login-04/page.tsx
@@ -2,7 +2,7 @@ import { LoginForm } from "@/registry/bases/radix/blocks/login-04/components/log
 
 export default function LoginPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
       <div className="w-full max-w-sm md:max-w-4xl">
         <LoginForm />
       </div>
diff --git a/apps/v4/registry/bases/radix/blocks/login-05/page.tsx b/apps/v4/registry/bases/radix/blocks/login-05/page.tsx
index 6ec83f5bd1..0236fe38e9 100644
--- a/apps/v4/registry/bases/radix/blocks/login-05/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/login-05/page.tsx
@@ -2,7 +2,7 @@ import { LoginForm } from "@/registry/bases/radix/blocks/login-05/components/log
 
 export default function LoginPage() {
   return (
-    <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
       <div className="w-full max-w-sm">
         <LoginForm />
       </div>
diff --git a/apps/v4/registry/bases/radix/blocks/preview.tsx b/apps/v4/registry/bases/radix/blocks/preview.tsx
deleted file mode 100644
index f75e344964..0000000000
--- a/apps/v4/registry/bases/radix/blocks/preview.tsx
+++ /dev/null
@@ -1,1682 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useState } from "react"
-
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/radix/components/example"
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@/registry/bases/radix/ui/alert-dialog"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarImage,
-} from "@/registry/bases/radix/ui/avatar"
-import { Badge } from "@/registry/bases/radix/ui/badge"
-import { Button } from "@/registry/bases/radix/ui/button"
-import { ButtonGroup } from "@/registry/bases/radix/ui/button-group"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/radix/ui/card"
-import { Checkbox } from "@/registry/bases/radix/ui/checkbox"
-import {
-  Combobox,
-  ComboboxContent,
-  ComboboxEmpty,
-  ComboboxInput,
-  ComboboxItem,
-  ComboboxList,
-} from "@/registry/bases/radix/ui/combobox"
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/registry/bases/radix/ui/dropdown-menu"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@/registry/bases/radix/ui/empty"
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldGroup,
-  FieldLabel,
-  FieldLegend,
-  FieldSeparator,
-  FieldSet,
-  FieldTitle,
-} from "@/registry/bases/radix/ui/field"
-import { Input } from "@/registry/bases/radix/ui/input"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupButton,
-  InputGroupInput,
-  InputGroupText,
-  InputGroupTextarea,
-} from "@/registry/bases/radix/ui/input-group"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemMedia,
-  ItemTitle,
-} from "@/registry/bases/radix/ui/item"
-import { Label } from "@/registry/bases/radix/ui/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeader,
-  PopoverTitle,
-  PopoverTrigger,
-} from "@/registry/bases/radix/ui/popover"
-import {
-  RadioGroup,
-  RadioGroupItem,
-} from "@/registry/bases/radix/ui/radio-group"
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/registry/bases/radix/ui/select"
-import { Separator } from "@/registry/bases/radix/ui/separator"
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/registry/bases/radix/ui/sheet"
-import { Slider } from "@/registry/bases/radix/ui/slider"
-import { Spinner } from "@/registry/bases/radix/ui/spinner"
-import { Switch } from "@/registry/bases/radix/ui/switch"
-import { Textarea } from "@/registry/bases/radix/ui/textarea"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/bases/radix/ui/tooltip"
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
-export default function CoverExample() {
-  return (
-    <ExampleWrapper>
-      <ObservabilityCard />
-      <SmallFormExample />
-      <FormExample />
-      <FieldExamples />
-      <ItemExample />
-      <ButtonGroupExamples />
-      <EmptyAvatarGroup />
-      <InputGroupExamples />
-      <SheetExample />
-      <BadgeExamples />
-    </ExampleWrapper>
-  )
-}
-
-function FieldExamples() {
-  const [gpuCount, setGpuCount] = React.useState(8)
-  const [value, setValue] = useState([200, 800])
-  const handleGpuAdjustment = React.useCallback((adjustment: number) => {
-    setGpuCount((prevCount) =>
-      Math.max(1, Math.min(99, prevCount + adjustment))
-    )
-  }, [])
-
-  const handleGpuInputChange = React.useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseInt(e.target.value, 10)
-      if (!isNaN(value) && value >= 1 && value <= 99) {
-        setGpuCount(value)
-      }
-    },
-    []
-  )
-
-  return (
-    <Example title="Fields">
-      <FieldSet className="w-full max-w-md">
-        <FieldGroup>
-          <FieldSet>
-            <FieldLegend>Compute Environment</FieldLegend>
-            <FieldDescription>
-              Select the compute environment for your cluster.
-            </FieldDescription>
-            <RadioGroup defaultValue="kubernetes">
-              <FieldLabel htmlFor="kubernetes-r2h">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Kubernetes</FieldTitle>
-                    <FieldDescription>
-                      Run GPU workloads on a K8s configured cluster. This is the
-                      default.
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem
-                    value="kubernetes"
-                    id="kubernetes-r2h"
-                    aria-label="Kubernetes"
-                  />
-                </Field>
-              </FieldLabel>
-              <FieldLabel htmlFor="vm-z4k">
-                <Field orientation="horizontal">
-                  <FieldContent>
-                    <FieldTitle>Virtual Machine</FieldTitle>
-                    <FieldDescription>
-                      Access a VM configured cluster to run workloads. (Coming
-                      soon)
-                    </FieldDescription>
-                  </FieldContent>
-                  <RadioGroupItem
-                    value="vm"
-                    id="vm-z4k"
-                    aria-label="Virtual Machine"
-                  />
-                </Field>
-              </FieldLabel>
-            </RadioGroup>
-          </FieldSet>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="number-of-gpus-f6l">
-                Number of GPUs
-              </FieldLabel>
-              <FieldDescription>You can add more later.</FieldDescription>
-            </FieldContent>
-            <ButtonGroup>
-              <Input
-                id="number-of-gpus-f6l"
-                value={gpuCount}
-                onChange={handleGpuInputChange}
-                size={3}
-                maxLength={3}
-              />
-              <Button
-                variant="outline"
-                size="icon"
-                type="button"
-                aria-label="Decrement"
-                onClick={() => handleGpuAdjustment(-1)}
-                disabled={gpuCount <= 1}
-              >
-                <IconPlaceholder
-                  lucide="MinusIcon"
-                  tabler="IconMinus"
-                  hugeicons="MinusSignIcon"
-                  phosphor="MinusIcon"
-                  remixicon="RiSubtractLine"
-                />
-              </Button>
-              <Button
-                variant="outline"
-                size="icon"
-                type="button"
-                aria-label="Increment"
-                onClick={() => handleGpuAdjustment(1)}
-                disabled={gpuCount >= 99}
-              >
-                <IconPlaceholder
-                  lucide="PlusIcon"
-                  tabler="IconPlus"
-                  hugeicons="PlusSignIcon"
-                  phosphor="PlusIcon"
-                  remixicon="RiAddLine"
-                />
-              </Button>
-            </ButtonGroup>
-          </Field>
-          <FieldSeparator />
-          <Field orientation="horizontal">
-            <FieldContent>
-              <FieldLabel htmlFor="tinting">Wallpaper Tinting</FieldLabel>
-              <FieldDescription>
-                Allow the wallpaper to be tinted.
-              </FieldDescription>
-            </FieldContent>
-            <Switch id="tinting" defaultChecked />
-          </Field>
-          <FieldSeparator />
-          <FieldLabel htmlFor="checkbox-demo">
-            <Field orientation="horizontal">
-              <Checkbox id="checkbox-demo" defaultChecked />
-              <FieldLabel htmlFor="checkbox-demo" className="line-clamp-1">
-                I agree to the terms and conditions
-              </FieldLabel>
-            </Field>
-          </FieldLabel>
-          <FieldSeparator />
-          <Field>
-            <FieldTitle>Price Range</FieldTitle>
-            <FieldDescription>
-              Set your budget range ($
-              <span className="font-medium tabular-nums">
-                {value[0]}
-              </span> -{" "}
-              <span className="font-medium tabular-nums">{value[1]}</span>).
-            </FieldDescription>
-            <Slider
-              value={value}
-              onValueChange={(val) => setValue(val as number[])}
-              max={1000}
-              min={0}
-              step={10}
-              className="mt-2 w-full"
-              aria-label="Price Range"
-            />
-          </Field>
-          <Field orientation="horizontal">
-            <Button type="submit">Submit</Button>
-            <Button variant="outline" type="button">
-              Cancel
-            </Button>
-          </Field>
-        </FieldGroup>
-      </FieldSet>
-    </Example>
-  )
-}
-
-function ButtonGroupExamples() {
-  const [label, setLabel] = React.useState("personal")
-
-  return (
-    <Example title="Button Group" className="items-center justify-center">
-      <div className="flex flex-col gap-6">
-        <ButtonGroup>
-          <ButtonGroup className="hidden sm:flex">
-            <Button variant="outline" size="icon-sm" aria-label="Go Back">
-              <IconPlaceholder
-                lucide="ArrowLeftIcon"
-                tabler="IconArrowLeft"
-                hugeicons="ArrowLeft01Icon"
-                phosphor="ArrowLeftIcon"
-                remixicon="RiArrowLeftLine"
-              />
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup>
-            <Button variant="outline" size="sm">
-              Archive
-            </Button>
-            <Button variant="outline" size="sm">
-              Report
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup>
-            <Button variant="outline" size="sm">
-              Snooze
-            </Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="icon-sm"
-                  aria-label="More Options"
-                >
-                  <IconPlaceholder
-                    lucide="ChevronDownIcon"
-                    tabler="IconChevronDown"
-                    hugeicons="ArrowDown01Icon"
-                    phosphor="CaretDownIcon"
-                    remixicon="RiArrowDownSLine"
-                  />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-48">
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="MailCheckIcon"
-                      tabler="IconMailCheck"
-                      hugeicons="MailValidation01Icon"
-                      phosphor="EnvelopeIcon"
-                      remixicon="RiMailLine"
-                    />
-                    Mark as Read
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="ArchiveIcon"
-                      tabler="IconArchive"
-                      hugeicons="ArchiveIcon"
-                      phosphor="ArchiveIcon"
-                      remixicon="RiArchiveLine"
-                    />
-                    Archive
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="ClockIcon"
-                      tabler="IconClock"
-                      hugeicons="ClockIcon"
-                      phosphor="ClockIcon"
-                      remixicon="RiTimeLine"
-                    />
-                    Snooze
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="CalendarPlusIcon"
-                      tabler="IconCalendarPlus"
-                      hugeicons="CalendarAdd01Icon"
-                      phosphor="CalendarPlusIcon"
-                      remixicon="RiCalendarEventLine"
-                    />
-                    Add to Calendar
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="ListFilterIcon"
-                      tabler="IconFilterPlus"
-                      hugeicons="AddToListIcon"
-                      phosphor="ListPlusIcon"
-                      remixicon="RiPlayListAddLine"
-                    />
-                    Add to List
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <IconPlaceholder
-                        lucide="TagIcon"
-                        tabler="IconTag"
-                        hugeicons="TagIcon"
-                        phosphor="TagIcon"
-                        remixicon="RiPriceTagLine"
-                      />
-                      Label As...
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuSubContent>
-                      <DropdownMenuRadioGroup
-                        value={label}
-                        onValueChange={setLabel}
-                      >
-                        <DropdownMenuRadioItem value="personal">
-                          Personal
-                        </DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="work">
-                          Work
-                        </DropdownMenuRadioItem>
-                        <DropdownMenuRadioItem value="other">
-                          Other
-                        </DropdownMenuRadioItem>
-                      </DropdownMenuRadioGroup>
-                    </DropdownMenuSubContent>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    <IconPlaceholder
-                      lucide="Trash2Icon"
-                      tabler="IconTrash"
-                      hugeicons="Delete02Icon"
-                      phosphor="TrashIcon"
-                      remixicon="RiDeleteBinLine"
-                    />
-                    Trash
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </ButtonGroup>
-          <ButtonGroup className="hidden sm:flex">
-            <Button variant="outline" size="icon-sm" aria-label="Previous">
-              <IconPlaceholder
-                lucide="ArrowLeftIcon"
-                tabler="IconArrowLeft"
-                hugeicons="ArrowLeft01Icon"
-                phosphor="ArrowLeftIcon"
-                remixicon="RiArrowLeftLine"
-              />
-            </Button>
-            <Button variant="outline" size="icon-sm" aria-label="Next">
-              <IconPlaceholder
-                lucide="ArrowRightIcon"
-                tabler="IconArrowRight"
-                hugeicons="ArrowRight01Icon"
-                phosphor="ArrowRightIcon"
-                remixicon="RiArrowRightLine"
-              />
-            </Button>
-          </ButtonGroup>
-        </ButtonGroup>
-        <div className="flex gap-4">
-          <ButtonGroup className="hidden sm:flex">
-            <ButtonGroup>
-              <Button variant="outline">1</Button>
-              <Button variant="outline">2</Button>
-              <Button variant="outline">3</Button>
-            </ButtonGroup>
-          </ButtonGroup>
-          <ButtonGroup>
-            <ButtonGroup>
-              <Button variant="outline">Follow</Button>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button variant="outline" size="icon">
-                    <IconPlaceholder
-                      lucide="ChevronDownIcon"
-                      tabler="IconChevronDown"
-                      hugeicons="ArrowDown01Icon"
-                      phosphor="CaretDownIcon"
-                      remixicon="RiArrowDownSLine"
-                    />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-52">
-                  <DropdownMenuGroup>
-                    <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="VolumeX"
-                        tabler="IconVolume"
-                        hugeicons="VolumeOffIcon"
-                        phosphor="SpeakerSlashIcon"
-                        remixicon="RiVolumeMuteLine"
-                      />
-                      Mute Conversation
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="CheckIcon"
-                        tabler="IconCheck"
-                        hugeicons="Tick02Icon"
-                        phosphor="CheckIcon"
-                        remixicon="RiCheckLine"
-                      />
-                      Mark as Read
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="UserRoundXIcon"
-                        tabler="IconUserX"
-                        hugeicons="UserRemove01Icon"
-                        phosphor="UserMinusIcon"
-                        remixicon="RiUserUnfollowLine"
-                      />
-                      Block User
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <DropdownMenuLabel>Conversation</DropdownMenuLabel>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="ShareIcon"
-                        tabler="IconShare"
-                        hugeicons="Share03Icon"
-                        phosphor="ShareIcon"
-                        remixicon="RiShareLine"
-                      />
-                      Share Conversation
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="CopyIcon"
-                        tabler="IconCopy"
-                        hugeicons="Copy01Icon"
-                        phosphor="CopyIcon"
-                        remixicon="RiFileCopyLine"
-                      />
-                      Copy Conversation
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <IconPlaceholder
-                        lucide="AlertTriangleIcon"
-                        tabler="IconAlertTriangle"
-                        hugeicons="AlertCircleIcon"
-                        phosphor="WarningIcon"
-                        remixicon="RiErrorWarningLine"
-                      />
-                      Report Conversation
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuGroup>
-                    <DropdownMenuItem variant="destructive">
-                      <IconPlaceholder
-                        lucide="TrashIcon"
-                        tabler="IconTrash"
-                        hugeicons="Delete02Icon"
-                        phosphor="TrashIcon"
-                        remixicon="RiDeleteBinLine"
-                      />
-                      Delete Conversation
-                    </DropdownMenuItem>
-                  </DropdownMenuGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
-            </ButtonGroup>
-            <ButtonGroup>
-              <Button variant="outline">
-                <IconPlaceholder
-                  lucide="BotIcon"
-                  tabler="IconRobot"
-                  hugeicons="BotIcon"
-                  phosphor="RobotIcon"
-                  remixicon="RiRobotLine"
-                />{" "}
-                Copilot
-              </Button>
-              <Popover>
-                <PopoverTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    aria-label="Open Popover"
-                  >
-                    <IconPlaceholder
-                      lucide="ChevronDownIcon"
-                      tabler="IconChevronDown"
-                      hugeicons="ArrowDown01Icon"
-                      phosphor="CaretDownIcon"
-                      remixicon="RiArrowDownSLine"
-                    />
-                  </Button>
-                </PopoverTrigger>
-                <PopoverContent align="end" className="w-96">
-                  <PopoverHeader>
-                    <PopoverTitle>Agent Tasks</PopoverTitle>
-                    <PopoverDescription>
-                      Describe your task in natural language. Copilot will work
-                      in the background and open a pull request.
-                    </PopoverDescription>
-                  </PopoverHeader>
-                  <div className="text-sm *:[p:not(:last-child)]:mb-2">
-                    <Textarea
-                      placeholder="Describe your task in natural language."
-                      className="min-h-32 resize-none"
-                    />
-                  </div>
-                </PopoverContent>
-              </Popover>
-            </ButtonGroup>
-          </ButtonGroup>
-        </div>
-      </div>
-    </Example>
-  )
-}
-
-function InputGroupExamples() {
-  const [isFavorite, setIsFavorite] = React.useState(false)
-  const [voiceEnabled, setVoiceEnabled] = React.useState(false)
-
-  return (
-    <Example title="Input Group">
-      <div className="flex flex-col gap-6">
-        <InputGroup>
-          <InputGroupInput placeholder="Search..." />
-          <InputGroupAddon>
-            <IconPlaceholder
-              lucide="SearchIcon"
-              tabler="IconSearch"
-              hugeicons="Search01Icon"
-              phosphor="MagnifyingGlassIcon"
-              remixicon="RiSearchLine"
-            />
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
-        </InputGroup>
-        <InputGroup>
-          <InputGroupInput placeholder="example.com" className="!pl-1" />
-          <InputGroupAddon>
-            <InputGroupText>https://</InputGroupText>
-          </InputGroupAddon>
-          <InputGroupAddon align="inline-end">
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <InputGroupButton
-                  className="rounded-full"
-                  size="icon-xs"
-                  aria-label="Info"
-                >
-                  <IconPlaceholder
-                    lucide="InfoIcon"
-                    tabler="IconInfoCircle"
-                    hugeicons="AlertCircleIcon"
-                    phosphor="InfoIcon"
-                    remixicon="RiInformationLine"
-                  />
-                </InputGroupButton>
-              </TooltipTrigger>
-              <TooltipContent>This is content in a tooltip.</TooltipContent>
-            </Tooltip>
-          </InputGroupAddon>
-        </InputGroup>
-        <Field>
-          <Label htmlFor="input-secure-19" className="sr-only">
-            Input Secure
-          </Label>
-          <InputGroup>
-            <InputGroupInput id="input-secure-19" className="!pl-0.5" />
-            <Popover>
-              <PopoverTrigger asChild>
-                <InputGroupAddon>
-                  <InputGroupButton
-                    variant="secondary"
-                    size="icon-xs"
-                    aria-label="Info"
-                  >
-                    <IconPlaceholder
-                      lucide="InfoIcon"
-                      tabler="IconInfoCircle"
-                      hugeicons="AlertCircleIcon"
-                      phosphor="InfoIcon"
-                      remixicon="RiInformationLine"
-                    />
-                  </InputGroupButton>
-                </InputGroupAddon>
-              </PopoverTrigger>
-              <PopoverContent
-                align="start"
-                alignOffset={10}
-                className="flex flex-col gap-1 rounded-xl text-sm"
-              >
-                <p className="font-medium">Your connection is not secure.</p>
-                <p>
-                  You should not enter any sensitive information on this site.
-                </p>
-              </PopoverContent>
-            </Popover>
-            <InputGroupAddon className="text-muted-foreground !pl-1">
-              https://
-            </InputGroupAddon>
-            <InputGroupAddon align="inline-end">
-              <InputGroupButton
-                onClick={() => setIsFavorite(!isFavorite)}
-                size="icon-xs"
-                aria-label="Favorite"
-              >
-                <IconPlaceholder
-                  lucide="StarIcon"
-                  tabler="IconStar"
-                  hugeicons="StarIcon"
-                  phosphor="StarIcon"
-                  remixicon="RiStarLine"
-                  data-favorite={isFavorite}
-                  className="data-[favorite=true]:fill-primary data-[favorite=true]:stroke-primary"
-                />
-              </InputGroupButton>
-            </InputGroupAddon>
-          </InputGroup>
-        </Field>
-        <ButtonGroup className="w-full">
-          <ButtonGroup>
-            <Button variant="outline" size="icon" aria-label="Add">
-              <IconPlaceholder
-                lucide="PlusIcon"
-                tabler="IconPlus"
-                hugeicons="PlusSignIcon"
-                phosphor="PlusIcon"
-                remixicon="RiAddLine"
-              />
-            </Button>
-          </ButtonGroup>
-          <ButtonGroup className="flex-1">
-            <InputGroup>
-              <InputGroupInput
-                placeholder={
-                  voiceEnabled
-                    ? "Record and send audio..."
-                    : "Send a message..."
-                }
-                disabled={voiceEnabled}
-              />
-              <InputGroupAddon align="inline-end">
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <InputGroupButton
-                      onClick={() => setVoiceEnabled(!voiceEnabled)}
-                      data-active={voiceEnabled}
-                      className="data-[active=true]:bg-primary data-[active=true]:text-primary-foreground"
-                      aria-pressed={voiceEnabled}
-                      size="icon-xs"
-                      aria-label="Voice Mode"
-                    >
-                      <IconPlaceholder
-                        lucide="AudioLinesIcon"
-                        tabler="IconWaveSine"
-                        hugeicons="AudioWave01Icon"
-                        phosphor="MicrophoneIcon"
-                        remixicon="RiMicLine"
-                      />
-                    </InputGroupButton>
-                  </TooltipTrigger>
-                  <TooltipContent>Voice Mode</TooltipContent>
-                </Tooltip>
-              </InputGroupAddon>
-            </InputGroup>
-          </ButtonGroup>
-        </ButtonGroup>
-        <InputGroup>
-          <InputGroupTextarea placeholder="Ask, Search or Chat..." />
-          <InputGroupAddon align="block-end">
-            <InputGroupButton
-              variant="outline"
-              className="style-lyra:rounded-none rounded-full"
-              size="icon-xs"
-              aria-label="Add"
-            >
-              <IconPlaceholder
-                lucide="PlusIcon"
-                tabler="IconPlus"
-                hugeicons="PlusSignIcon"
-                phosphor="PlusIcon"
-                remixicon="RiAddLine"
-              />
-            </InputGroupButton>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <InputGroupButton variant="ghost">Auto</InputGroupButton>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                side="top"
-                align="start"
-                className="[--radius:0.95rem]"
-              >
-                <DropdownMenuItem>Auto</DropdownMenuItem>
-                <DropdownMenuItem>Agent</DropdownMenuItem>
-                <DropdownMenuItem>Manual</DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <InputGroupText className="ml-auto">52% used</InputGroupText>
-            <Separator orientation="vertical" className="!h-4" />
-            <InputGroupButton
-              variant="default"
-              className="style-lyra:rounded-none rounded-full"
-              size="icon-xs"
-            >
-              <IconPlaceholder
-                lucide="ArrowUpIcon"
-                tabler="IconArrowUp"
-                hugeicons="ArrowUp01Icon"
-                phosphor="ArrowUpIcon"
-                remixicon="RiArrowUpLine"
-              />
-              <span className="sr-only">Send</span>
-            </InputGroupButton>
-          </InputGroupAddon>
-        </InputGroup>
-      </div>
-    </Example>
-  )
-}
-
-function EmptyAvatarGroup() {
-  return (
-    <Example title="Empty">
-      <Empty className="h-full flex-none border">
-        <EmptyHeader>
-          <EmptyMedia>
-            <AvatarGroup className="grayscale">
-              <Avatar size="lg">
-                <AvatarImage
-                  src="https://github.com/shadcn.png"
-                  alt="@shadcn"
-                />
-                <AvatarFallback>CN</AvatarFallback>
-              </Avatar>
-              <Avatar size="lg">
-                <AvatarImage
-                  src="https://github.com/maxleiter.png"
-                  alt="@maxleiter"
-                />
-                <AvatarFallback>LR</AvatarFallback>
-              </Avatar>
-              <Avatar size="lg">
-                <AvatarImage
-                  src="https://github.com/evilrabbit.png"
-                  alt="@evilrabbit"
-                />
-                <AvatarFallback>ER</AvatarFallback>
-              </Avatar>
-            </AvatarGroup>
-          </EmptyMedia>
-          <EmptyTitle>No Team Members</EmptyTitle>
-          <EmptyDescription>
-            Invite your team to collaborate on this project.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <div className="flex gap-2">
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button variant="outline">Show Dialog</Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    This action cannot be undone. This will permanently delete
-                    your account and remove your data from our servers.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Cancel</AlertDialogCancel>
-                  <AlertDialogAction>Continue</AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button>Connect Mouse</Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent size="sm">
-                <AlertDialogHeader>
-                  <AlertDialogMedia>
-                    <IconPlaceholder
-                      lucide="BluetoothIcon"
-                      tabler="IconBluetooth"
-                      hugeicons="BluetoothIcon"
-                      phosphor="BluetoothIcon"
-                      remixicon="RiBluetoothLine"
-                    />
-                  </AlertDialogMedia>
-                  <AlertDialogTitle>
-                    Allow accessory to connect?
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    Do you want to allow the USB accessory to connect to this
-                    device?
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
-                  <AlertDialogAction>Allow</AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-          </div>
-        </EmptyContent>
-      </Empty>
-    </Example>
-  )
-}
-
-function FormExample() {
-  return (
-    <Example title="Complex Form">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>Payment Method</CardTitle>
-          <CardDescription>
-            All transactions are secure and encrypted
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <FieldGroup>
-              <FieldSet>
-                <FieldGroup>
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-card-name-43j">
-                      Name on Card
-                    </FieldLabel>
-                    <Input
-                      id="checkout-7j9-card-name-43j"
-                      placeholder="John Doe"
-                      required
-                    />
-                  </Field>
-                  <div className="grid grid-cols-3 gap-4">
-                    <Field className="col-span-2">
-                      <FieldLabel htmlFor="checkout-7j9-card-number-uw1">
-                        Card Number
-                      </FieldLabel>
-                      <Input
-                        id="checkout-7j9-card-number-uw1"
-                        placeholder="1234 5678 9012 3456"
-                        required
-                      />
-                      <FieldDescription>
-                        Enter your 16-digit number.
-                      </FieldDescription>
-                    </Field>
-                    <Field className="col-span-1">
-                      <FieldLabel htmlFor="checkout-7j9-cvv">CVV</FieldLabel>
-                      <Input id="checkout-7j9-cvv" placeholder="123" required />
-                    </Field>
-                  </div>
-                  <div className="grid grid-cols-2 gap-4">
-                    <Field>
-                      <FieldLabel htmlFor="checkout-7j9-exp-month-ts6">
-                        Month
-                      </FieldLabel>
-                      <Select defaultValue="">
-                        <SelectTrigger id="checkout-7j9-exp-month-ts6">
-                          <SelectValue placeholder="MM" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectItem value="01">01</SelectItem>
-                            <SelectItem value="02">02</SelectItem>
-                            <SelectItem value="03">03</SelectItem>
-                            <SelectItem value="04">04</SelectItem>
-                            <SelectItem value="05">05</SelectItem>
-                            <SelectItem value="06">06</SelectItem>
-                            <SelectItem value="07">07</SelectItem>
-                            <SelectItem value="08">08</SelectItem>
-                            <SelectItem value="09">09</SelectItem>
-                            <SelectItem value="10">10</SelectItem>
-                            <SelectItem value="11">11</SelectItem>
-                            <SelectItem value="12">12</SelectItem>
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                    </Field>
-                    <Field>
-                      <FieldLabel htmlFor="checkout-7j9-exp-year-f59">
-                        Year
-                      </FieldLabel>
-                      <Select defaultValue="">
-                        <SelectTrigger id="checkout-7j9-exp-year-f59">
-                          <SelectValue placeholder="YYYY" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectGroup>
-                            <SelectItem value="2024">2024</SelectItem>
-                            <SelectItem value="2025">2025</SelectItem>
-                            <SelectItem value="2026">2026</SelectItem>
-                            <SelectItem value="2027">2027</SelectItem>
-                            <SelectItem value="2028">2028</SelectItem>
-                            <SelectItem value="2029">2029</SelectItem>
-                          </SelectGroup>
-                        </SelectContent>
-                      </Select>
-                    </Field>
-                  </div>
-                </FieldGroup>
-              </FieldSet>
-              <FieldSeparator />
-              <FieldSet>
-                <FieldLegend>Billing Address</FieldLegend>
-                <FieldDescription>
-                  The billing address associated with your payment.
-                </FieldDescription>
-                <FieldGroup>
-                  <Field orientation="horizontal">
-                    <Checkbox
-                      id="checkout-7j9-same-as-shipping-wgm"
-                      defaultChecked
-                    />
-                    <FieldLabel
-                      htmlFor="checkout-7j9-same-as-shipping-wgm"
-                      className="font-normal"
-                    >
-                      Same as shipping address
-                    </FieldLabel>
-                  </Field>
-                </FieldGroup>
-              </FieldSet>
-              <FieldSeparator />
-              <FieldSet>
-                <FieldGroup>
-                  <Field>
-                    <FieldLabel htmlFor="checkout-7j9-optional-comments">
-                      Comments
-                    </FieldLabel>
-                    <Textarea
-                      id="checkout-7j9-optional-comments"
-                      placeholder="Add any additional comments"
-                    />
-                  </Field>
-                </FieldGroup>
-              </FieldSet>
-              <Field orientation="horizontal">
-                <Button type="submit">Submit</Button>
-                <Button variant="outline" type="button">
-                  Cancel
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-
-const frameworks = [
-  "Next.js",
-  "SvelteKit",
-  "Nuxt.js",
-  "Remix",
-  "Astro",
-] as const
-
-function SmallFormExample() {
-  const [notifications, setNotifications] = React.useState({
-    email: true,
-    sms: false,
-    push: true,
-  })
-  const [theme, setTheme] = React.useState("light")
-
-  return (
-    <Example title="Form">
-      <Card className="w-full max-w-md">
-        <CardHeader>
-          <CardTitle>User Information</CardTitle>
-          <CardDescription>Please fill in your details below</CardDescription>
-          <CardAction>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon">
-                  <IconPlaceholder
-                    lucide="MoreVerticalIcon"
-                    tabler="IconDotsVertical"
-                    hugeicons="MoreVerticalCircle01Icon"
-                    phosphor="DotsThreeVerticalIcon"
-                    remixicon="RiMore2Line"
-                  />
-                  <span className="sr-only">More options</span>
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48"
-              >
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>File</DropdownMenuLabel>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="FileIcon"
-                      tabler="IconFile"
-                      hugeicons="FileIcon"
-                      phosphor="FileIcon"
-                      remixicon="RiFileLine"
-                    />
-                    New File
-                    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="FolderIcon"
-                      tabler="IconFolder"
-                      hugeicons="FolderIcon"
-                      phosphor="FolderIcon"
-                      remixicon="RiFolderLine"
-                    />
-                    New Folder
-                    <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <IconPlaceholder
-                        lucide="FolderOpenIcon"
-                        tabler="IconFolderOpen"
-                        hugeicons="FolderOpenIcon"
-                        phosphor="FolderOpenIcon"
-                        remixicon="RiFolderOpenLine"
-                      />
-                      Open Recent
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
-                          <DropdownMenuItem>
-                            <IconPlaceholder
-                              lucide="FileCodeIcon"
-                              tabler="IconFileCode"
-                              hugeicons="CodeIcon"
-                              phosphor="CodeIcon"
-                              remixicon="RiCodeLine"
-                            />
-                            Project Alpha
-                          </DropdownMenuItem>
-                          <DropdownMenuItem>
-                            <IconPlaceholder
-                              lucide="FileCodeIcon"
-                              tabler="IconFileCode"
-                              hugeicons="CodeIcon"
-                              phosphor="CodeIcon"
-                              remixicon="RiCodeLine"
-                            />
-                            Project Beta
-                          </DropdownMenuItem>
-                          <DropdownMenuSub>
-                            <DropdownMenuSubTrigger>
-                              <IconPlaceholder
-                                lucide="MoreHorizontalIcon"
-                                tabler="IconDots"
-                                hugeicons="MoreHorizontalCircle01Icon"
-                                phosphor="DotsThreeOutlineIcon"
-                                remixicon="RiMoreLine"
-                              />
-                              More Projects
-                            </DropdownMenuSubTrigger>
-                            <DropdownMenuPortal>
-                              <DropdownMenuSubContent>
-                                <DropdownMenuItem>
-                                  <IconPlaceholder
-                                    lucide="FileCodeIcon"
-                                    tabler="IconFileCode"
-                                    hugeicons="CodeIcon"
-                                    phosphor="CodeIcon"
-                                    remixicon="RiCodeLine"
-                                  />
-                                  Project Gamma
-                                </DropdownMenuItem>
-                                <DropdownMenuItem>
-                                  <IconPlaceholder
-                                    lucide="FileCodeIcon"
-                                    tabler="IconFileCode"
-                                    hugeicons="CodeIcon"
-                                    phosphor="CodeIcon"
-                                    remixicon="RiCodeLine"
-                                  />
-                                  Project Delta
-                                </DropdownMenuItem>
-                              </DropdownMenuSubContent>
-                            </DropdownMenuPortal>
-                          </DropdownMenuSub>
-                        </DropdownMenuGroup>
-                        <DropdownMenuSeparator />
-                        <DropdownMenuGroup>
-                          <DropdownMenuItem>
-                            <IconPlaceholder
-                              lucide="FolderSearchIcon"
-                              tabler="IconFolderSearch"
-                              hugeicons="SearchIcon"
-                              phosphor="MagnifyingGlassIcon"
-                              remixicon="RiSearchLine"
-                            />
-                            Browse...
-                          </DropdownMenuItem>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="SaveIcon"
-                      tabler="IconDeviceFloppy"
-                      hugeicons="FloppyDiskIcon"
-                      phosphor="FloppyDiskIcon"
-                      remixicon="RiSaveLine"
-                    />
-                    Save
-                    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="DownloadIcon"
-                      tabler="IconDownload"
-                      hugeicons="DownloadIcon"
-                      phosphor="DownloadIcon"
-                      remixicon="RiDownloadLine"
-                    />
-                    Export
-                    <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuLabel>View</DropdownMenuLabel>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.email}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        email: checked === true,
-                      })
-                    }
-                  >
-                    <IconPlaceholder
-                      lucide="EyeIcon"
-                      tabler="IconEye"
-                      hugeicons="EyeIcon"
-                      phosphor="EyeIcon"
-                      remixicon="RiEyeLine"
-                    />
-                    Show Sidebar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuCheckboxItem
-                    checked={notifications.sms}
-                    onCheckedChange={(checked) =>
-                      setNotifications({
-                        ...notifications,
-                        sms: checked === true,
-                      })
-                    }
-                  >
-                    <IconPlaceholder
-                      lucide="LayoutIcon"
-                      tabler="IconLayout"
-                      hugeicons="LayoutIcon"
-                      phosphor="LayoutIcon"
-                      remixicon="RiLayoutLine"
-                    />
-                    Show Status Bar
-                  </DropdownMenuCheckboxItem>
-                  <DropdownMenuSub>
-                    <DropdownMenuSubTrigger>
-                      <IconPlaceholder
-                        lucide="PaletteIcon"
-                        tabler="IconPalette"
-                        hugeicons="PaintBoardIcon"
-                        phosphor="PaletteIcon"
-                        remixicon="RiPaletteLine"
-                      />
-                      Theme
-                    </DropdownMenuSubTrigger>
-                    <DropdownMenuPortal>
-                      <DropdownMenuSubContent>
-                        <DropdownMenuGroup>
-                          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-                          <DropdownMenuRadioGroup
-                            value={theme}
-                            onValueChange={setTheme}
-                          >
-                            <DropdownMenuRadioItem value="light">
-                              <IconPlaceholder
-                                lucide="SunIcon"
-                                tabler="IconSun"
-                                hugeicons="SunIcon"
-                                phosphor="SunIcon"
-                                remixicon="RiSunLine"
-                              />
-                              Light
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="dark">
-                              <IconPlaceholder
-                                lucide="MoonIcon"
-                                tabler="IconMoon"
-                                hugeicons="MoonIcon"
-                                phosphor="MoonIcon"
-                                remixicon="RiMoonLine"
-                              />
-                              Dark
-                            </DropdownMenuRadioItem>
-                            <DropdownMenuRadioItem value="system">
-                              <IconPlaceholder
-                                lucide="MonitorIcon"
-                                tabler="IconDeviceDesktop"
-                                hugeicons="ComputerIcon"
-                                phosphor="MonitorIcon"
-                                remixicon="RiComputerLine"
-                              />
-                              System
-                            </DropdownMenuRadioItem>
-                          </DropdownMenuRadioGroup>
-                        </DropdownMenuGroup>
-                      </DropdownMenuSubContent>
-                    </DropdownMenuPortal>
-                  </DropdownMenuSub>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="HelpCircleIcon"
-                      tabler="IconHelpCircle"
-                      hugeicons="HelpCircleIcon"
-                      phosphor="QuestionIcon"
-                      remixicon="RiQuestionLine"
-                    />
-                    Help & Support
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <IconPlaceholder
-                      lucide="FileTextIcon"
-                      tabler="IconFileText"
-                      hugeicons="File01Icon"
-                      phosphor="FileTextIcon"
-                      remixicon="RiFileTextLine"
-                    />
-                    Documentation
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-                <DropdownMenuSeparator />
-                <DropdownMenuGroup>
-                  <DropdownMenuItem variant="destructive">
-                    <IconPlaceholder
-                      lucide="LogOutIcon"
-                      tabler="IconLogout"
-                      hugeicons="LogoutIcon"
-                      phosphor="SignOutIcon"
-                      remixicon="RiLogoutBoxLine"
-                    />
-                    Sign Out
-                    <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
-                  </DropdownMenuItem>
-                </DropdownMenuGroup>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          </CardAction>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <FieldGroup>
-              <div className="grid grid-cols-2 gap-4">
-                <Field>
-                  <FieldLabel htmlFor="small-form-name">Name</FieldLabel>
-                  <Input
-                    id="small-form-name"
-                    placeholder="Enter your name"
-                    required
-                  />
-                </Field>
-                <Field>
-                  <FieldLabel htmlFor="small-form-role">Role</FieldLabel>
-                  <Select defaultValue="">
-                    <SelectTrigger id="small-form-role">
-                      <SelectValue placeholder="Select a role" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectGroup>
-                        <SelectItem value="developer">Developer</SelectItem>
-                        <SelectItem value="designer">Designer</SelectItem>
-                        <SelectItem value="manager">Manager</SelectItem>
-                        <SelectItem value="other">Other</SelectItem>
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                </Field>
-              </div>
-              <Field>
-                <FieldLabel htmlFor="small-form-framework">
-                  Framework
-                </FieldLabel>
-                <Combobox items={frameworks}>
-                  <ComboboxInput
-                    id="small-form-framework"
-                    placeholder="Select a framework"
-                    required
-                  />
-                  <ComboboxContent>
-                    <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
-                    <ComboboxList>
-                      {(item) => (
-                        <ComboboxItem key={item} value={item}>
-                          {item}
-                        </ComboboxItem>
-                      )}
-                    </ComboboxList>
-                  </ComboboxContent>
-                </Combobox>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="small-form-comments">Comments</FieldLabel>
-                <Textarea
-                  id="small-form-comments"
-                  placeholder="Add any additional comments"
-                />
-              </Field>
-              <Field orientation="horizontal">
-                <Button type="submit">Submit</Button>
-                <Button variant="outline" type="button">
-                  Cancel
-                </Button>
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-
-function ObservabilityCard() {
-  return (
-    <Example title="Card" className="items-center justify-center">
-      <Card className="relative w-full max-w-sm overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
-        <img
-          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Photo by mymind on Unsplash"
-          title="Photo by mymind on Unsplash"
-          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
-        />
-        <CardHeader>
-          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
-          <CardDescription>
-            Switch to the improved way to explore your data, with natural
-            language. Monitoring will no longer be available on the Pro plan in
-            November, 2025
-          </CardDescription>
-        </CardHeader>
-        <CardFooter>
-          <Button>
-            Create Query{" "}
-            <IconPlaceholder
-              lucide="PlusIcon"
-              tabler="IconPlus"
-              hugeicons="PlusSignIcon"
-              phosphor="PlusIcon"
-              remixicon="RiAddLine"
-              data-icon="inline-end"
-            />
-          </Button>
-          <Badge variant="secondary" className="ml-auto">
-            Warning
-          </Badge>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-function FieldSlider() {
-  const [value, setValue] = useState([200, 800])
-  return (
-    <Example title="Field Slider">
-      <div className="w-full max-w-md">
-        <Field>
-          <FieldTitle>Price Range</FieldTitle>
-          <FieldDescription>
-            Set your budget range ($
-            <span className="font-medium tabular-nums">{value[0]}</span> -{" "}
-            <span className="font-medium tabular-nums">{value[1]}</span>).
-          </FieldDescription>
-          <Slider
-            value={value}
-            onValueChange={setValue}
-            max={1000}
-            min={0}
-            step={10}
-            className="mt-2 w-full"
-            aria-label="Price Range"
-          />
-        </Field>
-      </div>
-    </Example>
-  )
-}
-
-function ItemExample() {
-  return (
-    <Example title="Item">
-      <div className="flex w-full max-w-md flex-col gap-6">
-        <Item variant="outline">
-          <ItemContent>
-            <ItemTitle>Two-factor authentication</ItemTitle>
-            <ItemDescription className="text-pretty xl:hidden 2xl:block">
-              Verify via email or phone number.
-            </ItemDescription>
-          </ItemContent>
-          <ItemActions>
-            <Button size="sm" variant="secondary">
-              Enable
-            </Button>
-          </ItemActions>
-        </Item>
-        <Item variant="outline" size="sm" asChild>
-          <a href="#">
-            <ItemMedia variant="icon">
-              <IconPlaceholder
-                lucide="ShoppingBagIcon"
-                tabler="IconShoppingBag"
-                hugeicons="ShoppingBasket01Icon"
-                phosphor="BagIcon"
-                remixicon="RiShoppingBagLine"
-              />
-            </ItemMedia>
-            <ItemContent>
-              <ItemTitle>Your order has been shipped.</ItemTitle>
-            </ItemContent>
-          </a>
-        </Item>
-      </div>
-    </Example>
-  )
-}
-
-function BadgeExamples() {
-  return (
-    <Example title="Badge" className="items-center justify-center">
-      <div className="flex items-center justify-center gap-2">
-        <Badge>
-          <Spinner data-icon="inline-start" />
-          Syncing
-        </Badge>
-        <Badge variant="secondary">
-          <Spinner data-icon="inline-start" />
-          Updating
-        </Badge>
-        <Badge variant="outline">
-          <Spinner data-icon="inline-start" />
-          Loading
-        </Badge>
-        <Badge variant="link" className="hidden sm:flex">
-          <Spinner data-icon="inline-start" />
-          Link
-        </Badge>
-      </div>
-    </Example>
-  )
-}
-
-function EmptyWithSpinner() {
-  return (
-    <Example title="Empty with Spinner">
-      <Empty className="w-full border">
-        <EmptyHeader>
-          <EmptyMedia variant="icon">
-            <Spinner />
-          </EmptyMedia>
-          <EmptyTitle>Processing your request</EmptyTitle>
-          <EmptyDescription>
-            Please wait while we process your request. Do not refresh the page.
-          </EmptyDescription>
-        </EmptyHeader>
-        <EmptyContent>
-          <div className="flex gap-2">
-            <Button size="sm">Submit</Button>
-            <Button variant="outline" size="sm">
-              Cancel
-            </Button>
-          </div>
-        </EmptyContent>
-      </Empty>
-    </Example>
-  )
-}
-
-const SHEET_SIDES = ["top", "right", "bottom", "left"] as const
-
-function SheetExample() {
-  return (
-    <Example title="Sheet">
-      <div className="flex gap-2">
-        {SHEET_SIDES.map((side) => (
-          <Sheet key={side}>
-            <SheetTrigger asChild>
-              <Button variant="secondary" className="flex-1 capitalize">
-                {side}
-              </Button>
-            </SheetTrigger>
-            <SheetContent
-              side={side}
-              className="data-[side=bottom]:max-h-[50vh] data-[side=top]:max-h-[50vh]"
-            >
-              <SheetHeader>
-                <SheetTitle>Edit profile</SheetTitle>
-                <SheetDescription>
-                  Make changes to your profile here. Click save when you&apos;re
-                  done.
-                </SheetDescription>
-              </SheetHeader>
-              <div className="overflow-y-auto px-4 text-sm">
-                {Array.from({ length: 10 }).map((_, index) => (
-                  <p
-                    key={index}
-                    className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
-                  >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
-                    do eiusmod tempor incididunt ut labore et dolore magna
-                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-                    ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                    Duis aute irure dolor in reprehenderit in voluptate velit
-                    esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-                    occaecat cupidatat non proident, sunt in culpa qui officia
-                    deserunt mollit anim id est laborum.
-                  </p>
-                ))}
-              </div>
-              <SheetFooter>
-                <Button type="submit">Save changes</Button>
-                <SheetClose asChild>
-                  <Button variant="outline">Cancel</Button>
-                </SheetClose>
-              </SheetFooter>
-            </SheetContent>
-          </Sheet>
-        ))}
-      </div>
-    </Example>
-  )
-}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/activate-agent-dialog.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/activate-agent-dialog.tsx
new file mode 100644
index 0000000000..4a739659af
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/activate-agent-dialog.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import { Alert, AlertDescription } from "@/registry/bases/radix/ui/alert"
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  Item,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/registry/bases/radix/ui/item"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+// Agent feature descriptions.
+const agentFeatures = [
+  {
+    id: "code-reviews",
+    content: (
+      <>
+        <strong>Code reviews</strong> with full codebase context to catch{" "}
+        <strong>hard-to-find</strong> bugs.
+      </>
+    ),
+  },
+  {
+    id: "code-suggestions",
+    content: (
+      <>
+        <strong>Code suggestions</strong> validated in sandboxes before you
+        merge.
+      </>
+    ),
+  },
+  {
+    id: "root-cause",
+    content: (
+      <>
+        <strong>Root-cause analysis</strong> for production issues with
+        deployment context.{" "}
+        <Badge variant="secondary" className="bg-chart-1 text-chart-5">
+          Requires Observability Plus
+        </Badge>
+      </>
+    ),
+  },
+]
+
+export function ActivateAgentDialog() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Ship faster & safer with Vercel Agent</CardTitle>
+        <CardDescription>
+          Your use is subject to Vercel&apos;s{" "}
+          <a href="#">Public Beta Agreement</a> and{" "}
+          <a href="#">AI Product Terms</a>.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <ItemGroup className="gap-0">
+          {agentFeatures.map((feature) => (
+            <Item key={feature.id} size="xs" className="px-0">
+              <ItemMedia variant="icon" className="self-start">
+                <IconPlaceholder
+                  lucide="CheckCircle2Icon"
+                  tabler="IconCircleCheckFilled"
+                  hugeicons="CheckmarkCircle02Icon"
+                  phosphor="CheckCircleIcon"
+                  remixicon="RiCheckboxCircleLine"
+                  className="size-5 fill-primary text-primary-foreground"
+                />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle className="inline leading-relaxed font-normal text-muted-foreground *:[strong]:font-medium *:[strong]:text-foreground">
+                  {feature.content}
+                </ItemTitle>
+              </ItemContent>
+            </Item>
+          ))}
+        </ItemGroup>
+        <Alert>
+          <AlertDescription>
+            Pro teams get $100 in Vercel Agent trial credit for 2 weeks after
+            activation.
+          </AlertDescription>
+        </Alert>
+      </CardContent>
+      <CardFooter className="justify-end gap-2">
+        <Button variant="outline">Cancel</Button>
+        <Button>Enable with $100 credits</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/analytics-card.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/analytics-card.tsx
new file mode 100644
index 0000000000..774e678f1c
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/analytics-card.tsx
@@ -0,0 +1,78 @@
+"use client"
+
+import { Area, AreaChart } from "recharts"
+
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/radix/ui/chart"
+
+// Monthly visitor data for the area chart.
+const chartData = [
+  { month: "January", visitors: 186 },
+  { month: "February", visitors: 305 },
+  { month: "March", visitors: 237 },
+  { month: "April", visitors: 73 },
+  { month: "May", visitors: 209 },
+  { month: "June", visitors: 214 },
+]
+
+// Chart configuration for the visitors dataset.
+const chartConfig = {
+  visitors: {
+    label: "Visitors",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function AnalyticsCard() {
+  return (
+    <Card className="mx-auto w-full max-w-sm data-[size=sm]:pb-0" size="sm">
+      <CardHeader>
+        <CardTitle>Analytics</CardTitle>
+        <CardDescription>
+          418.2K Visitors <Badge>+10%</Badge>
+        </CardDescription>
+        <CardAction>
+          <Button variant="outline" size="sm">
+            View Analytics
+          </Button>
+        </CardAction>
+      </CardHeader>
+      <ChartContainer config={chartConfig} className="aspect-[1/0.35]">
+        <AreaChart
+          accessibilityLayer
+          data={chartData}
+          margin={{
+            left: 0,
+            right: 0,
+          }}
+        >
+          <ChartTooltip
+            cursor={false}
+            content={<ChartTooltipContent indicator="line" hideLabel />}
+            defaultIndex={2}
+          />
+          <Area
+            dataKey="visitors"
+            type="linear"
+            fill="var(--color-visitors)"
+            fillOpacity={0.4}
+            stroke="var(--color-visitors)"
+          />
+        </AreaChart>
+      </ChartContainer>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/anomaly-alert.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/anomaly-alert.tsx
new file mode 100644
index 0000000000..56232ac3d6
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/anomaly-alert.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/registry/bases/radix/ui/empty"
+
+export function AnomalyAlert() {
+  return (
+    <Card>
+      <CardContent>
+        <Empty className="h-48">
+          <EmptyHeader>
+            <EmptyTitle>Get alerted for anomalies</EmptyTitle>
+            <EmptyDescription>
+              Automatically monitor your projects for anomalies and get
+              notified.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button>Upgrade to Observability Plus</Button>
+          </EmptyContent>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/assign-issue.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/assign-issue.tsx
new file mode 100644
index 0000000000..8cb986a07e
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/assign-issue.tsx
@@ -0,0 +1,128 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/bases/radix/ui/avatar"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@/registry/bases/radix/ui/combobox"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/bases/radix/ui/tooltip"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+// Users available for assignment.
+const users = [
+  "shadcn",
+  "maxleiter",
+  "evilrabbit",
+  "pranathip",
+  "jorgezreik",
+  "shuding",
+  "rauchg",
+]
+
+export function AssignIssue() {
+  const anchor = useComboboxAnchor()
+  return (
+    <Card className="w-full max-w-sm" size="sm">
+      <CardHeader className="border-b">
+        <CardTitle className="text-sm">Assign Issue</CardTitle>
+        <CardDescription className="text-sm">
+          Select users to assign to this issue.
+        </CardDescription>
+        <CardAction>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline" size="icon-xs">
+                <IconPlaceholder
+                  lucide="PlusIcon"
+                  tabler="IconPlus"
+                  hugeicons="PlusSignIcon"
+                  phosphor="PlusIcon"
+                  remixicon="RiAddLine"
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Add user</TooltipContent>
+          </Tooltip>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Combobox
+          multiple
+          autoHighlight
+          items={users}
+          defaultValue={[users[0]]}
+        >
+          <ComboboxChips ref={anchor}>
+            <ComboboxValue>
+              {(values) => (
+                <React.Fragment>
+                  {values.map((username: string) => (
+                    <ComboboxChip key={username}>
+                      <Avatar className="size-4">
+                        <AvatarImage
+                          src={`https://github.com/${username}.png`}
+                          alt={username}
+                        />
+                        <AvatarFallback>{username.charAt(0)}</AvatarFallback>
+                      </Avatar>
+                      {username}
+                    </ComboboxChip>
+                  ))}
+                  <ComboboxChipsInput
+                    placeholder={
+                      values.length > 0 ? undefined : "Select a item..."
+                    }
+                  />
+                </React.Fragment>
+              )}
+            </ComboboxValue>
+          </ComboboxChips>
+          <ComboboxContent anchor={anchor}>
+            <ComboboxEmpty>No users found.</ComboboxEmpty>
+            <ComboboxList>
+              {(username) => (
+                <ComboboxItem key={username} value={username}>
+                  <Avatar className="size-5">
+                    <AvatarImage
+                      src={`https://github.com/${username}.png`}
+                      alt={username}
+                    />
+                    <AvatarFallback>{username.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                  {username}
+                </ComboboxItem>
+              )}
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx
new file mode 100644
index 0000000000..abb18e4d81
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/bar-chart-card.tsx
@@ -0,0 +1,142 @@
+"use client"
+
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/radix/ui/chart"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/bases/radix/ui/toggle-group"
+
+const barChartData = [
+  { month: "January", desktop: 186, mobile: 80 },
+  { month: "February", desktop: 305, mobile: 200 },
+  { month: "March", desktop: 237, mobile: 120 },
+  { month: "April", desktop: 73, mobile: 190 },
+  { month: "May", desktop: 209, mobile: 130 },
+  { month: "June", desktop: 214, mobile: 140 },
+]
+
+const barChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-2)",
+  },
+} satisfies ChartConfig
+
+const desktopTotal = barChartData.reduce((sum, item) => sum + item.desktop, 0)
+const mobileTotal = barChartData.reduce((sum, item) => sum + item.mobile, 0)
+const desktopDelta = Math.round(
+  ((desktopTotal - mobileTotal) / mobileTotal) * 100
+)
+const desktopDeltaPrefix = desktopDelta > 0 ? "+" : ""
+
+export function BarChartCard() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Traffic Channels</CardTitle>
+        <CardDescription>
+          Desktop vs mobile over the last 6 months
+        </CardDescription>
+        <CardAction>
+          <ToggleGroup
+            type="single"
+            aria-label="Time range"
+            defaultValue="6m"
+            variant="outline"
+            size="sm"
+          >
+            <ToggleGroupItem value="6m">6M</ToggleGroupItem>
+            <ToggleGroupItem value="12m">12M</ToggleGroupItem>
+          </ToggleGroup>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <ChartContainer
+          config={barChartConfig}
+          className="max-h-[180px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={barChartData}
+            margin={{ left: 0, right: 0, top: 8, bottom: 0 }}
+          >
+            <CartesianGrid vertical={false} strokeDasharray="3 3" />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              tickMargin={8}
+              axisLine={false}
+              tickFormatter={(value) => String(value).slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="dashed" />}
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Bar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              radius={[6, 6, 0, 0]}
+            />
+            <Bar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              radius={[6, 6, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter>
+        <div className="grid w-full grid-cols-3 divide-x divide-border/60">
+          <div className="px-2 text-center">
+            <div className="text-[0.65rem] text-muted-foreground uppercase">
+              Desktop
+            </div>
+            <div className="text-sm font-medium tabular-nums">
+              {desktopTotal.toLocaleString()}
+            </div>
+          </div>
+          <div className="px-2 text-center">
+            <div className="text-[0.65rem] text-muted-foreground uppercase">
+              Mobile
+            </div>
+            <div className="text-sm font-medium tabular-nums">
+              {mobileTotal.toLocaleString()}
+            </div>
+          </div>
+          <div className="px-2 text-center">
+            <div className="text-[0.65rem] text-muted-foreground uppercase">
+              Mix Delta
+            </div>
+            <div className="text-sm font-medium tabular-nums">
+              {desktopDeltaPrefix}
+              {desktopDelta}%
+            </div>
+          </div>
+        </div>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/bar-visualizer.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/bar-visualizer.tsx
new file mode 100644
index 0000000000..b6ab8cd1bb
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/bar-visualizer.tsx
@@ -0,0 +1,483 @@
+"use client"
+
+import * as React from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+
+type AgentState =
+  | "connecting"
+  | "initializing"
+  | "listening"
+  | "speaking"
+  | "thinking"
+
+type AnimationState = AgentState | undefined
+
+interface AudioAnalyserOptions {
+  fftSize?: number
+  smoothingTimeConstant?: number
+  minDecibels?: number
+  maxDecibels?: number
+}
+
+interface MultiBandVolumeOptions {
+  bands?: number
+  loPass?: number
+  hiPass?: number
+  updateInterval?: number
+  analyserOptions?: AudioAnalyserOptions
+}
+
+const multibandDefaults: MultiBandVolumeOptions = {
+  bands: 5,
+  loPass: 100,
+  hiPass: 600,
+  updateInterval: 32,
+  analyserOptions: { fftSize: 2048 },
+}
+
+const normalizeDb = (value: number) => {
+  if (value === -Infinity) return 0
+  const minDb = -100
+  const maxDb = -10
+  const db = 1 - (Math.max(minDb, Math.min(maxDb, value)) * -1) / 100
+  return Math.sqrt(db)
+}
+
+function createAudioAnalyser(
+  mediaStream: MediaStream,
+  options: AudioAnalyserOptions = {}
+) {
+  const audioContext = new (window.AudioContext ||
+    (window as unknown as { webkitAudioContext: typeof AudioContext })
+      .webkitAudioContext)()
+  const source = audioContext.createMediaStreamSource(mediaStream)
+  const analyser = audioContext.createAnalyser()
+
+  if (options.fftSize) analyser.fftSize = options.fftSize
+  if (options.smoothingTimeConstant !== undefined) {
+    analyser.smoothingTimeConstant = options.smoothingTimeConstant
+  }
+  if (options.minDecibels !== undefined)
+    analyser.minDecibels = options.minDecibels
+  if (options.maxDecibels !== undefined)
+    analyser.maxDecibels = options.maxDecibels
+
+  source.connect(analyser)
+
+  const cleanup = () => {
+    source.disconnect()
+    audioContext.close()
+  }
+
+  return { analyser, audioContext, cleanup }
+}
+
+function useMultibandVolume(
+  mediaStream?: MediaStream | null,
+  options: MultiBandVolumeOptions = {}
+) {
+  const opts = useMemo(() => ({ ...multibandDefaults, ...options }), [options])
+
+  const [frequencyBands, setFrequencyBands] = useState<number[]>(() =>
+    new Array(opts.bands).fill(0)
+  )
+  const bandsRef = useRef<number[]>(new Array(opts.bands).fill(0))
+  const frameId = useRef<number | undefined>(undefined)
+
+  useEffect(() => {
+    if (!mediaStream) {
+      const emptyBands = new Array(opts.bands).fill(0)
+      setTimeout(() => {
+        setFrequencyBands(emptyBands)
+      }, 0)
+      bandsRef.current = emptyBands
+      return
+    }
+
+    const { analyser, cleanup } = createAudioAnalyser(
+      mediaStream,
+      opts.analyserOptions
+    )
+
+    const bufferLength = analyser.frequencyBinCount
+    const dataArray = new Float32Array(bufferLength)
+    const sliceStart = opts.loPass!
+    const sliceEnd = opts.hiPass!
+    const sliceLength = sliceEnd - sliceStart
+    const chunkSize = Math.ceil(sliceLength / opts.bands!)
+
+    let lastUpdate = 0
+    const updateInterval = opts.updateInterval!
+
+    const updateVolume = (timestamp: number) => {
+      if (timestamp - lastUpdate >= updateInterval) {
+        analyser.getFloatFrequencyData(dataArray)
+
+        const chunks = new Array(opts.bands!)
+
+        for (let i = 0; i < opts.bands!; i++) {
+          let sum = 0
+          let count = 0
+          const startIdx = sliceStart + i * chunkSize
+          const endIdx = Math.min(sliceStart + (i + 1) * chunkSize, sliceEnd)
+
+          for (let j = startIdx; j < endIdx; j++) {
+            sum += normalizeDb(dataArray[j])
+            count++
+          }
+
+          chunks[i] = count > 0 ? sum / count : 0
+        }
+
+        let hasChanged = false
+        for (let i = 0; i < chunks.length; i++) {
+          if (Math.abs(chunks[i] - bandsRef.current[i]) > 0.01) {
+            hasChanged = true
+            break
+          }
+        }
+
+        if (hasChanged) {
+          bandsRef.current = chunks
+          setFrequencyBands(chunks)
+        }
+
+        lastUpdate = timestamp
+      }
+
+      frameId.current = requestAnimationFrame(updateVolume)
+    }
+
+    frameId.current = requestAnimationFrame(updateVolume)
+
+    return () => {
+      cleanup()
+      if (frameId.current) {
+        cancelAnimationFrame(frameId.current)
+      }
+    }
+  }, [mediaStream, opts])
+
+  return frequencyBands
+}
+
+const generateConnectingSequenceBar = (columns: number): number[][] => {
+  const seq = []
+  for (let x = 0; x < columns; x++) {
+    seq.push([x, columns - 1 - x])
+  }
+  return seq
+}
+
+const generateListeningSequenceBar = (columns: number): number[][] => {
+  const center = Math.floor(columns / 2)
+  const noIndex = -1
+  return [[center], [noIndex]]
+}
+
+const useBarAnimator = (
+  state: AnimationState,
+  columns: number,
+  interval: number
+): number[] => {
+  const indexRef = useRef(0)
+  const [currentFrame, setCurrentFrame] = useState<number[]>([])
+  const animationFrameId = useRef<number | null>(null)
+
+  const sequence = useMemo(() => {
+    if (state === "thinking" || state === "listening") {
+      return generateListeningSequenceBar(columns)
+    } else if (state === "connecting" || state === "initializing") {
+      return generateConnectingSequenceBar(columns)
+    } else if (state === undefined || state === "speaking") {
+      return [new Array(columns).fill(0).map((_, idx) => idx)]
+    } else {
+      return [[]]
+    }
+  }, [state, columns])
+
+  useEffect(() => {
+    indexRef.current = 0
+    setTimeout(() => {
+      setCurrentFrame(sequence[0] || [])
+    }, 0)
+  }, [sequence])
+
+  useEffect(() => {
+    let startTime = performance.now()
+
+    const animate = (time: DOMHighResTimeStamp) => {
+      const timeElapsed = time - startTime
+
+      if (timeElapsed >= interval) {
+        indexRef.current = (indexRef.current + 1) % sequence.length
+        setCurrentFrame(sequence[indexRef.current] || [])
+        startTime = time
+      }
+
+      animationFrameId.current = requestAnimationFrame(animate)
+    }
+
+    animationFrameId.current = requestAnimationFrame(animate)
+
+    return () => {
+      if (animationFrameId.current !== null) {
+        cancelAnimationFrame(animationFrameId.current)
+      }
+    }
+  }, [interval, sequence])
+
+  return currentFrame
+}
+
+// Memoized Bar component to prevent unnecessary re-renders.
+const Bar = React.memo<{
+  heightPct: number
+  isHighlighted: boolean
+  state?: AgentState
+}>(({ heightPct, isHighlighted, state }) => (
+  <div
+    data-highlighted={isHighlighted}
+    className={cn(
+      "max-w-[12px] min-w-[8px] flex-1 transition-all duration-150",
+      "rounded-full",
+      "bg-border data-[highlighted=true]:bg-chart-3",
+      state === "speaking" && "bg-chart-3",
+      state === "thinking" && isHighlighted && "animate-pulse"
+    )}
+    style={{
+      height: `${heightPct}%`,
+      animationDuration: state === "thinking" ? "300ms" : undefined,
+    }}
+  />
+))
+
+Bar.displayName = "Bar"
+
+const BarVisualizerComponent = React.forwardRef<
+  HTMLDivElement,
+  {
+    state?: AgentState
+    barCount?: number
+    mediaStream?: MediaStream | null
+    minHeight?: number
+    maxHeight?: number
+    demo?: boolean
+    centerAlign?: boolean
+  } & React.HTMLAttributes<HTMLDivElement>
+>(
+  (
+    {
+      state,
+      barCount = 15,
+      mediaStream,
+      minHeight = 20,
+      maxHeight = 100,
+      demo = false,
+      centerAlign = false,
+      className,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    const realVolumeBands = useMultibandVolume(mediaStream, {
+      bands: barCount,
+      loPass: 100,
+      hiPass: 200,
+    })
+
+    const fakeVolumeBandsRef = useRef<number[]>(new Array(barCount).fill(0.2))
+    const [fakeVolumeBands, setFakeVolumeBands] = useState<number[]>(() =>
+      new Array(barCount).fill(0.2)
+    )
+    const fakeAnimationRef = useRef<number | undefined>(undefined)
+
+    useEffect(() => {
+      if (!demo) return
+
+      if (state !== "speaking" && state !== "listening") {
+        const bands = new Array(barCount).fill(0.2)
+        fakeVolumeBandsRef.current = bands
+        setTimeout(() => {
+          setFakeVolumeBands(bands)
+        }, 0)
+        return
+      }
+
+      let lastUpdate = 0
+      const updateInterval = 50
+      const startTime = Date.now() / 1000
+
+      const updateFakeVolume = (timestamp: number) => {
+        if (timestamp - lastUpdate >= updateInterval) {
+          const time = Date.now() / 1000 - startTime
+          const newBands = new Array(barCount)
+
+          for (let i = 0; i < barCount; i++) {
+            const waveOffset = i * 0.5
+            const baseVolume = Math.sin(time * 2 + waveOffset) * 0.3 + 0.5
+            const randomNoise = Math.random() * 0.2
+            newBands[i] = Math.max(0.1, Math.min(1, baseVolume + randomNoise))
+          }
+
+          let hasChanged = false
+          for (let i = 0; i < barCount; i++) {
+            if (Math.abs(newBands[i] - fakeVolumeBandsRef.current[i]) > 0.05) {
+              hasChanged = true
+              break
+            }
+          }
+
+          if (hasChanged) {
+            fakeVolumeBandsRef.current = newBands
+            setFakeVolumeBands(newBands)
+          }
+
+          lastUpdate = timestamp
+        }
+
+        fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)
+      }
+
+      fakeAnimationRef.current = requestAnimationFrame(updateFakeVolume)
+
+      return () => {
+        if (fakeAnimationRef.current) {
+          cancelAnimationFrame(fakeAnimationRef.current)
+        }
+      }
+    }, [demo, state, barCount])
+
+    const volumeBands = useMemo(
+      () => (demo ? fakeVolumeBands : realVolumeBands),
+      [demo, fakeVolumeBands, realVolumeBands]
+    )
+
+    const highlightedIndices = useBarAnimator(
+      state,
+      barCount,
+      state === "connecting"
+        ? 2000 / barCount
+        : state === "thinking"
+          ? 150
+          : state === "listening"
+            ? 500
+            : 1000
+    )
+
+    return (
+      <div
+        ref={ref}
+        data-state={state}
+        className={cn(
+          "relative flex justify-center gap-1.5",
+          centerAlign ? "items-center" : "items-end",
+          "h-32 w-full overflow-hidden rounded-lg bg-muted p-4",
+          className
+        )}
+        style={{
+          ...style,
+        }}
+        {...props}
+      >
+        {volumeBands.map((volume, index) => {
+          const heightPct = Math.min(
+            maxHeight,
+            Math.max(minHeight, volume * 100 + 5)
+          )
+          const isHighlighted = highlightedIndices?.includes(index) ?? false
+
+          return (
+            <Bar
+              key={index}
+              heightPct={heightPct}
+              isHighlighted={isHighlighted}
+              state={state}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+)
+
+BarVisualizerComponent.displayName = "BarVisualizerComponent"
+
+const BarVisualizer = React.memo(
+  BarVisualizerComponent,
+  (prevProps, nextProps) => {
+    return (
+      prevProps.state === nextProps.state &&
+      prevProps.barCount === nextProps.barCount &&
+      prevProps.mediaStream === nextProps.mediaStream &&
+      prevProps.minHeight === nextProps.minHeight &&
+      prevProps.maxHeight === nextProps.maxHeight &&
+      prevProps.demo === nextProps.demo &&
+      prevProps.centerAlign === nextProps.centerAlign &&
+      prevProps.className === nextProps.className &&
+      JSON.stringify(prevProps.style) === JSON.stringify(nextProps.style)
+    )
+  }
+)
+
+BarVisualizer.displayName = "BarVisualizer"
+
+export function BarVisualizerCard() {
+  const [state, setState] = useState<AgentState>("speaking")
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Audio Frequency Visualizer</CardTitle>
+        <CardDescription>
+          Real-time frequency band visualization with animated state transitions
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <BarVisualizer
+          state={state}
+          demo={true}
+          barCount={20}
+          minHeight={15}
+          maxHeight={90}
+          className="h-40 max-w-full"
+        />
+      </CardContent>
+      <CardFooter className="gap-2">
+        <Button
+          size="sm"
+          variant={state === "connecting" ? "default" : "outline"}
+          onClick={() => setState("connecting")}
+        >
+          Connecting
+        </Button>
+        <Button
+          size="sm"
+          variant={state === "listening" ? "default" : "outline"}
+          onClick={() => setState("listening")}
+        >
+          Listening
+        </Button>
+        <Button
+          size="sm"
+          variant={state === "speaking" ? "default" : "outline"}
+          onClick={() => setState("speaking")}
+        >
+          Speaking
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/book-appointment.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/book-appointment.tsx
new file mode 100644
index 0000000000..3720380aec
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/book-appointment.tsx
@@ -0,0 +1,56 @@
+"use client"
+
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/registry/bases/radix/ui/alert"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@/registry/bases/radix/ui/toggle-group"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function BookAppointment() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Book Appointment</CardTitle>
+        <CardDescription>Dr. Sarah Chen · Cardiology</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <FieldGroup>
+          <Field>
+            <FieldLabel>Available on March 18, 2026</FieldLabel>
+            <ToggleGroup type="multiple" spacing={2} defaultValue={["slot-0"]}>
+              {["9:00 AM", "10:30 AM", "11:00 AM", "1:30 PM"].map(
+                (time, index) => (
+                  <ToggleGroupItem key={time} value={`slot-${index}`}>
+                    {time}
+                  </ToggleGroupItem>
+                )
+              )}
+            </ToggleGroup>
+          </Field>
+        </FieldGroup>
+        <Alert>
+          <AlertTitle>New patient?</AlertTitle>
+          <AlertDescription>Please arrive 15 minutes early.</AlertDescription>
+        </Alert>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Book Appointment</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/codespaces-card.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/codespaces-card.tsx
new file mode 100644
index 0000000000..41b2895872
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/codespaces-card.tsx
@@ -0,0 +1,397 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/bases/radix/ui/dropdown-menu"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/registry/bases/radix/ui/empty"
+import {
+  Field,
+  FieldDescription,
+  FieldLabel,
+} from "@/registry/bases/radix/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/registry/bases/radix/ui/input-group"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/registry/bases/radix/ui/item"
+import { Separator } from "@/registry/bases/radix/ui/separator"
+import { Spinner } from "@/registry/bases/radix/ui/spinner"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/registry/bases/radix/ui/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/bases/radix/ui/tooltip"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function CodespacesCard() {
+  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)
+  return (
+    <Card>
+      <CardContent>
+        <Tabs defaultValue="codespaces">
+          <TabsList className="w-full">
+            <TabsTrigger value="codespaces">Codespaces</TabsTrigger>
+            <TabsTrigger value="local">Local</TabsTrigger>
+          </TabsList>
+          <TabsContent value="codespaces">
+            <Item size="sm" className="px-1 pt-2">
+              <ItemContent>
+                <ItemTitle>Codespaces</ItemTitle>
+                <ItemDescription>Your workspaces in the cloud</ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon-sm">
+                      <IconPlaceholder
+                        lucide="PlusIcon"
+                        tabler="IconPlus"
+                        hugeicons="PlusSignIcon"
+                        phosphor="PlusIcon"
+                        remixicon="RiAddLine"
+                      />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    Create a codespace on main
+                  </TooltipContent>
+                </Tooltip>
+                <DropdownMenu>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon-sm">
+                          <IconPlaceholder
+                            lucide="MoreHorizontalIcon"
+                            tabler="IconDots"
+                            hugeicons="MoreHorizontalCircle01Icon"
+                            phosphor="DotsThreeOutlineIcon"
+                            remixicon="RiMoreLine"
+                          />
+                        </Button>
+                      </DropdownMenuTrigger>
+                    </TooltipTrigger>
+                    <TooltipContent side="bottom">
+                      Codespace repository configuration
+                    </TooltipContent>
+                  </Tooltip>
+                  <DropdownMenuContent align="end" className="w-56">
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="PlusIcon"
+                          tabler="IconPlus"
+                          hugeicons="PlusSignIcon"
+                          phosphor="PlusIcon"
+                          remixicon="RiAddLine"
+                        />
+                        New with options...
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="ContainerIcon"
+                          tabler="IconBox"
+                          hugeicons="CubeIcon"
+                          phosphor="CubeIcon"
+                          remixicon="RiBox1Line"
+                        />
+                        Configure dev container
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="ZapIcon"
+                          tabler="IconBolt"
+                          hugeicons="ZapIcon"
+                          phosphor="LightningIcon"
+                          remixicon="RiFlashlightLine"
+                        />
+                        Set up prebuilds
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuGroup>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="ServerIcon"
+                          tabler="IconServer"
+                          hugeicons="ServerStackIcon"
+                          phosphor="HardDrivesIcon"
+                          remixicon="RiHardDriveLine"
+                        />
+                        Manage codespaces
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="ShareIcon"
+                          tabler="IconShare2"
+                          hugeicons="Share03Icon"
+                          phosphor="ShareIcon"
+                          remixicon="RiShareLine"
+                        />
+                        Share deep link
+                      </DropdownMenuItem>
+                      <DropdownMenuItem>
+                        <IconPlaceholder
+                          lucide="InfoIcon"
+                          tabler="IconInfoCircle"
+                          hugeicons="AlertCircleIcon"
+                          phosphor="InfoIcon"
+                          remixicon="RiInformationLine"
+                        />
+                        What are codespaces?
+                      </DropdownMenuItem>
+                    </DropdownMenuGroup>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </ItemActions>
+            </Item>
+            <Separator className="-mx-2 my-2 w-auto!" />
+            <Empty className="p-4">
+              <EmptyHeader>
+                <EmptyMedia variant="icon">
+                  <IconPlaceholder
+                    lucide="ServerIcon"
+                    tabler="IconServer"
+                    hugeicons="ServerStackIcon"
+                    phosphor="HardDrivesIcon"
+                    remixicon="RiHardDriveLine"
+                  />
+                </EmptyMedia>
+                <EmptyTitle>No codespaces</EmptyTitle>
+                <EmptyDescription>
+                  You don&apos;t have any codespaces with this repository
+                  checked out
+                </EmptyDescription>
+              </EmptyHeader>
+              <EmptyContent>
+                <Button
+                  size="sm"
+                  onClick={() => {
+                    setIsCreatingCodespace(true)
+                    setTimeout(() => {
+                      setIsCreatingCodespace(false)
+                    }, 2000)
+                  }}
+                  disabled={isCreatingCodespace}
+                >
+                  {isCreatingCodespace ? (
+                    <Spinner data-icon="inline-start" />
+                  ) : (
+                    ""
+                  )}
+                  Create Codespace
+                </Button>
+                <a
+                  href="#learn-more"
+                  className="text-xs text-muted-foreground underline underline-offset-4"
+                >
+                  Learn more about codespaces
+                </a>
+              </EmptyContent>
+            </Empty>
+            <Separator className="-mx-2 my-2 w-auto!" />
+            <div className="p-1.5 text-xs text-muted-foreground">
+              Codespace usage for this repository is paid for by{" "}
+              <span className="font-medium">shadcn</span>.
+            </div>
+          </TabsContent>
+          <TabsContent value="local">
+            <Item size="sm" className="hidden p-0">
+              <ItemContent>
+                <ItemTitle className="gap-2">
+                  <IconPlaceholder
+                    lucide="TerminalIcon"
+                    tabler="IconTerminal"
+                    hugeicons="ComputerTerminal01Icon"
+                    phosphor="TerminalIcon"
+                    remixicon="RiTerminalBoxLine"
+                    className="size-4"
+                  />
+                  Clone
+                </ItemTitle>
+              </ItemContent>
+              <ItemActions>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                      <IconPlaceholder
+                        lucide="InfoIcon"
+                        tabler="IconInfoCircle"
+                        hugeicons="AlertCircleIcon"
+                        phosphor="InfoIcon"
+                        remixicon="RiInformationLine"
+                      />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="left">
+                    Which remote URL should I use?
+                  </TooltipContent>
+                </Tooltip>
+              </ItemActions>
+            </Item>
+            <Tabs defaultValue="https">
+              <TabsList
+                variant="line"
+                className="w-full justify-start border-b *:[button]:flex-0"
+              >
+                <TabsTrigger value="https">HTTPS</TabsTrigger>
+                <TabsTrigger value="ssh">SSH</TabsTrigger>
+                <TabsTrigger value="cli">GitHub CLI</TabsTrigger>
+              </TabsList>
+              <div className="rounded-md border bg-muted/30 p-2">
+                <TabsContent value="https">
+                  <Field className="gap-2">
+                    <FieldLabel htmlFor="https-url" className="sr-only">
+                      HTTPS URL
+                    </FieldLabel>
+                    <InputGroup>
+                      <InputGroupAddon align="inline-end">
+                        <InputGroupButton variant="ghost" size="icon-xs">
+                          <IconPlaceholder
+                            lucide="CopyIcon"
+                            tabler="IconCopy"
+                            hugeicons="Copy01Icon"
+                            phosphor="CopyIcon"
+                            remixicon="RiFileCopyLine"
+                          />
+                        </InputGroupButton>
+                      </InputGroupAddon>
+                      <InputGroupInput
+                        id="https-url"
+                        defaultValue="https://github.com/shadcn-ui/ui.git"
+                        readOnly
+                      />
+                    </InputGroup>
+                    <FieldDescription>
+                      Clone using the web URL.
+                    </FieldDescription>
+                  </Field>
+                </TabsContent>
+                <TabsContent value="ssh">
+                  <Field className="gap-2">
+                    <FieldLabel htmlFor="ssh-url" className="sr-only">
+                      SSH URL
+                    </FieldLabel>
+                    <InputGroup>
+                      <InputGroupAddon align="inline-end">
+                        <InputGroupButton variant="ghost" size="icon-xs">
+                          <IconPlaceholder
+                            lucide="CopyIcon"
+                            tabler="IconCopy"
+                            hugeicons="Copy01Icon"
+                            phosphor="CopyIcon"
+                            remixicon="RiFileCopyLine"
+                          />
+                        </InputGroupButton>
+                      </InputGroupAddon>
+                      <InputGroupInput
+                        id="ssh-url"
+                        defaultValue="git@github.com:shadcn-ui/ui.git"
+                        readOnly
+                      />
+                    </InputGroup>
+                    <FieldDescription>
+                      Use a password-protected SSH key.
+                    </FieldDescription>
+                  </Field>
+                </TabsContent>
+                <TabsContent value="cli">
+                  <Field className="gap-2">
+                    <FieldLabel htmlFor="cli-command" className="sr-only">
+                      CLI Command
+                    </FieldLabel>
+                    <InputGroup>
+                      <InputGroupAddon align="inline-end">
+                        <InputGroupButton variant="ghost" size="icon-xs">
+                          <IconPlaceholder
+                            lucide="CopyIcon"
+                            tabler="IconCopy"
+                            hugeicons="Copy01Icon"
+                            phosphor="CopyIcon"
+                            remixicon="RiFileCopyLine"
+                          />
+                        </InputGroupButton>
+                      </InputGroupAddon>
+                      <InputGroupInput
+                        id="cli-command"
+                        defaultValue="gh repo clone shadcn-ui/ui"
+                        readOnly
+                      />
+                    </InputGroup>
+                    <FieldDescription>
+                      Work fast with our official CLI.{" "}
+                      <a href="#learn-more">Learn more</a>
+                    </FieldDescription>
+                  </Field>
+                </TabsContent>
+              </div>
+            </Tabs>
+            <Separator className="-mx-2 my-2 w-auto!" />
+            <div className="flex flex-col">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="justify-start gap-1.5"
+              >
+                <IconPlaceholder
+                  lucide="MonitorIcon"
+                  tabler="IconDeviceDesktop"
+                  hugeicons="ComputerIcon"
+                  phosphor="MonitorIcon"
+                  remixicon="RiComputerLine"
+                  data-icon="inline-start"
+                />
+                Open with GitHub Desktop
+              </Button>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="justify-start gap-1.5"
+              >
+                <IconPlaceholder
+                  lucide="DownloadIcon"
+                  tabler="IconDownload"
+                  hugeicons="DownloadIcon"
+                  phosphor="DownloadIcon"
+                  remixicon="RiDownloadLine"
+                  data-icon="inline-start"
+                />
+                Download ZIP
+              </Button>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/contributions-activity.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/contributions-activity.tsx
new file mode 100644
index 0000000000..4855d6727d
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/contributions-activity.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import { Checkbox } from "@/registry/bases/radix/ui/checkbox"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/registry/bases/radix/ui/field"
+
+export function ContributionsActivity() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Contributions & Activity</CardTitle>
+        <CardDescription>
+          Manage your contributions and activity visibility.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="contributions-activity">
+          <FieldGroup>
+            <FieldSet>
+              <FieldLegend className="sr-only">
+                Contributions & activity
+              </FieldLegend>
+              <FieldGroup>
+                <Field orientation="horizontal">
+                  <Checkbox id="activity-private-profile" />
+                  <FieldContent>
+                    <FieldLabel htmlFor="activity-private-profile">
+                      Make profile private and hide activity
+                    </FieldLabel>
+                    <FieldDescription>
+                      Enabling this will hide your contributions and activity
+                      from your GitHub profile and from social features like
+                      followers, stars, feeds, leaderboards and releases.
+                    </FieldDescription>
+                  </FieldContent>
+                </Field>
+              </FieldGroup>
+            </FieldSet>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button form="contributions-activity">Save Changes</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/contributors.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/contributors.tsx
new file mode 100644
index 0000000000..0b5319dd87
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/contributors.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/registry/bases/radix/ui/avatar"
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+
+// GitHub usernames displayed as contributor avatars.
+const usernames = [
+  "shadcn",
+  "vercel",
+  "nextjs",
+  "tailwindlabs",
+  "typescript-lang",
+  "eslint",
+  "prettier",
+  "babel",
+  "webpack",
+  "rollup",
+  "parcel",
+  "vite",
+  "react",
+  "vue",
+  "angular",
+  "solid",
+]
+
+export function Contributors() {
+  return (
+    <Card className="max-w-sm">
+      <CardHeader>
+        <CardTitle>
+          Contributors <Badge variant="secondary">312</Badge>
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-wrap gap-2">
+          {usernames.map((username) => (
+            <Avatar key={username}>
+              <AvatarImage
+                src={`https://github.com/${username}.png`}
+                alt={username}
+              />
+              <AvatarFallback>{username.charAt(0)}</AvatarFallback>
+            </Avatar>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <a href="#" className="text-sm underline underline-offset-4">
+          + 810 contributors
+        </a>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/environment-variables.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/environment-variables.tsx
new file mode 100644
index 0000000000..0bc1f0b967
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/environment-variables.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+
+export function EnvironmentVariables() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Environment Variables</CardTitle>
+        <CardDescription>Production · 8 variables</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-2">
+        {[
+          { key: "DATABASE_URL", masked: true },
+          { key: "NEXT_PUBLIC_API", masked: false },
+          { key: "STRIPE_SECRET", masked: true },
+        ].map((env) => (
+          <div
+            key={env.key}
+            className="flex items-center gap-2 rounded-md px-2.5 py-2 font-mono text-xs ring ring-border"
+          >
+            <span className="font-medium">{env.key}</span>
+            <span className="ml-auto text-muted-foreground">
+              {env.masked ? "••••••••" : "https://api.example.com"}
+            </span>
+          </div>
+        ))}
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline">Edit</Button>
+        <Button className="ml-auto">Deploy</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/feedback-form.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/feedback-form.tsx
new file mode 100644
index 0000000000..d3eb7df6d6
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/feedback-form.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import { Card, CardContent, CardFooter } from "@/registry/bases/radix/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/registry/bases/radix/ui/native-select"
+import { Textarea } from "@/registry/bases/radix/ui/textarea"
+
+export function FeedbackForm() {
+  return (
+    <Card>
+      <CardContent>
+        <form id="feedback-form">
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="topic">Topic</FieldLabel>
+              <NativeSelect id="topic">
+                <NativeSelectOption value="">Select a topic</NativeSelectOption>
+                <NativeSelectOption value="ai">AI</NativeSelectOption>
+                <NativeSelectOption value="accounts-and-access-controls">
+                  Accounts and Access Controls
+                </NativeSelectOption>
+                <NativeSelectOption value="billing">Billing</NativeSelectOption>
+                <NativeSelectOption value="cdn">
+                  CDN (Firewall, Caching)
+                </NativeSelectOption>
+                <NativeSelectOption value="ci-cd">
+                  CI/CD (Builds, Deployments, Environment Variables)
+                </NativeSelectOption>
+                <NativeSelectOption value="dashboard-interface">
+                  Dashboard Interface (Navigation, UI Issues)
+                </NativeSelectOption>
+                <NativeSelectOption value="domains">Domains</NativeSelectOption>
+                <NativeSelectOption value="frameworks">
+                  Frameworks
+                </NativeSelectOption>
+                <NativeSelectOption value="marketplace-and-integrations">
+                  Marketplace and Integrations
+                </NativeSelectOption>
+                <NativeSelectOption value="observability">
+                  Observability (Observability, Logs, Monitoring)
+                </NativeSelectOption>
+                <NativeSelectOption value="storage">Storage</NativeSelectOption>
+              </NativeSelect>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="feedback">Feedback</FieldLabel>
+              <Textarea
+                id="feedback"
+                placeholder="Your feedback helps us improve..."
+              />
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button type="submit" form="feedback-form">
+          Submit
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/file-upload.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/file-upload.tsx
new file mode 100644
index 0000000000..589e4b3480
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/file-upload.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/registry/bases/radix/ui/empty"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function FileUpload() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>File Upload</CardTitle>
+        <CardDescription>Drag and drop or browse</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Empty className="border">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">
+              <IconPlaceholder
+                lucide="UploadCloudIcon"
+                tabler="IconCloudUpload"
+                hugeicons="CloudUploadIcon"
+                phosphor="CloudArrowUpIcon"
+                remixicon="RiUploadCloudLine"
+              />
+            </EmptyMedia>
+            <EmptyTitle>Upload files</EmptyTitle>
+            <EmptyDescription>PNG, JPG, PDF up to 10MB</EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button>Browse Files</Button>
+          </EmptyContent>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/github-profile.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/github-profile.tsx
new file mode 100644
index 0000000000..ca961968b5
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/github-profile.tsx
@@ -0,0 +1,77 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+} from "@/registry/bases/radix/ui/field"
+import { Input } from "@/registry/bases/radix/ui/input"
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/registry/bases/radix/ui/native-select"
+import { Textarea } from "@/registry/bases/radix/ui/textarea"
+
+export function GithubProfile() {
+  return (
+    <Card className="mx-auto w-full max-w-md">
+      <CardHeader>
+        <CardTitle>Profile</CardTitle>
+        <CardDescription>Manage your profile information.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form id="profile">
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="name">Name</FieldLabel>
+              <Input id="name" placeholder="shadcn" />
+              <FieldDescription>
+                Your name may appear around GitHub where you contribute or are
+                mentioned. You can remove it at any time.
+              </FieldDescription>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="email">Public Email</FieldLabel>
+              <NativeSelect id="email">
+                <NativeSelectOption value="m@shadcn.com">
+                  m@shadcn.com
+                </NativeSelectOption>
+                <NativeSelectOption value="m@gmail.com">
+                  m@gmail.com
+                </NativeSelectOption>
+              </NativeSelect>
+              <FieldDescription>
+                You can manage verified email addresses in your{" "}
+                <a href="#email-settings">email settings</a>.
+              </FieldDescription>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="bio">Bio</FieldLabel>
+              <Textarea
+                id="bio"
+                placeholder="Tell us a little bit about yourself"
+              />
+              <FieldDescription>
+                You can <span>@mention</span> other users and organizations to
+                link to them.
+              </FieldDescription>
+            </Field>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter>
+        <Button form="profile">Save Profile</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/icon-preview-grid.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/icon-preview-grid.tsx
new file mode 100644
index 0000000000..1c7dce225c
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/icon-preview-grid.tsx
@@ -0,0 +1,146 @@
+"use client"
+
+import { type IconLibraryName } from "shadcn/icons"
+
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+const PREVIEW_ICONS = [
+  {
+    lucide: "CopyIcon",
+    tabler: "IconCopy",
+    hugeicons: "Copy01Icon",
+    phosphor: "CopyIcon",
+    remixicon: "RiFileCopyLine",
+  },
+  {
+    lucide: "CircleAlertIcon",
+    tabler: "IconExclamationCircle",
+    hugeicons: "AlertCircleIcon",
+    phosphor: "WarningCircleIcon",
+    remixicon: "RiErrorWarningLine",
+  },
+  {
+    lucide: "TrashIcon",
+    tabler: "IconTrash",
+    hugeicons: "Delete02Icon",
+    phosphor: "TrashIcon",
+    remixicon: "RiDeleteBinLine",
+  },
+  {
+    lucide: "ShareIcon",
+    tabler: "IconShare",
+    hugeicons: "Share03Icon",
+    phosphor: "ShareIcon",
+    remixicon: "RiShareLine",
+  },
+  {
+    lucide: "ShoppingBagIcon",
+    tabler: "IconShoppingBag",
+    hugeicons: "ShoppingBag01Icon",
+    phosphor: "BagIcon",
+    remixicon: "RiShoppingBagLine",
+  },
+  {
+    lucide: "MoreHorizontalIcon",
+    tabler: "IconDots",
+    hugeicons: "MoreHorizontalCircle01Icon",
+    phosphor: "DotsThreeIcon",
+    remixicon: "RiMoreLine",
+  },
+  {
+    lucide: "Loader2Icon",
+    tabler: "IconLoader",
+    hugeicons: "Loading03Icon",
+    phosphor: "SpinnerIcon",
+    remixicon: "RiLoaderLine",
+  },
+  {
+    lucide: "PlusIcon",
+    tabler: "IconPlus",
+    hugeicons: "PlusSignIcon",
+    phosphor: "PlusIcon",
+    remixicon: "RiAddLine",
+  },
+  {
+    lucide: "MinusIcon",
+    tabler: "IconMinus",
+    hugeicons: "MinusSignIcon",
+    phosphor: "MinusIcon",
+    remixicon: "RiSubtractLine",
+  },
+  {
+    lucide: "ArrowLeftIcon",
+    tabler: "IconArrowLeft",
+    hugeicons: "ArrowLeft02Icon",
+    phosphor: "ArrowLeftIcon",
+    remixicon: "RiArrowLeftLine",
+  },
+  {
+    lucide: "ArrowRightIcon",
+    tabler: "IconArrowRight",
+    hugeicons: "ArrowRight02Icon",
+    phosphor: "ArrowRightIcon",
+    remixicon: "RiArrowRightLine",
+  },
+  {
+    lucide: "CheckIcon",
+    tabler: "IconCheck",
+    hugeicons: "Tick02Icon",
+    phosphor: "CheckIcon",
+    remixicon: "RiCheckLine",
+  },
+  {
+    lucide: "ChevronDownIcon",
+    tabler: "IconChevronDown",
+    hugeicons: "ArrowDown01Icon",
+    phosphor: "CaretDownIcon",
+    remixicon: "RiArrowDownSLine",
+  },
+  {
+    lucide: "ChevronRightIcon",
+    tabler: "IconChevronRight",
+    hugeicons: "ArrowRight01Icon",
+    phosphor: "CaretRightIcon",
+    remixicon: "RiArrowRightSLine",
+  },
+  {
+    lucide: "SearchIcon",
+    tabler: "IconSearch",
+    hugeicons: "Search01Icon",
+    phosphor: "MagnifyingGlassIcon",
+    remixicon: "RiSearchLine",
+  },
+  {
+    lucide: "SettingsIcon",
+    tabler: "IconSettings",
+    hugeicons: "Settings01Icon",
+    phosphor: "GearIcon",
+    remixicon: "RiSettingsLine",
+  },
+] satisfies Record<IconLibraryName, string>[]
+
+export function IconPreviewGrid() {
+  return (
+    <Card>
+      <CardContent>
+        <div className="grid grid-cols-8 place-items-center gap-4">
+          {PREVIEW_ICONS.map((icon, index) => (
+            <Card
+              key={index}
+              className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4"
+            >
+              <IconPlaceholder
+                lucide={icon.lucide}
+                tabler={icon.tabler}
+                hugeicons={icon.hugeicons}
+                phosphor={icon.phosphor}
+                remixicon={icon.remixicon}
+              />
+            </Card>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/invite-team.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/invite-team.tsx
new file mode 100644
index 0000000000..5f79e8b6da
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/invite-team.tsx
@@ -0,0 +1,100 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import { Field, FieldLabel } from "@/registry/bases/radix/ui/field"
+import { Input } from "@/registry/bases/radix/ui/input"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/registry/bases/radix/ui/input-group"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/bases/radix/ui/select"
+import { Separator } from "@/registry/bases/radix/ui/separator"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function InviteTeam() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Invite Team</CardTitle>
+        <CardDescription>Add members to your workspace</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="flex flex-col gap-3">
+          {[
+            { email: "alex@example.com", role: "Editor" },
+            { email: "sam@example.com", role: "Viewer" },
+          ].map((invite) => (
+            <div key={invite.email} className="flex items-center gap-2">
+              <Input defaultValue={invite.email} className="flex-1" />
+              <Select defaultValue={invite.role.toLowerCase()}>
+                <SelectTrigger className="w-24">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent position="popper" align="end">
+                  <SelectGroup>
+                    <SelectItem value="admin">Admin</SelectItem>
+                    <SelectItem value="editor">Editor</SelectItem>
+                    <SelectItem value="viewer">Viewer</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          ))}
+        </div>
+        <Button variant="outline">
+          <IconPlaceholder
+            lucide="PlusIcon"
+            tabler="IconPlus"
+            hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
+            remixicon="RiAddLine"
+            data-icon="inline-start"
+          />
+          Add another
+        </Button>
+        <Separator />
+        <Field>
+          <FieldLabel htmlFor="invite-link">Or share invite link</FieldLabel>
+          <InputGroup>
+            <InputGroupInput
+              id="invite-link"
+              defaultValue="https://app.co/invite/x8f2k"
+              readOnly
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="icon-xs" aria-label="Copy link">
+                <IconPlaceholder
+                  lucide="CopyIcon"
+                  tabler="IconCopy"
+                  hugeicons="Copy01Icon"
+                  phosphor="CopyIcon"
+                  remixicon="RiFileCopyLine"
+                />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </Field>
+      </CardContent>
+      <CardFooter>
+        <Button className="w-full">Send Invites</Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/invoice.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/invoice.tsx
new file mode 100644
index 0000000000..ae98a520c6
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/invoice.tsx
@@ -0,0 +1,115 @@
+"use client"
+
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/bases/radix/ui/table"
+
+const INVOICE_ITEMS = [
+  { item: "Design System License", qty: 1, unitPrice: 499 },
+  { item: "Priority Support", qty: 12, unitPrice: 99 },
+  { item: "Custom Components", qty: 3, unitPrice: 250 },
+] as const
+
+const subtotal = INVOICE_ITEMS.reduce(
+  (sum, row) => sum + row.qty * row.unitPrice,
+  0
+)
+const tax = 0
+const totalDue = subtotal + tax
+
+function formatCurrency(value: number) {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 2,
+  }).format(value)
+}
+
+export function Invoice() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Invoice #INV-2847</CardTitle>
+        <CardDescription>Due March 30, 2026</CardDescription>
+        <CardAction>
+          <Badge variant="secondary">Pending</Badge>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Item</TableHead>
+              <TableHead className="text-right">Qty</TableHead>
+              <TableHead className="text-right">Rate</TableHead>
+              <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {INVOICE_ITEMS.map((row) => (
+              <TableRow key={row.item}>
+                <TableCell className="text-sm">{row.item}</TableCell>
+                <TableCell className="text-right tabular-nums">
+                  {row.qty}
+                </TableCell>
+                <TableCell className="text-right tabular-nums">
+                  {formatCurrency(row.unitPrice)}
+                </TableCell>
+                <TableCell className="text-right tabular-nums">
+                  {formatCurrency(row.qty * row.unitPrice)}
+                </TableCell>
+              </TableRow>
+            ))}
+            <TableRow>
+              <TableCell colSpan={3} className="text-right">
+                Subtotal
+              </TableCell>
+              <TableCell className="text-right tabular-nums">
+                {formatCurrency(subtotal)}
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell colSpan={3} className="text-right">
+                Tax
+              </TableCell>
+              <TableCell className="text-right tabular-nums">$0.00</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell colSpan={3} className="text-right">
+                Total Due
+              </TableCell>
+              <TableCell className="text-right tabular-nums">
+                {formatCurrency(totalDue)}
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" size="sm">
+          Download PDF
+        </Button>
+        <Button size="sm" className="ml-auto">
+          Pay Now
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/live-waveform.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/live-waveform.tsx
new file mode 100644
index 0000000000..8db7dca613
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/live-waveform.tsx
@@ -0,0 +1,556 @@
+"use client"
+
+import * as React from "react"
+import { useEffect, useRef, useState } from "react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+
+const LiveWaveform = ({
+  active = false,
+  processing = false,
+  deviceId,
+  barWidth = 3,
+  barGap = 1,
+  barRadius = 1.5,
+  barColor,
+  fadeEdges = true,
+  fadeWidth = 24,
+  barHeight: baseBarHeight = 4,
+  height = 64,
+  sensitivity = 1,
+  smoothingTimeConstant = 0.8,
+  fftSize = 256,
+  historySize = 60,
+  updateRate = 30,
+  mode = "static",
+  onError,
+  onStreamReady,
+  onStreamEnd,
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  active?: boolean
+  processing?: boolean
+  deviceId?: string
+  barWidth?: number
+  barHeight?: number
+  barGap?: number
+  barRadius?: number
+  barColor?: string
+  fadeEdges?: boolean
+  fadeWidth?: number
+  height?: string | number
+  sensitivity?: number
+  smoothingTimeConstant?: number
+  fftSize?: number
+  historySize?: number
+  updateRate?: number
+  mode?: "scrolling" | "static"
+  onError?: (error: Error) => void
+  onStreamReady?: (stream: MediaStream) => void
+  onStreamEnd?: () => void
+}) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const historyRef = useRef<number[]>([])
+  const analyserRef = useRef<AnalyserNode | null>(null)
+  const audioContextRef = useRef<AudioContext | null>(null)
+  const streamRef = useRef<MediaStream | null>(null)
+  const animationRef = useRef<number>(0)
+  const lastUpdateRef = useRef<number>(0)
+  const processingAnimationRef = useRef<number | null>(null)
+  const lastActiveDataRef = useRef<number[]>([])
+  const transitionProgressRef = useRef(0)
+  const staticBarsRef = useRef<number[]>([])
+  const needsRedrawRef = useRef(true)
+  const gradientCacheRef = useRef<CanvasGradient | null>(null)
+  const lastWidthRef = useRef(0)
+  const heightStyle = typeof height === "number" ? `${height}px` : height
+
+  // Handle canvas resizing.
+  useEffect(() => {
+    const canvas = canvasRef.current
+    const container = containerRef.current
+    if (!canvas || !container) return
+    const resizeObserver = new ResizeObserver(() => {
+      const rect = container.getBoundingClientRect()
+      const dpr = window.devicePixelRatio || 1
+      canvas.width = rect.width * dpr
+      canvas.height = rect.height * dpr
+      canvas.style.width = `${rect.width}px`
+      canvas.style.height = `${rect.height}px`
+      const ctx = canvas.getContext("2d")
+      if (ctx) {
+        ctx.scale(dpr, dpr)
+      }
+      gradientCacheRef.current = null
+      lastWidthRef.current = rect.width
+      needsRedrawRef.current = true
+    })
+    resizeObserver.observe(container)
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (processing && !active) {
+      let time = 0
+      transitionProgressRef.current = 0
+      const animateProcessing = () => {
+        time += 0.03
+        transitionProgressRef.current = Math.min(
+          1,
+          transitionProgressRef.current + 0.02
+        )
+        const processingData = []
+        const barCount = Math.floor(
+          (containerRef.current?.getBoundingClientRect().width || 200) /
+            (barWidth + barGap)
+        )
+        if (mode === "static") {
+          const halfCount = Math.floor(barCount / 2)
+          for (let i = 0; i < barCount; i++) {
+            const normalizedPosition = (i - halfCount) / halfCount
+            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4
+            const wave1 = Math.sin(time * 1.5 + normalizedPosition * 3) * 0.25
+            const wave2 = Math.sin(time * 0.8 - normalizedPosition * 2) * 0.2
+            const wave3 = Math.cos(time * 2 + normalizedPosition) * 0.15
+            const combinedWave = wave1 + wave2 + wave3
+            const processingValue = (0.2 + combinedWave) * centerWeight
+            let finalValue = processingValue
+            if (
+              lastActiveDataRef.current.length > 0 &&
+              transitionProgressRef.current < 1
+            ) {
+              const lastDataIndex = Math.min(
+                i,
+                lastActiveDataRef.current.length - 1
+              )
+              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
+              finalValue =
+                lastValue * (1 - transitionProgressRef.current) +
+                processingValue * transitionProgressRef.current
+            }
+            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
+          }
+        } else {
+          for (let i = 0; i < barCount; i++) {
+            const normalizedPosition = (i - barCount / 2) / (barCount / 2)
+            const centerWeight = 1 - Math.abs(normalizedPosition) * 0.4
+            const wave1 = Math.sin(time * 1.5 + i * 0.15) * 0.25
+            const wave2 = Math.sin(time * 0.8 - i * 0.1) * 0.2
+            const wave3 = Math.cos(time * 2 + i * 0.05) * 0.15
+            const combinedWave = wave1 + wave2 + wave3
+            const processingValue = (0.2 + combinedWave) * centerWeight
+            let finalValue = processingValue
+            if (
+              lastActiveDataRef.current.length > 0 &&
+              transitionProgressRef.current < 1
+            ) {
+              const lastDataIndex = Math.floor(
+                (i / barCount) * lastActiveDataRef.current.length
+              )
+              const lastValue = lastActiveDataRef.current[lastDataIndex] || 0
+              finalValue =
+                lastValue * (1 - transitionProgressRef.current) +
+                processingValue * transitionProgressRef.current
+            }
+            processingData.push(Math.max(0.05, Math.min(1, finalValue)))
+          }
+        }
+        if (mode === "static") {
+          staticBarsRef.current = processingData
+        } else {
+          historyRef.current = processingData
+        }
+        needsRedrawRef.current = true
+        processingAnimationRef.current =
+          requestAnimationFrame(animateProcessing)
+      }
+      animateProcessing()
+      return () => {
+        if (processingAnimationRef.current) {
+          cancelAnimationFrame(processingAnimationRef.current)
+        }
+      }
+    } else if (!active && !processing) {
+      const hasData =
+        mode === "static"
+          ? staticBarsRef.current.length > 0
+          : historyRef.current.length > 0
+      if (hasData) {
+        let fadeProgress = 0
+        const fadeToIdle = () => {
+          fadeProgress += 0.03
+          if (fadeProgress < 1) {
+            if (mode === "static") {
+              staticBarsRef.current = staticBarsRef.current.map(
+                (value) => value * (1 - fadeProgress)
+              )
+            } else {
+              historyRef.current = historyRef.current.map(
+                (value) => value * (1 - fadeProgress)
+              )
+            }
+            needsRedrawRef.current = true
+            requestAnimationFrame(fadeToIdle)
+          } else {
+            if (mode === "static") {
+              staticBarsRef.current = []
+            } else {
+              historyRef.current = []
+            }
+          }
+        }
+        fadeToIdle()
+      }
+    }
+  }, [processing, active, barWidth, barGap, mode])
+
+  // Handle microphone setup and teardown.
+  useEffect(() => {
+    if (!active) {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop())
+        streamRef.current = null
+        onStreamEnd?.()
+      }
+      if (
+        audioContextRef.current &&
+        audioContextRef.current.state !== "closed"
+      ) {
+        audioContextRef.current.close()
+        audioContextRef.current = null
+      }
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = 0
+      }
+      return
+    }
+    const setupMicrophone = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: deviceId
+            ? {
+                deviceId: { exact: deviceId },
+                echoCancellation: true,
+                noiseSuppression: true,
+                autoGainControl: true,
+              }
+            : {
+                echoCancellation: true,
+                noiseSuppression: true,
+                autoGainControl: true,
+              },
+        })
+        streamRef.current = stream
+        onStreamReady?.(stream)
+        const AudioContextConstructor =
+          window.AudioContext ||
+          (window as unknown as { webkitAudioContext: typeof AudioContext })
+            .webkitAudioContext
+        const audioContext = new AudioContextConstructor()
+        const analyser = audioContext.createAnalyser()
+        analyser.fftSize = fftSize
+        analyser.smoothingTimeConstant = smoothingTimeConstant
+        const source = audioContext.createMediaStreamSource(stream)
+        source.connect(analyser)
+        audioContextRef.current = audioContext
+        analyserRef.current = analyser
+        historyRef.current = []
+      } catch (error) {
+        onError?.(error as Error)
+      }
+    }
+    setupMicrophone()
+    return () => {
+      if (streamRef.current) {
+        streamRef.current.getTracks().forEach((track) => track.stop())
+        streamRef.current = null
+        onStreamEnd?.()
+      }
+      if (
+        audioContextRef.current &&
+        audioContextRef.current.state !== "closed"
+      ) {
+        audioContextRef.current.close()
+        audioContextRef.current = null
+      }
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+        animationRef.current = 0
+      }
+    }
+  }, [
+    active,
+    deviceId,
+    fftSize,
+    smoothingTimeConstant,
+    onError,
+    onStreamReady,
+    onStreamEnd,
+  ])
+
+  // Animation loop.
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) return
+    const ctx = canvas.getContext("2d")
+    if (!ctx) return
+    let rafId: number
+    const animate = (currentTime: number) => {
+      const rect = canvas.getBoundingClientRect()
+      if (active && currentTime - lastUpdateRef.current > updateRate) {
+        lastUpdateRef.current = currentTime
+        if (analyserRef.current) {
+          const dataArray = new Uint8Array(
+            analyserRef.current.frequencyBinCount
+          )
+          analyserRef.current.getByteFrequencyData(dataArray)
+          if (mode === "static") {
+            const startFreq = Math.floor(dataArray.length * 0.05)
+            const endFreq = Math.floor(dataArray.length * 0.4)
+            const relevantData = dataArray.slice(startFreq, endFreq)
+            const barCount = Math.floor(rect.width / (barWidth + barGap))
+            const halfCount = Math.floor(barCount / 2)
+            const newBars: number[] = []
+            for (let i = halfCount - 1; i >= 0; i--) {
+              const dataIndex = Math.floor(
+                (i / halfCount) * relevantData.length
+              )
+              const value = Math.min(
+                1,
+                (relevantData[dataIndex] / 255) * sensitivity
+              )
+              newBars.push(Math.max(0.05, value))
+            }
+            for (let i = 0; i < halfCount; i++) {
+              const dataIndex = Math.floor(
+                (i / halfCount) * relevantData.length
+              )
+              const value = Math.min(
+                1,
+                (relevantData[dataIndex] / 255) * sensitivity
+              )
+              newBars.push(Math.max(0.05, value))
+            }
+            staticBarsRef.current = newBars
+            lastActiveDataRef.current = newBars
+          } else {
+            let sum = 0
+            const startFreq = Math.floor(dataArray.length * 0.05)
+            const endFreq = Math.floor(dataArray.length * 0.4)
+            const relevantData = dataArray.slice(startFreq, endFreq)
+            for (let i = 0; i < relevantData.length; i++) {
+              sum += relevantData[i]
+            }
+            const average = (sum / relevantData.length / 255) * sensitivity
+            historyRef.current.push(Math.min(1, Math.max(0.05, average)))
+            lastActiveDataRef.current = [...historyRef.current]
+            if (historyRef.current.length > historySize) {
+              historyRef.current.shift()
+            }
+          }
+          needsRedrawRef.current = true
+        }
+      }
+      if (!needsRedrawRef.current && !active) {
+        rafId = requestAnimationFrame(animate)
+        return
+      }
+      needsRedrawRef.current = active
+      ctx.clearRect(0, 0, rect.width, rect.height)
+      const computedBarColor =
+        barColor ||
+        (() => {
+          const style = getComputedStyle(canvas)
+          const color = style.color
+          return color || "#000"
+        })()
+      const step = barWidth + barGap
+      const barCount = Math.floor(rect.width / step)
+      const centerY = rect.height / 2
+      if (mode === "static") {
+        const dataToRender = processing
+          ? staticBarsRef.current
+          : active
+            ? staticBarsRef.current
+            : staticBarsRef.current.length > 0
+              ? staticBarsRef.current
+              : []
+        for (let i = 0; i < barCount && i < dataToRender.length; i++) {
+          const value = dataToRender[i] || 0.1
+          const x = i * step
+          const bh = Math.max(baseBarHeight, value * rect.height * 0.8)
+          const y = centerY - bh / 2
+          ctx.fillStyle = computedBarColor
+          ctx.globalAlpha = 0.4 + value * 0.6
+          if (barRadius > 0) {
+            ctx.beginPath()
+            ctx.roundRect(x, y, barWidth, bh, barRadius)
+            ctx.fill()
+          } else {
+            ctx.fillRect(x, y, barWidth, bh)
+          }
+        }
+      } else {
+        for (let i = 0; i < barCount && i < historyRef.current.length; i++) {
+          const dataIndex = historyRef.current.length - 1 - i
+          const value = historyRef.current[dataIndex] || 0.1
+          const x = rect.width - (i + 1) * step
+          const bh = Math.max(baseBarHeight, value * rect.height * 0.8)
+          const y = centerY - bh / 2
+          ctx.fillStyle = computedBarColor
+          ctx.globalAlpha = 0.4 + value * 0.6
+          if (barRadius > 0) {
+            ctx.beginPath()
+            ctx.roundRect(x, y, barWidth, bh, barRadius)
+            ctx.fill()
+          } else {
+            ctx.fillRect(x, y, barWidth, bh)
+          }
+        }
+      }
+      if (fadeEdges && fadeWidth > 0 && rect.width > 0) {
+        if (!gradientCacheRef.current || lastWidthRef.current !== rect.width) {
+          const gradient = ctx.createLinearGradient(0, 0, rect.width, 0)
+          const fadePercent = Math.min(0.3, fadeWidth / rect.width)
+          gradient.addColorStop(0, "rgba(255,255,255,1)")
+          gradient.addColorStop(fadePercent, "rgba(255,255,255,0)")
+          gradient.addColorStop(1 - fadePercent, "rgba(255,255,255,0)")
+          gradient.addColorStop(1, "rgba(255,255,255,1)")
+          gradientCacheRef.current = gradient
+          lastWidthRef.current = rect.width
+        }
+        ctx.globalCompositeOperation = "destination-out"
+        ctx.fillStyle = gradientCacheRef.current
+        ctx.fillRect(0, 0, rect.width, rect.height)
+        ctx.globalCompositeOperation = "source-over"
+      }
+      ctx.globalAlpha = 1
+      rafId = requestAnimationFrame(animate)
+    }
+    rafId = requestAnimationFrame(animate)
+    return () => {
+      if (rafId) {
+        cancelAnimationFrame(rafId)
+      }
+    }
+  }, [
+    active,
+    processing,
+    sensitivity,
+    updateRate,
+    historySize,
+    barWidth,
+    baseBarHeight,
+    barGap,
+    barRadius,
+    barColor,
+    fadeEdges,
+    fadeWidth,
+    mode,
+  ])
+
+  return (
+    <div
+      className={cn("relative h-full w-full", className)}
+      ref={containerRef}
+      style={{ height: heightStyle }}
+      aria-label={
+        active
+          ? "Live audio waveform"
+          : processing
+            ? "Processing audio"
+            : "Audio waveform idle"
+      }
+      role="img"
+      {...props}
+    >
+      {!active && !processing && (
+        <div className="absolute top-1/2 right-0 left-0 -translate-y-1/2 border-t-2 border-dotted border-muted-foreground/20" />
+      )}
+      <canvas
+        className="block h-full w-full"
+        ref={canvasRef}
+        aria-hidden="true"
+      />
+    </div>
+  )
+}
+
+export function LiveWaveformCard() {
+  const [active, setActive] = useState(false)
+  const [processing, setProcessing] = useState(true)
+  const [mode, setMode] = useState<"static" | "scrolling">("static")
+
+  const handleToggleActive = () => {
+    setActive(!active)
+    if (!active) {
+      setProcessing(false)
+    }
+  }
+
+  const handleToggleProcessing = () => {
+    setProcessing(!processing)
+    if (!processing) {
+      setActive(false)
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Live Audio Waveform</CardTitle>
+        <CardDescription>
+          Real-time microphone input visualization with audio reactivity
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <LiveWaveform
+          active={active}
+          processing={processing}
+          height={80}
+          barWidth={3}
+          barGap={2}
+          mode={mode}
+          fadeEdges={true}
+          barColor="gray"
+          historySize={120}
+        />
+      </CardContent>
+      <CardFooter className="gap-2">
+        <Button
+          size="sm"
+          variant={active ? "default" : "outline"}
+          onClick={handleToggleActive}
+        >
+          {active ? "Stop" : "Start"} Listening
+        </Button>
+        <Button
+          size="sm"
+          variant={processing ? "default" : "outline"}
+          onClick={handleToggleProcessing}
+        >
+          {processing ? "Stop" : "Start"} Processing
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => setMode(mode === "static" ? "scrolling" : "static")}
+        >
+          {mode === "static" ? "Static" : "Scrolling"}
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/no-team-members.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/no-team-members.tsx
new file mode 100644
index 0000000000..e7bf4d978e
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/no-team-members.tsx
@@ -0,0 +1,63 @@
+"use client"
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+} from "@/registry/bases/radix/ui/avatar"
+import { Button } from "@/registry/bases/radix/ui/button"
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@/registry/bases/radix/ui/empty"
+
+export function NoTeamMembers() {
+  return (
+    <Card>
+      <CardContent>
+        <Empty className="h-56 border">
+          <EmptyHeader>
+            <EmptyMedia>
+              <AvatarGroup className="grayscale">
+                <Avatar size="lg">
+                  <AvatarImage
+                    src="https://github.com/shadcn.png"
+                    alt="@shadcn"
+                  />
+                  <AvatarFallback>CN</AvatarFallback>
+                </Avatar>
+                <Avatar size="lg">
+                  <AvatarImage
+                    src="https://github.com/maxleiter.png"
+                    alt="@maxleiter"
+                  />
+                  <AvatarFallback>LR</AvatarFallback>
+                </Avatar>
+                <Avatar size="lg">
+                  <AvatarImage
+                    src="https://github.com/evilrabbit.png"
+                    alt="@evilrabbit"
+                  />
+                  <AvatarFallback>ER</AvatarFallback>
+                </Avatar>
+              </AvatarGroup>
+            </EmptyMedia>
+            <EmptyTitle>No Team Members</EmptyTitle>
+            <EmptyDescription>
+              Invite your team to collaborate on this project.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button size="sm">Invite Members</Button>
+          </EmptyContent>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/not-found.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/not-found.tsx
new file mode 100644
index 0000000000..b7c1499826
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/not-found.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/registry/bases/radix/ui/empty"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/registry/bases/radix/ui/input-group"
+import { Kbd } from "@/registry/bases/radix/ui/kbd"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function NotFound() {
+  return (
+    <Card>
+      <CardContent>
+        <Empty className="h-72">
+          <EmptyHeader>
+            <EmptyTitle>404 - Not Found</EmptyTitle>
+            <EmptyDescription>
+              The page you&apos;re looking for doesn&apos;t exist. Try searching
+              for what you need below.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <InputGroup className="w-3/4">
+              <InputGroupInput placeholder="Try searching for pages..." />
+              <InputGroupAddon>
+                <IconPlaceholder
+                  lucide="SearchIcon"
+                  tabler="IconSearch"
+                  hugeicons="Search01Icon"
+                  phosphor="MagnifyingGlassIcon"
+                  remixicon="RiSearchLine"
+                />
+              </InputGroupAddon>
+              <InputGroupAddon align="inline-end">
+                <Kbd>/</Kbd>
+              </InputGroupAddon>
+            </InputGroup>
+            <Button variant="link">Go to homepage</Button>
+          </EmptyContent>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/observability-card.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/observability-card.tsx
new file mode 100644
index 0000000000..7fe7ee7b62
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/observability-card.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function ObservabilityCard() {
+  return (
+    <Card className="relative w-full max-w-md overflow-hidden pt-0">
+      <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
+      <img
+        src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Photo by mymind on Unsplash"
+        title="Photo by mymind on Unsplash"
+        className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
+      />
+      <CardHeader>
+        <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
+        <CardDescription>
+          Switch to the improved way to explore your data, with natural
+          language. Monitoring will no longer be available on the Pro plan in
+          November, 2025
+        </CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button>
+          Create Query{" "}
+          <IconPlaceholder
+            lucide="PlusIcon"
+            tabler="IconPlus"
+            hugeicons="PlusSignIcon"
+            phosphor="PlusIcon"
+            remixicon="RiAddLine"
+            data-icon="inline-end"
+          />
+        </Button>
+        <Badge variant="secondary" className="ml-auto">
+          Warning
+        </Badge>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/pie-chart-card.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/pie-chart-card.tsx
new file mode 100644
index 0000000000..940b2ff842
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/pie-chart-card.tsx
@@ -0,0 +1,151 @@
+"use client"
+
+import { Label, Pie, PieChart } from "recharts"
+
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/radix/ui/chart"
+import { Progress } from "@/registry/bases/radix/ui/progress"
+
+const pieChartData = [
+  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+  { browser: "other", visitors: 190, fill: "var(--color-other)" },
+]
+
+const pieChartConfig = {
+  visitors: {
+    label: "Visitors",
+  },
+  chrome: {
+    label: "Chrome",
+    color: "var(--chart-1)",
+  },
+  safari: {
+    label: "Safari",
+    color: "var(--chart-2)",
+  },
+  firefox: {
+    label: "Firefox",
+    color: "var(--chart-3)",
+  },
+  edge: {
+    label: "Edge",
+    color: "var(--chart-4)",
+  },
+  other: {
+    label: "Other",
+    color: "var(--chart-5)",
+  },
+} satisfies ChartConfig
+
+export function PieChartCard() {
+  const totalVisitors = pieChartData.reduce(
+    (sum, item) => sum + item.visitors,
+    0
+  )
+  const topBrowser = pieChartData.reduce((max, item) =>
+    item.visitors > max.visitors ? item : max
+  )
+  const topBrowserShare = Math.round(
+    (topBrowser.visitors / totalVisitors) * 100
+  )
+  const topBrowserLabel =
+    pieChartConfig[topBrowser.browser as keyof typeof pieChartConfig]?.label ??
+    "Top"
+
+  return (
+    <Card>
+      <CardHeader className="pb-0">
+        <CardTitle>Browser Share</CardTitle>
+        <CardDescription>January - June 2026</CardDescription>
+        <CardAction>
+          <Badge variant="outline">{topBrowserLabel}</Badge>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="pt-0">
+        <ChartContainer
+          config={pieChartConfig}
+          className="mx-auto aspect-square max-h-[190px]"
+        >
+          <PieChart>
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Pie
+              data={pieChartData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={50}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-2xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 20}
+                          className="fill-muted-foreground text-xs"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    )
+                  }
+                }}
+              />
+            </Pie>
+            <ChartLegend
+              content={<ChartLegendContent nameKey="browser" />}
+              className="translate-y-2"
+            />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+      <CardFooter className="flex-col items-stretch gap-2">
+        <div className="flex items-center text-xs">
+          <span className="font-medium">{topBrowserLabel}</span>
+          <span className="ml-auto text-muted-foreground tabular-nums">
+            {topBrowserShare}%
+          </span>
+        </div>
+        <Progress
+          value={topBrowserShare}
+          className="**:data-[slot=progress-indicator]:bg-chart-3"
+        />
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/report-bug.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/report-bug.tsx
new file mode 100644
index 0000000000..64430172c4
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/report-bug.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
+import { Input } from "@/registry/bases/radix/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/bases/radix/ui/select"
+import { Textarea } from "@/registry/bases/radix/ui/textarea"
+
+export function ReportBug() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Report Bug</CardTitle>
+        <CardDescription>Help us fix issues faster.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="bug-title">Title</FieldLabel>
+            <Input
+              id="bug-title"
+              placeholder="Brief description of the issue"
+            />
+          </Field>
+          <div className="grid grid-cols-2 gap-3">
+            <Field>
+              <FieldLabel htmlFor="bug-severity">Severity</FieldLabel>
+              <Select defaultValue="medium">
+                <SelectTrigger id="bug-severity" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="critical">Critical</SelectItem>
+                    <SelectItem value="high">High</SelectItem>
+                    <SelectItem value="medium">Medium</SelectItem>
+                    <SelectItem value="low">Low</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="bug-component">Component</FieldLabel>
+              <Select defaultValue="dashboard">
+                <SelectTrigger id="bug-component" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="dashboard">Dashboard</SelectItem>
+                    <SelectItem value="auth">Auth</SelectItem>
+                    <SelectItem value="api">API</SelectItem>
+                    <SelectItem value="billing">Billing</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+          </div>
+          <Field>
+            <FieldLabel htmlFor="bug-steps">Steps to reproduce</FieldLabel>
+            <Textarea
+              id="bug-steps"
+              placeholder="1. Go to&#10;2. Click on&#10;3. Observe..."
+              className="min-h-24 resize-none"
+            />
+          </Field>
+        </FieldGroup>
+      </CardContent>
+      <CardFooter>
+        <Field orientation="horizontal" className="justify-end">
+          <Button variant="outline">Attach File</Button>
+          <Button>Submit Bug</Button>
+        </Field>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/shipping-address.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/shipping-address.tsx
new file mode 100644
index 0000000000..620655a28a
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/shipping-address.tsx
@@ -0,0 +1,101 @@
+"use client"
+
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import { Checkbox } from "@/registry/bases/radix/ui/checkbox"
+import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
+import { Input } from "@/registry/bases/radix/ui/input"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/registry/bases/radix/ui/select"
+
+export function ShippingAddress() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Shipping Address</CardTitle>
+        <CardDescription>Where should we deliver?</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="shipping-street">Street address</FieldLabel>
+            <Input id="shipping-street" placeholder="123 Main Street" />
+          </Field>
+          <Field>
+            <FieldLabel htmlFor="shipping-apt">Apt / Suite</FieldLabel>
+            <Input id="shipping-apt" placeholder="Apt 4B" />
+          </Field>
+          <FieldGroup className="grid grid-cols-2">
+            <Field>
+              <FieldLabel htmlFor="shipping-city">City</FieldLabel>
+              <Input id="shipping-city" placeholder="San Francisco" />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="shipping-state">State</FieldLabel>
+              <Select defaultValue="CA">
+                <SelectTrigger id="shipping-state" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="CA">California</SelectItem>
+                    <SelectItem value="NY">New York</SelectItem>
+                    <SelectItem value="TX">Texas</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+          </FieldGroup>
+          <FieldGroup className="grid grid-cols-2">
+            <Field>
+              <FieldLabel htmlFor="shipping-zip">ZIP Code</FieldLabel>
+              <Input id="shipping-zip" placeholder="94102" />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="shipping-country">Country</FieldLabel>
+              <Select defaultValue="US">
+                <SelectTrigger id="shipping-country" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem value="US">United States</SelectItem>
+                    <SelectItem value="CA">Canada</SelectItem>
+                    <SelectItem value="UK">United Kingdom</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </Field>
+          </FieldGroup>
+          <Field orientation="horizontal">
+            <Checkbox id="shipping-save" defaultChecked />
+            <FieldLabel htmlFor="shipping-save" className="font-normal">
+              Save as default address
+            </FieldLabel>
+          </Field>
+        </FieldGroup>
+      </CardContent>
+      <CardFooter>
+        <Button variant="outline" size="sm">
+          Cancel
+        </Button>
+        <Button size="sm" className="ml-auto">
+          Save Address
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/shortcuts.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/shortcuts.tsx
new file mode 100644
index 0000000000..b8a14e1c64
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/shortcuts.tsx
@@ -0,0 +1,56 @@
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import { Kbd } from "@/registry/bases/radix/ui/kbd"
+import { Separator } from "@/registry/bases/radix/ui/separator"
+
+export function Shortcuts() {
+  return (
+    <Card>
+      <CardContent>
+        <div className="flex flex-col gap-3">
+          <div className="text-sm font-medium">Shortcuts</div>
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>Search</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>K</Kbd>
+              </div>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>Quick Actions</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>J</Kbd>
+              </div>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>New File</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>N</Kbd>
+              </div>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>Save</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>S</Kbd>
+              </div>
+            </div>
+            <Separator />
+            <div className="flex items-center justify-between text-sm text-muted-foreground">
+              <span>Toggle Sidebar</span>
+              <div className="flex gap-1">
+                <Kbd>⌘</Kbd>
+                <Kbd>B</Kbd>
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/skeleton-loading.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/skeleton-loading.tsx
new file mode 100644
index 0000000000..19a192f544
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/skeleton-loading.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import { Skeleton } from "@/registry/bases/radix/ui/skeleton"
+
+export function SkeletonLoading() {
+  return (
+    <Card>
+      <CardContent className="flex flex-col gap-4">
+        <div className="flex items-center gap-3">
+          <Skeleton className="size-10 rounded-full" />
+          <div className="flex flex-1 flex-col gap-2">
+            <Skeleton className="h-4 w-3/4" />
+            <Skeleton className="h-3 w-1/2" />
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-4/5" />
+        </div>
+        <div className="flex gap-2">
+          <Skeleton className="h-8 w-20" />
+          <Skeleton className="h-8 w-20" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/sleep-report.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/sleep-report.tsx
new file mode 100644
index 0000000000..1959e699b5
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/sleep-report.tsx
@@ -0,0 +1,104 @@
+"use client"
+
+import { Bar, BarChart } from "recharts"
+
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import { Button } from "@/registry/bases/radix/ui/button"
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  ChartContainer,
+  type ChartConfig,
+} from "@/registry/bases/radix/ui/chart"
+
+const sleepChartData = [
+  { hour: "10pm", deep: 0, light: 30, rem: 0 },
+  { hour: "11pm", deep: 20, light: 10, rem: 0 },
+  { hour: "12am", deep: 40, light: 0, rem: 10 },
+  { hour: "1am", deep: 30, light: 5, rem: 15 },
+  { hour: "2am", deep: 10, light: 20, rem: 30 },
+  { hour: "3am", deep: 25, light: 10, rem: 20 },
+  { hour: "4am", deep: 15, light: 25, rem: 10 },
+  { hour: "5am", deep: 5, light: 35, rem: 15 },
+  { hour: "6am", deep: 0, light: 20, rem: 25 },
+]
+
+const sleepChartConfig = {
+  deep: {
+    label: "Deep",
+    color: "var(--chart-1)",
+  },
+  light: {
+    label: "Light",
+    color: "var(--chart-2)",
+  },
+  rem: {
+    label: "REM",
+    color: "var(--chart-3)",
+  },
+} satisfies ChartConfig
+
+export function SleepReport() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Sleep Report</CardTitle>
+        <CardDescription>Last night · 7h 24m</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <ChartContainer config={sleepChartConfig} className="h-32 w-full">
+          <BarChart
+            accessibilityLayer
+            data={sleepChartData}
+            margin={{ left: 0, right: 0 }}
+            barSize={16}
+          >
+            <Bar
+              dataKey="deep"
+              stackId="a"
+              fill="var(--color-deep)"
+              radius={0}
+            />
+            <Bar
+              dataKey="light"
+              stackId="a"
+              fill="var(--color-light)"
+              radius={0}
+            />
+            <Bar
+              dataKey="rem"
+              stackId="a"
+              fill="var(--color-rem)"
+              radius={[2, 2, 0, 0]}
+            />
+          </BarChart>
+        </ChartContainer>
+        <div className="grid grid-cols-4 gap-2">
+          {[
+            { label: "Deep", value: "2h 10m" },
+            { label: "Light", value: "3h 48m" },
+            { label: "REM", value: "1h 26m" },
+            { label: "Score", value: "84" },
+          ].map((s) => (
+            <div key={s.label} className="text-center">
+              <div className="text-sm font-medium tabular-nums">{s.value}</div>
+              <div className="text-xs text-muted-foreground">{s.label}</div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Badge variant="outline">Good</Badge>
+        <Button variant="outline" size="sm" className="ml-auto">
+          Details
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/style-overview.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/style-overview.tsx
new file mode 100644
index 0000000000..fb75d0e0c0
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/style-overview.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import { STYLES } from "@/registry/styles"
+import { FONTS } from "@/app/(create)/lib/fonts"
+import { useDesignSystemSearchParams } from "@/app/(create)/lib/search-params"
+
+export function StyleOverview() {
+  const [params] = useDesignSystemSearchParams()
+
+  const currentFont = React.useMemo(
+    () => FONTS.find((font) => font.value === params.font),
+    [params.font]
+  )
+
+  const currentStyle = React.useMemo(
+    () => STYLES.find((style) => style.name === params.style),
+    [params.style]
+  )
+
+  return (
+    <Card>
+      <CardContent className="flex flex-col gap-6">
+        <div className="flex flex-col gap-1">
+          <div className="text-2xl font-medium">
+            {currentStyle?.title} - {currentFont?.name}
+          </div>
+          <div className="line-clamp-2 text-base text-muted-foreground">
+            Designers love packing quirky glyphs into test phrases. This is a
+            preview of the typography styles.
+          </div>
+        </div>
+        <div className="grid grid-cols-6 gap-3">
+          {[
+            "--background",
+            "--foreground",
+            "--primary",
+            "--secondary",
+            "--muted",
+            "--accent",
+            "--destructive",
+            "--chart-1",
+            "--chart-2",
+            "--chart-3",
+            "--chart-4",
+            "--chart-5",
+          ].map((variant) => (
+            <div
+              key={variant}
+              className="flex flex-col flex-wrap items-center gap-2"
+            >
+              <div
+                className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten"
+                style={
+                  {
+                    "--color": `var(${variant})`,
+                  } as React.CSSProperties
+                }
+              />
+              <div className="hidden max-w-14 truncate font-mono text-[0.60rem] md:block">
+                {variant}
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/ui-elements.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/ui-elements.tsx
new file mode 100644
index 0000000000..e93bd60cfb
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/ui-elements.tsx
@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/bases/radix/ui/alert-dialog"
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import { Button } from "@/registry/bases/radix/ui/button"
+import { ButtonGroup } from "@/registry/bases/radix/ui/button-group"
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import { Checkbox } from "@/registry/bases/radix/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/bases/radix/ui/dropdown-menu"
+import { Field, FieldGroup } from "@/registry/bases/radix/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@/registry/bases/radix/ui/input-group"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/registry/bases/radix/ui/item"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/bases/radix/ui/radio-group"
+import { Slider } from "@/registry/bases/radix/ui/slider"
+import { Switch } from "@/registry/bases/radix/ui/switch"
+import { Textarea } from "@/registry/bases/radix/ui/textarea"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function UIElements() {
+  const [sliderValue, setSliderValue] = React.useState<number[]>([500])
+  const handleSliderValueChange = React.useCallback(
+    (value: number | readonly number[]) => {
+      if (typeof value === "number") {
+        setSliderValue([value])
+      } else {
+        setSliderValue([...value])
+      }
+    },
+    []
+  )
+
+  return (
+    <Card className="w-full">
+      <CardContent className="flex flex-col gap-6">
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-wrap gap-2">
+            <Button>Button</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="outline">Outline</Button>
+            <Button variant="destructive">Delete</Button>
+          </div>
+          <Item variant="outline">
+            <ItemContent>
+              <ItemTitle>Two-factor authentication</ItemTitle>
+              <ItemDescription className="text-pretty xl:hidden 2xl:block">
+                Verify via email or phone number.
+              </ItemDescription>
+            </ItemContent>
+            <ItemActions className="hidden md:flex">
+              <Button size="sm" variant="secondary">
+                Enable
+              </Button>
+            </ItemActions>
+          </Item>
+        </div>
+        <Slider
+          value={sliderValue}
+          onValueChange={handleSliderValueChange}
+          max={1000}
+          min={0}
+          step={10}
+          className="flex-1"
+          aria-label="Slider"
+        />
+        <FieldGroup>
+          <Field>
+            <InputGroup>
+              <InputGroupInput placeholder="Name" />
+              <InputGroupAddon align="inline-end">
+                <InputGroupText>
+                  <IconPlaceholder
+                    lucide="SearchIcon"
+                    tabler="IconSearch"
+                    hugeicons="Search01Icon"
+                    phosphor="MagnifyingGlassIcon"
+                    remixicon="RiSearchLine"
+                  />
+                </InputGroupText>
+              </InputGroupAddon>
+            </InputGroup>
+          </Field>
+          <Field className="flex-1">
+            <Textarea placeholder="Message" className="resize-none" />
+          </Field>
+        </FieldGroup>
+        <div className="flex items-center gap-2">
+          <div className="flex gap-2">
+            <Badge>Badge</Badge>
+            <Badge variant="secondary">Secondary</Badge>
+            <Badge variant="outline">Outline</Badge>
+          </div>
+          <RadioGroup defaultValue="apple" className="ml-auto flex w-fit gap-3">
+            <RadioGroupItem value="apple" />
+            <RadioGroupItem value="banana" />
+          </RadioGroup>
+          <div className="flex gap-3">
+            <Checkbox defaultChecked />
+            <Checkbox />
+          </div>
+        </div>
+        <div className="flex items-center gap-4">
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button variant="outline">
+                <span className="hidden md:block">Alert Dialog</span>
+                <span className="block md:hidden">Dialog</span>
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent size="sm">
+              <AlertDialogHeader>
+                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
+                <AlertDialogDescription>
+                  Do you want to allow the USB accessory to connect to this
+                  device and your data?
+                </AlertDialogDescription>
+              </AlertDialogHeader>
+              <AlertDialogFooter>
+                <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
+                <AlertDialogAction>Allow</AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+          <ButtonGroup>
+            <Button variant="outline">Button Group</Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="icon">
+                  <IconPlaceholder
+                    lucide="ChevronUpIcon"
+                    tabler="IconChevronUp"
+                    hugeicons="ArrowUp01Icon"
+                    phosphor="CaretUpIcon"
+                    remixicon="RiArrowUpSLine"
+                  />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" side="top" className="w-40">
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
+                  <DropdownMenuItem>Mute Conversation</DropdownMenuItem>
+                  <DropdownMenuItem>Mark as Read</DropdownMenuItem>
+                  <DropdownMenuItem>Block User</DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuLabel>Conversation</DropdownMenuLabel>
+                  <DropdownMenuItem>Share Conversation</DropdownMenuItem>
+                  <DropdownMenuItem>Copy Conversation</DropdownMenuItem>
+                  <DropdownMenuItem>Report Conversation</DropdownMenuItem>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <DropdownMenuItem variant="destructive">
+                    Delete Conversation
+                  </DropdownMenuItem>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </ButtonGroup>
+          <Switch defaultChecked className="ml-auto" />
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/usage-card.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/usage-card.tsx
new file mode 100644
index 0000000000..343fb9d934
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/usage-card.tsx
@@ -0,0 +1,136 @@
+"use client"
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemGroup,
+  ItemMedia,
+  ItemTitle,
+} from "@/registry/bases/radix/ui/item"
+
+// Usage items with percentage and value.
+const items = [
+  {
+    name: "Edge Requests",
+    value: "$1.83K",
+    percentage: 67.34,
+  },
+  {
+    name: "Fast Data Transfer",
+    percentage: 52.18,
+    value: "$952.51",
+  },
+  {
+    name: "Monitoring data points",
+    percentage: 89.42,
+    value: "$901.20",
+  },
+  {
+    name: "Web Analytics Events",
+    percentage: 45.67,
+    value: "$603.71",
+  },
+  {
+    name: "ISR Writes",
+    percentage: 26.23,
+    value: "524.52K / 2M",
+  },
+  {
+    name: "Function Duration",
+    percentage: 5.11,
+    value: "5.11 GB Hrs / 1K GB Hrs",
+  },
+]
+
+// Circular gauge SVG component for displaying a percentage.
+function CircularGauge({ percentage }: { percentage: number }) {
+  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)
+  const circumference = 2 * Math.PI * 42.5
+  const strokePercent = (normalizedPercentage / 100) * circumference
+
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      height="16"
+      width="16"
+      strokeWidth="2"
+      viewBox="0 0 100 100"
+      className="-rotate-90"
+    >
+      <circle
+        cx="50"
+        cy="50"
+        r="42.5"
+        strokeWidth="12"
+        strokeDashoffset="0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="opacity-20"
+        stroke="currentColor"
+        style={{
+          strokeDasharray: `${circumference} ${circumference}`,
+        }}
+      />
+      <circle
+        cx="50"
+        cy="50"
+        r="42.5"
+        strokeWidth="12"
+        strokeDashoffset="0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke="currentColor"
+        className="transition-all duration-300"
+        style={{
+          strokeDasharray: `${strokePercent} ${circumference}`,
+        }}
+      />
+    </svg>
+  )
+}
+
+export function UsageCard() {
+  return (
+    <Card className="w-full max-w-sm gap-4">
+      <CardHeader>
+        <CardTitle className="px-1 text-sm">
+          5 days remaining in cycle
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ItemGroup className="gap-0">
+          {items.map((item) => (
+            <Item
+              key={item.name}
+              size="xs"
+              className="px-0 group-hover/item-group:bg-transparent"
+              asChild
+            >
+              <a href="#">
+                <ItemMedia variant="icon" className="text-primary">
+                  <CircularGauge percentage={item.percentage} />
+                </ItemMedia>
+                <ItemContent className="inline-block truncate">
+                  <ItemTitle className="inline">{item.name}</ItemTitle>
+                </ItemContent>
+                <ItemActions>
+                  <span className="font-mono text-xs font-medium text-muted-foreground tabular-nums">
+                    {item.value}
+                  </span>
+                </ItemActions>
+              </a>
+            </Item>
+          ))}
+        </ItemGroup>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/visitors.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/visitors.tsx
new file mode 100644
index 0000000000..cab19d6091
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/visitors.tsx
@@ -0,0 +1,91 @@
+"use client"
+
+import { Area, AreaChart, XAxis } from "recharts"
+
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/bases/radix/ui/chart"
+
+const areaChartData = [
+  { month: "January", desktop: 186 },
+  { month: "February", desktop: 305 },
+  { month: "March", desktop: 237 },
+  { month: "April", desktop: 73 },
+  { month: "May", desktop: 209 },
+  { month: "June", desktop: 214 },
+]
+
+const areaChartConfig = {
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+const latestVisitors = areaChartData[areaChartData.length - 1]?.desktop ?? 0
+const previousVisitors =
+  areaChartData[areaChartData.length - 2]?.desktop ?? latestVisitors
+const trendPercent =
+  previousVisitors === 0
+    ? 0
+    : Math.round(((latestVisitors - previousVisitors) / previousVisitors) * 100)
+const trendPrefix = trendPercent > 0 ? "+" : ""
+
+export function Visitors() {
+  return (
+    <Card className="pb-0">
+      <CardHeader>
+        <CardTitle>Visitors</CardTitle>
+        <CardDescription>Last 6 months </CardDescription>
+        <CardAction>
+          <Badge variant={trendPercent >= 0 ? "secondary" : "destructive"}>
+            {trendPrefix}
+            {trendPercent}% vs last month
+          </Badge>
+        </CardAction>
+      </CardHeader>
+      <CardContent className="px-0">
+        <ChartContainer config={areaChartConfig} className="h-48 w-full">
+          <AreaChart
+            accessibilityLayer
+            data={areaChartData}
+            margin={{ left: 0, right: 0, top: 6, bottom: 0 }}
+          >
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              hide
+              axisLine={false}
+              tickMargin={6}
+              tickFormatter={(value) => String(value).slice(0, 3)}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent indicator="line" />}
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="var(--color-desktop)"
+              fillOpacity={0.15}
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/cards/weekly-fitness-summary.tsx b/apps/v4/registry/bases/radix/blocks/preview/cards/weekly-fitness-summary.tsx
new file mode 100644
index 0000000000..4e8c05129e
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/cards/weekly-fitness-summary.tsx
@@ -0,0 +1,54 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/bases/radix/ui/card"
+
+const FITNESS_WEEKLY_LOAD = [
+  { day: "M", load: 84 },
+  { day: "T", load: 52 },
+  { day: "W", load: 73 },
+  { day: "T", load: 66 },
+  { day: "F", load: 91 },
+  { day: "S", load: 48 },
+  { day: "S", load: 61 },
+]
+
+export function WeeklyFitnessSummary() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Weekly Fitness Summary</CardTitle>
+        <CardDescription>Calories and workout load by day</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        <div className="grid grid-cols-7 gap-1.5">
+          {FITNESS_WEEKLY_LOAD.map((day, index) => (
+            <div
+              key={`${day.day}-${index}`}
+              className="rounded-md p-1.5 text-center ring ring-border"
+            >
+              <div className="text-sm text-muted-foreground">{day.day}</div>
+              <div className="relative mt-1 h-16 overflow-hidden rounded-sm bg-muted">
+                <div
+                  className="absolute inset-x-0 bottom-0 rounded-sm bg-chart-3"
+                  style={
+                    {
+                      height: `${day.load}%`,
+                    } as React.CSSProperties
+                  }
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/preview/index.tsx b/apps/v4/registry/bases/radix/blocks/preview/index.tsx
new file mode 100644
index 0000000000..4db3bb4162
--- /dev/null
+++ b/apps/v4/registry/bases/radix/blocks/preview/index.tsx
@@ -0,0 +1,97 @@
+"use client"
+
+import { ActivateAgentDialog } from "@/registry/bases/radix/blocks/preview/cards/activate-agent-dialog"
+import { AnalyticsCard } from "@/registry/bases/radix/blocks/preview/cards/analytics-card"
+import { AnomalyAlert } from "@/registry/bases/radix/blocks/preview/cards/anomaly-alert"
+import { AssignIssue } from "@/registry/bases/radix/blocks/preview/cards/assign-issue"
+import { BarChartCard } from "@/registry/bases/radix/blocks/preview/cards/bar-chart-card"
+import { BarVisualizerCard } from "@/registry/bases/radix/blocks/preview/cards/bar-visualizer"
+import { BookAppointment } from "@/registry/bases/radix/blocks/preview/cards/book-appointment"
+import { CodespacesCard } from "@/registry/bases/radix/blocks/preview/cards/codespaces-card"
+import { ContributionsActivity } from "@/registry/bases/radix/blocks/preview/cards/contributions-activity"
+import { Contributors } from "@/registry/bases/radix/blocks/preview/cards/contributors"
+import { EnvironmentVariables } from "@/registry/bases/radix/blocks/preview/cards/environment-variables"
+import { FeedbackForm } from "@/registry/bases/radix/blocks/preview/cards/feedback-form"
+import { FileUpload } from "@/registry/bases/radix/blocks/preview/cards/file-upload"
+import { GithubProfile } from "@/registry/bases/radix/blocks/preview/cards/github-profile"
+import { IconPreviewGrid } from "@/registry/bases/radix/blocks/preview/cards/icon-preview-grid"
+import { InviteTeam } from "@/registry/bases/radix/blocks/preview/cards/invite-team"
+import { Invoice } from "@/registry/bases/radix/blocks/preview/cards/invoice"
+import { LiveWaveformCard } from "@/registry/bases/radix/blocks/preview/cards/live-waveform"
+import { NoTeamMembers } from "@/registry/bases/radix/blocks/preview/cards/no-team-members"
+import { NotFound } from "@/registry/bases/radix/blocks/preview/cards/not-found"
+import { ObservabilityCard } from "@/registry/bases/radix/blocks/preview/cards/observability-card"
+import { PieChartCard } from "@/registry/bases/radix/blocks/preview/cards/pie-chart-card"
+import { ReportBug } from "@/registry/bases/radix/blocks/preview/cards/report-bug"
+import { ShippingAddress } from "@/registry/bases/radix/blocks/preview/cards/shipping-address"
+import { Shortcuts } from "@/registry/bases/radix/blocks/preview/cards/shortcuts"
+import { SkeletonLoading } from "@/registry/bases/radix/blocks/preview/cards/skeleton-loading"
+import { SleepReport } from "@/registry/bases/radix/blocks/preview/cards/sleep-report"
+import { StyleOverview } from "@/registry/bases/radix/blocks/preview/cards/style-overview"
+import { UIElements } from "@/registry/bases/radix/blocks/preview/cards/ui-elements"
+import { UsageCard } from "@/registry/bases/radix/blocks/preview/cards/usage-card"
+import { Visitors } from "@/registry/bases/radix/blocks/preview/cards/visitors"
+import { WeeklyFitnessSummary } from "@/registry/bases/radix/blocks/preview/cards/weekly-fitness-summary"
+
+export default function PreviewExample() {
+  return (
+    <div className="overflow-x-auto overflow-y-hidden contain-[paint] [--gap:--spacing(4)] 3xl:[--gap:--spacing(12)] md:[--gap:--spacing(10)]">
+      <div
+        className="grid w-[2400px] grid-cols-7 items-start gap-(--gap) bg-muted p-(--gap) md:w-[3000px] dark:bg-background *:[div]:gap-(--gap)"
+        data-slot="capture-target"
+      >
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <StyleOverview />
+          <div className="md:hidden">
+            <UIElements />
+          </div>
+          <CodespacesCard />
+          <BarVisualizerCard />
+          <Invoice />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <IconPreviewGrid />
+          <div className="hidden w-full md:flex">
+            <UIElements />
+          </div>
+          <ObservabilityCard />
+          <Visitors />
+          <Shortcuts />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <EnvironmentVariables />
+          <BarChartCard />
+          <InviteTeam />
+          <ActivateAgentDialog />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <SkeletonLoading />
+          <PieChartCard />
+          <NoTeamMembers />
+          <ReportBug />
+          <Contributors />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <FeedbackForm />
+          <BookAppointment />
+          <SleepReport />
+          <GithubProfile />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <AssignIssue />
+          <WeeklyFitnessSummary />
+          <FileUpload />
+          <AnalyticsCard />
+          <UsageCard />
+          <ContributionsActivity />
+        </div>
+        <div className="flex flex-col p-px [contain-intrinsic-size:380px_1200px] [content-visibility:auto]">
+          <AnomalyAlert />
+          <LiveWaveformCard />
+          <ShippingAddress />
+          <NotFound />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-01/components/version-switcher.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-01/components/version-switcher.tsx
index 91c49e6869..27a7e54a6d 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-01/components/version-switcher.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-01/components/version-switcher.tsx
@@ -33,7 +33,7 @@ export function VersionSwitcher({
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <IconPlaceholder
                   lucide="GalleryVerticalEndIcon"
                   tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-01/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-01/page.tsx
index 2be0a7c77a..46aa370712 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-01/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-01/page.tsx
@@ -39,11 +39,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-02/components/app-sidebar.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-02/components/app-sidebar.tsx
index f9a6c976a8..cfaa6ee23f 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-02/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-02/components/app-sidebar.tsx
@@ -187,7 +187,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             <SidebarGroup>
               <SidebarGroupLabel
                 asChild
-                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
+                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 <CollapsibleTrigger>
                   {item.title}{" "}
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-02/components/version-switcher.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-02/components/version-switcher.tsx
index 91c49e6869..27a7e54a6d 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-02/components/version-switcher.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-02/components/version-switcher.tsx
@@ -33,7 +33,7 @@ export function VersionSwitcher({
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <IconPlaceholder
                   lucide="GalleryVerticalEndIcon"
                   tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-02/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-02/page.tsx
index 8054c8496e..6dc6fa2762 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-02/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-02/page.tsx
@@ -19,7 +19,7 @@ export default function Page() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
           <SidebarTrigger className="-ml-1" />
           <Separator
             orientation="vertical"
@@ -41,7 +41,7 @@ export default function Page() {
           {Array.from({ length: 24 }).map((_, index) => (
             <div
               key={index}
-              className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
             />
           ))}
         </div>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-03/components/app-sidebar.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-03/components/app-sidebar.tsx
index f1099ccd48..b201e5ee1e 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-03/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-03/components/app-sidebar.tsx
@@ -166,7 +166,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <IconPlaceholder
                     lucide="GalleryVerticalEndIcon"
                     tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-03/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-03/page.tsx
index 0bc2e2cd54..bd636c2bd8 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-03/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-03/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-04/components/app-sidebar.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-04/components/app-sidebar.tsx
index 1a37b0a800..bb030bf6b4 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-04/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-04/components/app-sidebar.tsx
@@ -165,7 +165,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <IconPlaceholder
                     lucide="GalleryVerticalEndIcon"
                     tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-04/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-04/page.tsx
index 496e4f383b..8ace9bf55f 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-04/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-04/page.tsx
@@ -45,11 +45,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-05/components/app-sidebar.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-05/components/app-sidebar.tsx
index f03c07668f..c4be44685f 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-05/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-05/components/app-sidebar.tsx
@@ -172,7 +172,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <IconPlaceholder
                     lucide="GalleryVerticalEndIcon"
                     tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-05/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-05/page.tsx
index aa803a9957..9f1aae2981 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-05/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-05/page.tsx
@@ -39,11 +39,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-06/components/app-sidebar.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-06/components/app-sidebar.tsx
index 5729633868..04a6231640 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-06/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-06/components/app-sidebar.tsx
@@ -155,7 +155,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <IconPlaceholder
                     lucide="GalleryVerticalEndIcon"
                     tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
index 9612d4b925..98b5b8f7e7 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
@@ -21,7 +21,7 @@ export function SidebarOptInForm() {
         <form>
           <div className="grid gap-2.5">
             <SidebarInput type="email" placeholder="Email" />
-            <Button className="bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none">
+            <Button className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none">
               Subscribe
             </Button>
           </div>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-06/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-06/page.tsx
index 61f2a1a631..b6270bda86 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-06/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-06/page.tsx
@@ -39,11 +39,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-07/components/team-switcher.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-07/components/team-switcher.tsx
index 20c1e50a3d..03bcf9d9cd 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-07/components/team-switcher.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-07/components/team-switcher.tsx
@@ -44,7 +44,7 @@ export function TeamSwitcher({
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 {activeTeam.logo}
               </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
@@ -67,7 +67,7 @@ export function TeamSwitcher({
             side={isMobile ? "bottom" : "right"}
             sideOffset={4}
           >
-            <DropdownMenuLabel className="text-muted-foreground text-xs">
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
               Teams
             </DropdownMenuLabel>
             {teams.map((team, index) => (
@@ -95,7 +95,7 @@ export function TeamSwitcher({
                   className="size-4"
                 />
               </div>
-              <div className="text-muted-foreground font-medium">Add team</div>
+              <div className="font-medium text-muted-foreground">Add team</div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-07/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-07/page.tsx
index 2a0f50601b..114465df12 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-07/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-07/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-08/components/app-sidebar.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-08/components/app-sidebar.tsx
index 1be4137b7c..f9c81aa8fa 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-08/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-08/components/app-sidebar.tsx
@@ -221,7 +221,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <IconPlaceholder
                     lucide="TerminalIcon"
                     tabler="IconCommand"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-08/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-08/page.tsx
index 8dfb22684a..efd77c9eeb 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-08/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-08/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-09/components/app-sidebar.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-09/components/app-sidebar.tsx
index 584f54e02c..29b09cc268 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-09/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-09/components/app-sidebar.tsx
@@ -208,7 +208,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             <SidebarMenuItem>
               <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
                 <a href="#">
-                  <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                     <IconPlaceholder
                       lucide="TerminalIcon"
                       tabler="IconCommand"
@@ -271,7 +271,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       <Sidebar collapsible="none" className="hidden flex-1 md:flex">
         <SidebarHeader className="gap-3.5 border-b p-4">
           <div className="flex w-full items-center justify-between">
-            <div className="text-foreground text-base font-medium">
+            <div className="text-base font-medium text-foreground">
               {activeItem?.title}
             </div>
             <Label className="flex items-center gap-2 text-sm">
@@ -288,7 +288,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 <a
                   href="#"
                   key={mail.email}
-                  className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0"
+                  className="flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                 >
                   <div className="flex w-full items-center gap-2">
                     <span>{mail.name}</span>{" "}
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-09/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-09/page.tsx
index 88dc5250ff..a5339085f6 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-09/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-09/page.tsx
@@ -25,7 +25,7 @@ export default function Page() {
     >
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4">
+        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
           <SidebarTrigger className="-ml-1" />
           <Separator
             orientation="vertical"
@@ -47,7 +47,7 @@ export default function Page() {
           {Array.from({ length: 24 }).map((_, index) => (
             <div
               key={index}
-              className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
             />
           ))}
         </div>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-10/components/nav-actions.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-10/components/nav-actions.tsx
index 40f9af409f..22ca06fb86 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-10/components/nav-actions.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-10/components/nav-actions.tsx
@@ -195,7 +195,7 @@ export function NavActions() {
 
   return (
     <div className="flex items-center gap-2 text-sm">
-      <div className="text-muted-foreground hidden font-medium md:inline-block">
+      <div className="hidden font-medium text-muted-foreground md:inline-block">
         Edit Oct 08
       </div>
       <Button variant="ghost" size="icon" className="h-7 w-7">
@@ -212,7 +212,7 @@ export function NavActions() {
           <Button
             variant="ghost"
             size="icon"
-            className="data-[state=open]:bg-accent h-7 w-7"
+            className="h-7 w-7 data-[state=open]:bg-accent"
           >
             <IconPlaceholder
               lucide="MoreHorizontalIcon"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-10/components/nav-workspaces.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-10/components/nav-workspaces.tsx
index edf3a6762c..147ee5865a 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-10/components/nav-workspaces.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-10/components/nav-workspaces.tsx
@@ -47,7 +47,7 @@ export function NavWorkspaces({
                 </SidebarMenuButton>
                 <CollapsibleTrigger asChild>
                   <SidebarMenuAction
-                    className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
                     showOnHover
                   >
                     <IconPlaceholder
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-10/components/team-switcher.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-10/components/team-switcher.tsx
index 1e8ffeb22d..abbc8322a2 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-10/components/team-switcher.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-10/components/team-switcher.tsx
@@ -39,7 +39,7 @@ export function TeamSwitcher({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton className="w-fit px-1.5">
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
                 {activeTeam.logo}
               </div>
               <span className="truncate font-medium">{activeTeam.name}</span>
@@ -59,7 +59,7 @@ export function TeamSwitcher({
             side="bottom"
             sideOffset={4}
           >
-            <DropdownMenuLabel className="text-muted-foreground text-xs">
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
               Teams
             </DropdownMenuLabel>
             {teams.map((team, index) => (
@@ -77,7 +77,7 @@ export function TeamSwitcher({
             ))}
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2 p-2">
-              <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                 <IconPlaceholder
                   lucide="PlusIcon"
                   tabler="IconPlus"
@@ -87,7 +87,7 @@ export function TeamSwitcher({
                   className="size-4"
                 />
               </div>
-              <div className="text-muted-foreground font-medium">Add team</div>
+              <div className="font-medium text-muted-foreground">Add team</div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-10/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-10/page.tsx
index 0d90a6da05..4381d95c47 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-10/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-10/page.tsx
@@ -40,8 +40,8 @@ export default function Page() {
           </div>
         </header>
         <div className="flex flex-1 flex-col gap-4 px-4 py-10">
-          <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-          <div className="bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl" />
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-11/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-11/page.tsx
index 4e2f52a346..3bf855459e 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-11/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-11/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-12/components/app-sidebar.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-12/components/app-sidebar.tsx
index b79242c8f8..8c57f82827 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-12/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-12/components/app-sidebar.tsx
@@ -44,7 +44,7 @@ const data = {
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar {...props}>
-      <SidebarHeader className="border-sidebar-border h-16 border-b">
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
         <NavUser user={data.user} />
       </SidebarHeader>
       <SidebarContent>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-12/components/calendars.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-12/components/calendars.tsx
index 31ff002835..d6b8d0b5bf 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-12/components/calendars.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-12/components/calendars.tsx
@@ -37,7 +37,7 @@ export function Calendars({
             >
               <SidebarGroupLabel
                 asChild
-                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 <CollapsibleTrigger>
                   {calendar.name}{" "}
@@ -59,7 +59,7 @@ export function Calendars({
                         <SidebarMenuButton>
                           <div
                             data-active={index < 2}
-                            className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
                           >
                             <IconPlaceholder
                               lucide="CheckIcon"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-12/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-12/page.tsx
index 2b7856714a..c388cb0f94 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-12/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-12/page.tsx
@@ -17,7 +17,7 @@ export default function Page() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
           <SidebarTrigger className="-ml-1" />
           <Separator
             orientation="vertical"
@@ -34,7 +34,7 @@ export default function Page() {
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-5">
             {Array.from({ length: 20 }).map((_, i) => (
-              <div key={i} className="bg-muted/50 aspect-square rounded-xl" />
+              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
             ))}
           </div>
         </div>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-13/components/settings-dialog.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-13/components/settings-dialog.tsx
index 564ea8cf73..62c1955422 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-13/components/settings-dialog.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-13/components/settings-dialog.tsx
@@ -236,7 +236,7 @@ export function SettingsDialog() {
               {Array.from({ length: 10 }).map((_, i) => (
                 <div
                   key={i}
-                  className="bg-muted/50 aspect-video max-w-3xl rounded-xl"
+                  className="aspect-video max-w-3xl rounded-xl bg-muted/50"
                 />
               ))}
             </div>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-14/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-14/page.tsx
index 78aa6e3a70..c28730446f 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-14/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-14/page.tsx
@@ -33,11 +33,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
       <AppSidebar side="right" />
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-15/components/calendars.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-15/components/calendars.tsx
index fbf2b5c9b2..98ee52fd68 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-15/components/calendars.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-15/components/calendars.tsx
@@ -37,7 +37,7 @@ export function Calendars({
             >
               <SidebarGroupLabel
                 asChild
-                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 <CollapsibleTrigger>
                   {calendar.name}{" "}
@@ -59,7 +59,7 @@ export function Calendars({
                         <SidebarMenuButton>
                           <div
                             data-active={index < 2}
-                            className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border"
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
                           >
                             <IconPlaceholder
                               lucide="CheckIcon"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-15/components/nav-workspaces.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-15/components/nav-workspaces.tsx
index edf3a6762c..147ee5865a 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-15/components/nav-workspaces.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-15/components/nav-workspaces.tsx
@@ -47,7 +47,7 @@ export function NavWorkspaces({
                 </SidebarMenuButton>
                 <CollapsibleTrigger asChild>
                   <SidebarMenuAction
-                    className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
                     showOnHover
                   >
                     <IconPlaceholder
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-15/components/sidebar-right.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-15/components/sidebar-right.tsx
index 5d30138e92..c6e8ec3ad9 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-15/components/sidebar-right.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-15/components/sidebar-right.tsx
@@ -50,7 +50,7 @@ export function SidebarRight({
       className="sticky top-0 hidden h-svh border-l lg:flex"
       {...props}
     >
-      <SidebarHeader className="border-sidebar-border h-16 border-b">
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
         <NavUser user={data.user} />
       </SidebarHeader>
       <SidebarContent>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-15/components/team-switcher.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-15/components/team-switcher.tsx
index 1e8ffeb22d..abbc8322a2 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-15/components/team-switcher.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-15/components/team-switcher.tsx
@@ -39,7 +39,7 @@ export function TeamSwitcher({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton className="w-fit px-1.5">
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
                 {activeTeam.logo}
               </div>
               <span className="truncate font-medium">{activeTeam.name}</span>
@@ -59,7 +59,7 @@ export function TeamSwitcher({
             side="bottom"
             sideOffset={4}
           >
-            <DropdownMenuLabel className="text-muted-foreground text-xs">
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
               Teams
             </DropdownMenuLabel>
             {teams.map((team, index) => (
@@ -77,7 +77,7 @@ export function TeamSwitcher({
             ))}
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2 p-2">
-              <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                 <IconPlaceholder
                   lucide="PlusIcon"
                   tabler="IconPlus"
@@ -87,7 +87,7 @@ export function TeamSwitcher({
                   className="size-4"
                 />
               </div>
-              <div className="text-muted-foreground font-medium">Add team</div>
+              <div className="font-medium text-muted-foreground">Add team</div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-15/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-15/page.tsx
index 210ddb6135..75299444e9 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-15/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-15/page.tsx
@@ -18,7 +18,7 @@ export default function Page() {
     <SidebarProvider>
       <SidebarLeft />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2">
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
           <div className="flex flex-1 items-center gap-2 px-3">
             <SidebarTrigger />
             <Separator
@@ -37,8 +37,8 @@ export default function Page() {
           </div>
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
-          <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-          <div className="bg-muted/50 mx-auto h-screen w-full max-w-3xl rounded-xl" />
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-screen w-full max-w-3xl rounded-xl bg-muted/50" />
         </div>
       </SidebarInset>
       <SidebarRight />
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-16/components/app-sidebar.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-16/components/app-sidebar.tsx
index e9c839066d..c3b8e7f5fc 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-16/components/app-sidebar.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-16/components/app-sidebar.tsx
@@ -224,7 +224,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <IconPlaceholder
                     lucide="TerminalIcon"
                     tabler="IconCommand"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-16/components/site-header.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-16/components/site-header.tsx
index 7c06091023..a357cff58c 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-16/components/site-header.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-16/components/site-header.tsx
@@ -18,7 +18,7 @@ export function SiteHeader() {
   const { toggleSidebar } = useSidebar()
 
   return (
-    <header className="bg-background sticky top-0 z-50 flex w-full items-center border-b">
+    <header className="sticky top-0 z-50 flex w-full items-center border-b bg-background">
       <div className="flex h-(--header-height) w-full items-center gap-2 px-4">
         <Button
           className="h-8 w-8"
diff --git a/apps/v4/registry/bases/radix/blocks/sidebar-16/page.tsx b/apps/v4/registry/bases/radix/blocks/sidebar-16/page.tsx
index 79bcee0a3d..1193801697 100644
--- a/apps/v4/registry/bases/radix/blocks/sidebar-16/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/sidebar-16/page.tsx
@@ -19,11 +19,11 @@ export default function Page() {
           <SidebarInset>
             <div className="flex flex-1 flex-col gap-4 p-4">
               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div className="bg-muted/50 aspect-video rounded-xl" />
-                <div className="bg-muted/50 aspect-video rounded-xl" />
-                <div className="bg-muted/50 aspect-video rounded-xl" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
               </div>
-              <div className="bg-muted/50 min-h-screen flex-1 rounded-xl md:min-h-min" />
+              <div className="min-h-screen flex-1 rounded-xl bg-muted/50 md:min-h-min" />
             </div>
           </SidebarInset>
         </div>
diff --git a/apps/v4/registry/bases/radix/blocks/signup-02/components/signup-form.tsx b/apps/v4/registry/bases/radix/blocks/signup-02/components/signup-form.tsx
index a5230d8783..976f263059 100644
--- a/apps/v4/registry/bases/radix/blocks/signup-02/components/signup-form.tsx
+++ b/apps/v4/registry/bases/radix/blocks/signup-02/components/signup-form.tsx
@@ -18,7 +18,7 @@ export function SignupForm({
       <FieldGroup>
         <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-2xl font-bold">Create your account</h1>
-          <p className="text-muted-foreground text-sm text-balance">
+          <p className="text-sm text-balance text-muted-foreground">
             Fill in the form below to create your account
           </p>
         </div>
diff --git a/apps/v4/registry/bases/radix/blocks/signup-02/page.tsx b/apps/v4/registry/bases/radix/blocks/signup-02/page.tsx
index 5f80072c2c..77bb7730a5 100644
--- a/apps/v4/registry/bases/radix/blocks/signup-02/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/signup-02/page.tsx
@@ -9,7 +9,7 @@ export default function SignupPage() {
       <div className="flex flex-col gap-4 p-6 md:p-10">
         <div className="flex justify-center gap-2 md:justify-start">
           <a href="#" className="flex items-center gap-2 font-medium">
-            <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+            <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
               <IconPlaceholder
                 lucide="GalleryVerticalEndIcon"
                 tabler="IconLayoutRows"
@@ -28,7 +28,7 @@ export default function SignupPage() {
           </div>
         </div>
       </div>
-      <div className="bg-muted relative hidden lg:block">
+      <div className="relative hidden bg-muted lg:block">
         <img
           src="/placeholder.svg"
           alt="Image"
diff --git a/apps/v4/registry/bases/radix/blocks/signup-03/page.tsx b/apps/v4/registry/bases/radix/blocks/signup-03/page.tsx
index b4c12a0de5..a3f039ce83 100644
--- a/apps/v4/registry/bases/radix/blocks/signup-03/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/signup-03/page.tsx
@@ -5,10 +5,10 @@ import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
 
 export default function SignupPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
         <a href="#" className="flex items-center gap-2 self-center font-medium">
-          <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+          <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
             <IconPlaceholder
               lucide="GalleryVerticalEndIcon"
               tabler="IconLayoutRows"
diff --git a/apps/v4/registry/bases/radix/blocks/signup-04/components/signup-form.tsx b/apps/v4/registry/bases/radix/blocks/signup-04/components/signup-form.tsx
index 468bf60fdf..b89f191549 100644
--- a/apps/v4/registry/bases/radix/blocks/signup-04/components/signup-form.tsx
+++ b/apps/v4/registry/bases/radix/blocks/signup-04/components/signup-form.tsx
@@ -22,7 +22,7 @@ export function SignupForm({
             <FieldGroup>
               <div className="flex flex-col items-center gap-2 text-center">
                 <h1 className="text-2xl font-bold">Create your account</h1>
-                <p className="text-muted-foreground text-sm text-balance">
+                <p className="text-sm text-balance text-muted-foreground">
                   Enter your email below to create your account
                 </p>
               </div>
@@ -96,7 +96,7 @@ export function SignupForm({
               </FieldDescription>
             </FieldGroup>
           </form>
-          <div className="bg-muted relative hidden md:block">
+          <div className="relative hidden bg-muted md:block">
             <img
               src="/placeholder.svg"
               alt="Image"
diff --git a/apps/v4/registry/bases/radix/blocks/signup-04/page.tsx b/apps/v4/registry/bases/radix/blocks/signup-04/page.tsx
index a887338122..732ffe7eb3 100644
--- a/apps/v4/registry/bases/radix/blocks/signup-04/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/signup-04/page.tsx
@@ -2,7 +2,7 @@ import { SignupForm } from "@/registry/bases/radix/blocks/signup-04/components/s
 
 export default function SignupPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
       <div className="w-full max-w-sm md:max-w-4xl">
         <SignupForm />
       </div>
diff --git a/apps/v4/registry/bases/radix/blocks/signup-05/page.tsx b/apps/v4/registry/bases/radix/blocks/signup-05/page.tsx
index 83b0927a44..0318c94fbc 100644
--- a/apps/v4/registry/bases/radix/blocks/signup-05/page.tsx
+++ b/apps/v4/registry/bases/radix/blocks/signup-05/page.tsx
@@ -2,7 +2,7 @@ import { SignupForm } from "@/registry/bases/radix/blocks/signup-05/components/s
 
 export default function SignupPage() {
   return (
-    <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
       <div className="w-full max-w-sm">
         <SignupForm />
       </div>
diff --git a/apps/v4/registry/bases/radix/blocks/vercel.tsx b/apps/v4/registry/bases/radix/blocks/vercel.tsx
deleted file mode 100644
index 1b262ab405..0000000000
--- a/apps/v4/registry/bases/radix/blocks/vercel.tsx
+++ /dev/null
@@ -1,824 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { format } from "date-fns"
-import { type DateRange } from "react-day-picker"
-import { Area, AreaChart } from "recharts"
-
-import {
-  Example,
-  ExampleWrapper,
-} from "@/registry/bases/radix/components/example"
-import { Alert, AlertDescription } from "@/registry/bases/radix/ui/alert"
-import { Badge } from "@/registry/bases/radix/ui/badge"
-import { Button } from "@/registry/bases/radix/ui/button"
-import { Calendar } from "@/registry/bases/radix/ui/calendar"
-import {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/registry/bases/radix/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/registry/bases/radix/ui/chart"
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/registry/bases/radix/ui/dialog"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/registry/bases/radix/ui/dropdown-menu"
-import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyTitle,
-} from "@/registry/bases/radix/ui/empty"
-import { Field, FieldGroup, FieldLabel } from "@/registry/bases/radix/ui/field"
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupInput,
-} from "@/registry/bases/radix/ui/input-group"
-import {
-  Item,
-  ItemActions,
-  ItemContent,
-  ItemDescription,
-  ItemFooter,
-  ItemGroup,
-  ItemMedia,
-  ItemSeparator,
-  ItemTitle,
-} from "@/registry/bases/radix/ui/item"
-import {
-  NativeSelect,
-  NativeSelectOption,
-} from "@/registry/bases/radix/ui/native-select"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/registry/bases/radix/ui/popover"
-import { Textarea } from "@/registry/bases/radix/ui/textarea"
-import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
-
-export default function VercelBlock() {
-  return (
-    <ExampleWrapper>
-      <DeploymentFilter />
-      <UsageCard />
-      <ObservabilityCard />
-      <BillingList />
-      <AnomalyAlert />
-      <ActivateAgentDialog />
-      <FeedbackForm />
-      <AnalyticsCard />
-    </ExampleWrapper>
-  )
-}
-
-const items = [
-  {
-    name: "Edge Requests",
-    value: "$1.83K",
-    percentage: 67.34,
-  },
-  {
-    name: "Fast Data Transfer",
-    percentage: 52.18,
-    value: "$952.51",
-  },
-  {
-    name: "Monitoring data points",
-    percentage: 89.42,
-    value: "$901.20",
-  },
-  {
-    name: "Web Analytics Events",
-    percentage: 45.67,
-    value: "$603.71",
-  },
-  {
-    name: "Edge Request CPU Duration",
-    percentage: 23.91,
-    value: "$4.65",
-  },
-  {
-    name: "Fast Origin Transfer",
-    percentage: 38.75,
-    value: "$3.85",
-  },
-  {
-    name: "ISR Reads",
-    percentage: 71.24,
-    value: "$2.86",
-  },
-  {
-    name: "Function Invocations",
-    percentage: 15.83,
-    value: "$0.60",
-  },
-  {
-    name: "ISR Writes",
-    percentage: 26.23,
-    value: "524.52K / 2M",
-  },
-  {
-    name: "Function Duration",
-    percentage: 5.11,
-    value: "5.11 GB Hrs / 1K GB Hrs",
-  },
-]
-
-function UsageCard() {
-  return (
-    <Example title="Usage" className="items-center">
-      <Card className="w-full max-w-sm gap-4">
-        <CardHeader>
-          <CardTitle className="px-1 text-sm">
-            5 days remaining in cycle
-          </CardTitle>
-        </CardHeader>
-        <CardContent>
-          <ItemGroup className="gap-0">
-            {items.map((item) => (
-              <Item
-                key={item.name}
-                size="xs"
-                asChild
-                className="px-0 group-hover/item-group:bg-transparent"
-              >
-                <a href="#">
-                  <ItemMedia variant="icon" className="text-primary">
-                    <CircularGauge percentage={item.percentage} />
-                  </ItemMedia>
-                  <ItemContent className="inline-block truncate">
-                    <ItemTitle className="inline">{item.name}</ItemTitle>
-                  </ItemContent>
-                  <ItemActions>
-                    <span className="text-muted-foreground font-mono text-xs font-medium tabular-nums">
-                      {item.value}
-                    </span>
-                  </ItemActions>
-                </a>
-              </Item>
-            ))}
-          </ItemGroup>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-
-function AnomalyAlert() {
-  return (
-    <Example title="Anomaly Alert" className="items-center justify-center">
-      <Card className="w-full max-w-xs">
-        <CardContent className="p-6">
-          <Empty className="mx-auto p-0">
-            <EmptyHeader>
-              <EmptyTitle>Get alerted for anomalies</EmptyTitle>
-              <EmptyDescription>
-                Automatically monitor your projects for anomalies and get
-                notified.
-              </EmptyDescription>
-            </EmptyHeader>
-            <EmptyContent>
-              <Button>Upgrade to Observability Plus</Button>
-            </EmptyContent>
-          </Empty>
-        </CardContent>
-      </Card>
-    </Example>
-  )
-}
-
-const environments = [
-  "All Environments",
-  "Production",
-  "Preview",
-  "Development",
-  "Staging",
-  "Test",
-  "Other",
-]
-
-const statuses = [
-  { name: "Ready", color: "oklch(0.72 0.19 150)" },
-  { name: "Error", color: "oklch(0.64 0.21 25)" },
-  { name: "Building", color: "oklch(0.77 0.16 70)" },
-  { name: "Queued", color: "oklch(0.72 0.00 0)" },
-  { name: "Provisioning", color: "oklch(0.72 0.00 0)" },
-  { name: "Canceled", color: "oklch(0.72 0.00 0)" },
-]
-
-function DeploymentFilter() {
-  const [selectedEnvironment, setSelectedEnvironment] = React.useState(
-    environments[0]
-  )
-  const [selectedStatuses, setSelectedStatuses] = React.useState<Set<string>>(
-    new Set(statuses.slice(0, 5).map((s) => s.name))
-  )
-  const [dateRange, setDateRange] = React.useState<DateRange | undefined>()
-
-  const toggleStatus = (statusName: string) => {
-    setSelectedStatuses((prev) => {
-      const next = new Set(prev)
-      if (next.has(statusName)) {
-        next.delete(statusName)
-      } else {
-        next.add(statusName)
-      }
-      return next
-    })
-  }
-
-  return (
-    <Example title="Deployment Filter" containerClassName="col-span-full">
-      <div className="flex w-full flex-wrap items-center gap-2 *:w-full lg:*:w-auto">
-        <Popover>
-          <PopoverTrigger asChild>
-            <Button variant="outline" className="justify-start">
-              <IconPlaceholder
-                lucide="CalendarIcon"
-                tabler="IconCalendar"
-                hugeicons="Calendar01Icon"
-                phosphor="CalendarIcon"
-                remixicon="RiCalendarLine"
-                data-icon="inline-start"
-                className="text-muted-foreground"
-              />
-              {dateRange?.from ? (
-                dateRange.to ? (
-                  <>
-                    {format(dateRange.from, "LLL dd, y")} -{" "}
-                    {format(dateRange.to, "LLL dd, y")}
-                  </>
-                ) : (
-                  format(dateRange.from, "LLL dd, y")
-                )
-              ) : (
-                "Select Date Range"
-              )}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent className="w-auto p-0" align="start">
-            <Calendar
-              mode="range"
-              defaultMonth={dateRange?.from}
-              selected={dateRange}
-              onSelect={setDateRange}
-              numberOfMonths={2}
-            />
-          </PopoverContent>
-        </Popover>
-        <InputGroup className="lg:ml-auto lg:max-w-72">
-          <InputGroupAddon>
-            <IconPlaceholder
-              lucide="Search"
-              tabler="IconSearch"
-              hugeicons="Search01Icon"
-              phosphor="MagnifyingGlassIcon"
-              remixicon="RiSearchLine"
-            />
-          </InputGroupAddon>
-          <InputGroupInput placeholder="All Authors..." />
-          <InputGroupAddon align="inline-end">
-            <IconPlaceholder
-              lucide="ChevronDownIcon"
-              tabler="IconChevronDown"
-              hugeicons="ArrowDown01Icon"
-              phosphor="CaretDownIcon"
-              remixicon="RiArrowDownSLine"
-              className="text-muted-foreground"
-            />
-          </InputGroupAddon>
-        </InputGroup>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="justify-between">
-              {selectedEnvironment}
-              <IconPlaceholder
-                lucide="ChevronDownIcon"
-                tabler="IconChevronDown"
-                hugeicons="ArrowDown01Icon"
-                phosphor="CaretDownIcon"
-                remixicon="RiArrowDownSLine"
-                data-icon="inline-end"
-                className="text-muted-foreground"
-              />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56" align="end">
-            {environments.map((environment) => (
-              <DropdownMenuItem
-                key={environment}
-                onSelect={() => setSelectedEnvironment(environment)}
-                data-active={selectedEnvironment === environment}
-              >
-                {environment}
-                <IconPlaceholder
-                  lucide="CheckIcon"
-                  tabler="IconCheck"
-                  hugeicons="Tick02Icon"
-                  phosphor="CheckIcon"
-                  remixicon="RiCheckLine"
-                  className="ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100"
-                />
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="justify-between">
-              <div className="flex items-center -space-x-0.5">
-                {statuses.map((status) => (
-                  <div
-                    key={status.name}
-                    style={
-                      {
-                        "--color": status.color,
-                      } as React.CSSProperties
-                    }
-                    className="size-2.5 shrink-0 rounded-full border grayscale transition-all data-[active=true]:border-(--color) data-[active=true]:bg-(--color) data-[active=true]:grayscale-0"
-                    data-active={selectedStatuses.has(status.name)}
-                  />
-                ))}
-              </div>
-              Status {selectedStatuses.size}/{statuses.length}
-              <IconPlaceholder
-                lucide="ChevronDownIcon"
-                tabler="IconChevronDown"
-                hugeicons="ArrowDown01Icon"
-                phosphor="CaretDownIcon"
-                remixicon="RiArrowDownSLine"
-                data-icon="inline-end"
-                className="text-muted-foreground ml-auto"
-              />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="w-56" align="end">
-            {statuses.map((status) => {
-              const isSelected = selectedStatuses.has(status.name)
-              return (
-                <DropdownMenuItem
-                  key={status.name}
-                  onSelect={() => toggleStatus(status.name)}
-                  data-active={isSelected}
-                  style={
-                    {
-                      "--color": status.color,
-                    } as React.CSSProperties
-                  }
-                >
-                  <div className="flex items-center gap-2">
-                    <div className="size-2 rounded-full bg-(--color)" />
-                    {status.name}
-                  </div>
-                  <IconPlaceholder
-                    lucide="CheckIcon"
-                    tabler="IconCheck"
-                    hugeicons="Tick02Icon"
-                    phosphor="CheckIcon"
-                    remixicon="RiCheckLine"
-                    className="ml-auto opacity-0 group-data-[active=true]/dropdown-menu-item:opacity-100"
-                  />
-                </DropdownMenuItem>
-              )
-            })}
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-    </Example>
-  )
-}
-
-const billingItems = [
-  {
-    month: "November 2025",
-    invoiceDate: new Date(2025, 10, 5),
-    amount: "$10.00",
-    status: "Paid" as const,
-  },
-  {
-    month: "October 2025",
-    invoiceDate: new Date(2025, 9, 4),
-    amount: "$10.00",
-    status: "Paid" as const,
-  },
-  {
-    month: "September 2025",
-    invoiceDate: new Date(2025, 8, 4),
-    amount: "$10.00",
-    status: "Paid" as const,
-  },
-]
-
-function BillingList() {
-  return (
-    <Example
-      title="Billing"
-      className="items-center lg:p-16"
-      containerClassName="col-span-full"
-    >
-      <ItemGroup className="max-w-7xl gap-0 rounded-lg border">
-        {billingItems.map((item, index) => (
-          <React.Fragment key={item.month}>
-            <Item className="grid grid-cols-[1fr_auto] lg:grid-cols-[2fr_1fr_1fr_auto]">
-              <ItemContent>
-                <ItemTitle>
-                  {item.month}
-                  <Badge
-                    variant="secondary"
-                    className="bg-green-100 text-green-700 hover:bg-green-100"
-                  >
-                    {item.status}
-                  </Badge>
-                </ItemTitle>
-                <ItemDescription>
-                  Infrastructure usage & Vercel platform
-                </ItemDescription>
-              </ItemContent>
-              <ItemContent className="hidden lg:flex">
-                <ItemTitle>Total Due</ItemTitle>
-                <ItemDescription>{item.amount}</ItemDescription>
-              </ItemContent>
-              <ItemContent className="hidden lg:flex">
-                <ItemDescription>
-                  Invoiced {format(item.invoiceDate, "d MMM yyyy")}
-                </ItemDescription>
-              </ItemContent>
-              <ItemActions>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon">
-                      <IconPlaceholder
-                        lucide="MoreHorizontalIcon"
-                        tabler="IconDots"
-                        hugeicons="MoreHorizontalCircle01Icon"
-                        phosphor="DotsThreeOutlineIcon"
-                        remixicon="RiMoreLine"
-                      />
-                      <span className="sr-only">More options</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem>View invoice</DropdownMenuItem>
-                    <DropdownMenuItem>Download PDF</DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem>Contact support</DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </ItemActions>
-              <ItemFooter className="col-span-full w-full border-t pt-4 lg:hidden">
-                <ItemContent>
-                  <ItemTitle>Total Due</ItemTitle>
-                  <ItemDescription>{item.amount}</ItemDescription>
-                </ItemContent>
-                <ItemContent>
-                  <ItemDescription>
-                    Invoiced {format(item.invoiceDate, "d MMM yyyy")}
-                  </ItemDescription>
-                </ItemContent>
-              </ItemFooter>
-            </Item>
-            {index !== billingItems.length - 1 && (
-              <ItemSeparator className="my-0" />
-            )}
-          </React.Fragment>
-        ))}
-      </ItemGroup>
-    </Example>
-  )
-}
-
-function CircularGauge({ percentage }: { percentage: number }) {
-  const normalizedPercentage = Math.min(Math.max(percentage, 0), 100)
-  const circumference = 2 * Math.PI * 42.5
-  const strokePercent = (normalizedPercentage / 100) * circumference
-
-  return (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      height="16"
-      width="16"
-      strokeWidth="2"
-      viewBox="0 0 100 100"
-      className="-rotate-90"
-    >
-      <circle
-        cx="50"
-        cy="50"
-        r="42.5"
-        strokeWidth="12"
-        strokeDashoffset="0"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="opacity-20"
-        stroke="currentColor"
-        style={{
-          strokeDasharray: `${circumference} ${circumference}`,
-        }}
-      />
-      <circle
-        cx="50"
-        cy="50"
-        r="42.5"
-        strokeWidth="12"
-        strokeDashoffset="0"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        stroke="currentColor"
-        className="transition-all duration-300"
-        style={{
-          strokeDasharray: `${strokePercent} ${circumference}`,
-        }}
-      />
-    </svg>
-  )
-}
-
-const agentFeatures = [
-  {
-    id: "code-reviews",
-    content: (
-      <>
-        <strong>Code reviews</strong> with full codebase context to catch{" "}
-        <strong>hard-to-find</strong> bugs. bugs.
-      </>
-    ),
-  },
-  {
-    id: "code-suggestions",
-    content: (
-      <>
-        <strong>Code suggestions</strong> validated in sandboxes before you
-        merge.
-      </>
-    ),
-  },
-  {
-    id: "root-cause",
-    content: (
-      <>
-        <strong>Root-cause analysis</strong> for production issues with
-        deployment context.{" "}
-        <Badge
-          variant="secondary"
-          className="bg-blue-100 text-blue-700 hover:bg-blue-100"
-        >
-          Requires Observability Plus
-        </Badge>
-      </>
-    ),
-  },
-]
-
-function ActivateAgentDialog() {
-  return (
-    <Example title="Activate Agent" className="items-center justify-center">
-      <Dialog>
-        <DialogTrigger asChild>
-          <Button variant="outline">Activate Agent</Button>
-        </DialogTrigger>
-        <DialogContent showCloseButton={false}>
-          <DialogHeader>
-            <DialogTitle>Ship faster & safer with Vercel Agent</DialogTitle>
-            <DialogDescription>
-              Your use is subject to Vercel&apos;s{" "}
-              <a href="#">Public Beta Agreement</a> and{" "}
-              <a href="#">AI Product Terms</a>.
-            </DialogDescription>
-          </DialogHeader>
-          <div className="no-scrollbar flex max-h-[50vh] flex-col gap-4 overflow-y-auto">
-            <ItemGroup className="gap-0 pr-2">
-              {agentFeatures.map((feature) => (
-                <Item key={feature.id} size="xs" className="px-0">
-                  <ItemMedia variant="icon" className="self-start">
-                    <IconPlaceholder
-                      lucide="CheckCircle2Icon"
-                      tabler="IconCircleCheckFilled"
-                      hugeicons="CheckmarkCircle02Icon"
-                      phosphor="CheckCircleIcon"
-                      remixicon="RiCheckboxCircleLine"
-                      className="fill-primary text-primary-foreground size-5"
-                    />
-                  </ItemMedia>
-                  <ItemContent>
-                    <ItemTitle className="text-muted-foreground *:[strong]:text-foreground inline leading-relaxed font-normal *:[strong]:font-medium">
-                      {feature.content}
-                    </ItemTitle>
-                  </ItemContent>
-                </Item>
-              ))}
-            </ItemGroup>
-            <Alert className="hidden sm:grid">
-              <IconPlaceholder
-                lucide="CircleDollarSignIcon"
-                hugeicons="DollarCircleIcon"
-                tabler="IconCoin"
-                phosphor="CurrencyCircleDollarIcon"
-                remixicon="RiMoneyDollarCircleLine"
-              />
-              <AlertDescription>
-                Pro teams get $100 in Vercel Agent trial credit for 2 weeks.
-              </AlertDescription>
-            </Alert>
-          </div>
-          <DialogFooter>
-            <DialogClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DialogClose>
-            <Button>Enable with $100 credits</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </Example>
-  )
-}
-
-function ObservabilityCard() {
-  return (
-    <Example title="Observability" className="items-center justify-center">
-      <Card className="relative w-full max-w-md overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
-        <img
-          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Photo by mymind on Unsplash"
-          title="Photo by mymind on Unsplash"
-          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
-        />
-        <CardHeader>
-          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
-          <CardDescription>
-            Switch to the improved way to explore your data, with natural
-            language. Monitoring will no longer be available on the Pro plan in
-            November, 2025
-          </CardDescription>
-        </CardHeader>
-        <CardFooter>
-          <Button>
-            Create Query{" "}
-            <IconPlaceholder
-              lucide="PlusIcon"
-              tabler="IconPlus"
-              hugeicons="PlusSignIcon"
-              phosphor="PlusIcon"
-              remixicon="RiAddLine"
-              data-icon="inline-end"
-            />
-          </Button>
-          <Badge variant="secondary" className="ml-auto">
-            Warning
-          </Badge>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-function FeedbackForm() {
-  return (
-    <Example title="Feedback Form" className="items-center justify-center">
-      <Card className="w-full max-w-sm" size="sm">
-        <CardContent>
-          <form id="feedback-form">
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="topic">Topic</FieldLabel>
-                <NativeSelect id="topic">
-                  <NativeSelectOption value="">
-                    Select a topic
-                  </NativeSelectOption>
-                  <NativeSelectOption value="ai">AI</NativeSelectOption>
-                  <NativeSelectOption value="accounts-and-access-controls">
-                    Accounts and Access Controls
-                  </NativeSelectOption>
-                  <NativeSelectOption value="billing">
-                    Billing
-                  </NativeSelectOption>
-                  <NativeSelectOption value="cdn">
-                    CDN (Firewall, Caching)
-                  </NativeSelectOption>
-                  <NativeSelectOption value="ci-cd">
-                    CI/CD (Builds, Deployments, Environment Variables)
-                  </NativeSelectOption>
-                  <NativeSelectOption value="dashboard-interface">
-                    Dashboard Interface (Navigation, UI Issues)
-                  </NativeSelectOption>
-                  <NativeSelectOption value="domains">
-                    Domains
-                  </NativeSelectOption>
-                  <NativeSelectOption value="frameworks">
-                    Frameworks
-                  </NativeSelectOption>
-                  <NativeSelectOption value="marketplace-and-integrations">
-                    Marketplace and Integrations
-                  </NativeSelectOption>
-                  <NativeSelectOption value="observability">
-                    Observability (Observability, Logs, Monitoring)
-                  </NativeSelectOption>
-                  <NativeSelectOption value="storage">
-                    Storage
-                  </NativeSelectOption>
-                </NativeSelect>
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="feedback">Feedback</FieldLabel>
-                <Textarea
-                  id="feedback"
-                  placeholder="Your feedback helps us improve..."
-                />
-              </Field>
-            </FieldGroup>
-          </form>
-        </CardContent>
-        <CardFooter>
-          <Button type="submit" form="feedback-form">
-            Submit
-          </Button>
-        </CardFooter>
-      </Card>
-    </Example>
-  )
-}
-
-const chartData = [
-  { month: "January", visitors: 186 },
-  { month: "February", visitors: 305 },
-  { month: "March", visitors: 237 },
-  { month: "April", visitors: 73 },
-  { month: "May", visitors: 209 },
-  { month: "June", visitors: 214 },
-]
-
-const chartConfig = {
-  visitors: {
-    label: "Visitors",
-    color: "var(--chart-1)",
-  },
-} satisfies ChartConfig
-
-function AnalyticsCard() {
-  return (
-    <Example title="Analytics Card" className="justify-center">
-      <Card className="mx-auto w-full max-w-sm data-[size=sm]:pb-0" size="sm">
-        <CardHeader>
-          <CardTitle>Analytics</CardTitle>
-          <CardDescription>
-            418.2K Visitors <Badge>+10%</Badge>
-          </CardDescription>
-          <CardAction>
-            <Button variant="outline" size="sm">
-              View Analytics
-            </Button>
-          </CardAction>
-        </CardHeader>
-        <ChartContainer config={chartConfig} className="aspect-[1/0.35]">
-          <AreaChart
-            accessibilityLayer
-            data={chartData}
-            margin={{
-              left: 0,
-              right: 0,
-            }}
-          >
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="line" hideLabel />}
-              defaultIndex={2}
-            />
-            <Area
-              dataKey="visitors"
-              type="linear"
-              fill="var(--color-visitors)"
-              fillOpacity={0.4}
-              stroke="var(--color-visitors)"
-            />
-          </AreaChart>
-        </ChartContainer>
-      </Card>
-    </Example>
-  )
-}
diff --git a/apps/v4/registry/bases/radix/components/example.tsx b/apps/v4/registry/bases/radix/components/example.tsx
index 5b04d9759f..559bcedab2 100644
--- a/apps/v4/registry/bases/radix/components/example.tsx
+++ b/apps/v4/registry/bases/radix/components/example.tsx
@@ -2,7 +2,7 @@ import { cn } from "@/registry/bases/radix/lib/utils"
 
 function ExampleWrapper({ className, ...props }: React.ComponentProps<"div">) {
   return (
-    <div className="bg-background w-full">
+    <div className="w-full bg-muted dark:bg-background">
       <div
         data-slot="example-wrapper"
         className={cn(
@@ -35,14 +35,14 @@ function Example({
       {...props}
     >
       {title && (
-        <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
+        <div className="px-1.5 py-2 text-xs font-medium text-muted-foreground">
           {title}
         </div>
       )}
       <div
         data-slot="example-content"
         className={cn(
-          "bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full",
+          "flex min-w-0 flex-1 flex-col items-start gap-6 rounded-xl bg-card p-12 text-foreground *:[div:not([class*='w-'])]:w-full",
           className
         )}
       >
diff --git a/apps/v4/registry/bases/radix/examples/_registry.ts b/apps/v4/registry/bases/radix/examples/_registry.ts
index 0a2d9f0608..fff17ff2e7 100644
--- a/apps/v4/registry/bases/radix/examples/_registry.ts
+++ b/apps/v4/registry/bases/radix/examples/_registry.ts
@@ -854,6 +854,33 @@ export const examples: Registry["items"] = [
       },
     ],
   },
+  {
+    name: "demo",
+    title: "Demo",
+    type: "registry:example",
+    registryDependencies: [
+      "alert-dialog",
+      "badge",
+      "button",
+      "button-group",
+      "card",
+      "checkbox",
+      "dropdown-menu",
+      "field",
+      "input-group",
+      "item",
+      "radio-group",
+      "slider",
+      "switch",
+      "textarea",
+    ],
+    files: [
+      {
+        path: "examples/demo.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "component-example",
     title: "Example",
diff --git a/apps/v4/registry/bases/radix/examples/accordion-example.tsx b/apps/v4/registry/bases/radix/examples/accordion-example.tsx
index ed464ce7a1..a8301a0e3f 100644
--- a/apps/v4/registry/bases/radix/examples/accordion-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/accordion-example.tsx
@@ -135,18 +135,18 @@ function AccordionWithBorders() {
       <Accordion
         type="single"
         collapsible
-        className="style-lyra:gap-2 style-vega:gap-2 style-nova:gap-2 mx-auto max-w-lg"
+        className="mx-auto max-w-lg style-vega:gap-2 style-nova:gap-2 style-lyra:gap-2"
       >
         {items.map((item) => (
           <AccordionItem
             key={item.value}
             value={item.value}
-            className="style-vega:border style-nova:border style-lyra:border style-vega:rounded-lg style-nova:rounded-lg"
+            className="style-vega:rounded-lg style-vega:border style-nova:rounded-lg style-nova:border style-lyra:border"
           >
-            <AccordionTrigger className="style-nova:px-2.5 style-nova:text-sm style-vega:text-sm style-maia:text-sm style-mira:text-xs style-lyra:px-2 style-lyra:text-xs style-vega:px-4 font-medium">
+            <AccordionTrigger className="font-medium style-vega:px-4 style-vega:text-sm style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:text-sm style-mira:text-xs">
               {item.trigger}
             </AccordionTrigger>
-            <AccordionContent className="text-muted-foreground style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-vega:px-4 style-maia:px-0 style-mira:px-0">
+            <AccordionContent className="text-muted-foreground style-vega:px-4 style-nova:px-2.5 style-nova:text-sm style-lyra:px-2 style-lyra:text-xs style-maia:px-0 style-mira:px-0">
               {item.content}
             </AccordionContent>
           </AccordionItem>
@@ -322,19 +322,19 @@ function AccordionWithDisabled() {
       <Accordion
         type="single"
         collapsible
-        className="style-lyra:rounded-none style-vega:rounded-lg style-nova:rounded-lg style-maia:rounded-lg style-mira:rounded-lg mx-auto max-w-lg overflow-hidden border"
+        className="mx-auto max-w-lg overflow-hidden border style-vega:rounded-lg style-nova:rounded-lg style-lyra:rounded-none style-maia:rounded-lg style-mira:rounded-lg"
       >
         {items.map((item) => (
           <AccordionItem
             key={item.value}
             value={item.value}
             disabled={item.disabled}
-            className="data-open:bg-muted/50 p-1"
+            className="p-1 data-open:bg-muted/50"
           >
-            <AccordionTrigger className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            <AccordionTrigger className="style-vega:px-4 style-nova:px-2.5 style-lyra:px-2">
               {item.trigger}
             </AccordionTrigger>
-            <AccordionContent className="style-nova:px-2.5 style-lyra:px-2 style-vega:px-4">
+            <AccordionContent className="style-vega:px-4 style-nova:px-2.5 style-lyra:px-2">
               {item.content}
             </AccordionContent>
           </AccordionItem>
diff --git a/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx b/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx
index eb4716ff31..91c01024f7 100644
--- a/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx
@@ -20,7 +20,7 @@ export default function AspectRatioExample() {
 function AspectRatio16x9() {
   return (
     <Example title="16:9" className="items-center justify-center">
-      <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+      <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
@@ -35,7 +35,7 @@ function AspectRatio16x9() {
 function AspectRatio1x1() {
   return (
     <Example title="1:1" className="items-start">
-      <AspectRatio ratio={1 / 1} className="bg-muted rounded-lg">
+      <AspectRatio ratio={1 / 1} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
@@ -50,7 +50,7 @@ function AspectRatio1x1() {
 function AspectRatio9x16() {
   return (
     <Example title="9:16" className="items-center justify-center">
-      <AspectRatio ratio={9 / 16} className="bg-muted rounded-lg">
+      <AspectRatio ratio={9 / 16} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
@@ -65,7 +65,7 @@ function AspectRatio9x16() {
 function AspectRatio21x9() {
   return (
     <Example title="21:9" className="items-center justify-center">
-      <AspectRatio ratio={21 / 9} className="bg-muted rounded-lg">
+      <AspectRatio ratio={21 / 9} className="rounded-lg bg-muted">
         <Image
           src="https://avatar.vercel.sh/shadcn1"
           alt="Photo"
diff --git a/apps/v4/registry/bases/radix/examples/calendar-example.tsx b/apps/v4/registry/bases/radix/examples/calendar-example.tsx
index 3c859708c2..749c08596d 100644
--- a/apps/v4/registry/bases/radix/examples/calendar-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/calendar-example.tsx
@@ -222,7 +222,7 @@ function CalendarWithTime() {
             className="p-0"
           />
         </CardContent>
-        <CardFooter className="bg-card border-t">
+        <CardFooter className="border-t bg-card">
           <FieldGroup>
             <Field>
               <FieldLabel htmlFor="time-from">Start Time</FieldLabel>
diff --git a/apps/v4/registry/bases/radix/examples/card-example.tsx b/apps/v4/registry/bases/radix/examples/card-example.tsx
index 178288336f..095ab245b7 100644
--- a/apps/v4/registry/bases/radix/examples/card-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/card-example.tsx
@@ -86,7 +86,7 @@ function CardLogin() {
           <Button variant="outline" className="w-full">
             Login with Google
           </Button>
-          <div className="style-nova:mt-2 mt-4 text-center">
+          <div className="mt-4 text-center style-nova:mt-2">
             Don&apos;t have an account?{" "}
             <a href="#" className="underline underline-offset-4">
               Sign up
@@ -166,7 +166,7 @@ function CardWithImage() {
   return (
     <Example title="With Image">
       <Card size="default" className="relative mx-auto w-full max-w-sm pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+        <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
         <img
           src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Photo by mymind on Unsplash"
@@ -201,7 +201,7 @@ function CardWithImageSmall() {
   return (
     <Example title="With Image (Small)">
       <Card size="sm" className="relative mx-auto w-full max-w-sm pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+        <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
         <img
           src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Photo by mymind on Unsplash"
diff --git a/apps/v4/registry/bases/radix/examples/chart-example.tsx b/apps/v4/registry/bases/radix/examples/chart-example.tsx
index 0928691eb2..e880892681 100644
--- a/apps/v4/registry/bases/radix/examples/chart-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/chart-example.tsx
@@ -126,7 +126,7 @@ function ChartAreaExample() {
                   className="size-4"
                 />
               </div>
-              <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              <div className="flex items-center gap-2 leading-none text-muted-foreground">
                 January - June 2024
               </div>
             </div>
@@ -197,7 +197,7 @@ function ChartBarExample() {
               className="size-4"
             />
           </div>
-          <div className="text-muted-foreground leading-none">
+          <div className="leading-none text-muted-foreground">
             Showing total visitors for the last 6 months
           </div>
         </CardFooter>
@@ -284,7 +284,7 @@ function ChartLineExample() {
                   className="size-4"
                 />
               </div>
-              <div className="text-muted-foreground flex items-center gap-2 leading-none">
+              <div className="flex items-center gap-2 leading-none text-muted-foreground">
                 Showing total visitors for the last 6 months
               </div>
             </div>
@@ -403,7 +403,7 @@ function ChartPieExample() {
               className="size-4"
             />
           </div>
-          <div className="text-muted-foreground leading-none">
+          <div className="leading-none text-muted-foreground">
             Showing total visitors for the last 6 months
           </div>
         </CardFooter>
@@ -475,7 +475,7 @@ function ChartRadarExample() {
               className="size-4"
             />
           </div>
-          <div className="text-muted-foreground flex items-center gap-2 leading-none">
+          <div className="flex items-center gap-2 leading-none text-muted-foreground">
             January - June 2024
           </div>
         </CardFooter>
@@ -571,7 +571,7 @@ function ChartRadialExample() {
               className="size-4"
             />
           </div>
-          <div className="text-muted-foreground leading-none">
+          <div className="leading-none text-muted-foreground">
             Showing total visitors for the last 6 months
           </div>
         </CardFooter>
diff --git a/apps/v4/registry/bases/radix/examples/collapsible-example.tsx b/apps/v4/registry/bases/radix/examples/collapsible-example.tsx
index d5a53f1cea..c0768a351b 100644
--- a/apps/v4/registry/bases/radix/examples/collapsible-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/collapsible-example.tsx
@@ -96,7 +96,7 @@ function CollapsibleFileTree() {
             <Button
               variant="ghost"
               size="sm"
-              className="group hover:bg-accent hover:text-accent-foreground w-full justify-start transition-none"
+              className="group w-full justify-start transition-none hover:bg-accent hover:text-accent-foreground"
             >
               <IconPlaceholder
                 lucide="ChevronRightIcon"
@@ -116,7 +116,7 @@ function CollapsibleFileTree() {
               {fileItem.name}
             </Button>
           </CollapsibleTrigger>
-          <CollapsibleContent className="style-lyra:ml-4 mt-1 ml-5">
+          <CollapsibleContent className="mt-1 ml-5 style-lyra:ml-4">
             <div className="flex flex-col gap-1">
               {fileItem.items.map((child) => renderItem(child))}
             </div>
@@ -129,7 +129,7 @@ function CollapsibleFileTree() {
         key={fileItem.name}
         variant="link"
         size="sm"
-        className="text-foreground w-full justify-start gap-2"
+        className="w-full justify-start gap-2 text-foreground"
       >
         <IconPlaceholder
           lucide="FileIcon"
diff --git a/apps/v4/registry/bases/radix/examples/combobox-example.tsx b/apps/v4/registry/bases/radix/examples/combobox-example.tsx
index 010c1ea7f6..fff8646432 100644
--- a/apps/v4/registry/bases/radix/examples/combobox-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/combobox-example.tsx
@@ -1220,7 +1220,7 @@ function ComboboxWithOtherInputs() {
       </Select>
       <Button
         variant="outline"
-        className="text-muted-foreground w-52 justify-between font-normal"
+        className="w-52 justify-between font-normal text-muted-foreground"
       >
         Select a framework
         <IconPlaceholder
diff --git a/apps/v4/registry/bases/radix/examples/component-example.tsx b/apps/v4/registry/bases/radix/examples/component-example.tsx
index ca54836d66..158ffb9efa 100644
--- a/apps/v4/registry/bases/radix/examples/component-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/component-example.tsx
@@ -80,7 +80,7 @@ function CardExample() {
   return (
     <Example title="Card" className="items-center justify-center">
       <Card className="relative w-full max-w-sm overflow-hidden pt-0">
-        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
+        <div className="absolute inset-0 z-30 aspect-video bg-primary opacity-50 mix-blend-color" />
         <img
           src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
           alt="Photo by mymind on Unsplash"
diff --git a/apps/v4/registry/bases/radix/examples/demo.tsx b/apps/v4/registry/bases/radix/examples/demo.tsx
new file mode 100644
index 0000000000..5e7ad6c77d
--- /dev/null
+++ b/apps/v4/registry/bases/radix/examples/demo.tsx
@@ -0,0 +1,403 @@
+"use client"
+
+import * as React from "react"
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/registry/bases/radix/ui/alert-dialog"
+import { Badge } from "@/registry/bases/radix/ui/badge"
+import { Button } from "@/registry/bases/radix/ui/button"
+import { ButtonGroup } from "@/registry/bases/radix/ui/button-group"
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
+import { Checkbox } from "@/registry/bases/radix/ui/checkbox"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/registry/bases/radix/ui/dropdown-menu"
+import { Field, FieldGroup } from "@/registry/bases/radix/ui/field"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+  InputGroupText,
+} from "@/registry/bases/radix/ui/input-group"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@/registry/bases/radix/ui/item"
+import {
+  RadioGroup,
+  RadioGroupItem,
+} from "@/registry/bases/radix/ui/radio-group"
+import { Slider } from "@/registry/bases/radix/ui/slider"
+import { Switch } from "@/registry/bases/radix/ui/switch"
+import { Textarea } from "@/registry/bases/radix/ui/textarea"
+import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
+
+export function Demo() {
+  const [sliderValue, setSliderValue] = React.useState<number[]>([500])
+  const handleSliderValueChange = React.useCallback((value: number[]) => {
+    setSliderValue(value)
+  }, [])
+
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center bg-muted p-4 sm:p-6 lg:p-12 dark:bg-background">
+      <div className="grid max-w-3xl gap-4 sm:grid-cols-2">
+        <div className="flex flex-col gap-4">
+          <Card>
+            <CardContent className="flex flex-col gap-6">
+              <div className="flex flex-col gap-1">
+                <div className="text-2xl font-medium">Style Overview</div>
+                <div className="line-clamp-2 text-base text-muted-foreground">
+                  Designers love packing quirky glyphs into test phrases. This
+                  is a preview of the typography styles.
+                </div>
+              </div>
+              <div className="grid grid-cols-6 gap-3">
+                {[
+                  "--background",
+                  "--foreground",
+                  "--primary",
+                  "--secondary",
+                  "--muted",
+                  "--accent",
+                  "--destructive",
+                  "--chart-1",
+                  "--chart-2",
+                  "--chart-3",
+                  "--chart-4",
+                  "--chart-5",
+                ].map((variant) => (
+                  <div
+                    key={variant}
+                    className="flex flex-col flex-wrap items-center gap-2"
+                  >
+                    <div
+                      className="relative aspect-square w-full rounded-lg bg-(--color) after:absolute after:inset-0 after:rounded-lg after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten"
+                      style={
+                        {
+                          "--color": `var(${variant})`,
+                        } as React.CSSProperties
+                      }
+                    />
+                    <div className="hidden max-w-14 truncate font-mono text-[0.60rem] md:block">
+                      {variant}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardContent>
+              <div className="grid grid-cols-8 place-items-center gap-4">
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CopyIcon"
+                    tabler="IconCopy"
+                    hugeicons="Copy01Icon"
+                    phosphor="CopyIcon"
+                    remixicon="RiFileCopyLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CircleAlertIcon"
+                    tabler="IconExclamationCircle"
+                    hugeicons="AlertCircleIcon"
+                    phosphor="WarningCircleIcon"
+                    remixicon="RiErrorWarningLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="TrashIcon"
+                    tabler="IconTrash"
+                    hugeicons="Delete02Icon"
+                    phosphor="TrashIcon"
+                    remixicon="RiDeleteBinLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ShareIcon"
+                    tabler="IconShare"
+                    hugeicons="Share03Icon"
+                    phosphor="ShareIcon"
+                    remixicon="RiShareLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ShoppingBagIcon"
+                    tabler="IconShoppingBag"
+                    hugeicons="ShoppingBag01Icon"
+                    phosphor="BagIcon"
+                    remixicon="RiShoppingBagLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="MoreHorizontalIcon"
+                    tabler="IconDots"
+                    hugeicons="MoreHorizontalCircle01Icon"
+                    phosphor="DotsThreeIcon"
+                    remixicon="RiMoreLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="Loader2Icon"
+                    tabler="IconLoader"
+                    hugeicons="Loading03Icon"
+                    phosphor="SpinnerIcon"
+                    remixicon="RiLoaderLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="PlusIcon"
+                    tabler="IconPlus"
+                    hugeicons="PlusSignIcon"
+                    phosphor="PlusIcon"
+                    remixicon="RiAddLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="MinusIcon"
+                    tabler="IconMinus"
+                    hugeicons="MinusSignIcon"
+                    phosphor="MinusIcon"
+                    remixicon="RiSubtractLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ArrowLeftIcon"
+                    tabler="IconArrowLeft"
+                    hugeicons="ArrowLeft02Icon"
+                    phosphor="ArrowLeftIcon"
+                    remixicon="RiArrowLeftLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ArrowRightIcon"
+                    tabler="IconArrowRight"
+                    hugeicons="ArrowRight02Icon"
+                    phosphor="ArrowRightIcon"
+                    remixicon="RiArrowRightLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="CheckIcon"
+                    tabler="IconCheck"
+                    hugeicons="Tick02Icon"
+                    phosphor="CheckIcon"
+                    remixicon="RiCheckLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ChevronDownIcon"
+                    tabler="IconChevronDown"
+                    hugeicons="ArrowDown01Icon"
+                    phosphor="CaretDownIcon"
+                    remixicon="RiArrowDownSLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="ChevronRightIcon"
+                    tabler="IconChevronRight"
+                    hugeicons="ArrowRight01Icon"
+                    phosphor="CaretRightIcon"
+                    remixicon="RiArrowRightSLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="SearchIcon"
+                    tabler="IconSearch"
+                    hugeicons="Search01Icon"
+                    phosphor="MagnifyingGlassIcon"
+                    remixicon="RiSearchLine"
+                  />
+                </Card>
+                <Card className="flex size-8 items-center justify-center rounded-md p-0 ring ring-border *:[svg]:size-4">
+                  <IconPlaceholder
+                    lucide="SettingsIcon"
+                    tabler="IconSettings"
+                    hugeicons="Settings01Icon"
+                    phosphor="GearIcon"
+                    remixicon="RiSettingsLine"
+                  />
+                </Card>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+        <div className="flex flex-col gap-4">
+          <Card className="w-full">
+            <CardContent className="flex flex-col gap-6">
+              <div className="flex flex-col gap-4">
+                <div className="flex flex-wrap gap-2">
+                  <Button>Button</Button>
+                  <Button variant="secondary">Secondary</Button>
+                  <Button variant="outline">Outline</Button>
+                  <Button variant="destructive">Delete</Button>
+                </div>
+                <Item variant="outline">
+                  <ItemContent>
+                    <ItemTitle>Two-factor authentication</ItemTitle>
+                    <ItemDescription className="text-pretty xl:hidden 2xl:block">
+                      Verify via email or phone number.
+                    </ItemDescription>
+                  </ItemContent>
+                  <ItemActions className="hidden md:flex">
+                    <Button size="sm" variant="secondary">
+                      Enable
+                    </Button>
+                  </ItemActions>
+                </Item>
+              </div>
+              <Slider
+                value={sliderValue}
+                onValueChange={handleSliderValueChange}
+                max={1000}
+                min={0}
+                step={10}
+                className="flex-1"
+                aria-label="Slider"
+              />
+              <FieldGroup>
+                <Field>
+                  <InputGroup>
+                    <InputGroupInput placeholder="Name" />
+                    <InputGroupAddon align="inline-end">
+                      <InputGroupText>
+                        <IconPlaceholder
+                          lucide="SearchIcon"
+                          tabler="IconSearch"
+                          hugeicons="Search01Icon"
+                          phosphor="MagnifyingGlassIcon"
+                          remixicon="RiSearchLine"
+                        />
+                      </InputGroupText>
+                    </InputGroupAddon>
+                  </InputGroup>
+                </Field>
+                <Field className="flex-1">
+                  <Textarea placeholder="Message" className="resize-none" />
+                </Field>
+              </FieldGroup>
+              <div className="flex items-center gap-2">
+                <div className="flex gap-2">
+                  <Badge>Badge</Badge>
+                  <Badge variant="secondary">Secondary</Badge>
+                  <Badge variant="outline">Outline</Badge>
+                </div>
+                <RadioGroup
+                  defaultValue="apple"
+                  className="ml-auto flex w-fit gap-3"
+                >
+                  <RadioGroupItem value="apple" />
+                  <RadioGroupItem value="banana" />
+                </RadioGroup>
+                <div className="flex gap-3">
+                  <Checkbox defaultChecked />
+                  <Checkbox />
+                </div>
+              </div>
+              <div className="flex items-center gap-4">
+                <AlertDialog>
+                  <AlertDialogTrigger asChild>
+                    <Button variant="outline">
+                      <span className="hidden md:block">Alert Dialog</span>
+                      <span className="block md:hidden">Dialog</span>
+                    </Button>
+                  </AlertDialogTrigger>
+                  <AlertDialogContent size="sm">
+                    <AlertDialogHeader>
+                      <AlertDialogTitle>
+                        Allow accessory to connect?
+                      </AlertDialogTitle>
+                      <AlertDialogDescription>
+                        Do you want to allow the USB accessory to connect to
+                        this device and your data?
+                      </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                      <AlertDialogCancel>Don&apos;t allow</AlertDialogCancel>
+                      <AlertDialogAction>Allow</AlertDialogAction>
+                    </AlertDialogFooter>
+                  </AlertDialogContent>
+                </AlertDialog>
+                <ButtonGroup>
+                  <Button variant="outline">Button Group</Button>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="outline" size="icon">
+                        <IconPlaceholder
+                          lucide="ChevronUpIcon"
+                          tabler="IconChevronUp"
+                          hugeicons="ArrowUp01Icon"
+                          phosphor="CaretUpIcon"
+                          remixicon="RiArrowUpSLine"
+                        />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                      align="end"
+                      side="top"
+                      className="w-40"
+                    >
+                      <DropdownMenuGroup>
+                        <DropdownMenuLabel>Quick Actions</DropdownMenuLabel>
+                        <DropdownMenuItem>Mute Conversation</DropdownMenuItem>
+                        <DropdownMenuItem>Mark as Read</DropdownMenuItem>
+                        <DropdownMenuItem>Block User</DropdownMenuItem>
+                      </DropdownMenuGroup>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuGroup>
+                        <DropdownMenuLabel>Conversation</DropdownMenuLabel>
+                        <DropdownMenuItem>Share Conversation</DropdownMenuItem>
+                        <DropdownMenuItem>Copy Conversation</DropdownMenuItem>
+                        <DropdownMenuItem>Report Conversation</DropdownMenuItem>
+                      </DropdownMenuGroup>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuGroup>
+                        <DropdownMenuItem variant="destructive">
+                          Delete Conversation
+                        </DropdownMenuItem>
+                      </DropdownMenuGroup>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </ButtonGroup>
+                <Switch defaultChecked className="ml-auto" />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/v4/registry/bases/radix/examples/dialog-example.tsx b/apps/v4/registry/bases/radix/examples/dialog-example.tsx
index 04c6fdd152..b0e9c1597d 100644
--- a/apps/v4/registry/bases/radix/examples/dialog-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/dialog-example.tsx
@@ -133,11 +133,11 @@ function DialogScrollableContent() {
               This is a dialog with scrollable content.
             </DialogDescription>
           </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          <div className="no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4">
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
-                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
               >
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
@@ -169,11 +169,11 @@ function DialogWithStickyFooter() {
               This is a dialog with scrollable content.
             </DialogDescription>
           </DialogHeader>
-          <div className="style-nova:-mx-4 style-nova:px-4 no-scrollbar style-vega:px-6 style-mira:px-4 style-maia:px-6 style-vega:-mx-6 style-maia:-mx-6 style-mira:-mx-4 style-lyra:-mx-4 style-lyra:px-4 max-h-[70vh] overflow-y-auto">
+          <div className="no-scrollbar max-h-[70vh] overflow-y-auto style-vega:-mx-6 style-vega:px-6 style-nova:-mx-4 style-nova:px-4 style-lyra:-mx-4 style-lyra:px-4 style-maia:-mx-6 style-maia:px-6 style-mira:-mx-4 style-mira:px-4">
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
-                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
               >
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
@@ -298,7 +298,7 @@ function DialogChatSettings() {
                 </TabsTrigger>
                 <TabsTrigger value="security">Security</TabsTrigger>
               </TabsList>
-              <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-vega:min-h-[550px] style-maia:min-h-[550px] style-mira:min-h-[450px] style-lyra:min-h-[450px] style-nova:min-h-[460px] style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border [&_[data-slot=select-trigger]]:min-w-[125px]">
+              <div className="border style-vega:min-h-[550px] style-vega:rounded-lg style-vega:p-6 style-nova:min-h-[460px] style-nova:rounded-lg style-nova:p-4 style-lyra:min-h-[450px] style-lyra:rounded-none style-lyra:p-4 style-maia:min-h-[550px] style-maia:rounded-xl style-maia:p-6 style-mira:min-h-[450px] style-mira:rounded-md style-mira:p-4 [&_[data-slot=select-trigger]]:min-w-[125px]">
                 <TabsContent value="general">
                   <FieldSet>
                     <FieldGroup>
diff --git a/apps/v4/registry/bases/radix/examples/drawer-example.tsx b/apps/v4/registry/bases/radix/examples/drawer-example.tsx
index 7d1965a87a..41a3f803ce 100644
--- a/apps/v4/registry/bases/radix/examples/drawer-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/drawer-example.tsx
@@ -54,7 +54,7 @@ function DrawerWithSides() {
                 {Array.from({ length: 10 }).map((_, index) => (
                   <p
                     key={index}
-                    className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                    className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
                   >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                     do eiusmod tempor incididunt ut labore et dolore magna
@@ -97,7 +97,7 @@ function DrawerScrollableContent() {
             {Array.from({ length: 10 }).map((_, index) => (
               <p
                 key={index}
-                className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
               >
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                 eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
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 314d8ba643..ac69a5c222 100644
--- a/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
@@ -598,7 +598,7 @@ function DropdownMenuWithAvatar() {
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-semibold">shadcn</span>
-                <span className="text-muted-foreground truncate text-xs">
+                <span className="truncate text-xs text-muted-foreground">
                   shadcn@example.com
                 </span>
               </div>
@@ -608,7 +608,7 @@ function DropdownMenuWithAvatar() {
                 hugeicons="UnfoldMoreIcon"
                 phosphor="CaretUpDownIcon"
                 remixicon="RiArrowUpDownLine"
-                className="text-muted-foreground ml-auto"
+                className="ml-auto text-muted-foreground"
               />
             </Button>
           </DropdownMenuTrigger>
@@ -830,7 +830,7 @@ function DropdownMenuComplex() {
             Complex Menu
           </Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48">
+        <DropdownMenuContent className="style-vega:w-56 style-nova:w-48 style-lyra:w-48 style-maia:w-56 style-mira:w-48">
           <DropdownMenuGroup>
             <DropdownMenuLabel>File</DropdownMenuLabel>
             <DropdownMenuItem>
diff --git a/apps/v4/registry/bases/radix/examples/hover-card-example.tsx b/apps/v4/registry/bases/radix/examples/hover-card-example.tsx
index e95664d242..d376f2dfb1 100644
--- a/apps/v4/registry/bases/radix/examples/hover-card-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/hover-card-example.tsx
@@ -40,7 +40,7 @@ function HoverCardSides() {
               </Button>
             </HoverCardTrigger>
             <HoverCardContent side={side} className="w-64">
-              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <div className="flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1">
                 <h4 className="font-medium">Hover Card</h4>
                 <p>
                   This hover card appears on the {side} side of the trigger.
@@ -75,7 +75,7 @@ function HoverCardInDialog() {
               </Button>
             </HoverCardTrigger>
             <HoverCardContent className="w-64">
-              <div className="style-lyra:gap-1 style-nova:gap-1.5 style-vega:gap-2 style-maia:gap-2 style-mira:gap-1 flex flex-col">
+              <div className="flex flex-col style-vega:gap-2 style-nova:gap-1.5 style-lyra:gap-1 style-maia:gap-2 style-mira:gap-1">
                 <h4 className="font-medium">Hover Card</h4>
                 <p>
                   This hover card appears inside a dialog. Hover over the button
diff --git a/apps/v4/registry/bases/radix/examples/input-group-example.tsx b/apps/v4/registry/bases/radix/examples/input-group-example.tsx
index ae441c2368..de162568ea 100644
--- a/apps/v4/registry/bases/radix/examples/input-group-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/input-group-example.tsx
@@ -195,7 +195,7 @@ function InputGroupWithAddons() {
                 hugeicons="AlertCircleIcon"
                 phosphor="InfoIcon"
                 remixicon="RiInformationLine"
-                className="text-muted-foreground ml-auto"
+                className="ml-auto text-muted-foreground"
               />
             </InputGroupAddon>
           </InputGroup>
@@ -212,7 +212,7 @@ function InputGroupWithAddons() {
                 hugeicons="AlertCircleIcon"
                 phosphor="InfoIcon"
                 remixicon="RiInformationLine"
-                className="text-muted-foreground ml-auto"
+                className="ml-auto text-muted-foreground"
               />
             </InputGroupAddon>
           </InputGroup>
@@ -458,7 +458,7 @@ function InputGroupWithTooltip({
                 </PopoverHeader>
               </PopoverContent>
             </Popover>
-            <InputGroupAddon className="text-muted-foreground pl-1">
+            <InputGroupAddon className="pl-1 text-muted-foreground">
               https://
             </InputGroupAddon>
             <InputGroupInput id="input-secure-19" />
@@ -805,7 +805,7 @@ function InputGroupTextareaExamples() {
                 hugeicons="AlertCircleIcon"
                 phosphor="InfoIcon"
                 remixicon="RiInformationLine"
-                className="text-muted-foreground ml-auto"
+                className="ml-auto text-muted-foreground"
               />
             </InputGroupAddon>
           </InputGroup>
diff --git a/apps/v4/registry/bases/radix/examples/input-otp-example.tsx b/apps/v4/registry/bases/radix/examples/input-otp-example.tsx
index e1d3a86ef9..0711d35ac2 100644
--- a/apps/v4/registry/bases/radix/examples/input-otp-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/input-otp-example.tsx
@@ -254,13 +254,13 @@ function InputOTPForm() {
                 </Button>
               </div>
               <InputOTP maxLength={6} id="otp-verification" required>
-                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPGroup className="*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11">
                   <InputOTPSlot index={0} />
                   <InputOTPSlot index={1} />
                   <InputOTPSlot index={2} />
                 </InputOTPGroup>
                 <InputOTPSeparator />
-                <InputOTPGroup className="style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-vega:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-mira:*:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
+                <InputOTPGroup className="*:data-[slot=input-otp-slot]:text-xl style-vega:*:data-[slot=input-otp-slot]:h-16 style-vega:*:data-[slot=input-otp-slot]:w-12 style-nova:*:data-[slot=input-otp-slot]:h-12 style-nova:*:data-[slot=input-otp-slot]:w-11 style-lyra:*:data-[slot=input-otp-slot]:h-12 style-lyra:*:data-[slot=input-otp-slot]:w-11 style-maia:*:data-[slot=input-otp-slot]:h-16 style-maia:*:data-[slot=input-otp-slot]:w-12 style-mira:*:data-[slot=input-otp-slot]:h-12 style-mira:*:data-[slot=input-otp-slot]:w-11">
                   <InputOTPSlot index={3} />
                   <InputOTPSlot index={4} />
                   <InputOTPSlot index={5} />
@@ -276,11 +276,11 @@ function InputOTPForm() {
           <Button type="submit" className="w-full">
             Verify
           </Button>
-          <div className="text-muted-foreground text-sm">
+          <div className="text-sm text-muted-foreground">
             Having trouble signing in?{" "}
             <a
               href="#"
-              className="hover:text-primary underline underline-offset-4 transition-colors"
+              className="underline underline-offset-4 transition-colors hover:text-primary"
             >
               Contact support
             </a>
diff --git a/apps/v4/registry/bases/radix/examples/item-example.tsx b/apps/v4/registry/bases/radix/examples/item-example.tsx
index b62e567b17..7cb5eb0884 100644
--- a/apps/v4/registry/bases/radix/examples/item-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/item-example.tsx
@@ -1602,7 +1602,7 @@ function ItemFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Last updated 2 hours ago
           </span>
         </ItemFooter>
@@ -1616,7 +1616,7 @@ function ItemFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Created by Sarah Chen
           </span>
         </ItemFooter>
@@ -1630,7 +1630,7 @@ function ItemFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">12 comments</span>
+          <span className="text-sm text-muted-foreground">12 comments</span>
         </ItemFooter>
       </Item>
     </Example>
@@ -1652,7 +1652,7 @@ function ItemHeaderAndFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Updated 5 minutes ago
           </span>
         </ItemFooter>
@@ -1669,7 +1669,7 @@ function ItemHeaderAndFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Status: In Progress
           </span>
         </ItemFooter>
@@ -1686,7 +1686,7 @@ function ItemHeaderAndFooterExamples() {
           </ItemDescription>
         </ItemContent>
         <ItemFooter>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             Category: Technical • 3 attachments
           </span>
         </ItemFooter>
diff --git a/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx b/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx
index e8647aab35..4cd80471f1 100644
--- a/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx
@@ -247,9 +247,9 @@ function ListItem({
     <li {...props}>
       <NavigationMenuLink asChild>
         <Link href={href}>
-          <div className="style-vega:text-sm style-maia:text-sm style-nova:text-sm style-lyra:text-xs style-mira:text-xs flex flex-col gap-1">
+          <div className="flex flex-col gap-1 style-vega:text-sm style-nova:text-sm style-lyra:text-xs style-maia:text-sm style-mira:text-xs">
             <div className="leading-none font-medium">{title}</div>
-            <div className="text-muted-foreground line-clamp-2">{children}</div>
+            <div className="line-clamp-2 text-muted-foreground">{children}</div>
           </div>
         </Link>
       </NavigationMenuLink>
diff --git a/apps/v4/registry/bases/radix/examples/progress-example.tsx b/apps/v4/registry/bases/radix/examples/progress-example.tsx
index 63836a0993..fcfc85ff65 100644
--- a/apps/v4/registry/bases/radix/examples/progress-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/progress-example.tsx
@@ -130,7 +130,7 @@ function FileUploadList() {
               <Progress value={file.progress} className="w-32" />
             </ItemContent>
             <ItemActions className="w-16 justify-end">
-              <span className="text-muted-foreground text-sm">
+              <span className="text-sm text-muted-foreground">
                 {file.timeRemaining}
               </span>
             </ItemActions>
diff --git a/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx b/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx
index 109aa2c7df..17fcf74521 100644
--- a/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx
@@ -70,9 +70,9 @@ function ScrollAreaHorizontal() {
                   height={400}
                 />
               </div>
-              <figcaption className="text-muted-foreground pt-2 text-xs">
+              <figcaption className="pt-2 text-xs text-muted-foreground">
                 Photo by{" "}
-                <span className="text-foreground font-semibold">
+                <span className="font-semibold text-foreground">
                   {artwork.artist}
                 </span>
               </figcaption>
diff --git a/apps/v4/registry/bases/radix/examples/separator-example.tsx b/apps/v4/registry/bases/radix/examples/separator-example.tsx
index 75d3eef1f0..f9f492f542 100644
--- a/apps/v4/registry/bases/radix/examples/separator-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/separator-example.tsx
@@ -18,7 +18,7 @@ export default function SeparatorExample() {
 function SeparatorHorizontal() {
   return (
     <Example title="Horizontal">
-      <div className="style-lyra:text-xs/relaxed flex flex-col gap-4 text-sm">
+      <div className="flex flex-col gap-4 text-sm style-lyra:text-xs/relaxed">
         <div className="flex flex-col gap-1">
           <div className="leading-none font-medium">shadcn/ui</div>
           <div className="text-muted-foreground">
@@ -38,7 +38,7 @@ function SeparatorHorizontal() {
 function SeparatorVertical() {
   return (
     <Example title="Vertical">
-      <div className="style-lyra:text-xs/relaxed flex h-5 items-center gap-4 text-sm">
+      <div className="flex h-5 items-center gap-4 text-sm style-lyra:text-xs/relaxed">
         <div>Blog</div>
         <Separator orientation="vertical" />
         <div>Docs</div>
@@ -52,24 +52,24 @@ function SeparatorVertical() {
 function SeparatorVerticalMenu() {
   return (
     <Example title="Vertical Menu">
-      <div className="style-lyra:text-xs/relaxed flex items-center gap-2 text-sm md:gap-4">
+      <div className="flex items-center gap-2 text-sm md:gap-4 style-lyra:text-xs/relaxed">
         <div className="flex flex-col gap-1">
           <span className="font-medium">Settings</span>
-          <span className="text-muted-foreground text-xs">
+          <span className="text-xs text-muted-foreground">
             Manage preferences
           </span>
         </div>
         <Separator orientation="vertical" />
         <div className="flex flex-col gap-1">
           <span className="font-medium">Account</span>
-          <span className="text-muted-foreground text-xs">
+          <span className="text-xs text-muted-foreground">
             Profile & security
           </span>
         </div>
         <Separator orientation="vertical" />
         <div className="flex flex-col gap-1">
           <span className="font-medium">Help</span>
-          <span className="text-muted-foreground text-xs">Support & docs</span>
+          <span className="text-xs text-muted-foreground">Support & docs</span>
         </div>
       </div>
     </Example>
@@ -79,7 +79,7 @@ function SeparatorVerticalMenu() {
 function SeparatorInList() {
   return (
     <Example title="In List">
-      <div className="style-lyra:text-xs/relaxed flex flex-col gap-2 text-sm">
+      <div className="flex flex-col gap-2 text-sm style-lyra:text-xs/relaxed">
         <dl className="flex items-center justify-between">
           <dt>Item 1</dt>
           <dd className="text-muted-foreground">Value 1</dd>
diff --git a/apps/v4/registry/bases/radix/examples/sheet-example.tsx b/apps/v4/registry/bases/radix/examples/sheet-example.tsx
index 5c8b7b9b9d..a4620ecd5c 100644
--- a/apps/v4/registry/bases/radix/examples/sheet-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sheet-example.tsx
@@ -41,7 +41,7 @@ function SheetWithForm() {
               done.
             </SheetDescription>
           </SheetHeader>
-          <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4">
+          <div className="style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6">
             <FieldGroup>
               <Field>
                 <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
@@ -110,11 +110,11 @@ function SheetWithSides() {
                   done.
                 </SheetDescription>
               </SheetHeader>
-              <div className="no-scrollbar style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4 overflow-y-auto">
+              <div className="no-scrollbar overflow-y-auto style-vega:px-4 style-nova:px-4 style-lyra:px-4 style-maia:px-6 style-mira:px-6">
                 {Array.from({ length: 10 }).map((_, index) => (
                   <p
                     key={index}
-                    className="style-lyra:mb-2 style-lyra:leading-relaxed mb-4 leading-normal"
+                    className="mb-4 leading-normal style-lyra:mb-2 style-lyra:leading-relaxed"
                   >
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                     do eiusmod tempor incididunt ut labore et dolore magna
diff --git a/apps/v4/registry/bases/radix/examples/sidebar-example.tsx b/apps/v4/registry/bases/radix/examples/sidebar-example.tsx
index 3de386a041..96f0f31823 100644
--- a/apps/v4/registry/bases/radix/examples/sidebar-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sidebar-example.tsx
@@ -274,11 +274,11 @@ export default function SidebarExample() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/examples/sidebar-floating-example.tsx b/apps/v4/registry/bases/radix/examples/sidebar-floating-example.tsx
index e88fabbdef..ebf75b5029 100644
--- a/apps/v4/registry/bases/radix/examples/sidebar-floating-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sidebar-floating-example.tsx
@@ -244,7 +244,7 @@ export default function SidebarFloatingExample() {
                   <Field>
                     <SidebarInput type="email" placeholder="Email" />
                     <Button
-                      className="bg-sidebar-primary text-sidebar-primary-foreground w-full"
+                      className="w-full bg-sidebar-primary text-sidebar-primary-foreground"
                       size="sm"
                     >
                       Subscribe
@@ -263,11 +263,11 @@ export default function SidebarFloatingExample() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/examples/sidebar-icon-example.tsx b/apps/v4/registry/bases/radix/examples/sidebar-icon-example.tsx
index ccc87d46d7..e6aaa7a812 100644
--- a/apps/v4/registry/bases/radix/examples/sidebar-icon-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sidebar-icon-example.tsx
@@ -449,11 +449,11 @@ export default function SidebarIconExample() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/examples/sidebar-inset-example.tsx b/apps/v4/registry/bases/radix/examples/sidebar-inset-example.tsx
index aba695b541..f4577dbb1c 100644
--- a/apps/v4/registry/bases/radix/examples/sidebar-inset-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/sidebar-inset-example.tsx
@@ -280,11 +280,11 @@ export default function SidebarInsetExample() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/bases/radix/examples/slider-example.tsx b/apps/v4/registry/bases/radix/examples/slider-example.tsx
index 64dbdd7080..be13e8a14b 100644
--- a/apps/v4/registry/bases/radix/examples/slider-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/slider-example.tsx
@@ -77,7 +77,7 @@ function SliderControlled() {
       <div className="grid w-full gap-3">
         <div className="flex items-center justify-between gap-2">
           <Label htmlFor="slider-demo-temperature">Temperature</Label>
-          <span className="text-muted-foreground text-sm">
+          <span className="text-sm text-muted-foreground">
             {value.join(", ")}
           </span>
         </div>
diff --git a/apps/v4/registry/bases/radix/examples/tabs-example.tsx b/apps/v4/registry/bases/radix/examples/tabs-example.tsx
index 4b6adb7e2c..782c516560 100644
--- a/apps/v4/registry/bases/radix/examples/tabs-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/tabs-example.tsx
@@ -195,7 +195,7 @@ function TabsWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -220,7 +220,7 @@ function TabsLineWithContent() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -284,7 +284,7 @@ function TabsWithDropdown() {
           </DropdownMenu>
         </div>
 
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>
@@ -309,7 +309,7 @@ function TabsVertical() {
           <TabsTrigger value="password">Password</TabsTrigger>
           <TabsTrigger value="notifications">Notifications</TabsTrigger>
         </TabsList>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="account">
             Manage your account preferences and profile information.
           </TabsContent>
@@ -342,7 +342,7 @@ function TabsWithInputAndButton() {
             <Button>Action</Button>
           </div>
         </div>
-        <div className="style-nova:p-4 style-vega:p-6 style-maia:p-6 style-mira:p-4 style-lyra:p-4 style-nova:rounded-lg style-vega:rounded-lg style-maia:rounded-xl style-mira:rounded-md style-lyra:rounded-none border">
+        <div className="border style-vega:rounded-lg style-vega:p-6 style-nova:rounded-lg style-nova:p-4 style-lyra:rounded-none style-lyra:p-4 style-maia:rounded-xl style-maia:p-6 style-mira:rounded-md style-mira:p-4">
           <TabsContent value="overview">
             View your dashboard metrics and key performance indicators.
           </TabsContent>
diff --git a/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx b/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx
index 77be76e399..a2037d57a5 100644
--- a/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx
@@ -211,7 +211,7 @@ function ToggleGroupWithIcons() {
         <ToggleGroupItem
           value="star"
           aria-label="Toggle star"
-          className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent"
+          className="aria-pressed:*:[svg]:stroke-foregfill-foreground aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground"
         >
           <IconPlaceholder
             lucide="StarIcon"
@@ -225,7 +225,7 @@ function ToggleGroupWithIcons() {
         <ToggleGroupItem
           value="heart"
           aria-label="Toggle heart"
-          className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+          className="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground"
         >
           <IconPlaceholder
             lucide="HeartIcon"
@@ -239,7 +239,7 @@ function ToggleGroupWithIcons() {
         <ToggleGroupItem
           value="bookmark"
           aria-label="Toggle bookmark"
-          className="aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground aria-pressed:bg-transparent"
+          className="aria-pressed:bg-transparent aria-pressed:*:[svg]:fill-foreground aria-pressed:*:[svg]:stroke-foreground"
         >
           <IconPlaceholder
             lucide="BookmarkIcon"
@@ -501,7 +501,7 @@ function ToggleGroupFontWeightSelector() {
             className="flex size-16 flex-col items-center justify-center rounded-xl"
           >
             <span className="text-2xl leading-none font-light">Aa</span>
-            <span className="text-muted-foreground text-xs">Light</span>
+            <span className="text-xs text-muted-foreground">Light</span>
           </ToggleGroupItem>
           <ToggleGroupItem
             value="normal"
@@ -509,7 +509,7 @@ function ToggleGroupFontWeightSelector() {
             className="flex size-16 flex-col items-center justify-center rounded-xl"
           >
             <span className="text-2xl leading-none font-normal">Aa</span>
-            <span className="text-muted-foreground text-xs">Normal</span>
+            <span className="text-xs text-muted-foreground">Normal</span>
           </ToggleGroupItem>
           <ToggleGroupItem
             value="medium"
@@ -517,7 +517,7 @@ function ToggleGroupFontWeightSelector() {
             className="flex size-16 flex-col items-center justify-center rounded-xl"
           >
             <span className="text-2xl leading-none font-medium">Aa</span>
-            <span className="text-muted-foreground text-xs">Medium</span>
+            <span className="text-xs text-muted-foreground">Medium</span>
           </ToggleGroupItem>
           <ToggleGroupItem
             value="bold"
@@ -525,12 +525,12 @@ function ToggleGroupFontWeightSelector() {
             className="flex size-16 flex-col items-center justify-center rounded-xl"
           >
             <span className="text-2xl leading-none font-bold">Aa</span>
-            <span className="text-muted-foreground text-xs">Bold</span>
+            <span className="text-xs text-muted-foreground">Bold</span>
           </ToggleGroupItem>
         </ToggleGroup>
         <FieldDescription>
           Use{" "}
-          <code className="bg-muted rounded-md px-1 py-0.5 font-mono">
+          <code className="rounded-md bg-muted px-1 py-0.5 font-mono">
             font-{fontWeight}
           </code>{" "}
           to set the font weight.
diff --git a/apps/v4/registry/bases/radix/examples/tooltip-example.tsx b/apps/v4/registry/bases/radix/examples/tooltip-example.tsx
index 2e37b53194..88c5e6dbef 100644
--- a/apps/v4/registry/bases/radix/examples/tooltip-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/tooltip-example.tsx
@@ -142,10 +142,8 @@ function TooltipWithKeyboard() {
             />
           </Button>
         </TooltipTrigger>
-        <TooltipContent className="pr-1.5">
-          <div className="flex items-center gap-2">
-            Save Changes <Kbd>S</Kbd>
-          </div>
+        <TooltipContent>
+          Save Changes <Kbd>S</Kbd>
         </TooltipContent>
       </Tooltip>
     </Example>
@@ -159,7 +157,7 @@ function TooltipOnLink() {
         <TooltipTrigger asChild>
           <a
             href="#"
-            className="text-primary w-fit text-sm underline-offset-4 hover:underline"
+            className="w-fit text-sm text-primary underline-offset-4 hover:underline"
             onClick={(e) => e.preventDefault()}
           >
             Learn more
diff --git a/apps/v4/registry/bases/radix/registry.ts b/apps/v4/registry/bases/radix/registry.ts
index 29bed36799..95ccd9717a 100644
--- a/apps/v4/registry/bases/radix/registry.ts
+++ b/apps/v4/registry/bases/radix/registry.ts
@@ -11,19 +11,47 @@ import { internal } from "./internal/_registry"
 import { lib } from "./lib/_registry"
 import { ui } from "./ui/_registry"
 
+// Shared between index and style.
+const RADIX_STYLE = {
+  type: "registry:style",
+  dependencies: ["class-variance-authority", "lucide-react", "radix-ui"],
+  devDependencies: ["tw-animate-css", "shadcn"],
+  registryDependencies: ["utils"],
+  css: {
+    '@import "tw-animate-css"': {},
+    '@import "shadcn/tailwind.css"': {},
+    "@layer base": {
+      "*": {
+        "@apply border-border outline-ring/50": {},
+      },
+      body: {
+        "@apply bg-background text-foreground": {},
+      },
+    },
+  },
+  cssVars: {},
+  files: [],
+}
+
 export const registry = {
   name: "shadcn/ui",
   homepage: "https://ui.shadcn.com",
-  items: z
-    .array(registryItemSchema)
-    .parse([
-      ...ui,
-      ...examples,
-      ...lib,
-      ...components,
-      ...internal,
-      ...blocks,
-      ...hooks,
-      ...fonts,
-    ]),
+  items: z.array(registryItemSchema).parse([
+    {
+      name: "index",
+      ...RADIX_STYLE,
+    },
+    {
+      name: "style",
+      ...RADIX_STYLE,
+    },
+    ...ui,
+    ...examples,
+    ...lib,
+    ...components,
+    ...internal,
+    ...blocks,
+    ...hooks,
+    ...fonts,
+  ]),
 } satisfies Registry
diff --git a/apps/v4/registry/bases/radix/ui/_registry.ts b/apps/v4/registry/bases/radix/ui/_registry.ts
index ecb6e76978..25d36ed7b3 100644
--- a/apps/v4/registry/bases/radix/ui/_registry.ts
+++ b/apps/v4/registry/bases/radix/ui/_registry.ts
@@ -10,6 +10,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/accordion",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/accordion-example.tsx",
+        api: "https://www.radix-ui.com/primitives/docs/components/accordion.md",
+      },
+    },
   },
   {
     name: "alert",
@@ -20,6 +28,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/alert",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-example.tsx",
+      },
+    },
   },
   {
     name: "alert-dialog",
@@ -31,6 +46,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/alert-dialog",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/alert-dialog-example.tsx",
+        api: "https://www.radix-ui.com/primitives/docs/components/alert-dialog.md",
+      },
+    },
   },
   {
     name: "aspect-ratio",
@@ -41,6 +64,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/aspect-ratio",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/aspect-ratio-example.tsx",
+        api: "https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md",
+      },
+    },
   },
   {
     name: "avatar",
@@ -51,6 +82,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/avatar",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/avatar-example.tsx",
+        api: "https://www.radix-ui.com/primitives/docs/components/avatar.md",
+      },
+    },
   },
   {
     name: "badge",
@@ -61,6 +100,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/badge",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/badge-example.tsx",
+      },
+    },
   },
   {
     name: "breadcrumb",
@@ -71,6 +117,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/breadcrumb",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/breadcrumb-example.tsx",
+      },
+    },
   },
   {
     name: "button",
@@ -81,6 +134,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/button",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-example.tsx",
+      },
+    },
   },
   {
     name: "button-group",
@@ -92,6 +152,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/button-group",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/button-group-example.tsx",
+      },
+    },
   },
   {
     name: "calendar",
@@ -104,6 +171,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/calendar",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/calendar-example.tsx",
+        api: "https://react-day-picker.js.org",
+      },
+    },
   },
   {
     name: "card",
@@ -114,6 +189,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/card",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/card-example.tsx",
+      },
+    },
   },
   {
     name: "carousel",
@@ -126,6 +208,14 @@ export const ui: Registry["items"] = [
     ],
     registryDependencies: ["button"],
     dependencies: ["embla-carousel-react"],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/carousel",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/carousel-example.tsx",
+        api: "https://www.embla-carousel.com/get-started/react",
+      },
+    },
   },
   {
     name: "chart",
@@ -137,6 +227,13 @@ export const ui: Registry["items"] = [
       },
     ],
     dependencies: ["recharts@2.15.4"],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/chart",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/chart-example.tsx",
+      },
+    },
   },
   {
     name: "checkbox",
@@ -147,6 +244,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/checkbox",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/checkbox-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/checkbox.md",
+      },
+    },
   },
   {
     name: "collapsible",
@@ -157,6 +262,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/collapsible",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/collapsible-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/collapsible.md",
+      },
+    },
   },
   {
     name: "combobox",
@@ -169,6 +282,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/combobox",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx",
+        api: "https://base-ui.com/react/components/combobox",
+      },
+    },
   },
   {
     name: "command",
@@ -181,6 +302,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/command",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/command-example.tsx",
+        api: "https://github.com/dip/cmdk",
+      },
+    },
   },
   {
     name: "context-menu",
@@ -191,6 +320,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/context-menu",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/context-menu-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/context-menu.md",
+      },
+    },
   },
   {
     name: "dialog",
@@ -202,6 +339,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/dialog",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dialog-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/dialog.md",
+      },
+    },
   },
   {
     name: "drawer",
@@ -213,6 +358,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/drawer",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/drawer-example.tsx",
+        api: "https://vaul.emilkowal.ski/getting-started",
+      },
+    },
   },
   {
     name: "dropdown-menu",
@@ -223,6 +376,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/dropdown-menu",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/dropdown-menu.md",
+      },
+    },
   },
   {
     name: "empty",
@@ -233,6 +394,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/empty",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/empty-example.tsx",
+      },
+    },
   },
   {
     name: "field",
@@ -244,6 +412,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/field",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/field-example.tsx",
+      },
+    },
   },
   {
     name: "form",
@@ -258,6 +433,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/hover-card",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/hover-card-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/hover-card.md",
+      },
+    },
   },
   {
     name: "input",
@@ -268,6 +451,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/input",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-example.tsx",
+      },
+    },
   },
   {
     name: "input-group",
@@ -279,6 +469,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/input-group",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-group-example.tsx",
+      },
+    },
   },
   {
     name: "input-otp",
@@ -290,6 +487,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/input-otp",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/input-otp-example.tsx",
+        api: "https://input-otp.rodz.dev",
+      },
+    },
   },
   {
     name: "item",
@@ -301,6 +506,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/item",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/item-example.tsx",
+      },
+    },
   },
   {
     name: "label",
@@ -311,6 +523,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/label",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/label-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/label.md",
+      },
+    },
   },
   {
     name: "menubar",
@@ -321,6 +541,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/menubar",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/menubar-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/menubar.md",
+      },
+    },
   },
   {
     name: "navigation-menu",
@@ -331,6 +559,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/navigation-menu",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/navigation-menu-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/navigation-menu.md",
+      },
+    },
   },
   {
     name: "pagination",
@@ -342,6 +578,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/pagination",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/pagination-example.tsx",
+      },
+    },
   },
   {
     name: "popover",
@@ -352,6 +595,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/popover",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/popover-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/popover.md",
+      },
+    },
   },
   {
     name: "progress",
@@ -362,6 +613,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/progress",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/progress-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/progress.md",
+      },
+    },
   },
   {
     name: "radio-group",
@@ -372,6 +631,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/radio-group",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/radio-group-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/radio-group.md",
+      },
+    },
   },
   {
     name: "resizable",
@@ -383,6 +650,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/resizable",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/resizable-example.tsx",
+        api: "https://github.com/bvaughn/react-resizable-panels",
+      },
+    },
   },
   {
     name: "scroll-area",
@@ -393,6 +668,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/scroll-area",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/scroll-area-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/scroll-area.md",
+      },
+    },
   },
   {
     name: "select",
@@ -403,6 +686,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/select",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/select-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/select.md",
+      },
+    },
   },
   {
     name: "separator",
@@ -413,6 +704,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/separator",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/separator-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/separator.md",
+      },
+    },
   },
   {
     name: "sheet",
@@ -424,6 +723,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/sheet",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sheet-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/dialog.md",
+      },
+    },
   },
   {
     name: "sidebar",
@@ -443,6 +750,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/sidebar",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sidebar-example.tsx",
+      },
+    },
   },
   {
     name: "skeleton",
@@ -453,6 +767,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/skeleton",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/skeleton-example.tsx",
+      },
+    },
   },
   {
     name: "slider",
@@ -463,6 +784,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/slider",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/slider-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/slider.md",
+      },
+    },
   },
   {
     name: "sonner",
@@ -474,6 +803,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/sonner",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/sonner-example.tsx",
+        api: "https://sonner.emilkowal.ski",
+      },
+    },
   },
   {
     name: "spinner",
@@ -484,6 +821,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/spinner",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/spinner-example.tsx",
+      },
+    },
   },
   {
     name: "switch",
@@ -494,6 +838,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/switch",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/switch-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/switch.md",
+      },
+    },
   },
   {
     name: "table",
@@ -504,6 +856,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/table",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/table-example.tsx",
+      },
+    },
   },
   {
     name: "tabs",
@@ -514,6 +873,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/tabs",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tabs-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/tabs.md",
+      },
+    },
   },
   {
     name: "textarea",
@@ -524,6 +891,13 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/textarea",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/textarea-example.tsx",
+      },
+    },
   },
   {
     name: "toggle",
@@ -534,6 +908,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/toggle",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/toggle.md",
+      },
+    },
   },
   {
     name: "toggle-group",
@@ -545,6 +927,14 @@ export const ui: Registry["items"] = [
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/toggle-group",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/toggle-group-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/toggle-group.md",
+      },
+    },
   },
   {
     name: "tooltip",
@@ -571,6 +961,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/tooltip",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/tooltip-example.tsx",
+        api: "https://www.radix-ui.com/docs/primitives/components/tooltip.md",
+      },
+    },
   },
   {
     name: "kbd",
@@ -581,6 +979,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/kbd",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/kbd-example.tsx",
+      },
+    },
   },
   {
     name: "native-select",
@@ -591,6 +996,13 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/native-select",
+        examples:
+          "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/native-select-example.tsx",
+      },
+    },
   },
   {
     name: "direction",
@@ -601,5 +1013,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         type: "registry:ui",
       },
     ],
+    meta: {
+      links: {
+        docs: "https://ui.shadcn.com/docs/components/radix/direction",
+        api: "https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md",
+      },
+    },
   },
 ]
diff --git a/apps/v4/registry/bases/radix/ui/accordion.tsx b/apps/v4/registry/bases/radix/ui/accordion.tsx
index 7387969e94..2ba94b6268 100644
--- a/apps/v4/registry/bases/radix/ui/accordion.tsx
+++ b/apps/v4/registry/bases/radix/ui/accordion.tsx
@@ -84,7 +84,7 @@ function AccordionContent({
     >
       <div
         className={cn(
-          "cn-accordion-content-inner [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
+          "cn-accordion-content-inner h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
           className
         )}
       >
diff --git a/apps/v4/registry/bases/radix/ui/alert.tsx b/apps/v4/registry/bases/radix/ui/alert.tsx
index a34dda45c5..c8374cf7c7 100644
--- a/apps/v4/registry/bases/radix/ui/alert.tsx
+++ b/apps/v4/registry/bases/radix/ui/alert.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/registry/bases/radix/lib/utils"
 
-const alertVariants = cva("cn-alert w-full relative group/alert", {
+const alertVariants = cva("cn-alert group/alert relative w-full", {
   variants: {
     variant: {
       default: "cn-alert-variant-default",
@@ -35,7 +35,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "cn-alert-title [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        "cn-alert-title [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
@@ -51,7 +51,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "cn-alert-description [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+        "cn-alert-description [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/ui/avatar.tsx b/apps/v4/registry/bases/radix/ui/avatar.tsx
index 6adc1bf5f7..e9e6a50d01 100644
--- a/apps/v4/registry/bases/radix/ui/avatar.tsx
+++ b/apps/v4/registry/bases/radix/ui/avatar.tsx
@@ -17,7 +17,7 @@ function Avatar({
       data-slot="avatar"
       data-size={size}
       className={cn(
-        "cn-avatar after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
+        "cn-avatar group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:border-border after:mix-blend-darken dark:after:mix-blend-lighten",
         className
       )}
       {...props}
@@ -78,7 +78,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="avatar-group"
       className={cn(
-        "cn-avatar-group *:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        "cn-avatar-group group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
         className
       )}
       {...props}
@@ -94,7 +94,7 @@ function AvatarGroupCount({
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "cn-avatar-group-count ring-background relative flex shrink-0 items-center justify-center ring-2",
+        "cn-avatar-group-count relative flex shrink-0 items-center justify-center ring-2 ring-background",
         "",
         className
       )}
diff --git a/apps/v4/registry/bases/radix/ui/badge.tsx b/apps/v4/registry/bases/radix/ui/badge.tsx
index cf5d0dbf22..ccca32ca00 100644
--- a/apps/v4/registry/bases/radix/ui/badge.tsx
+++ b/apps/v4/registry/bases/radix/ui/badge.tsx
@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "@/registry/bases/radix/lib/utils"
 
 const badgeVariants = cva(
-  "cn-badge inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge",
+  "cn-badge group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/registry/bases/radix/ui/button-group.tsx b/apps/v4/registry/bases/radix/ui/button-group.tsx
index da45854b83..cacc47b2d0 100644
--- a/apps/v4/registry/bases/radix/ui/button-group.tsx
+++ b/apps/v4/registry/bases/radix/ui/button-group.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/registry/bases/radix/lib/utils"
 import { Separator } from "@/registry/bases/radix/ui/separator"
 
 const buttonGroupVariants = cva(
-  "cn-button-group flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 ",
+  "cn-button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/registry/bases/radix/ui/button.tsx b/apps/v4/registry/bases/radix/ui/button.tsx
index c9317e9923..374f63faac 100644
--- a/apps/v4/registry/bases/radix/ui/button.tsx
+++ b/apps/v4/registry/bases/radix/ui/button.tsx
@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "@/registry/bases/radix/lib/utils"
 
 const buttonVariants = cva(
-  "cn-button inline-flex items-center justify-center whitespace-nowrap  transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "cn-button group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/apps/v4/registry/bases/radix/ui/calendar.tsx b/apps/v4/registry/bases/radix/ui/calendar.tsx
index b0d044e7d5..c14a84b092 100644
--- a/apps/v4/registry/bases/radix/ui/calendar.tsx
+++ b/apps/v4/registry/bases/radix/ui/calendar.tsx
@@ -31,7 +31,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "cn-calendar bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
+        "cn-calendar group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -46,80 +46,80 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
+          "cn-calendar-dropdown-root relative rounded-(--cell-radius)",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
+          "absolute inset-0 bg-popover opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "cn-calendar-caption-label flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-(--cell-radius) text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
             : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate",
+          "relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate",
+          "relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted",
           defaultClassNames.range_end
         ),
         today: cn(
-          "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
+          "rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -234,7 +234,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "cn-calendar-day-button data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
+        "cn-calendar-day-button relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/registry/bases/radix/ui/chart.tsx b/apps/v4/registry/bases/radix/ui/chart.tsx
index c985cb6319..cdc9357d56 100644
--- a/apps/v4/registry/bases/radix/ui/chart.tsx
+++ b/apps/v4/registry/bases/radix/ui/chart.tsx
@@ -55,7 +55,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "cn-chart [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "cn-chart flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -187,7 +187,7 @@ function ChartTooltipContent({
               <div
                 key={item.dataKey}
                 className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
                 )}
               >
@@ -232,7 +232,7 @@ function ChartTooltipContent({
                         </span>
                       </div>
                       {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
+                        <span className="font-mono font-medium text-foreground tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -284,7 +284,7 @@ function ChartLegendContent({
             <div
               key={item.value}
               className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
diff --git a/apps/v4/registry/bases/radix/ui/empty.tsx b/apps/v4/registry/bases/radix/ui/empty.tsx
index 894c4e60fa..4746b876a1 100644
--- a/apps/v4/registry/bases/radix/ui/empty.tsx
+++ b/apps/v4/registry/bases/radix/ui/empty.tsx
@@ -73,7 +73,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
     <div
       data-slot="empty-description"
       className={cn(
-        "cn-empty-description text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "cn-empty-description text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/ui/field.tsx b/apps/v4/registry/bases/radix/ui/field.tsx
index 239263f4f8..183fb8315e 100644
--- a/apps/v4/registry/bases/radix/ui/field.tsx
+++ b/apps/v4/registry/bases/radix/ui/field.tsx
@@ -51,9 +51,9 @@ const fieldVariants = cva("cn-field group/field flex w-full", {
       vertical:
         "cn-field-orientation-vertical flex-col *:w-full [&>.sr-only]:w-auto",
       horizontal:
-        "cn-field-orientation-horizontal flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        "cn-field-orientation-horizontal flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       responsive:
-        "cn-field-orientation-responsive flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        "cn-field-orientation-responsive flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
     },
   },
   defaultVariants: {
@@ -127,7 +127,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
       className={cn(
         "cn-field-description leading-normal font-normal group-has-data-horizontal/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
@@ -152,7 +152,7 @@ function FieldSeparator({
       <Separator className="absolute inset-0 top-1/2" />
       {children && (
         <span
-          className="cn-field-separator-content bg-background relative mx-auto block w-fit"
+          className="cn-field-separator-content relative mx-auto block w-fit bg-background"
           data-slot="field-separator-content"
         >
           {children}
diff --git a/apps/v4/registry/bases/radix/ui/input-group.tsx b/apps/v4/registry/bases/radix/ui/input-group.tsx
index 5b5694cb8c..7a5da36742 100644
--- a/apps/v4/registry/bases/radix/ui/input-group.tsx
+++ b/apps/v4/registry/bases/radix/ui/input-group.tsx
@@ -64,7 +64,7 @@ function InputGroupAddon({
 }
 
 const inputGroupButtonVariants = cva(
-  "cn-input-group-button shadow-none flex items-center",
+  "cn-input-group-button flex items-center shadow-none",
   {
     variants: {
       size: {
diff --git a/apps/v4/registry/bases/radix/ui/input.tsx b/apps/v4/registry/bases/radix/ui/input.tsx
index b30b11d5f6..d00c3b57fc 100644
--- a/apps/v4/registry/bases/radix/ui/input.tsx
+++ b/apps/v4/registry/bases/radix/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "cn-input file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "cn-input w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/ui/item.tsx b/apps/v4/registry/bases/radix/ui/item.tsx
index 6472f9e71d..1819e630e5 100644
--- a/apps/v4/registry/bases/radix/ui/item.tsx
+++ b/apps/v4/registry/bases/radix/ui/item.tsx
@@ -34,7 +34,7 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "cn-item w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors",
+  "cn-item group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors",
   {
     variants: {
       variant: {
@@ -137,7 +137,7 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="item-description"
       className={cn(
-        "cn-item-description [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
+        "cn-item-description line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/ui/navigation-menu.tsx b/apps/v4/registry/bases/radix/ui/navigation-menu.tsx
index ed84c3d03c..92961ba701 100644
--- a/apps/v4/registry/bases/radix/ui/navigation-menu.tsx
+++ b/apps/v4/registry/bases/radix/ui/navigation-menu.tsx
@@ -59,7 +59,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "cn-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "cn-navigation-menu-trigger group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center outline-none disabled:pointer-events-none"
 )
 
 function NavigationMenuTrigger({
diff --git a/apps/v4/registry/bases/radix/ui/resizable.tsx b/apps/v4/registry/bases/radix/ui/resizable.tsx
index 9287b2ac8e..53bee5811f 100644
--- a/apps/v4/registry/bases/radix/ui/resizable.tsx
+++ b/apps/v4/registry/bases/radix/ui/resizable.tsx
@@ -35,7 +35,7 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "cn-resizable-handle bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "cn-resizable-handle relative flex w-px items-center justify-center bg-border ring-offset-background after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/ui/scroll-area.tsx b/apps/v4/registry/bases/radix/ui/scroll-area.tsx
index af9419e62f..9f45d3bb9f 100644
--- a/apps/v4/registry/bases/radix/ui/scroll-area.tsx
+++ b/apps/v4/registry/bases/radix/ui/scroll-area.tsx
@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="cn-scroll-area-viewport size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -46,7 +46,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="cn-scroll-area-thumb bg-border relative flex-1"
+        className="cn-scroll-area-thumb relative flex-1 bg-border"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   )
diff --git a/apps/v4/registry/bases/radix/ui/separator.tsx b/apps/v4/registry/bases/radix/ui/separator.tsx
index e448242cc4..cfc2811dbb 100644
--- a/apps/v4/registry/bases/radix/ui/separator.tsx
+++ b/apps/v4/registry/bases/radix/ui/separator.tsx
@@ -17,7 +17,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/ui/sidebar.tsx b/apps/v4/registry/bases/radix/ui/sidebar.tsx
index 09a2c4dd31..de2019bb3f 100644
--- a/apps/v4/registry/bases/radix/ui/sidebar.tsx
+++ b/apps/v4/registry/bases/radix/ui/sidebar.tsx
@@ -137,7 +137,7 @@ function SidebarProvider({
           } as React.CSSProperties
         }
         className={cn(
-          "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+          "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
           className
         )}
         {...props}
@@ -168,7 +168,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
           className
         )}
         {...props}
@@ -186,7 +186,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -206,7 +206,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer hidden text-sidebar-foreground md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -298,7 +298,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
         "cn-sidebar-rail absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
@@ -476,11 +476,11 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "cn-sidebar-menu-button peer/menu-button flex w-full items-center  overflow-hidden outline-hidden group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0",
+  "cn-sidebar-menu-button peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
   {
     variants: {
       variant: {
-        default: "cn-sidebar-menu-button-variant-default ",
+        default: "cn-sidebar-menu-button-variant-default",
         outline: "cn-sidebar-menu-button-variant-outline",
       },
       size: {
@@ -564,7 +564,7 @@ function SidebarMenuAction({
       className={cn(
         "cn-sidebar-menu-action flex items-center justify-center outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:shrink-0",
         showOnHover &&
-          "peer-data-active/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/ui/tabs.tsx b/apps/v4/registry/bases/radix/ui/tabs.tsx
index 1de9766ad2..10b069cf01 100644
--- a/apps/v4/registry/bases/radix/ui/tabs.tsx
+++ b/apps/v4/registry/bases/radix/ui/tabs.tsx
@@ -25,7 +25,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "cn-tabs-list group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
+  "cn-tabs-list group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
   {
     variants: {
       variant: {
@@ -63,10 +63,10 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "cn-tabs-trigger focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "cn-tabs-trigger relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start 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 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-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",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/ui/textarea.tsx b/apps/v4/registry/bases/radix/ui/textarea.tsx
index 5beaf12bfe..d7e09d7fcf 100644
--- a/apps/v4/registry/bases/radix/ui/textarea.tsx
+++ b/apps/v4/registry/bases/radix/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "cn-textarea placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "cn-textarea flex field-sizing-content min-h-16 w-full outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/ui/toggle.tsx b/apps/v4/registry/bases/radix/ui/toggle.tsx
index 0481f512fe..12ba1623ee 100644
--- a/apps/v4/registry/bases/radix/ui/toggle.tsx
+++ b/apps/v4/registry/bases/radix/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { Toggle as TogglePrimitive } from "radix-ui"
 import { cn } from "@/registry/bases/radix/lib/utils"
 
 const toggleVariants = cva(
-  "cn-toggle group/toggle hover:bg-muted inline-flex items-center justify-center whitespace-nowrap outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "cn-toggle group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
diff --git a/apps/v4/registry/bases/radix/ui/tooltip.tsx b/apps/v4/registry/bases/radix/ui/tooltip.tsx
index dd9f97dcf6..5dbba467c3 100644
--- a/apps/v4/registry/bases/radix/ui/tooltip.tsx
+++ b/apps/v4/registry/bases/radix/ui/tooltip.tsx
@@ -42,13 +42,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "cn-tooltip-content bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)",
+          "cn-tooltip-content z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) bg-foreground text-background",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="cn-tooltip-arrow bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]" />
+        <TooltipPrimitive.Arrow className="cn-tooltip-arrow z-50 translate-y-[calc(-50%_-_2px)] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
diff --git a/apps/v4/registry/config.ts b/apps/v4/registry/config.ts
index 0fce7ca99d..54d71f7fa9 100644
--- a/apps/v4/registry/config.ts
+++ b/apps/v4/registry/config.ts
@@ -94,7 +94,21 @@ export const designSystemConfigSchema = z
     radius: z
       .enum(RADII.map((r) => r.name) as [RadiusValue, ...RadiusValue[]])
       .default("default"),
-    template: z.enum(["next", "start", "vite"]).default("next").optional(),
+    template: z
+      .enum([
+        "next",
+        "next-monorepo",
+        "start",
+        "react-router",
+        "vite",
+        "vite-monorepo",
+        "react-router-monorepo",
+        "start-monorepo",
+        "astro",
+        "astro-monorepo",
+      ])
+      .default("next")
+      .optional(),
   })
   .refine(
     (data) => {
@@ -151,12 +165,12 @@ export const PRESETS: Preset[] = [
   {
     name: "radix-nova",
     title: "Nova (Radix)",
-    description: "Nova / Hugeicons / Geist",
+    description: "Nova / Lucide / Geist",
     base: "radix",
     style: "nova",
     baseColor: "neutral",
     theme: "neutral",
-    iconLibrary: "hugeicons",
+    iconLibrary: "lucide",
     font: "geist",
     item: "Item",
     rtl: false,
@@ -188,7 +202,7 @@ export const PRESETS: Preset[] = [
     style: "lyra",
     baseColor: "neutral",
     theme: "neutral",
-    iconLibrary: "hugeicons",
+    iconLibrary: "phosphor",
     font: "jetbrains-mono",
     item: "Item",
     rtl: false,
@@ -216,12 +230,12 @@ export const PRESETS: Preset[] = [
   {
     name: "base-nova",
     title: "Nova (Base)",
-    description: "Nova / Hugeicons / Geist",
+    description: "Nova / Lucide / Geist",
     base: "base",
     style: "nova",
     baseColor: "neutral",
     theme: "neutral",
-    iconLibrary: "hugeicons",
+    iconLibrary: "lucide",
     font: "geist",
     item: "Item",
     rtl: false,
@@ -253,7 +267,7 @@ export const PRESETS: Preset[] = [
     style: "lyra",
     baseColor: "neutral",
     theme: "neutral",
-    iconLibrary: "hugeicons",
+    iconLibrary: "phosphor",
     font: "jetbrains-mono",
     item: "Item",
     rtl: false,
@@ -354,10 +368,10 @@ export function buildRegistryTheme(config: DesignSystemConfig) {
     lightVars["accent-foreground"] = lightVars["primary-foreground"]
     darkVars.accent = darkVars.primary
     darkVars["accent-foreground"] = darkVars["primary-foreground"]
-    lightVars["sidebar-accent"] = lightVars.primary
-    lightVars["sidebar-accent-foreground"] = lightVars["primary-foreground"]
-    darkVars["sidebar-accent"] = darkVars.primary
-    darkVars["sidebar-accent-foreground"] = darkVars["primary-foreground"]
+    // lightVars["sidebar-accent"] = lightVars.primary
+    // lightVars["sidebar-accent-foreground"] = lightVars["primary-foreground"]
+    // darkVars["sidebar-accent"] = darkVars.primary
+    // darkVars["sidebar-accent-foreground"] = darkVars["primary-foreground"]
   }
 
   // Apply radius transformation.
@@ -433,7 +447,7 @@ export function buildRegistryBase(config: DesignSystemConfig) {
       },
     },
     ...(config.rtl && {
-      docs: `To learn how to set up the RTL provider and fonts for your app, see https://ui.shadcn.com/docs/rtl/${config.template ?? "next"}`,
+      docs: `To learn how to set up the RTL provider and fonts for your app, see https://ui.shadcn.com/docs/rtl/${config.template === "next-monorepo" ? "next" : (config.template ?? "next")}`,
     }),
   }
 }
diff --git a/apps/v4/registry/directory.json b/apps/v4/registry/directory.json
index f6c508ab44..906fdbba5d 100644
--- a/apps/v4/registry/directory.json
+++ b/apps/v4/registry/directory.json
@@ -1,4 +1,11 @@
 [
+  {
+    "name": "@lmscn",
+    "homepage": "https://lmscn.vercel.app",
+    "url": "https://lmscn.vercel.app/r/{name}.json",
+    "description": "LMS components for building interactive learning experiences — quiz, flashcards, matching, fill-in-the-blank, word scramble, sequencing, reading comprehension, spaced repetition and more.",
+    "logo": "<svg width=\"125\" height=\"125\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 400 90\" fill=\"none\" role=\"img\" aria-label=\"lmscn\"><g transform=\"translate(5,5)\"><path d=\"M 2,2 L 40,2 L 40,13 A 7,7 0 0,1 40,27 L 40,40 L 27,40 A 7,7 0 0,1 13,40 L 2,40 Z\" fill=\"#06b6d4\"/><path d=\"M 40,2 L 78,2 L 78,40 L 67,40 A 7,7 0 0,1 53,40 L 40,40 L 40,27 A 7,7 0 0,0 40,13 L 40,2 Z\" fill=\"#2563eb\"/><path d=\"M 2,40 L 13,40 A 7,7 0 0,0 27,40 L 40,40 L 40,53 A 7,7 0 0,1 40,67 L 40,78 L 2,78 Z\" fill=\"#f59e0b\"/><path d=\"M 40,40 L 53,40 A 7,7 0 0,0 67,40 L 78,40 L 78,78 L 40,78 L 40,67 A 7,7 0 0,0 40,53 L 40,40 Z\" fill=\"#8b5cf6\"/></g><text x=\"108\" y=\"80\" font-family=\"'DM Mono', 'Fira Code', ui-monospace, monospace\" font-weight=\"700\" font-size=\"64\" letter-spacing=\"-2\" fill=\"currentColor\">lmscn</text></svg>"
+  },
   {
     "name": "@8bitcn",
     "homepage": "https://www.8bitcn.com",
@@ -265,6 +272,14 @@
     "description": "Production-ready UI components designed for building beautiful AI assistants and conversational interfaces, from the team behind GAIA.",
     "logo": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2441.45 2400'><defs><style>.cls-1{fill:#0f537c}.cls-2{fill:#02bdff}.cls-3{fill:#059cda}</style></defs><g id='Layer_1' data-name='Layer 1'><g><path class='cls-3' d='M2294.76,754.91c52.05,40.47,71.76,93.13,90.55,154.88,197.81,650.16-261.39,1391.76-935.7,1488.14-21.8,3.12-71.79-10.84-92.82-19.75,56.56,5.45,107.78-12.37,158.53-34.53,231.32-101.03,347.34-289.02,356.36-540.29,2.82-78.64-6.26-139.1-15.36-215-.17-1.41.2-2.97,0-4.36,10.57.02,20.27-4.54,29.83-8.35,160.58-63.98,349.04-190.78,416.22-356.05,43.56-107.16,57.02-244.62,35.39-358.23-7.47-39.21-20.03-73.69-42.99-106.46Z'/><path class='cls-3' d='M148.33,759.27c-66.61,93.84-55.47,288.96-25.54,395.37,53.37,189.75,213.09,315.21,384.68,396.32,24.67,11.66,53.12,24.23,79.31,30.86l2.18,4.36c-1.66,6.59-5.46,14.39-6.37,20.9-21.41,152.78-12.44,330.19,53.98,471.49,64.34,136.89,285.66,307.41,441.01,301.8-49.61,22.02-102.16,12.47-153.1,1.5C286.1,2244.42-134.68,1528.46,62.69,901.61c14.68-46.61,31.08-89.68,64.6-126.3l21.04-16.04Z'/><path class='cls-3' d='M290.12,514.91c5.34-52.72,39.4-94.96,73.04-133.12,426.06-483.19,1252.51-488.16,1697.43-27.57,43.5,45.03,89.12,97.14,98.92,160.69-42.11-71.19-117.1-125.07-189.73-162.59-204.09-105.44-387.41-82.71-583.93,24.76-47.65,26.06-104.22,61.67-145.71,96.44-4.4,3.69-8.87,8.24-12.06,13.03h-6.54c-29.89-30.53-68.56-56.62-104.89-79.45-149.66-94.07-319.77-154.18-497.17-109.29-97.33,24.63-290.5,119.22-329.37,217.1ZM547.52,233.44c1.45,1.35,8.65-1.02,8.67-3.26.06-6.51-12.83-.61-8.67,3.26Z'/><path class='cls-1' d='M1856.31,1584c-5.67-40.19-5.48-89.09-4.45-129.91,5.15-203.81,70.21-488.23,209.55-643.49,58.33-65,152.18-118.81,233.35-55.69,22.96,32.77,35.52,67.24,42.99,106.46,21.63,113.62,8.17,251.08-35.39,358.23-67.18,165.27-255.63,292.07-416.22,356.05-9.56,3.81-19.26,8.37-29.83,8.35Z'/><path class='cls-1' d='M588.96,1586.18c131.16,59.49,255.06,148.11,356.9,249.61,95.16,94.85,235.97,275.99,227.8,417.03-3,51.75-34.83,114.47-89.54,125.35-1.76.35-3.74-.05-4.36,2.18-.72.06-1.46-.03-2.18,0-155.36,5.62-376.67-164.91-441.01-301.8-66.41-141.3-75.38-318.71-53.98-471.49.91-6.51,4.71-14.31,6.37-20.9Z'/><path class='cls-1' d='M1221.55,486.55c-117.35,84.94-258.36,147.92-398.71,184.83-132.56,34.87-378.72,69.78-490.24-27.69-32.68-28.56-59.45-86.04-42.48-128.78,38.87-97.88,232.04-192.47,329.37-217.1,177.4-44.9,347.51,15.22,497.17,109.29,36.33,22.84,75,48.92,104.89,79.45Z'/><path class='cls-2' d='M1856.31,1588.36c9.1,75.9,18.18,136.36,15.36,215-9.02,251.27-125.04,439.26-356.36,540.29-50.75,22.16-101.96,39.98-158.53,34.53-126.94-53.77-87.47-203.8-38.27-301.19,95.44-188.97,303.5-371.35,490.07-467.64,15.29-7.89,31.28-16.21,47.73-20.99Z'/><path class='cls-2' d='M148.33,759.27c1.09-1.54,1.16-4.77,2.73-5.94,51.61-33.19,101.95-35.59,156.6-6.16,144.17,77.63,232.06,337.61,261.03,489.46,21.52,112.79,30.38,230.97,18.09,345.18-26.19-6.63-54.64-19.2-79.31-30.86-171.59-81.11-331.31-206.57-384.68-396.32-29.93-106.41-41.07-301.52,25.54-395.37Z'/><path class='cls-2' d='M2159.52,514.91c18.04,116.94-78.85,167.98-178.46,184.77-146.36,24.67-319.01-11.4-457.43-60.36-103.63-36.66-207.05-87.74-295.53-152.77,3.19-4.79,7.66-9.34,12.06-13.03,41.49-34.77,98.06-70.38,145.71-96.44,196.52-107.47,379.84-130.2,583.93-24.76,72.63,37.52,147.62,91.41,189.73,162.59Z'/><path class='cls-3' d='M1084.12,2378.18c-.68,2.09-2.49,2.04-4.36,2.18.63-2.23,2.6-1.83,4.36-2.18Z'/><path class='cls-1' d='M547.52,233.44c-4.16-3.87,8.74-9.77,8.67-3.26-.02,2.24-7.22,4.61-8.67,3.26Z'/></g></g><g id='Layer_2' data-name='Layer 2'><path class='cls-3' d='M568.24,221.98c.9,7.44,1.13,14.95.68,22.43-.07,1.15-.25,2.47-1.22,3.09-.59.38-1.34.39-2.05.4-7.23.02-14.47.03-21.7.05-2.1,0-4.57-.18-5.69-1.96-.61-.98-.64-2.2-.65-3.35-.01-2.17-.03-4.33-.04-6.5-.07-11.62,30.13-18.53,30.67-14.16Z'/></g></svg>"
   },
+  {
+    "name": "@gc-solid",
+    "url": "https://binnodon.github.io/gc-solid-ui/r/{name}.json",
+    "description": "SolidJS port of shadcn-ui components built with Kobalte primitives. 57+ components with full TypeScript support and Vega theme.",
+    "author": "binnodon",
+    "homepage": "https://binnodon.github.io/gc-solid-ui",
+    "logo": "<svg width='21.273001mm' height='21.814894mm' viewBox='0 0 21.273001 21.814894' xmlns='http://www.w3.org/2000/svg'> <g transform='translate(-80.962498,-79.639585)'> <g transform='matrix(0.26458333,0,0,0.26458333,-43.02125,66.000312)'> <path d='m 485.2,109.2 c -6.7,-2.9 -9.8,-10.6 -7,-17.4 2.9,-6.7 10.6,-9.8 17.4,-7 6.7,2.9 9.8,10.6 7,17.4 -2.9,6.7 -10.6,9.8 -17.4,7' style='fill:#ffffff;stroke-width:0px'/> <path d='m 482.2,95.8 c 0,-0.4 0.3,-0.8 0.8,-0.8 0.5,0 0.8,0.3 0.8,0.8 0,0.5 -0.3,0.8 -0.8,0.8 -0.5,0 -0.8,-0.3 -0.8,-0.8 z' style='fill:#26683b;fill-rule:evenodd;stroke-width:0px'/> <path d='m 484.9,101.2 c 0,-0.4 0.3,-0.8 0.8,-0.8 0.5,0 0.8,0.3 0.8,0.8 0,0.5 -0.3,0.8 -0.8,0.8 -0.5,0 -0.8,-0.3 -0.8,-0.8 z' style='fill:#26683b;fill-rule:evenodd;stroke-width:0px'/> <path d='m 487.8,101.6 c 0,-0.4 0.3,-0.8 0.8,-0.8 0.5,0 0.8,0.3 0.8,0.8 0,0.5 -0.3,0.8 -0.8,0.8 -0.5,0 -0.8,-0.3 -0.8,-0.8 z' style='fill:#26683b;fill-rule:evenodd;stroke-width:0px'/> <path d='m 481.9,101 c 0,-0.4 0.3,-0.8 0.8,-0.8 0.5,0 0.8,0.3 0.8,0.8 0,0.5 -0.3,0.8 -0.8,0.8 -0.5,0 -0.8,-0.3 -0.8,-0.8 z' style='fill:#26683b;fill-rule:evenodd;stroke-width:0px'/> <path d='m 483.8,103.5 c 0,-0.4 0.3,-0.8 0.8,-0.8 0.5,0 0.8,0.3 0.8,0.8 0,0.5 -0.3,0.8 -0.8,0.8 -0.5,0 -0.8,-0.3 -0.8,-0.8 z' style='fill:#26683b;fill-rule:evenodd;stroke-width:0px'/> <path d='m 480.8,98.4 c 0,-0.4 0.3,-0.8 0.8,-0.8 0.5,0 0.8,0.3 0.8,0.8 0,0.5 -0.3,0.8 -0.8,0.8 -0.5,0 -0.8,-0.3 -0.8,-0.8 z' style='fill:#26683b;fill-rule:evenodd;stroke-width:0px'/> <path d='m 486.6,104.2 c 0,-0.4 0.3,-0.8 0.8,-0.8 0.5,0 0.8,0.3 0.8,0.8 0,0.5 -0.3,0.8 -0.8,0.8 -0.5,0 -0.8,-0.3 -0.8,-0.8 z' style='fill:#26683b;fill-rule:evenodd;stroke-width:0px'/> <path d='m 483.7,98.3 c 0,-0.4 0.3,-0.8 0.8,-0.8 0.5,0 0.8,0.3 0.8,0.8 0,0.5 -0.3,0.8 -0.8,0.8 -0.5,0 -0.8,-0.3 -0.8,-0.8 z' style='fill:#26683b;fill-rule:evenodd;stroke-width:0px'/> <path d='m 486.6,98.9 c 0,-0.4 0.3,-0.8 0.8,-0.8 0.5,0 0.8,0.3 0.8,0.8 0,0.5 -0.3,0.8 -0.8,0.8 -0.5,0 -0.8,-0.3 -0.8,-0.8 z' style='fill:#26683b;fill-rule:evenodd;stroke-width:0px'/> </g> <g transform='matrix(0.26458333,0,0,0.26458333,-43.02125,66.000312)'> <path d='m 473.1,130.1 c -1.7,-0.6 -2.7,-2 -2.7,-3.8 0,-1.8 1.8,-4 4.1,-4 2.3,0 1.3,0.2 1.8,0.4 3.8,2.2 8.1,3.4 13,3.4 8.7,0 13.4,-4.5 13.4,-13 v -1.8 c -3.5,4.6 -7.9,6.3 -14.9,6.3 -9.9,0 -19.2,-7.4 -19.2,-19.8 v -0.2 c 0,-12.5 9.4,-19.9 19.2,-19.9 9.8,0 11.5,2.3 14.8,6.2 v -1 c 0,-2.6 2.2,-4.8 4.8,-4.8 2.6,0 4.9,2.2 4.9,4.9 v 29.3 c 0,7.1 -1.8,12.4 -5.4,16 -3.8,3.8 -9.8,5.7 -17.4,5.7 -7.6,0 -11.2,-1.3 -16.4,-3.8 z m 29.6,-32.4 v -0.2 c 0,-6.9 -5.7,-11.6 -12.4,-11.6 -6.7,0 -12,4.7 -12,11.6 v 0.2 c 0,6.9 5.4,11.6 12,11.6 6.6,0 12.4,-4.7 12.4,-11.6 z' style='fill:#26683b;stroke-width:0px'/> <path d='m 510.1,100 v -0.2 c 0,-12 9.3,-22.1 22.1,-22.1 12.8,0 15.85215,6.725273 15.13834,5.3 0.6,0.6 1.16166,1.8 1.16166,3.4 0,2.5 -2.04229,4.526877 -4.5,4.4 -2.49668,-0.128888 -2.2,-0.5 -2.9,-1 -2.5,-2.1 -5.2,-3.6 -9.1,-3.6 -7.1,0 -12.3,6.1 -12.3,13.5 v 0.2 c 0,7.5 5.2,13.6 12.7,13.6 7.5,0 6.8,-1.5 9.5,-3.8 0.6,-0.5 1.5,-1 2.6,-1 2.3,0 4.24229,1.90037 4.2,4.3 -0.0423,2.4 -0.3257,2.00307 -1.31542,3.21146 C 544.70602,118.8844 539,122 531.9,122 519.3,122 510,112.1 510,100.1 Z' style='fill:#26683b;stroke-width:0px'/> </g> <line x1='97.710632' y1='79.970314' x2='97.710632' y2='92.617393' style='fill:none;stroke:#4b2c78;stroke-width:0.661458px;stroke-linecap:round;stroke-miterlimit:10'/> <path d='m 98.028123,80.711145 c 0,0 2.487087,1.137708 4.206877,0.9525 v 3.942292 c -1.03188,0.105833 -2.831043,0 -4.206877,-0.899584 z' style='fill:#4b2c78;stroke-width:0px'/> </g> </svg>"
+  },
   {
     "name": "@glass-ui",
     "homepage": "https://glass-ui.crenspire.com",
@@ -288,8 +303,8 @@
   },
   {
     "name": "@hooks",
-    "homepage": "https://shadcn-hooks.vercel.app",
-    "url": "https://shadcn-hooks.vercel.app/r/{name}.json",
+    "homepage": "https://shadcn-hooks.com",
+    "url": "https://shadcn-hooks.com/r/{name}.json",
     "description": "A comprehensive React Hooks Collection built with Shadcn.",
     "logo": "<svg width='256' height='256' viewBox='0 0 256 256' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M208 128L128 208' stroke='var(--foreground)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/><path d='M192 40L40 192' stroke='var(--foreground)' stroke-width='32' stroke-linecap='round' stroke-linejoin='round'/><rect x='27' y='28' width='70' height='70' rx='7' fill='var(--foreground)'/></svg>"
   },
@@ -538,6 +553,13 @@
     "description": "ScrollX UI is an open-source React and shadcn-compatible component library for animated, interactive, and customizable user interfaces. It offers motion-driven components that blend seamlessly with modern ShadCN setups.",
     "logo": "<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none'><path d='M5.999 17a3 3 0 0 1-1.873-.658a2.98 2.98 0 0 1-1.107-2.011a2.98 2.98 0 0 1 .639-2.206l4-5c.978-1.225 2.883-1.471 4.143-.523l1.674 1.254l2.184-2.729a3 3 0 1 1 4.682 3.747l-4 5c-.977 1.226-2.882 1.471-4.143.526l-1.674-1.256l-2.184 2.729A2.98 2.98 0 0 1 5.999 17M10 8a1 1 0 0 0-.781.374l-4 5.001a1 1 0 0 0-.213.734c.03.266.161.504.369.67a.996.996 0 0 0 1.406-.155l3.395-4.244L13.4 12.8c.42.316 1.056.231 1.381-.176l4-5.001a1 1 0 0 0 .213-.734a1 1 0 0 0-.369-.67a.996.996 0 0 0-1.406.156l-3.395 4.242L10.6 8.2A1 1 0 0 0 10 8m9 13H5a1 1 0 1 1 0-2h14a1 1 0 1 1 0 2' fill='var(--foreground)'/></svg>"
   },
+  {
+    "name": "@spell",
+    "homepage": "https://spell.sh",
+    "url": "https://spell.sh/r/{name}.json",
+    "description": "Beautiful, sophisticated UI components designed for modern React and Tailwind CSS applications.",
+    "logo": "<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 262 278' fill='none'><path d='M57.6541 65.6418C58.8281 64.8226 60.4465 65.2097 61.2647 66.3823C64.3285 70.7734 68.3982 73.8437 73.2472 75.6378L73.3016 75.6581L92.6744 82.6771C95.575 83.7281 97.8595 86.0054 98.9135 88.896L105.957 108.209L105.978 108.263C107.777 113.094 111.016 117.262 115.261 120.205C119.507 123.148 124.556 124.727 129.729 124.727C134.902 124.727 139.951 123.148 144.197 120.205C148.443 117.262 151.681 113.094 153.48 108.263L153.521 108.155L160.545 88.8977C161.599 86.0081 163.882 83.7316 166.782 82.6805C176.525 79.148 187.434 82.5762 193.381 91.039L223.505 133.91C223.516 133.925 223.524 133.942 223.534 133.957C228.045 140.476 226.441 149.411 219.921 153.96L117.032 225.751C111.613 229.533 110.798 237.692 115.213 243.976C119.63 250.261 127.604 252.292 133.024 248.51L239.241 174.706C245.791 170.156 254.802 171.748 259.381 178.266C263.973 184.801 262.368 193.81 255.801 198.374L149.632 272.144C132.954 283.78 108.421 277.536 94.8322 258.199C93.5324 256.349 92.381 254.445 91.3741 252.506C91.3172 252.396 91.1589 252.398 91.1049 252.509C91.055 252.612 90.9129 252.623 90.8473 252.53L3.77438 128.615C-2.83414 119.21 -0.539816 106.247 8.89813 99.6622L21.4057 90.9343C21.4336 90.9148 21.472 90.9217 21.4914 90.9496C21.513 90.9807 21.5574 90.985 21.5848 90.9588C21.9663 90.5947 22.3802 90.2545 22.8263 89.9432L57.6541 65.6418Z' fill='var(--foreground)'/><path d='M184.781 55.435C184.793 57.0601 184.298 58.6488 183.363 59.9801C182.428 61.3115 181.1 62.3194 179.564 62.8638L160.243 69.8673C152.51 72.6702 146.42 78.741 143.609 86.4472L136.586 105.703C136.021 107.22 135.004 108.528 133.672 109.451C132.34 110.375 130.756 110.87 129.133 110.87C127.51 110.87 125.926 110.375 124.594 109.451C123.262 108.528 122.245 107.22 121.68 105.703L114.657 86.4455C111.846 78.7374 105.754 72.6654 98.0192 69.8629L78.7019 62.8638C77.1805 62.3009 75.8684 61.2874 74.9418 59.9594C74.0152 58.6314 73.5186 57.0526 73.5186 55.435C73.5186 53.8174 74.0152 52.2386 74.9418 50.9106C75.8684 49.5826 77.1805 48.5691 78.7019 48.0062L98.0192 41.0071C105.754 38.2046 111.846 32.1326 114.657 24.4245L121.68 5.16662C122.245 3.65013 123.262 2.34224 124.594 1.41864C125.926 0.49505 127.51 0 129.133 0C130.756 0 132.34 0.49505 133.672 1.41864C135.004 2.34224 136.021 3.65013 136.586 5.16662L143.613 24.4281C146.424 32.1342 152.515 38.2044 160.248 41.0066L179.564 48.0062C181.1 48.5506 182.428 49.5585 183.363 50.8899C184.298 52.2213 184.793 53.8099 184.781 55.435Z' fill='var(--foreground)'/></svg>"
+  },
   {
     "name": "@square-ui",
     "homepage": "https://square.lndev.me",
@@ -937,6 +959,20 @@
     "description": "Playful pixel art style components library built on top of shadcn. Perfect for retro style projects and games.",
     "logo": "<svg width='142' height='183' viewBox='0 0 142 183' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M15.2064 180.083L42.174 153.149L69.5072 125.849L69.862 125.494L70.3635 125.483L78.0303 125.317H78.0312C85.7118 125.157 88.5765 124.815 94.003 123.399L94.5365 123.258L94.5395 123.257C103.166 120.989 113.098 115.162 120.204 108.182L120.54 107.849L120.541 107.848C135.619 92.8027 141.526 73.2859 137.398 51.9169L137.298 51.4119C135.855 44.2949 132.025 35.3652 127.809 29.3779L127.608 29.0949L127.607 29.0937C124.909 25.3219 119.092 19.2102 115.617 16.4485C105.997 8.98633 94.9963 4.66338 82.8733 3.62622L82.295 3.57934L82.292 3.5791C79.8227 3.38418 62.0647 3.24976 39.8237 3.24976H2.80725V147.144L14.7057 135.217L28.405 121.518L28.2073 76.3719L28.0073 30.6719L28.0018 29.4162H53.9905C80.7573 29.4162 82.1783 29.4669 87.8193 31.3472L87.8218 31.3479L87.8238 31.3487C93.027 33.1059 97.0828 35.5327 101.114 39.3222L101.115 39.3234L101.116 39.3247C105.58 43.5467 108.758 48.7357 110.652 54.8639L110.653 54.8684C111.077 56.2607 111.331 57.1967 111.464 58.5802C111.592 59.9097 111.607 61.6499 111.607 64.6592C111.639 70.1252 111.588 71.4352 110.957 73.6892L110.823 74.1542C107.224 86.6017 97.5303 95.6487 84.5165 98.7817L84.51 98.7832L84.503 98.7847L84.3335 98.8217C82.6505 99.1737 79.6405 99.3334 73.387 99.4574L72.0462 99.4829H72.0448L62.5187 99.6412L48.7433 113.481C42.919 119.356 33.8113 128.513 25.8964 136.478L18.5446 143.88L18.5429 143.882L2.80725 159.683V180.083H15.2064Z' fill='white' stroke='black' stroke-width='5'/></svg>"
   },
+  {
+    "name": "@emerald-ui",
+    "homepage": "https://emerald-ui.com",
+    "url": "https://emerald-ui.com/r/{name}.json",
+    "description": "Emerald UI - collection of components built with Motion, GSAP, Tailwind CSS and shadcn/ui.",
+    "logo": "<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80' fill='none'><rect width='80' height='80' fill='white'/><g clip-path='url(#clip0_595_36)'><path d='M24.0805 33.0063C24.0806 34.1027 24.0891 35.1306 24.0787 36.1583C24.0639 37.6024 23.0121 38.2398 21.7448 37.5214C19.0636 36.0015 16.4085 34.4364 13.7403 32.8938C13.123 32.537 12.4933 32.2012 11.8745 31.847C11.0054 31.3496 10.5789 30.6428 10.5886 29.6043C10.6209 26.1329 10.6493 22.6597 10.5673 19.1898C10.5302 17.6206 11.6254 16.7907 13.1718 17.6763C15.9664 19.2769 18.7463 20.9025 21.5327 22.517C21.9904 22.7822 22.4504 23.0437 22.9086 23.308C23.7454 23.7907 24.1063 24.5073 24.0964 25.4691C24.0709 27.9584 24.0832 30.4482 24.0805 33.0063Z' fill='black'/><path d='M10.5936 57.5526C10.5935 55.9539 10.5883 54.4237 10.5945 52.8935C10.6002 51.5036 11.6471 50.835 12.8832 51.5182C15.1176 52.753 17.308 54.0659 19.516 55.3477C20.5703 55.9597 21.6111 56.5958 22.6795 57.1826C23.6658 57.7242 24.1172 58.4947 24.1049 59.6318C24.0683 63.0344 24.0943 66.4376 24.0893 69.8405C24.0867 71.6056 23.0684 72.1982 21.5221 71.319C18.283 69.4773 15.0554 67.6159 11.8187 65.7703C10.9854 65.2952 10.5656 64.6369 10.5841 63.6504C10.6218 61.6413 10.5942 59.631 10.5936 57.5526Z' fill='black'/><path d='M65.118 52.658C65.8826 52.2257 66.5838 51.778 67.3307 51.4249C68.4283 50.9061 69.5036 51.552 69.5094 52.752C69.527 56.4052 69.5037 60.0587 69.4954 63.7121C69.4931 64.7298 68.8843 65.3277 68.0564 65.8007C65.3011 67.375 62.5543 68.9637 59.8045 70.5474C59.2468 70.8686 58.7065 71.2244 58.1297 71.5074C56.9857 72.0686 56.0234 71.47 56.021 70.2046C56.0139 66.5055 56.031 62.8063 56.0113 59.1074C56.0061 58.1427 56.5538 57.607 57.3086 57.1715C59.6991 55.7924 62.0878 54.4102 64.4773 53.0293C64.6764 52.9142 64.8759 52.7996 65.118 52.658Z' fill='black'/><path d='M20.0154 9.92146C21.1933 9.23838 22.3319 8.58795 23.4562 7.914C24.4687 7.30701 25.442 7.34392 26.454 7.9404C29.4461 9.70405 32.4534 11.4424 35.4542 13.1916C36.9367 14.0558 36.9824 15.2764 35.5139 16.1435C32.4839 17.9326 29.4226 19.6696 26.3891 21.4529C25.3672 22.0536 24.4202 22.0373 23.4018 21.4342C20.4532 19.688 17.4823 17.9787 14.5208 16.2536C14.3818 16.1727 14.248 16.0825 14.1149 15.9922C12.8809 15.1557 12.8888 14.0457 14.1712 13.2889C16.0928 12.1551 18.0359 11.0571 20.0154 9.92146Z' fill='black'/><path d='M20.397 53.6549C18.3373 52.4319 16.3141 51.2456 14.3066 50.0339C12.9779 49.2319 12.9873 48.0584 14.3333 47.2632C17.3022 45.5092 20.2952 43.795 23.2553 42.0265C24.4541 41.3103 25.5461 41.3275 26.7451 42.0534C29.6946 43.8393 32.6855 45.5582 35.6567 47.3092C37.0402 48.1246 37.0965 49.1566 35.7313 49.9721C32.5344 51.8818 29.3089 53.7447 26.0872 55.6136C25.3342 56.0504 24.5503 56.0528 23.7842 55.612C22.6685 54.97 21.5548 54.3247 20.397 53.6549Z' fill='black'/><path d='M40.9425 64.4996C40.7907 64.1193 40.8045 63.7755 40.8054 63.4326C40.8128 60.4163 40.8145 57.4 40.83 54.3837C40.8331 53.7909 40.8836 53.1981 40.92 52.6057C40.9827 51.5833 41.953 50.9526 42.8908 51.3845C43.6622 51.7398 44.3908 52.1893 45.1262 52.6176C47.5918 54.0536 50.0365 55.5259 52.5212 56.9286C53.6812 57.5835 54.2233 58.4208 54.1893 59.7996C54.1065 63.1567 54.156 66.5172 54.1687 69.8763C54.1713 70.5545 54.071 71.1593 53.4187 71.5255C52.7626 71.8937 52.179 71.6465 51.5993 71.3082C48.5188 69.5104 45.4357 67.717 42.351 65.9263C41.765 65.5862 41.2164 65.2168 40.9425 64.4996Z' fill='black'/><path d='M61.229 44.615C62.7425 45.4997 64.2125 46.359 65.6814 47.2202C67.1558 48.0847 67.1855 49.2301 65.7188 50.0865C62.6193 51.8963 59.5031 53.6781 56.394 55.4717C55.5484 55.9595 54.7055 56.0085 53.8415 55.5006C50.6679 53.635 47.4848 51.7853 44.3153 49.913C43.023 49.1497 42.9793 48.1529 44.2551 47.394C47.4586 45.4887 50.6879 43.6257 53.9204 41.7688C54.7077 41.3166 55.5554 41.2965 56.3618 41.7634C57.9746 42.6972 59.5778 43.6472 61.229 44.615Z' fill='black'/><path d='M62.0452 11.0333C63.3013 11.7655 64.5154 12.4696 65.7217 13.1867C65.9968 13.3502 66.27 13.5324 66.5006 13.751C67.1208 14.3388 67.1107 15.0882 66.4811 15.6685C65.8317 16.2671 65.017 16.617 64.2664 17.0615C61.9702 18.4211 59.6347 19.7188 57.3792 21.1412C55.9937 22.0149 54.7777 22.089 53.3493 21.2035C50.6134 19.5075 47.7882 17.9535 45.0162 16.3136C43.1336 15.1998 43.1299 14.2145 44.9941 13.1228C47.9324 11.4021 50.8932 9.71901 53.8275 7.99161C54.8457 7.39221 55.7897 7.3667 56.8118 7.98615C58.5233 9.02339 60.2691 10.005 62.0452 11.0333Z' fill='black'/><path d='M54.1773 24.3933C54.3414 24.8444 54.3111 25.2593 54.3114 25.6691C54.3136 29.097 54.3067 32.525 54.3157 35.953C54.3174 36.6152 54.3003 37.2563 53.6248 37.622C52.9553 37.9845 52.3733 37.6627 51.8097 37.3333C49.1276 35.766 46.467 34.1616 43.7637 32.6311C40.6091 30.8451 41.1423 30.8975 41.0458 28.0381C40.9464 25.0906 40.9971 22.1436 40.9627 19.1965C40.9424 17.4535 41.9973 16.8053 43.5313 17.6731C46.7365 19.4862 49.9091 21.3561 53.0889 23.2129C53.5481 23.4811 53.9581 23.8202 54.1773 24.3933Z' fill='black'/><path d='M63.6121 19.6277C64.7284 18.9755 65.8009 18.3487 66.8739 17.7227C67.2543 17.5008 67.6419 17.3095 68.1043 17.324C68.7894 17.3455 69.2474 17.6556 69.4026 18.328C69.4687 18.6145 69.5021 18.9146 69.5027 19.2087C69.5096 22.5433 69.4772 25.8784 69.5231 29.2124C69.5399 30.4337 69.0293 31.2525 68.0101 31.8467C64.97 33.6191 61.9389 35.4067 58.8927 37.1688C58.2865 37.5195 57.6408 37.9824 56.8997 37.5267C56.1701 37.0782 56.1763 36.3106 56.1761 35.5703C56.175 32.2585 56.2037 28.9463 56.1576 25.6352C56.1418 24.4965 56.5785 23.7154 57.5448 23.1577C59.5568 21.9966 61.5611 20.8224 63.6121 19.6277Z' fill='black'/><path d='M37.9025 65.7743C34.7519 67.5947 31.6449 69.3898 28.5355 71.1807C28.2574 71.3409 27.9759 71.5101 27.6742 71.6126C26.9102 71.872 26.0905 71.3596 25.9758 70.5691C25.9464 70.367 25.9563 70.1588 25.9549 69.9534C25.9309 66.4835 25.9176 63.0136 25.8787 59.544C25.8674 58.5423 26.2093 57.8046 27.1184 57.281C30.368 55.4098 33.6146 53.5319 36.8239 51.5942C38.146 50.796 39.1791 51.8422 39.1817 52.9191C39.1905 56.5509 39.1879 60.1828 39.1777 63.8147C39.1752 64.7002 38.6844 65.3084 37.9025 65.7743Z' fill='black'/><path d='M39.2 20.1183C39.1979 23.1313 39.1305 26.0782 39.2215 29.0203C39.266 30.4579 38.664 31.3353 37.4815 32.0086C34.6444 33.624 31.8254 35.2704 28.9985 36.9033C28.6006 37.1332 28.2147 37.3912 27.7966 37.5775C26.8443 38.002 25.9653 37.4884 25.9602 36.4522C25.941 32.5717 25.9582 28.6909 25.9719 24.8103C25.975 23.925 26.6227 23.5036 27.2952 23.1156C29.665 21.7482 32.0359 20.3828 34.404 19.0126C35.1801 18.5635 35.9355 18.0778 36.7238 17.6514C38.0875 16.9137 39.1897 17.5653 39.2006 19.0913C39.2028 19.4109 39.2003 19.7305 39.2 20.1183Z' fill='black'/><path d='M40.8035 33.1163C43.423 34.4812 45.8677 36.0376 48.39 37.4616C49.1707 37.9024 49.95 38.3479 50.7082 38.8253C51.9174 39.5868 51.9322 40.6406 50.7061 41.4041C49.341 42.2541 47.9302 43.0319 46.5393 43.8413C44.8504 44.8241 43.1497 45.7878 41.4771 46.7972C40.4331 47.4272 39.4928 47.3766 38.4454 46.7428C35.6334 45.0413 32.7804 43.4063 29.9379 41.7547C27.9731 40.6131 27.9738 39.6945 29.9442 38.5538C32.8095 36.8952 35.669 35.2269 38.5324 33.565C39.2182 33.1669 39.9168 32.8123 40.8035 33.1163Z' fill='black'/></g><defs><clipPath id='clip0_595_36'><rect width='59' height='65' fill='white' transform='translate(10.5 7.5)'/></clipPath></defs></svg>"
+  },
+  {
+    "name": "@iconiq",
+    "homepage": "https://iconiqs.vercel.app",
+    "url": "https://iconiqs.vercel.app/r/{name}.json",
+    "description": "Iconiq is a collection of icons designed for web applications. It is a modern, clean, and minimalistic icon set that is perfect for web applications.",
+    "logo": "<svg xmlns='http://www.w3.org/2000/svg' width='31' height='30' viewBox='0 0 31 30' fill='none'><path d='M30.8574 13.4209H25.0322V24.8223H17.4414L17.4961 26.2822C17.9462 26.0015 18.5219 25.8223 19.1543 25.7988C20.6429 25.744 21.8818 26.5719 21.9219 27.6484C21.96 28.6881 20.8658 29.576 19.4502 29.6855V29.6924L17.5859 29.7617C17.043 29.7816 16.5855 29.3565 16.5654 28.8135L16.5303 27.8643H16.5312C16.531 27.8588 16.5305 27.8531 16.5303 27.8477C16.5292 27.8173 16.5324 27.787 16.5332 27.7568L16.4229 24.8223H13.2686L13.1494 27.9941C13.1502 28.0242 13.1534 28.0546 13.1523 28.085C13.1521 28.0902 13.1517 28.0963 13.1514 28.1016H13.1523L13.1172 29.0518C13.097 29.5946 12.6395 30.0188 12.0967 29.999L10.2324 29.9297V29.9238C8.81666 29.8144 7.7226 28.9265 7.76074 27.8867C7.80082 26.8101 9.03966 25.9813 10.5283 26.0361C11.1608 26.0596 11.7364 26.2396 12.1865 26.5205L12.25 24.8223H4.72266L5.2832 13.4209H0L14.0205 0L30.8574 13.4209Z' fill='#EE4822'/><circle cx='10.4573' cy='14.5408' r='2.62989' fill='white'/><circle cx='17.5155' cy='14.5408' r='2.62989' fill='white'/><circle cx='10.6948' cy='14.88' r='0.763516' fill='black'/><circle cx='17.0064' cy='14.88' r='0.763516' fill='black'/></svg>"
+  },
   {
     "name": "@componentry",
     "homepage": "https://componentry.fun",
diff --git a/apps/v4/registry/fonts.ts b/apps/v4/registry/fonts.ts
index 2248df07d7..139d09079b 100644
--- a/apps/v4/registry/fonts.ts
+++ b/apps/v4/registry/fonts.ts
@@ -64,7 +64,7 @@ export const fonts = [
     title: "Roboto",
     type: "registry:font",
     font: {
-      family: "'Roboto', sans-serif",
+      family: "'Roboto Variable', sans-serif",
       provider: "google",
       variable: "--font-sans",
       subsets: ["latin"],
@@ -76,7 +76,7 @@ export const fonts = [
     title: "Raleway",
     type: "registry:font",
     font: {
-      family: "'Raleway', sans-serif",
+      family: "'Raleway Variable', sans-serif",
       provider: "google",
       variable: "--font-sans",
       subsets: ["latin"],
@@ -88,7 +88,7 @@ export const fonts = [
     title: "DM Sans",
     type: "registry:font",
     font: {
-      family: "'DM Sans', sans-serif",
+      family: "'DM Sans Variable', sans-serif",
       provider: "google",
       variable: "--font-sans",
       subsets: ["latin"],
@@ -100,7 +100,7 @@ export const fonts = [
     title: "Public Sans",
     type: "registry:font",
     font: {
-      family: "'Public Sans', sans-serif",
+      family: "'Public Sans Variable', sans-serif",
       provider: "google",
       variable: "--font-sans",
       subsets: ["latin"],
@@ -112,7 +112,7 @@ export const fonts = [
     title: "Outfit",
     type: "registry:font",
     font: {
-      family: "'Outfit', sans-serif",
+      family: "'Outfit Variable', sans-serif",
       provider: "google",
       variable: "--font-sans",
       subsets: ["latin"],
@@ -126,7 +126,7 @@ export const fonts = [
     font: {
       family: "'JetBrains Mono Variable', monospace",
       provider: "google",
-      variable: "--font-sans",
+      variable: "--font-mono",
       subsets: ["latin"],
       import: "JetBrains_Mono",
     },
@@ -143,4 +143,64 @@ export const fonts = [
       import: "Geist_Mono",
     },
   },
+  {
+    name: "font-noto-serif",
+    title: "Noto Serif",
+    type: "registry:font",
+    font: {
+      family: "'Noto Serif Variable', serif",
+      provider: "google",
+      variable: "--font-serif",
+      subsets: ["latin"],
+      import: "Noto_Serif",
+    },
+  },
+  {
+    name: "font-roboto-slab",
+    title: "Roboto Slab",
+    type: "registry:font",
+    font: {
+      family: "'Roboto Slab Variable', serif",
+      provider: "google",
+      variable: "--font-serif",
+      subsets: ["latin"],
+      import: "Roboto_Slab",
+    },
+  },
+  {
+    name: "font-merriweather",
+    title: "Merriweather",
+    type: "registry:font",
+    font: {
+      family: "'Merriweather Variable', serif",
+      provider: "google",
+      variable: "--font-serif",
+      subsets: ["latin"],
+      import: "Merriweather",
+    },
+  },
+  {
+    name: "font-lora",
+    title: "Lora",
+    type: "registry:font",
+    font: {
+      family: "'Lora Variable', serif",
+      provider: "google",
+      variable: "--font-serif",
+      subsets: ["latin"],
+      import: "Lora",
+    },
+  },
+  {
+    name: "font-playfair-display",
+    title: "Playfair Display",
+    type: "registry:font",
+    font: {
+      family: "'Playfair Display Variable', serif",
+      provider: "google",
+      variable: "--font-serif",
+      subsets: ["latin"],
+      import: "Playfair_Display",
+    },
+  },
 ] satisfies RegistryItem[]
diff --git a/apps/v4/registry/icons/__hugeicons__.ts b/apps/v4/registry/icons/__hugeicons__.ts
index 1dc3f60da6..cbf263584f 100644
--- a/apps/v4/registry/icons/__hugeicons__.ts
+++ b/apps/v4/registry/icons/__hugeicons__.ts
@@ -1,8 +1,6 @@
 // Auto-generated by scripts/build-icons.ts
 export { ActivityIcon } from "@hugeicons/core-free-icons"
 export { Add01Icon } from "@hugeicons/core-free-icons"
-export { AddToListIcon } from "@hugeicons/core-free-icons"
-export { AiCloud01Icon } from "@hugeicons/core-free-icons"
 export { Alert02Icon } from "@hugeicons/core-free-icons"
 export { AlertCircleIcon } from "@hugeicons/core-free-icons"
 export { Analytics01Icon } from "@hugeicons/core-free-icons"
@@ -19,22 +17,15 @@ export { ArrowRight02Icon } from "@hugeicons/core-free-icons"
 export { ArrowRightDoubleIcon } from "@hugeicons/core-free-icons"
 export { ArrowRightIcon } from "@hugeicons/core-free-icons"
 export { ArrowUp01Icon } from "@hugeicons/core-free-icons"
-export { ArrowUp02Icon } from "@hugeicons/core-free-icons"
 export { ArrowUpIcon } from "@hugeicons/core-free-icons"
 export { ArrowUpRight01Icon } from "@hugeicons/core-free-icons"
 export { ArrowUpRightIcon } from "@hugeicons/core-free-icons"
-export { AttachmentIcon } from "@hugeicons/core-free-icons"
 export { AudioWave01Icon } from "@hugeicons/core-free-icons"
 export { BankIcon } from "@hugeicons/core-free-icons"
 export { BluetoothIcon } from "@hugeicons/core-free-icons"
-export { BookIcon } from "@hugeicons/core-free-icons"
 export { BookOpen02Icon } from "@hugeicons/core-free-icons"
 export { BookmarkIcon } from "@hugeicons/core-free-icons"
-export { BotIcon } from "@hugeicons/core-free-icons"
-export { BulbIcon } from "@hugeicons/core-free-icons"
 export { CalculatorIcon } from "@hugeicons/core-free-icons"
-export { Calendar01Icon } from "@hugeicons/core-free-icons"
-export { CalendarAdd01Icon } from "@hugeicons/core-free-icons"
 export { CalendarIcon } from "@hugeicons/core-free-icons"
 export { Camera01Icon } from "@hugeicons/core-free-icons"
 export { Cancel01Icon } from "@hugeicons/core-free-icons"
@@ -49,10 +40,9 @@ export { CheckmarkBadgeIcon } from "@hugeicons/core-free-icons"
 export { CheckmarkCircle01Icon } from "@hugeicons/core-free-icons"
 export { CheckmarkCircle02Icon } from "@hugeicons/core-free-icons"
 export { CircleArrowLeft02Icon } from "@hugeicons/core-free-icons"
-export { CircleIcon } from "@hugeicons/core-free-icons"
 export { ClipboardIcon } from "@hugeicons/core-free-icons"
 export { Clock03Icon } from "@hugeicons/core-free-icons"
-export { ClockIcon } from "@hugeicons/core-free-icons"
+export { CloudUploadIcon } from "@hugeicons/core-free-icons"
 export { CodeIcon } from "@hugeicons/core-free-icons"
 export { CommandIcon } from "@hugeicons/core-free-icons"
 export { ComputerIcon } from "@hugeicons/core-free-icons"
@@ -63,14 +53,12 @@ export { CopyIcon } from "@hugeicons/core-free-icons"
 export { CreditCardIcon } from "@hugeicons/core-free-icons"
 export { CropIcon } from "@hugeicons/core-free-icons"
 export { CubeIcon } from "@hugeicons/core-free-icons"
-export { Cursor01Icon } from "@hugeicons/core-free-icons"
 export { CursorInWindowIcon } from "@hugeicons/core-free-icons"
 export { DashboardSquare01Icon } from "@hugeicons/core-free-icons"
 export { DashedLineCircleIcon } from "@hugeicons/core-free-icons"
 export { Database01Icon } from "@hugeicons/core-free-icons"
 export { Delete02Icon } from "@hugeicons/core-free-icons"
 export { DeleteIcon } from "@hugeicons/core-free-icons"
-export { DollarCircleIcon } from "@hugeicons/core-free-icons"
 export { DownloadIcon } from "@hugeicons/core-free-icons"
 export { DragDropVerticalIcon } from "@hugeicons/core-free-icons"
 export { EditIcon } from "@hugeicons/core-free-icons"
@@ -86,8 +74,6 @@ export { Folder01Icon } from "@hugeicons/core-free-icons"
 export { FolderAddIcon } from "@hugeicons/core-free-icons"
 export { FolderIcon } from "@hugeicons/core-free-icons"
 export { FolderOpenIcon } from "@hugeicons/core-free-icons"
-export { GitBranchIcon } from "@hugeicons/core-free-icons"
-export { GlobalIcon } from "@hugeicons/core-free-icons"
 export { Globe02Icon } from "@hugeicons/core-free-icons"
 export { GridIcon } from "@hugeicons/core-free-icons"
 export { HelpCircleIcon } from "@hugeicons/core-free-icons"
@@ -107,10 +93,8 @@ export { LinkSquare02Icon } from "@hugeicons/core-free-icons"
 export { Loading03Icon } from "@hugeicons/core-free-icons"
 export { Logout01Icon } from "@hugeicons/core-free-icons"
 export { LogoutIcon } from "@hugeicons/core-free-icons"
-export { MagicWand05Icon } from "@hugeicons/core-free-icons"
 export { Mail01Icon } from "@hugeicons/core-free-icons"
 export { MailIcon } from "@hugeicons/core-free-icons"
-export { MailValidation01Icon } from "@hugeicons/core-free-icons"
 export { MapsIcon } from "@hugeicons/core-free-icons"
 export { Menu01Icon } from "@hugeicons/core-free-icons"
 export { Menu05Icon } from "@hugeicons/core-free-icons"
@@ -126,7 +110,6 @@ export { Notification02Icon } from "@hugeicons/core-free-icons"
 export { Notification03Icon } from "@hugeicons/core-free-icons"
 export { NotificationIcon } from "@hugeicons/core-free-icons"
 export { PaintBoardIcon } from "@hugeicons/core-free-icons"
-export { PenIcon } from "@hugeicons/core-free-icons"
 export { PieChartIcon } from "@hugeicons/core-free-icons"
 export { PlusSignCircleIcon } from "@hugeicons/core-free-icons"
 export { PlusSignIcon } from "@hugeicons/core-free-icons"
@@ -148,7 +131,6 @@ export { Share03Icon } from "@hugeicons/core-free-icons"
 export { ShareIcon } from "@hugeicons/core-free-icons"
 export { ShieldIcon } from "@hugeicons/core-free-icons"
 export { ShoppingBag01Icon } from "@hugeicons/core-free-icons"
-export { ShoppingBasket01Icon } from "@hugeicons/core-free-icons"
 export { ShoppingCart01Icon } from "@hugeicons/core-free-icons"
 export { SidebarLeftIcon } from "@hugeicons/core-free-icons"
 export { SmileIcon } from "@hugeicons/core-free-icons"
@@ -157,7 +139,6 @@ export { StarIcon } from "@hugeicons/core-free-icons"
 export { StarOffIcon } from "@hugeicons/core-free-icons"
 export { SunIcon } from "@hugeicons/core-free-icons"
 export { TableIcon } from "@hugeicons/core-free-icons"
-export { TagIcon } from "@hugeicons/core-free-icons"
 export { TextBoldIcon } from "@hugeicons/core-free-icons"
 export { TextCheckIcon } from "@hugeicons/core-free-icons"
 export { TextItalicIcon } from "@hugeicons/core-free-icons"
@@ -166,7 +147,6 @@ export { Tick02Icon } from "@hugeicons/core-free-icons"
 export { TradeUpIcon } from "@hugeicons/core-free-icons"
 export { UndoIcon } from "@hugeicons/core-free-icons"
 export { UnfoldMoreIcon } from "@hugeicons/core-free-icons"
-export { Upload01Icon } from "@hugeicons/core-free-icons"
 export { UserCircle02Icon } from "@hugeicons/core-free-icons"
 export { UserGroupIcon } from "@hugeicons/core-free-icons"
 export { UserIcon } from "@hugeicons/core-free-icons"
diff --git a/apps/v4/registry/icons/__lucide__.ts b/apps/v4/registry/icons/__lucide__.ts
index 94169270c7..9b79975ba0 100644
--- a/apps/v4/registry/icons/__lucide__.ts
+++ b/apps/v4/registry/icons/__lucide__.ts
@@ -24,7 +24,6 @@ export { BotIcon } from "lucide-react"
 export { Building2Icon } from "lucide-react"
 export { CalculatorIcon } from "lucide-react"
 export { CalendarIcon } from "lucide-react"
-export { CalendarPlusIcon } from "lucide-react"
 export { CameraIcon } from "lucide-react"
 export { CaptionsIcon } from "lucide-react"
 export { ChartBarIcon } from "lucide-react"
@@ -42,15 +41,11 @@ export { ChevronsUpDownIcon } from "lucide-react"
 export { CircleAlertIcon } from "lucide-react"
 export { CircleCheckIcon } from "lucide-react"
 export { CircleDashedIcon } from "lucide-react"
-export { CircleDollarSignIcon } from "lucide-react"
 export { CircleHelpIcon } from "lucide-react"
-export { CircleIcon } from "lucide-react"
 export { CirclePlusIcon } from "lucide-react"
 export { CircleUserRoundIcon } from "lucide-react"
 export { ClipboardPasteIcon } from "lucide-react"
 export { Clock2Icon } from "lucide-react"
-export { ClockIcon } from "lucide-react"
-export { CloudCogIcon } from "lucide-react"
 export { CodeIcon } from "lucide-react"
 export { Columns3Icon } from "lucide-react"
 export { CommandIcon } from "lucide-react"
@@ -77,7 +72,6 @@ export { FolderPlusIcon } from "lucide-react"
 export { FolderSearchIcon } from "lucide-react"
 export { FrameIcon } from "lucide-react"
 export { GalleryVerticalEndIcon } from "lucide-react"
-export { GitBranchIcon } from "lucide-react"
 export { GlobeIcon } from "lucide-react"
 export { GripVerticalIcon } from "lucide-react"
 export { HeartIcon } from "lucide-react"
@@ -94,15 +88,12 @@ export { LayoutGridIcon } from "lucide-react"
 export { LayoutIcon } from "lucide-react"
 export { LifeBuoy } from "lucide-react"
 export { LifeBuoyIcon } from "lucide-react"
-export { LightbulbIcon } from "lucide-react"
 export { LinkIcon } from "lucide-react"
-export { ListFilterIcon } from "lucide-react"
 export { ListIcon } from "lucide-react"
 export { Loader2Icon } from "lucide-react"
 export { LoaderIcon } from "lucide-react"
 export { LockIcon } from "lucide-react"
 export { LogOutIcon } from "lucide-react"
-export { MailCheckIcon } from "lucide-react"
 export { MailIcon } from "lucide-react"
 export { MapIcon } from "lucide-react"
 export { MaximizeIcon } from "lucide-react"
@@ -117,13 +108,10 @@ export { MonitorIcon } from "lucide-react"
 export { MoonIcon } from "lucide-react"
 export { MoreHorizontalIcon } from "lucide-react"
 export { MoreVerticalIcon } from "lucide-react"
-export { MousePointerIcon } from "lucide-react"
 export { OctagonXIcon } from "lucide-react"
 export { PaintbrushIcon } from "lucide-react"
 export { PaletteIcon } from "lucide-react"
 export { PanelLeftIcon } from "lucide-react"
-export { PaperclipIcon } from "lucide-react"
-export { PenToolIcon } from "lucide-react"
 export { PencilIcon } from "lucide-react"
 export { PieChartIcon } from "lucide-react"
 export { PlusIcon } from "lucide-react"
@@ -132,7 +120,6 @@ export { RefreshCwIcon } from "lucide-react"
 export { RotateCwIcon } from "lucide-react"
 export { SaveIcon } from "lucide-react"
 export { ScissorsIcon } from "lucide-react"
-export { Search } from "lucide-react"
 export { SearchIcon } from "lucide-react"
 export { Send } from "lucide-react"
 export { SendIcon } from "lucide-react"
@@ -149,7 +136,6 @@ export { StarIcon } from "lucide-react"
 export { StarOffIcon } from "lucide-react"
 export { SunIcon } from "lucide-react"
 export { TableIcon } from "lucide-react"
-export { TagIcon } from "lucide-react"
 export { TerminalIcon } from "lucide-react"
 export { TerminalSquareIcon } from "lucide-react"
 export { Trash2Icon } from "lucide-react"
@@ -158,7 +144,7 @@ export { TrendingDownIcon } from "lucide-react"
 export { TrendingUpIcon } from "lucide-react"
 export { TriangleAlertIcon } from "lucide-react"
 export { UnderlineIcon } from "lucide-react"
-export { UploadIcon } from "lucide-react"
+export { UploadCloudIcon } from "lucide-react"
 export { UserIcon } from "lucide-react"
 export { UserRoundXIcon } from "lucide-react"
 export { UsersIcon } from "lucide-react"
@@ -166,7 +152,6 @@ export { VideoIcon } from "lucide-react"
 export { VolumeOffIcon } from "lucide-react"
 export { VolumeX } from "lucide-react"
 export { WalletIcon } from "lucide-react"
-export { WandIcon } from "lucide-react"
 export { XIcon } from "lucide-react"
 export { ZapIcon } from "lucide-react"
 export { ZoomInIcon } from "lucide-react"
diff --git a/apps/v4/registry/icons/__phosphor__.ts b/apps/v4/registry/icons/__phosphor__.ts
index 2be23d7b37..d787e39f67 100644
--- a/apps/v4/registry/icons/__phosphor__.ts
+++ b/apps/v4/registry/icons/__phosphor__.ts
@@ -23,7 +23,6 @@ export { BookmarkIcon } from "@phosphor-icons/react"
 export { CalculatorIcon } from "@phosphor-icons/react"
 export { CalendarBlankIcon } from "@phosphor-icons/react"
 export { CalendarIcon } from "@phosphor-icons/react"
-export { CalendarPlusIcon } from "@phosphor-icons/react"
 export { CameraIcon } from "@phosphor-icons/react"
 export { CaretDoubleLeftIcon } from "@phosphor-icons/react"
 export { CaretDoubleRightIcon } from "@phosphor-icons/react"
@@ -39,7 +38,6 @@ export { ChatCircleIcon } from "@phosphor-icons/react"
 export { CheckCircleIcon } from "@phosphor-icons/react"
 export { CheckIcon } from "@phosphor-icons/react"
 export { CircleDashedIcon } from "@phosphor-icons/react"
-export { CircleIcon } from "@phosphor-icons/react"
 export { ClipboardIcon } from "@phosphor-icons/react"
 export { ClockIcon } from "@phosphor-icons/react"
 export { CloudArrowUpIcon } from "@phosphor-icons/react"
@@ -50,7 +48,6 @@ export { CopyIcon } from "@phosphor-icons/react"
 export { CreditCardIcon } from "@phosphor-icons/react"
 export { CropIcon } from "@phosphor-icons/react"
 export { CubeIcon } from "@phosphor-icons/react"
-export { CurrencyCircleDollarIcon } from "@phosphor-icons/react"
 export { DatabaseIcon } from "@phosphor-icons/react"
 export { DotsSixVerticalIcon } from "@phosphor-icons/react"
 export { DotsThreeIcon } from "@phosphor-icons/react"
@@ -68,10 +65,8 @@ export { FolderIcon } from "@phosphor-icons/react"
 export { FolderOpenIcon } from "@phosphor-icons/react"
 export { FolderPlusIcon } from "@phosphor-icons/react"
 export { GearIcon } from "@phosphor-icons/react"
-export { GitBranchIcon } from "@phosphor-icons/react"
 export { GlobeIcon } from "@phosphor-icons/react"
 export { GridFourIcon } from "@phosphor-icons/react"
-export { HandPointingIcon } from "@phosphor-icons/react"
 export { HardDrivesIcon } from "@phosphor-icons/react"
 export { HeartIcon } from "@phosphor-icons/react"
 export { HouseIcon } from "@phosphor-icons/react"
@@ -80,13 +75,10 @@ export { InfoIcon } from "@phosphor-icons/react"
 export { KeyboardIcon } from "@phosphor-icons/react"
 export { LayoutIcon } from "@phosphor-icons/react"
 export { LifebuoyIcon } from "@phosphor-icons/react"
-export { LightbulbIcon } from "@phosphor-icons/react"
 export { LightningIcon } from "@phosphor-icons/react"
 export { LinkIcon } from "@phosphor-icons/react"
 export { ListIcon } from "@phosphor-icons/react"
-export { ListPlusIcon } from "@phosphor-icons/react"
 export { LockIcon } from "@phosphor-icons/react"
-export { MagicWandIcon } from "@phosphor-icons/react"
 export { MagnifyingGlassIcon } from "@phosphor-icons/react"
 export { MagnifyingGlassMinusIcon } from "@phosphor-icons/react"
 export { MagnifyingGlassPlusIcon } from "@phosphor-icons/react"
@@ -97,7 +89,6 @@ export { MonitorIcon } from "@phosphor-icons/react"
 export { MoonIcon } from "@phosphor-icons/react"
 export { PaletteIcon } from "@phosphor-icons/react"
 export { PaperPlaneTiltIcon } from "@phosphor-icons/react"
-export { PaperclipIcon } from "@phosphor-icons/react"
 export { PencilIcon } from "@phosphor-icons/react"
 export { PlusCircleIcon } from "@phosphor-icons/react"
 export { PlusIcon } from "@phosphor-icons/react"
@@ -120,7 +111,6 @@ export { SquaresFourIcon } from "@phosphor-icons/react"
 export { StarIcon } from "@phosphor-icons/react"
 export { SunIcon } from "@phosphor-icons/react"
 export { TableIcon } from "@phosphor-icons/react"
-export { TagIcon } from "@phosphor-icons/react"
 export { TerminalIcon } from "@phosphor-icons/react"
 export { TextBIcon } from "@phosphor-icons/react"
 export { TextItalicIcon } from "@phosphor-icons/react"
@@ -131,7 +121,6 @@ export { TrashIcon } from "@phosphor-icons/react"
 export { TrayIcon } from "@phosphor-icons/react"
 export { TrendDownIcon } from "@phosphor-icons/react"
 export { TrendUpIcon } from "@phosphor-icons/react"
-export { UploadIcon } from "@phosphor-icons/react"
 export { UserCircleIcon } from "@phosphor-icons/react"
 export { UserIcon } from "@phosphor-icons/react"
 export { UserMinusIcon } from "@phosphor-icons/react"
diff --git a/apps/v4/registry/icons/__remixicon__.ts b/apps/v4/registry/icons/__remixicon__.ts
index 062f48bca9..aecd7b253b 100644
--- a/apps/v4/registry/icons/__remixicon__.ts
+++ b/apps/v4/registry/icons/__remixicon__.ts
@@ -14,7 +14,6 @@ export { RiArrowRightUpLine } from "@remixicon/react"
 export { RiArrowUpDownLine } from "@remixicon/react"
 export { RiArrowUpLine } from "@remixicon/react"
 export { RiArrowUpSLine } from "@remixicon/react"
-export { RiAttachmentLine } from "@remixicon/react"
 export { RiBankCardLine } from "@remixicon/react"
 export { RiBankLine } from "@remixicon/react"
 export { RiBarChartLine } from "@remixicon/react"
@@ -25,14 +24,12 @@ export { RiBookmarkLine } from "@remixicon/react"
 export { RiBox1Line } from "@remixicon/react"
 export { RiBox3Line } from "@remixicon/react"
 export { RiCalculatorLine } from "@remixicon/react"
-export { RiCalendarEventLine } from "@remixicon/react"
 export { RiCalendarLine } from "@remixicon/react"
 export { RiCameraLine } from "@remixicon/react"
 export { RiChat1Line } from "@remixicon/react"
 export { RiCheckLine } from "@remixicon/react"
 export { RiCheckboxCircleFill } from "@remixicon/react"
 export { RiCheckboxCircleLine } from "@remixicon/react"
-export { RiCircleLine } from "@remixicon/react"
 export { RiClipboardLine } from "@remixicon/react"
 export { RiCloseCircleLine } from "@remixicon/react"
 export { RiCloseLine } from "@remixicon/react"
@@ -62,12 +59,10 @@ export { RiFolderAddLine } from "@remixicon/react"
 export { RiFolderLine } from "@remixicon/react"
 export { RiFolderOpenLine } from "@remixicon/react"
 export { RiGalleryLine } from "@remixicon/react"
-export { RiGitBranchLine } from "@remixicon/react"
 export { RiGlobalLine } from "@remixicon/react"
 export { RiGlobeLine } from "@remixicon/react"
 export { RiGridLine } from "@remixicon/react"
 export { RiGroupLine } from "@remixicon/react"
-export { RiHand } from "@remixicon/react"
 export { RiHardDriveLine } from "@remixicon/react"
 export { RiHeartLine } from "@remixicon/react"
 export { RiHomeLine } from "@remixicon/react"
@@ -80,7 +75,6 @@ export { RiLayoutColumnLine } from "@remixicon/react"
 export { RiLayoutLeftLine } from "@remixicon/react"
 export { RiLayoutLine } from "@remixicon/react"
 export { RiLifebuoyLine } from "@remixicon/react"
-export { RiLightbulbLine } from "@remixicon/react"
 export { RiLineChartLine } from "@remixicon/react"
 export { RiLinksLine } from "@remixicon/react"
 export { RiListUnordered } from "@remixicon/react"
@@ -88,12 +82,10 @@ export { RiLoader4Line } from "@remixicon/react"
 export { RiLoaderLine } from "@remixicon/react"
 export { RiLockLine } from "@remixicon/react"
 export { RiLogoutBoxLine } from "@remixicon/react"
-export { RiMagicLine } from "@remixicon/react"
 export { RiMailLine } from "@remixicon/react"
 export { RiMapLine } from "@remixicon/react"
 export { RiMenuLine } from "@remixicon/react"
 export { RiMicLine } from "@remixicon/react"
-export { RiMoneyDollarCircleLine } from "@remixicon/react"
 export { RiMoonLine } from "@remixicon/react"
 export { RiMore2Line } from "@remixicon/react"
 export { RiMoreLine } from "@remixicon/react"
@@ -102,8 +94,6 @@ export { RiNotificationLine } from "@remixicon/react"
 export { RiPaletteLine } from "@remixicon/react"
 export { RiPencilLine } from "@remixicon/react"
 export { RiPieChartLine } from "@remixicon/react"
-export { RiPlayListAddLine } from "@remixicon/react"
-export { RiPriceTagLine } from "@remixicon/react"
 export { RiPulseLine } from "@remixicon/react"
 export { RiQuestionLine } from "@remixicon/react"
 export { RiRecordCircleLine } from "@remixicon/react"
@@ -135,7 +125,6 @@ export { RiTimeLine } from "@remixicon/react"
 export { RiTranslate } from "@remixicon/react"
 export { RiUnderline } from "@remixicon/react"
 export { RiUploadCloudLine } from "@remixicon/react"
-export { RiUploadLine } from "@remixicon/react"
 export { RiUserLine } from "@remixicon/react"
 export { RiUserUnfollowLine } from "@remixicon/react"
 export { RiVideoLine } from "@remixicon/react"
diff --git a/apps/v4/registry/icons/__tabler__.ts b/apps/v4/registry/icons/__tabler__.ts
index 695cb622c4..13e5454e9b 100644
--- a/apps/v4/registry/icons/__tabler__.ts
+++ b/apps/v4/registry/icons/__tabler__.ts
@@ -20,10 +20,8 @@ export { IconBookmark } from "@tabler/icons-react"
 export { IconBox } from "@tabler/icons-react"
 export { IconBrandJavascript } from "@tabler/icons-react"
 export { IconBuildingBank } from "@tabler/icons-react"
-export { IconBulb } from "@tabler/icons-react"
 export { IconCalculator } from "@tabler/icons-react"
 export { IconCalendar } from "@tabler/icons-react"
-export { IconCalendarPlus } from "@tabler/icons-react"
 export { IconCamera } from "@tabler/icons-react"
 export { IconChartBar } from "@tabler/icons-react"
 export { IconChartLine } from "@tabler/icons-react"
@@ -35,18 +33,15 @@ export { IconChevronRight } from "@tabler/icons-react"
 export { IconChevronUp } from "@tabler/icons-react"
 export { IconChevronsLeft } from "@tabler/icons-react"
 export { IconChevronsRight } from "@tabler/icons-react"
-export { IconCircle } from "@tabler/icons-react"
 export { IconCircleArrowLeft } from "@tabler/icons-react"
 export { IconCircleCheck } from "@tabler/icons-react"
 export { IconCircleCheckFilled } from "@tabler/icons-react"
 export { IconCircleDashed } from "@tabler/icons-react"
 export { IconCirclePlusFilled } from "@tabler/icons-react"
 export { IconClipboard } from "@tabler/icons-react"
-export { IconClock } from "@tabler/icons-react"
 export { IconClockHour2 } from "@tabler/icons-react"
-export { IconCloudCog } from "@tabler/icons-react"
+export { IconCloudUpload } from "@tabler/icons-react"
 export { IconCode } from "@tabler/icons-react"
-export { IconCoin } from "@tabler/icons-react"
 export { IconCommand } from "@tabler/icons-react"
 export { IconCopy } from "@tabler/icons-react"
 export { IconCornerUpLeft } from "@tabler/icons-react"
@@ -71,7 +66,6 @@ export { IconFileCode } from "@tabler/icons-react"
 export { IconFileDescription } from "@tabler/icons-react"
 export { IconFileText } from "@tabler/icons-react"
 export { IconFileWord } from "@tabler/icons-react"
-export { IconFilterPlus } from "@tabler/icons-react"
 export { IconFlipHorizontal } from "@tabler/icons-react"
 export { IconFlipVertical } from "@tabler/icons-react"
 export { IconFolder } from "@tabler/icons-react"
@@ -79,7 +73,6 @@ export { IconFolderOpen } from "@tabler/icons-react"
 export { IconFolderPlus } from "@tabler/icons-react"
 export { IconFolderSearch } from "@tabler/icons-react"
 export { IconFrame } from "@tabler/icons-react"
-export { IconGitBranch } from "@tabler/icons-react"
 export { IconGlobe } from "@tabler/icons-react"
 export { IconGripVertical } from "@tabler/icons-react"
 export { IconHeadphones } from "@tabler/icons-react"
@@ -106,7 +99,6 @@ export { IconLoader } from "@tabler/icons-react"
 export { IconLock } from "@tabler/icons-react"
 export { IconLogout } from "@tabler/icons-react"
 export { IconMail } from "@tabler/icons-react"
-export { IconMailCheck } from "@tabler/icons-react"
 export { IconMap } from "@tabler/icons-react"
 export { IconMaximize } from "@tabler/icons-react"
 export { IconMenu } from "@tabler/icons-react"
@@ -119,12 +111,10 @@ export { IconMoodSmile } from "@tabler/icons-react"
 export { IconMoon } from "@tabler/icons-react"
 export { IconNotification } from "@tabler/icons-react"
 export { IconPalette } from "@tabler/icons-react"
-export { IconPaperclip } from "@tabler/icons-react"
 export { IconPencil } from "@tabler/icons-react"
 export { IconPhoto } from "@tabler/icons-react"
 export { IconPlayerRecordFilled } from "@tabler/icons-react"
 export { IconPlus } from "@tabler/icons-react"
-export { IconPointer } from "@tabler/icons-react"
 export { IconRefresh } from "@tabler/icons-react"
 export { IconReport } from "@tabler/icons-react"
 export { IconRobot } from "@tabler/icons-react"
@@ -147,7 +137,6 @@ export { IconStar } from "@tabler/icons-react"
 export { IconStarOff } from "@tabler/icons-react"
 export { IconSun } from "@tabler/icons-react"
 export { IconTable } from "@tabler/icons-react"
-export { IconTag } from "@tabler/icons-react"
 export { IconTerminal } from "@tabler/icons-react"
 export { IconTerminal2 } from "@tabler/icons-react"
 export { IconTextCaption } from "@tabler/icons-react"
@@ -155,7 +144,6 @@ export { IconTrash } from "@tabler/icons-react"
 export { IconTrendingDown } from "@tabler/icons-react"
 export { IconTrendingUp } from "@tabler/icons-react"
 export { IconUnderline } from "@tabler/icons-react"
-export { IconUpload } from "@tabler/icons-react"
 export { IconUser } from "@tabler/icons-react"
 export { IconUserCircle } from "@tabler/icons-react"
 export { IconUserX } from "@tabler/icons-react"
@@ -163,7 +151,6 @@ export { IconUsers } from "@tabler/icons-react"
 export { IconVideoPlus } from "@tabler/icons-react"
 export { IconVolume } from "@tabler/icons-react"
 export { IconWallet } from "@tabler/icons-react"
-export { IconWand } from "@tabler/icons-react"
 export { IconWaveSine } from "@tabler/icons-react"
 export { IconWorld } from "@tabler/icons-react"
 export { IconX } from "@tabler/icons-react"
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx
index ef40779e51..8363992ac3 100644
--- a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/app-sidebar.tsx
@@ -158,10 +158,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton
               asChild
-              className="data-[slot=sidebar-menu-button]:!p-1.5"
+              className="data-[slot=sidebar-menu-button]:p-1.5!"
             >
               <a href="#">
-                <IconInnerShadowTop className="!size-5" />
+                <IconInnerShadowTop className="size-5!" />
                 <span className="text-base font-semibold">Acme Inc.</span>
               </a>
             </SidebarMenuButton>
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx
index b4e365835d..46c767fb92 100644
--- a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/chart-area-interactive.tsx
@@ -180,7 +180,7 @@ export function ChartAreaInteractive() {
             value={timeRange}
             onValueChange={setTimeRange}
             variant="outline"
-            className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
+            className="hidden *:data-[slot=toggle-group-item]:px-4! @[767px]/card:flex"
           >
             <ToggleGroupItem value="90d">Last 3 months</ToggleGroupItem>
             <ToggleGroupItem value="30d">Last 30 days</ToggleGroupItem>
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx
index 7a039c8161..def0a697fe 100644
--- a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx
@@ -128,9 +128,9 @@ function DragHandle({ id }: { id: number }) {
       {...listeners}
       variant="ghost"
       size="icon"
-      className="text-muted-foreground size-7 hover:bg-transparent"
+      className="size-7 text-muted-foreground hover:bg-transparent"
     >
-      <IconGripVertical className="text-muted-foreground size-3" />
+      <IconGripVertical className="size-3 text-muted-foreground" />
       <span className="sr-only">Drag to reorder</span>
     </Button>
   )
@@ -181,7 +181,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     header: "Section Type",
     cell: ({ row }) => (
       <div className="w-32">
-        <Badge variant="outline" className="text-muted-foreground px-1.5">
+        <Badge variant="outline" className="px-1.5 text-muted-foreground">
           {row.original.type}
         </Badge>
       </div>
@@ -191,7 +191,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
     accessorKey: "status",
     header: "Status",
     cell: ({ row }) => (
-      <Badge variant="outline" className="text-muted-foreground px-1.5">
+      <Badge variant="outline" className="px-1.5 text-muted-foreground">
         {row.original.status === "Done" ? (
           <IconCircleCheckFilled className="fill-green-500 dark:fill-green-400" />
         ) : (
@@ -219,7 +219,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Target
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.target}
           id={`${row.original.id}-target`}
         />
@@ -244,7 +244,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
           Limit
         </Label>
         <Input
-          className="hover:bg-input/30 focus-visible:bg-background dark:hover:bg-input/30 dark:focus-visible:bg-input/30 h-8 w-16 border-transparent bg-transparent text-right shadow-none focus-visible:border dark:bg-transparent"
+          className="h-8 w-16 border-transparent bg-transparent text-right shadow-none hover:bg-input/30 focus-visible:border focus-visible:bg-background dark:bg-transparent dark:hover:bg-input/30 dark:focus-visible:bg-input/30"
           defaultValue={row.original.limit}
           id={`${row.original.id}-limit`}
         />
@@ -292,7 +292,7 @@ const columns: ColumnDef<z.infer<typeof schema>>[] = [
         <DropdownMenuTrigger asChild>
           <Button
             variant="ghost"
-            className="data-[state=open]:bg-muted text-muted-foreground flex size-8"
+            className="flex size-8 text-muted-foreground data-[state=open]:bg-muted"
             size="icon"
           >
             <IconDotsVertical />
@@ -425,7 +425,7 @@ export function DataTable({
             <SelectItem value="focus-documents">Focus Documents</SelectItem>
           </SelectContent>
         </Select>
-        <TabsList className="**:data-[slot=badge]:bg-muted-foreground/30 hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:px-1 @4xl/main:flex">
+        <TabsList className="hidden **:data-[slot=badge]:size-5 **:data-[slot=badge]:rounded-full **:data-[slot=badge]:bg-muted-foreground/30 **:data-[slot=badge]:px-1 @4xl/main:flex">
           <TabsTrigger value="outline">Outline</TabsTrigger>
           <TabsTrigger value="past-performance">
             Past Performance <Badge variant="secondary">3</Badge>
@@ -488,7 +488,7 @@ export function DataTable({
             id={sortableId}
           >
             <Table>
-              <TableHeader className="bg-muted sticky top-0 z-10">
+              <TableHeader className="sticky top-0 z-10 bg-muted">
                 {table.getHeaderGroups().map((headerGroup) => (
                   <TableRow key={headerGroup.id}>
                     {headerGroup.headers.map((header) => {
@@ -531,7 +531,7 @@ export function DataTable({
           </DndContext>
         </div>
         <div className="flex items-center justify-between px-4">
-          <div className="text-muted-foreground hidden flex-1 text-sm lg:flex">
+          <div className="hidden flex-1 text-sm text-muted-foreground lg:flex">
             {table.getFilteredSelectedRowModel().rows.length} of{" "}
             {table.getFilteredRowModel().rows.length} row(s) selected.
           </div>
@@ -653,7 +653,7 @@ function TableCellViewer({ item }: { item: z.infer<typeof schema> }) {
   return (
     <Drawer direction={isMobile ? "bottom" : "right"}>
       <DrawerTrigger asChild>
-        <Button variant="link" className="text-foreground w-fit px-0 text-left">
+        <Button variant="link" className="w-fit px-0 text-left text-foreground">
           {item.header}
         </Button>
       </DrawerTrigger>
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx
index 503c59938a..5a09c82b28 100644
--- a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-documents.tsx
@@ -52,7 +52,7 @@ export function NavDocuments({
               <DropdownMenuTrigger asChild>
                 <SidebarMenuAction
                   showOnHover
-                  className="data-[state=open]:bg-accent rounded-sm"
+                  className="rounded-sm data-[state=open]:bg-accent"
                 >
                   <IconDots />
                   <span className="sr-only">More</span>
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx
index 79ffb5cd6e..3fcecdd1a0 100644
--- a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-main.tsx
@@ -27,7 +27,7 @@ export function NavMain({
           <SidebarMenuItem className="flex items-center gap-2">
             <SidebarMenuButton
               tooltip="Quick Create"
-              className="bg-primary text-primary-foreground hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground min-w-8 duration-200 ease-linear"
+              className="min-w-8 bg-primary text-primary-foreground duration-200 ease-linear hover:bg-primary/90 hover:text-primary-foreground active:bg-primary/90 active:text-primary-foreground"
             >
               <IconCirclePlusFilled />
               <span>Quick Create</span>
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx
index 4d63e06cf8..bdb066d28e 100644
--- a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx
@@ -55,7 +55,7 @@ export function NavUser({
               </Avatar>
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-medium">{user.name}</span>
-                <span className="text-muted-foreground truncate text-xs">
+                <span className="truncate text-xs text-muted-foreground">
                   {user.email}
                 </span>
               </div>
@@ -76,7 +76,7 @@ export function NavUser({
                 </Avatar>
                 <div className="grid flex-1 text-left text-sm leading-tight">
                   <span className="truncate font-medium">{user.name}</span>
-                  <span className="text-muted-foreground truncate text-xs">
+                  <span className="truncate text-xs text-muted-foreground">
                     {user.email}
                   </span>
                 </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx
index 4a69bf5ea8..8419b5e92a 100644
--- a/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/dashboard-01/components/section-cards.tsx
@@ -12,7 +12,7 @@ import {
 
 export function SectionCards() {
   return (
-    <div className="*:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card dark:*:data-[slot=card]:bg-card grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4">
+    <div className="grid grid-cols-1 gap-4 px-4 *:data-[slot=card]:bg-gradient-to-t *:data-[slot=card]:from-primary/5 *:data-[slot=card]:to-card *:data-[slot=card]:shadow-xs lg:px-6 @xl/main:grid-cols-2 @5xl/main:grid-cols-4 dark:*:data-[slot=card]:bg-card">
       <Card className="@container/card">
         <CardHeader>
           <CardDescription>Total Revenue</CardDescription>
diff --git a/apps/v4/registry/new-york-v4/blocks/login-02/components/login-form.tsx b/apps/v4/registry/new-york-v4/blocks/login-02/components/login-form.tsx
index 0bca3ef8b6..e108bb883b 100644
--- a/apps/v4/registry/new-york-v4/blocks/login-02/components/login-form.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/login-02/components/login-form.tsx
@@ -18,7 +18,7 @@ export function LoginForm({
       <FieldGroup>
         <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-2xl font-bold">Login to your account</h1>
-          <p className="text-muted-foreground text-sm text-balance">
+          <p className="text-sm text-balance text-muted-foreground">
             Enter your email below to login to your account
           </p>
         </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/login-02/page.tsx b/apps/v4/registry/new-york-v4/blocks/login-02/page.tsx
index e260bcd3ea..89e92fb4f9 100644
--- a/apps/v4/registry/new-york-v4/blocks/login-02/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/login-02/page.tsx
@@ -8,7 +8,7 @@ export default function LoginPage() {
       <div className="flex flex-col gap-4 p-6 md:p-10">
         <div className="flex justify-center gap-2 md:justify-start">
           <a href="#" className="flex items-center gap-2 font-medium">
-            <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+            <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
               <GalleryVerticalEnd className="size-4" />
             </div>
             Acme Inc.
@@ -20,7 +20,7 @@ export default function LoginPage() {
           </div>
         </div>
       </div>
-      <div className="bg-muted relative hidden lg:block">
+      <div className="relative hidden bg-muted lg:block">
         <img
           src="/placeholder.svg"
           alt="Image"
diff --git a/apps/v4/registry/new-york-v4/blocks/login-03/page.tsx b/apps/v4/registry/new-york-v4/blocks/login-03/page.tsx
index 3c201cb919..69f53e3599 100644
--- a/apps/v4/registry/new-york-v4/blocks/login-03/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/login-03/page.tsx
@@ -4,10 +4,10 @@ import { LoginForm } from "@/registry/new-york-v4/blocks/login-03/components/log
 
 export default function LoginPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
         <a href="#" className="flex items-center gap-2 self-center font-medium">
-          <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+          <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
             <GalleryVerticalEnd className="size-4" />
           </div>
           Acme Inc.
diff --git a/apps/v4/registry/new-york-v4/blocks/login-04/components/login-form.tsx b/apps/v4/registry/new-york-v4/blocks/login-04/components/login-form.tsx
index cca2d84399..3091c52c7b 100644
--- a/apps/v4/registry/new-york-v4/blocks/login-04/components/login-form.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/login-04/components/login-form.tsx
@@ -22,7 +22,7 @@ export function LoginForm({
             <FieldGroup>
               <div className="flex flex-col items-center gap-2 text-center">
                 <h1 className="text-2xl font-bold">Welcome back</h1>
-                <p className="text-muted-foreground text-balance">
+                <p className="text-balance text-muted-foreground">
                   Login to your Acme Inc account
                 </p>
               </div>
@@ -87,7 +87,7 @@ export function LoginForm({
               </FieldDescription>
             </FieldGroup>
           </form>
-          <div className="bg-muted relative hidden md:block">
+          <div className="relative hidden bg-muted md:block">
             <img
               src="/placeholder.svg"
               alt="Image"
diff --git a/apps/v4/registry/new-york-v4/blocks/login-04/page.tsx b/apps/v4/registry/new-york-v4/blocks/login-04/page.tsx
index 79b2a277e8..725828f136 100644
--- a/apps/v4/registry/new-york-v4/blocks/login-04/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/login-04/page.tsx
@@ -2,7 +2,7 @@ import { LoginForm } from "@/registry/new-york-v4/blocks/login-04/components/log
 
 export default function LoginPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
       <div className="w-full max-w-sm md:max-w-4xl">
         <LoginForm />
       </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/login-05/page.tsx b/apps/v4/registry/new-york-v4/blocks/login-05/page.tsx
index af237a2726..e40e0623cd 100644
--- a/apps/v4/registry/new-york-v4/blocks/login-05/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/login-05/page.tsx
@@ -2,7 +2,7 @@ import { LoginForm } from "@/registry/new-york-v4/blocks/login-05/components/log
 
 export default function LoginPage() {
   return (
-    <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
       <div className="w-full max-w-sm">
         <LoginForm />
       </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx
index 29601dba7a..021c8c1799 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-01/components/version-switcher.tsx
@@ -33,7 +33,7 @@ export function VersionSwitcher({
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <GalleryVerticalEnd className="size-4" />
               </div>
               <div className="flex flex-col gap-0.5 leading-none">
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-01/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-01/page.tsx
index f63782614b..7ed7a32a9b 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-01/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-01/page.tsx
@@ -39,11 +39,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx
index e8fb47de88..650c7c9d24 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/app-sidebar.tsx
@@ -185,7 +185,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             <SidebarGroup>
               <SidebarGroupLabel
                 asChild
-                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
+                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 <CollapsibleTrigger>
                   {item.title}{" "}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx
index 29601dba7a..021c8c1799 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-02/components/version-switcher.tsx
@@ -33,7 +33,7 @@ export function VersionSwitcher({
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <GalleryVerticalEnd className="size-4" />
               </div>
               <div className="flex flex-col gap-0.5 leading-none">
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-02/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-02/page.tsx
index 8ae137085d..ebd77c23fc 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-02/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-02/page.tsx
@@ -19,7 +19,7 @@ export default function Page() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
           <SidebarTrigger className="-ml-1" />
           <Separator orientation="vertical" className="mr-2 h-4" />
           <Breadcrumb>
@@ -38,7 +38,7 @@ export default function Page() {
           {Array.from({ length: 24 }).map((_, index) => (
             <div
               key={index}
-              className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
             />
           ))}
         </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx
index 4bea6cb7f6..fe72986b41 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-03/components/app-sidebar.tsx
@@ -164,7 +164,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <GalleryVerticalEnd className="size-4" />
                 </div>
                 <div className="flex flex-col gap-0.5 leading-none">
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-03/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-03/page.tsx
index 7e1f5cc3d4..46c57c1812 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-03/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-03/page.tsx
@@ -40,11 +40,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx
index ef95a413e7..10f7bf722f 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-04/components/app-sidebar.tsx
@@ -163,7 +163,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <GalleryVerticalEnd className="size-4" />
                 </div>
                 <div className="flex flex-col gap-0.5 leading-none">
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-04/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-04/page.tsx
index 19341b2411..624f18ef87 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-04/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-04/page.tsx
@@ -45,11 +45,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx
index 23826f54b2..b4bda3789d 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-05/components/app-sidebar.tsx
@@ -170,7 +170,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <GalleryVerticalEnd className="size-4" />
                 </div>
                 <div className="flex flex-col gap-0.5 leading-none">
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-05/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-05/page.tsx
index aa61271696..a18168e06a 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-05/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-05/page.tsx
@@ -39,11 +39,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx
index 401ab2e93e..78931f8e51 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/app-sidebar.tsx
@@ -153,7 +153,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <GalleryVerticalEnd className="size-4" />
                 </div>
                 <div className="flex flex-col gap-0.5 leading-none">
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
index 8d335900ef..ed567e1583 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
@@ -22,7 +22,7 @@ export function SidebarOptInForm() {
           <div className="grid gap-2.5">
             <SidebarInput type="email" placeholder="Email" />
             <Button
-              className="bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none"
+              className="w-full bg-sidebar-primary text-sidebar-primary-foreground shadow-none"
               size="sm"
             >
               Subscribe
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-06/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-06/page.tsx
index 9fe1c1d951..5b990ea830 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-06/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-06/page.tsx
@@ -39,11 +39,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx
index e5d43de409..67f53ca7fd 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-07/components/team-switcher.tsx
@@ -44,7 +44,7 @@ export function TeamSwitcher({
               size="lg"
               className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
             >
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                 <activeTeam.logo className="size-4" />
               </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
@@ -60,7 +60,7 @@ export function TeamSwitcher({
             side={isMobile ? "bottom" : "right"}
             sideOffset={4}
           >
-            <DropdownMenuLabel className="text-muted-foreground text-xs">
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
               Teams
             </DropdownMenuLabel>
             {teams.map((team, index) => (
@@ -81,7 +81,7 @@ export function TeamSwitcher({
               <div className="flex size-6 items-center justify-center rounded-md border bg-transparent">
                 <Plus className="size-4" />
               </div>
-              <div className="text-muted-foreground font-medium">Add team</div>
+              <div className="font-medium text-muted-foreground">Add team</div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-07/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-07/page.tsx
index fa192c0557..c388c63ee4 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-07/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-07/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx
index 8c07236f55..ca2bf5632e 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-08/components/app-sidebar.tsx
@@ -160,7 +160,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <Command className="size-4" />
                 </div>
                 <div className="grid flex-1 text-left text-sm leading-tight">
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-08/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-08/page.tsx
index 7763d9d5f6..d8ca40c5b8 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-08/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-08/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx
index ce95b4f8e2..738248fa45 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-09/components/app-sidebar.tsx
@@ -168,7 +168,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
             <SidebarMenuItem>
               <SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
                 <a href="#">
-                  <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                  <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                     <Command className="size-4" />
                   </div>
                   <div className="grid flex-1 text-left text-sm leading-tight">
@@ -224,7 +224,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       <Sidebar collapsible="none" className="hidden flex-1 md:flex">
         <SidebarHeader className="gap-3.5 border-b p-4">
           <div className="flex w-full items-center justify-between">
-            <div className="text-foreground text-base font-medium">
+            <div className="text-base font-medium text-foreground">
               {activeItem?.title}
             </div>
             <Label className="flex items-center gap-2 text-sm">
@@ -241,7 +241,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                 <a
                   href="#"
                   key={mail.email}
-                  className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0"
+                  className="flex flex-col items-start gap-2 border-b p-4 text-sm leading-tight whitespace-nowrap last:border-b-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                 >
                   <div className="flex w-full items-center gap-2">
                     <span>{mail.name}</span>{" "}
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-09/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-09/page.tsx
index c4fd03139f..b44b4dd0a0 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-09/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-09/page.tsx
@@ -25,7 +25,7 @@ export default function Page() {
     >
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex shrink-0 items-center gap-2 border-b p-4">
+        <header className="sticky top-0 flex shrink-0 items-center gap-2 border-b bg-background p-4">
           <SidebarTrigger className="-ml-1" />
           <Separator
             orientation="vertical"
@@ -47,7 +47,7 @@ export default function Page() {
           {Array.from({ length: 24 }).map((_, index) => (
             <div
               key={index}
-              className="bg-muted/50 aspect-video h-12 w-full rounded-lg"
+              className="aspect-video h-12 w-full rounded-lg bg-muted/50"
             />
           ))}
         </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx
index 146b8f825b..50cec59877 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx
@@ -107,7 +107,7 @@ export function NavActions() {
 
   return (
     <div className="flex items-center gap-2 text-sm">
-      <div className="text-muted-foreground hidden font-medium md:inline-block">
+      <div className="hidden font-medium text-muted-foreground md:inline-block">
         Edit Oct 08
       </div>
       <Button variant="ghost" size="icon" className="h-7 w-7">
@@ -118,7 +118,7 @@ export function NavActions() {
           <Button
             variant="ghost"
             size="icon"
-            className="data-[state=open]:bg-accent h-7 w-7"
+            className="h-7 w-7 data-[state=open]:bg-accent"
           >
             <MoreHorizontal />
           </Button>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx
index cf9bfa9aed..349b807763 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/nav-workspaces.tsx
@@ -46,7 +46,7 @@ export function NavWorkspaces({
                 </SidebarMenuButton>
                 <CollapsibleTrigger asChild>
                   <SidebarMenuAction
-                    className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
                     showOnHover
                   >
                     <ChevronRight />
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx
index f7fd8e1f26..496f7f59e2 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/components/team-switcher.tsx
@@ -39,7 +39,7 @@ export function TeamSwitcher({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton className="w-fit px-1.5">
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
                 <activeTeam.logo className="size-3" />
               </div>
               <span className="truncate font-medium">{activeTeam.name}</span>
@@ -52,7 +52,7 @@ export function TeamSwitcher({
             side="bottom"
             sideOffset={4}
           >
-            <DropdownMenuLabel className="text-muted-foreground text-xs">
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
               Teams
             </DropdownMenuLabel>
             {teams.map((team, index) => (
@@ -70,10 +70,10 @@ export function TeamSwitcher({
             ))}
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2 p-2">
-              <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                 <Plus className="size-4" />
               </div>
-              <div className="text-muted-foreground font-medium">Add team</div>
+              <div className="font-medium text-muted-foreground">Add team</div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-10/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-10/page.tsx
index 777c747f79..6eb9fb66a1 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-10/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-10/page.tsx
@@ -40,8 +40,8 @@ export default function Page() {
           </div>
         </header>
         <div className="flex flex-1 flex-col gap-4 px-4 py-10">
-          <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-          <div className="bg-muted/50 mx-auto h-full w-full max-w-3xl rounded-xl" />
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-full w-full max-w-3xl rounded-xl bg-muted/50" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-11/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-11/page.tsx
index 91537b1940..17d0894b9e 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-11/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-11/page.tsx
@@ -43,11 +43,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
     </SidebarProvider>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx
index 86f9f6965d..74f7a9bb25 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/app-sidebar.tsx
@@ -42,7 +42,7 @@ const data = {
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
     <Sidebar {...props}>
-      <SidebarHeader className="border-sidebar-border h-16 border-b">
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
         <NavUser user={data.user} />
       </SidebarHeader>
       <SidebarContent>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx
index 8b5e4954e6..403df052fe 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/calendars.tsx
@@ -35,7 +35,7 @@ export function Calendars({
             >
               <SidebarGroupLabel
                 asChild
-                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 <CollapsibleTrigger>
                   {calendar.name}{" "}
@@ -50,7 +50,7 @@ export function Calendars({
                         <SidebarMenuButton>
                           <div
                             data-active={index < 2}
-                            className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border"
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-sm border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
                           >
                             <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
                           </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx
index 81c493ea2b..d67e9cc458 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/date-picker.tsx
@@ -8,7 +8,7 @@ export function DatePicker() {
   return (
     <SidebarGroup className="px-0">
       <SidebarGroupContent>
-        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+        <Calendar className="[&_[role=gridcell]]:w-[33px] [&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground" />
       </SidebarGroupContent>
     </SidebarGroup>
   )
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/page.tsx
index eb594eb253..7f1fbca72f 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-12/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/page.tsx
@@ -17,7 +17,7 @@ export default function Page() {
     <SidebarProvider>
       <AppSidebar />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b px-4">
+        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
           <SidebarTrigger className="-ml-1" />
           <Separator
             orientation="vertical"
@@ -34,7 +34,7 @@ export default function Page() {
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-5">
             {Array.from({ length: 20 }).map((_, i) => (
-              <div key={i} className="bg-muted/50 aspect-square rounded-xl" />
+              <div key={i} className="aspect-square rounded-xl bg-muted/50" />
             ))}
           </div>
         </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx
index b408be0e2f..9eab22a09f 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-13/components/settings-dialog.tsx
@@ -117,7 +117,7 @@ export function SettingsDialog() {
               {Array.from({ length: 10 }).map((_, i) => (
                 <div
                   key={i}
-                  className="bg-muted/50 aspect-video max-w-3xl rounded-xl"
+                  className="aspect-video max-w-3xl rounded-xl bg-muted/50"
                 />
               ))}
             </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-14/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-14/page.tsx
index c6207f3bee..2b66a32ef3 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-14/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-14/page.tsx
@@ -33,11 +33,11 @@ export default function Page() {
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
           <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
-            <div className="bg-muted/50 aspect-video rounded-xl" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
+            <div className="aspect-video rounded-xl bg-muted/50" />
           </div>
-          <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+          <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
         </div>
       </SidebarInset>
       <AppSidebar side="right" />
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx
index 3d1b7eb35e..cf208706d8 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/calendars.tsx
@@ -35,7 +35,7 @@ export function Calendars({
             >
               <SidebarGroupLabel
                 asChild
-                className="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground w-full text-sm"
+                className="group/label w-full text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 <CollapsibleTrigger>
                   {calendar.name}{" "}
@@ -50,7 +50,7 @@ export function Calendars({
                         <SidebarMenuButton>
                           <div
                             data-active={index < 2}
-                            className="group/calendar-item border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border"
+                            className="group/calendar-item flex aspect-square size-4 shrink-0 items-center justify-center rounded-xs border border-sidebar-border text-sidebar-primary-foreground data-[active=true]:border-sidebar-primary data-[active=true]:bg-sidebar-primary"
                           >
                             <Check className="hidden size-3 group-data-[active=true]/calendar-item:block" />
                           </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx
index 81c493ea2b..d67e9cc458 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/date-picker.tsx
@@ -8,7 +8,7 @@ export function DatePicker() {
   return (
     <SidebarGroup className="px-0">
       <SidebarGroupContent>
-        <Calendar className="[&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground [&_[role=gridcell]]:w-[33px]" />
+        <Calendar className="[&_[role=gridcell]]:w-[33px] [&_[role=gridcell].bg-accent]:bg-sidebar-primary [&_[role=gridcell].bg-accent]:text-sidebar-primary-foreground" />
       </SidebarGroupContent>
     </SidebarGroup>
   )
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx
index cf9bfa9aed..349b807763 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-workspaces.tsx
@@ -46,7 +46,7 @@ export function NavWorkspaces({
                 </SidebarMenuButton>
                 <CollapsibleTrigger asChild>
                   <SidebarMenuAction
-                    className="bg-sidebar-accent text-sidebar-accent-foreground left-2 data-[state=open]:rotate-90"
+                    className="left-2 bg-sidebar-accent text-sidebar-accent-foreground data-[state=open]:rotate-90"
                     showOnHover
                   >
                     <ChevronRight />
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx
index b3c1ee4d3a..70d20893c5 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/sidebar-right.tsx
@@ -48,7 +48,7 @@ export function SidebarRight({
       className="sticky top-0 hidden h-svh border-l lg:flex"
       {...props}
     >
-      <SidebarHeader className="border-sidebar-border h-16 border-b">
+      <SidebarHeader className="h-16 border-b border-sidebar-border">
         <NavUser user={data.user} />
       </SidebarHeader>
       <SidebarContent>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx
index f7fd8e1f26..496f7f59e2 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/team-switcher.tsx
@@ -39,7 +39,7 @@ export function TeamSwitcher({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton className="w-fit px-1.5">
-              <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-5 items-center justify-center rounded-md">
+              <div className="flex aspect-square size-5 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
                 <activeTeam.logo className="size-3" />
               </div>
               <span className="truncate font-medium">{activeTeam.name}</span>
@@ -52,7 +52,7 @@ export function TeamSwitcher({
             side="bottom"
             sideOffset={4}
           >
-            <DropdownMenuLabel className="text-muted-foreground text-xs">
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
               Teams
             </DropdownMenuLabel>
             {teams.map((team, index) => (
@@ -70,10 +70,10 @@ export function TeamSwitcher({
             ))}
             <DropdownMenuSeparator />
             <DropdownMenuItem className="gap-2 p-2">
-              <div className="bg-background flex size-6 items-center justify-center rounded-md border">
+              <div className="flex size-6 items-center justify-center rounded-md border bg-background">
                 <Plus className="size-4" />
               </div>
-              <div className="text-muted-foreground font-medium">Add team</div>
+              <div className="font-medium text-muted-foreground">Add team</div>
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/page.tsx
index a301f05ce3..ad164cc340 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-15/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/page.tsx
@@ -18,7 +18,7 @@ export default function Page() {
     <SidebarProvider>
       <SidebarLeft />
       <SidebarInset>
-        <header className="bg-background sticky top-0 flex h-14 shrink-0 items-center gap-2">
+        <header className="sticky top-0 flex h-14 shrink-0 items-center gap-2 bg-background">
           <div className="flex flex-1 items-center gap-2 px-3">
             <SidebarTrigger />
             <Separator
@@ -37,8 +37,8 @@ export default function Page() {
           </div>
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4">
-          <div className="bg-muted/50 mx-auto h-24 w-full max-w-3xl rounded-xl" />
-          <div className="bg-muted/50 mx-auto h-[100vh] w-full max-w-3xl rounded-xl" />
+          <div className="mx-auto h-24 w-full max-w-3xl rounded-xl bg-muted/50" />
+          <div className="mx-auto h-[100vh] w-full max-w-3xl rounded-xl bg-muted/50" />
         </div>
       </SidebarInset>
       <SidebarRight />
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx
index 2b915d486f..28ff4e6ace 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/app-sidebar.tsx
@@ -163,7 +163,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
           <SidebarMenuItem>
             <SidebarMenuButton size="lg" asChild>
               <a href="#">
-                <div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
+                <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
                   <Command className="size-4" />
                 </div>
                 <div className="grid flex-1 text-left text-sm leading-tight">
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx
index ea649d0986..559eec5acb 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx
@@ -19,7 +19,7 @@ export function SiteHeader() {
   const { toggleSidebar } = useSidebar()
 
   return (
-    <header className="bg-background sticky top-0 z-50 flex w-full items-center border-b">
+    <header className="sticky top-0 z-50 flex w-full items-center border-b bg-background">
       <div className="flex h-(--header-height) w-full items-center gap-2 px-4">
         <Button
           className="h-8 w-8"
diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/page.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/page.tsx
index 9a90ac959e..7cc2ac25b4 100644
--- a/apps/v4/registry/new-york-v4/blocks/sidebar-16/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/page.tsx
@@ -19,11 +19,11 @@ export default function Page() {
           <SidebarInset>
             <div className="flex flex-1 flex-col gap-4 p-4">
               <div className="grid auto-rows-min gap-4 md:grid-cols-3">
-                <div className="bg-muted/50 aspect-video rounded-xl" />
-                <div className="bg-muted/50 aspect-video rounded-xl" />
-                <div className="bg-muted/50 aspect-video rounded-xl" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
+                <div className="aspect-video rounded-xl bg-muted/50" />
               </div>
-              <div className="bg-muted/50 min-h-[100vh] flex-1 rounded-xl md:min-h-min" />
+              <div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
             </div>
           </SidebarInset>
         </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/signup-02/components/signup-form.tsx b/apps/v4/registry/new-york-v4/blocks/signup-02/components/signup-form.tsx
index db812c8b73..d04cd1efad 100644
--- a/apps/v4/registry/new-york-v4/blocks/signup-02/components/signup-form.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/signup-02/components/signup-form.tsx
@@ -18,7 +18,7 @@ export function SignupForm({
       <FieldGroup>
         <div className="flex flex-col items-center gap-1 text-center">
           <h1 className="text-2xl font-bold">Create your account</h1>
-          <p className="text-muted-foreground text-sm text-balance">
+          <p className="text-sm text-balance text-muted-foreground">
             Fill in the form below to create your account
           </p>
         </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/signup-02/page.tsx b/apps/v4/registry/new-york-v4/blocks/signup-02/page.tsx
index 331e390938..0ae94e8e92 100644
--- a/apps/v4/registry/new-york-v4/blocks/signup-02/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/signup-02/page.tsx
@@ -8,7 +8,7 @@ export default function SignupPage() {
       <div className="flex flex-col gap-4 p-6 md:p-10">
         <div className="flex justify-center gap-2 md:justify-start">
           <a href="#" className="flex items-center gap-2 font-medium">
-            <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+            <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
               <GalleryVerticalEnd className="size-4" />
             </div>
             Acme Inc.
@@ -20,7 +20,7 @@ export default function SignupPage() {
           </div>
         </div>
       </div>
-      <div className="bg-muted relative hidden lg:block">
+      <div className="relative hidden bg-muted lg:block">
         <img
           src="/placeholder.svg"
           alt="Image"
diff --git a/apps/v4/registry/new-york-v4/blocks/signup-03/page.tsx b/apps/v4/registry/new-york-v4/blocks/signup-03/page.tsx
index db9c829389..8d6fab05a0 100644
--- a/apps/v4/registry/new-york-v4/blocks/signup-03/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/signup-03/page.tsx
@@ -4,10 +4,10 @@ import { SignupForm } from "@/registry/new-york-v4/blocks/signup-03/components/s
 
 export default function SignupPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
       <div className="flex w-full max-w-sm flex-col gap-6">
         <a href="#" className="flex items-center gap-2 self-center font-medium">
-          <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+          <div className="flex size-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
             <GalleryVerticalEnd className="size-4" />
           </div>
           Acme Inc.
diff --git a/apps/v4/registry/new-york-v4/blocks/signup-04/components/signup-form.tsx b/apps/v4/registry/new-york-v4/blocks/signup-04/components/signup-form.tsx
index c3b4038c04..ab5e0eb9e5 100644
--- a/apps/v4/registry/new-york-v4/blocks/signup-04/components/signup-form.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/signup-04/components/signup-form.tsx
@@ -22,7 +22,7 @@ export function SignupForm({
             <FieldGroup>
               <div className="flex flex-col items-center gap-2 text-center">
                 <h1 className="text-2xl font-bold">Create your account</h1>
-                <p className="text-muted-foreground text-sm text-balance">
+                <p className="text-sm text-balance text-muted-foreground">
                   Enter your email below to create your account
                 </p>
               </div>
@@ -96,7 +96,7 @@ export function SignupForm({
               </FieldDescription>
             </FieldGroup>
           </form>
-          <div className="bg-muted relative hidden md:block">
+          <div className="relative hidden bg-muted md:block">
             <img
               src="/placeholder.svg"
               alt="Image"
diff --git a/apps/v4/registry/new-york-v4/blocks/signup-04/page.tsx b/apps/v4/registry/new-york-v4/blocks/signup-04/page.tsx
index fe8ea812a4..1922a99ba5 100644
--- a/apps/v4/registry/new-york-v4/blocks/signup-04/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/signup-04/page.tsx
@@ -2,7 +2,7 @@ import { SignupForm } from "@/registry/new-york-v4/blocks/signup-04/components/s
 
 export default function SignupPage() {
   return (
-    <div className="bg-muted flex min-h-svh flex-col items-center justify-center p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center bg-muted p-6 md:p-10">
       <div className="w-full max-w-sm md:max-w-4xl">
         <SignupForm />
       </div>
diff --git a/apps/v4/registry/new-york-v4/blocks/signup-05/page.tsx b/apps/v4/registry/new-york-v4/blocks/signup-05/page.tsx
index 09ba7d14d6..889ced02ba 100644
--- a/apps/v4/registry/new-york-v4/blocks/signup-05/page.tsx
+++ b/apps/v4/registry/new-york-v4/blocks/signup-05/page.tsx
@@ -2,7 +2,7 @@ import { SignupForm } from "@/registry/new-york-v4/blocks/signup-05/components/s
 
 export default function SignupPage() {
   return (
-    <div className="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
       <div className="w-full max-w-sm">
         <SignupForm />
       </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-axes.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-axes.tsx
index 6c9325a8df..ee429429fb 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-axes.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-axes.tsx
@@ -99,7 +99,7 @@ export function ChartAreaAxes() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-default.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-default.tsx
index bf9554fc4c..3dfbcd3fc3 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-default.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-default.tsx
@@ -83,7 +83,7 @@ export function ChartAreaDefault() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-gradient.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-gradient.tsx
index d8720cd8ba..648355c436 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-gradient.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-gradient.tsx
@@ -119,7 +119,7 @@ export function ChartAreaGradient() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-icons.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-icons.tsx
index f2ff04ab30..295160e905 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-icons.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-icons.tsx
@@ -101,7 +101,7 @@ export function ChartAreaIcons() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-legend.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-legend.tsx
index 1fab9ba69d..eddd6c2550 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-legend.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-legend.tsx
@@ -99,7 +99,7 @@ export function ChartAreaLegend() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-linear.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-linear.tsx
index 9244ce7906..5e2a36507d 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-linear.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-linear.tsx
@@ -83,7 +83,7 @@ export function ChartAreaLinear() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-stacked-expand.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-stacked-expand.tsx
index 5d82be0d33..95a7851529 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-stacked-expand.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-stacked-expand.tsx
@@ -110,7 +110,7 @@ export function ChartAreaStackedExpand() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-stacked.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-stacked.tsx
index fd75981561..92dc3edd14 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-stacked.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-stacked.tsx
@@ -96,7 +96,7 @@ export function ChartAreaStacked() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-area-step.tsx b/apps/v4/registry/new-york-v4/charts/chart-area-step.tsx
index 95fc475ad4..2c2dd58177 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-area-step.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-area-step.tsx
@@ -84,7 +84,7 @@ export function ChartAreaStep() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               January - June 2024
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-active.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-active.tsx
index a95f474e9a..a2762ef314 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-active.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-active.tsx
@@ -102,7 +102,7 @@ export function ChartBarActive() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-default.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-default.tsx
index 372a3f39aa..dc921b04f9 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-default.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-default.tsx
@@ -66,7 +66,7 @@ export function ChartBarDefault() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-horizontal.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-horizontal.tsx
index 0391488bf1..2016a9785c 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-horizontal.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-horizontal.tsx
@@ -74,7 +74,7 @@ export function ChartBarHorizontal() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-interactive.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-interactive.tsx
index 573c6f5436..124e381442 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-interactive.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-interactive.tsx
@@ -141,8 +141,8 @@ export function ChartBarInteractive() {
 
   return (
     <Card className="py-0">
-      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
-        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
+      <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:py-0!">
           <CardTitle>Bar Chart - Interactive</CardTitle>
           <CardDescription>
             Showing total visitors for the last 3 months
@@ -155,10 +155,10 @@ export function ChartBarInteractive() {
               <button
                 key={chart}
                 data-active={activeChart === chart}
-                className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
                 onClick={() => setActiveChart(chart)}
               >
-                <span className="text-muted-foreground text-xs">
+                <span className="text-xs text-muted-foreground">
                   {chartConfig[chart].label}
                 </span>
                 <span className="text-lg leading-none font-bold sm:text-3xl">
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-label-custom.tsx
index cc4a74ddc7..94fa725ef7 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-label-custom.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-label-custom.tsx
@@ -103,7 +103,7 @@ export function ChartBarLabelCustom() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-label.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-label.tsx
index e0f4e20bbc..390e1b0328 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-label.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-label.tsx
@@ -79,7 +79,7 @@ export function ChartBarLabel() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-mixed.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-mixed.tsx
index 7953c70ee4..cb59da61d9 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-mixed.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-mixed.tsx
@@ -94,7 +94,7 @@ export function ChartBarMixed() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-multiple.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-multiple.tsx
index 4d30a4e44b..99b894f293 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-multiple.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-multiple.tsx
@@ -71,7 +71,7 @@ export function ChartBarMultiple() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-negative.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-negative.tsx
index b0e967e87e..982bccdb9c 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-negative.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-negative.tsx
@@ -66,7 +66,7 @@ export function ChartBarNegative() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-bar-stacked.tsx b/apps/v4/registry/new-york-v4/charts/chart-bar-stacked.tsx
index 584deacc7d..99ceda588e 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-bar-stacked.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-bar-stacked.tsx
@@ -81,7 +81,7 @@ export function ChartBarStacked() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-default.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-default.tsx
index 4542326d6a..669ebf5022 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-default.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-default.tsx
@@ -79,7 +79,7 @@ export function ChartLineDefault() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-dots-colors.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-dots-colors.tsx
index de1b803e93..451c24fd34 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-dots-colors.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-dots-colors.tsx
@@ -109,7 +109,7 @@ export function ChartLineDotsColors() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-dots-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-dots-custom.tsx
index eadfb62f26..07292f0d04 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-dots-custom.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-dots-custom.tsx
@@ -96,7 +96,7 @@ export function ChartLineDotsCustom() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-dots.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-dots.tsx
index fd6d5b62c2..0d1df7b6e6 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-dots.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-dots.tsx
@@ -88,7 +88,7 @@ export function ChartLineDots() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-interactive.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-interactive.tsx
index 1745eefdeb..3feeb25b0d 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-interactive.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-interactive.tsx
@@ -141,7 +141,7 @@ export function ChartLineInteractive() {
 
   return (
     <Card className="py-4 sm:py-0">
-      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
+      <CardHeader className="flex flex-col items-stretch border-b p-0! sm:flex-row">
         <div className="flex flex-1 flex-col justify-center gap-1 px-6 pb-3 sm:pb-0">
           <CardTitle>Line Chart - Interactive</CardTitle>
           <CardDescription>
@@ -155,10 +155,10 @@ export function ChartLineInteractive() {
               <button
                 key={chart}
                 data-active={activeChart === chart}
-                className="data-[active=true]:bg-muted/50 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                className="flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
                 onClick={() => setActiveChart(chart)}
               >
-                <span className="text-muted-foreground text-xs">
+                <span className="text-xs text-muted-foreground">
                   {chartConfig[chart].label}
                 </span>
                 <span className="text-lg leading-none font-bold sm:text-3xl">
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-label-custom.tsx
index 1b102329ce..099e4d4d2d 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-label-custom.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-label-custom.tsx
@@ -114,7 +114,7 @@ export function ChartLineLabelCustom() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-label.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-label.tsx
index c7b3cf7d90..7a333fc3a2 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-label.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-label.tsx
@@ -96,7 +96,7 @@ export function ChartLineLabel() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-linear.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-linear.tsx
index 2a2f0c50e9..e0c2d34ac8 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-linear.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-linear.tsx
@@ -79,7 +79,7 @@ export function ChartLineLinear() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-multiple.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-multiple.tsx
index d70bf9495e..fb16242097 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-multiple.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-multiple.tsx
@@ -89,7 +89,7 @@ export function ChartLineMultiple() {
             <div className="flex items-center gap-2 leading-none font-medium">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
             </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
+            <div className="flex items-center gap-2 leading-none text-muted-foreground">
               Showing total visitors for the last 6 months
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-line-step.tsx b/apps/v4/registry/new-york-v4/charts/chart-line-step.tsx
index e1591db039..5dce7fcbbc 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-line-step.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-line-step.tsx
@@ -79,7 +79,7 @@ export function ChartLineStep() {
         <div className="flex gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-donut-active.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-donut-active.tsx
index 64abdf172d..48c13e6050 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-donut-active.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-donut-active.tsx
@@ -93,7 +93,7 @@ export function ChartPieDonutActive() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-donut-text.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-donut-text.tsx
index f31ee637b5..c7e3d83495 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-donut-text.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-donut-text.tsx
@@ -120,7 +120,7 @@ export function ChartPieDonutText() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-donut.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-donut.tsx
index 0c23c4d86a..c4ca8674ee 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-donut.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-donut.tsx
@@ -84,7 +84,7 @@ export function ChartPieDonut() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx
index eed3aa0953..addae4e95b 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx
@@ -98,7 +98,7 @@ export function ChartPieLabelCustom() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-label-list.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-label-list.tsx
index 26ada78014..04d7712328 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-label-list.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-label-list.tsx
@@ -64,7 +64,7 @@ export function ChartPieLabelList() {
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
-          className="[&_.recharts-text]:fill-background mx-auto aspect-square max-h-[250px]"
+          className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
         >
           <PieChart>
             <ChartTooltip
@@ -88,7 +88,7 @@ export function ChartPieLabelList() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-label.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-label.tsx
index 4773d012d5..3257c58511 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-label.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-label.tsx
@@ -64,7 +64,7 @@ export function ChartPieLabel() {
       <CardContent className="flex-1 pb-0">
         <ChartContainer
           config={chartConfig}
-          className="[&_.recharts-pie-label-text]:fill-foreground mx-auto aspect-square max-h-[250px] pb-0"
+          className="mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground"
         >
           <PieChart>
             <ChartTooltip content={<ChartTooltipContent hideLabel />} />
@@ -76,7 +76,7 @@ export function ChartPieLabel() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-separator-none.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-separator-none.tsx
index fa1674fa41..e313ea46e7 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-separator-none.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-separator-none.tsx
@@ -84,7 +84,7 @@ export function ChartPieSeparatorNone() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-simple.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-simple.tsx
index 377e103469..1c90420f93 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-simple.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-simple.tsx
@@ -79,7 +79,7 @@ export function ChartPieSimple() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-stacked.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-stacked.tsx
index c8741d12fb..e7e9849725 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-stacked.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-stacked.tsx
@@ -110,7 +110,7 @@ export function ChartPieStacked() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-default.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-default.tsx
index 271bab474d..425afde7ff 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-default.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-default.tsx
@@ -66,7 +66,7 @@ export function ChartRadarDefault() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-dots.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-dots.tsx
index 00d5fa995f..be84261030 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-dots.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-dots.tsx
@@ -70,7 +70,7 @@ export function ChartRadarDots() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx
index 75c26ec49a..bb58bce241 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx
@@ -69,7 +69,7 @@ export function ChartRadarGridCircleFill() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx
index 5767216178..e098f0f1b9 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx
@@ -73,7 +73,7 @@ export function ChartRadarGridCircleNoLines() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle.tsx
index 57d945fb72..67601f06ae 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-circle.tsx
@@ -73,7 +73,7 @@ export function ChartRadarGridCircle() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-custom.tsx
index 4a75038d90..9ab8ad6127 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-custom.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-custom.tsx
@@ -69,7 +69,7 @@ export function ChartRadarGridCustom() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-fill.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-fill.tsx
index dc27a5ba7d..b3ebb61358 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-fill.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-fill.tsx
@@ -69,7 +69,7 @@ export function ChartRadarGridFill() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-none.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-none.tsx
index 4de60c7e69..0bdb7769a9 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-grid-none.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-grid-none.tsx
@@ -72,7 +72,7 @@ export function ChartRadarGridNone() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-icons.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-icons.tsx
index 7c3cec63a3..e279f7a293 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-icons.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-icons.tsx
@@ -85,7 +85,7 @@ export function ChartRadarIcons() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-label-custom.tsx
index 90c5748e1a..bc48b9d19a 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-label-custom.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-label-custom.tsx
@@ -111,7 +111,7 @@ export function ChartRadarLabelCustom() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-legend.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-legend.tsx
index 7c80c692d5..ae942940ea 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-legend.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-legend.tsx
@@ -83,7 +83,7 @@ export function ChartRadarLegend() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-lines-only.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-lines-only.tsx
index dd621897d4..c62cddf735 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-lines-only.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-lines-only.tsx
@@ -82,7 +82,7 @@ export function ChartRadarLinesOnly() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-multiple.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-multiple.tsx
index fbf06a33e8..b7d2102f95 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-multiple.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-multiple.tsx
@@ -74,7 +74,7 @@ export function ChartRadarMultiple() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx
index 624489b091..e6b66e2c2e 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx
@@ -87,7 +87,7 @@ export function ChartRadarRadius() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
+        <div className="flex items-center gap-2 leading-none text-muted-foreground">
           January - June 2024
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-grid.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-grid.tsx
index 523a629d19..032eb98a9e 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radial-grid.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-grid.tsx
@@ -80,7 +80,7 @@ export function ChartRadialGrid() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-label.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-label.tsx
index fea319a855..effb735c84 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radial-label.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-label.tsx
@@ -92,7 +92,7 @@ export function ChartRadialLabel() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-shape.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-shape.tsx
index 888f1e1c04..3defb23aa3 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radial-shape.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-shape.tsx
@@ -102,7 +102,7 @@ export function ChartRadialShape() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-simple.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-simple.tsx
index d5e1d50e25..b13e20e5b5 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radial-simple.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-simple.tsx
@@ -79,7 +79,7 @@ export function ChartRadialSimple() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-stacked.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-stacked.tsx
index ab7b003f2a..26df44e5e2 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radial-stacked.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-stacked.tsx
@@ -104,7 +104,7 @@ export function ChartRadialStacked() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radial-text.tsx b/apps/v4/registry/new-york-v4/charts/chart-radial-text.tsx
index 55335a9af1..bf58ab8516 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radial-text.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radial-text.tsx
@@ -103,7 +103,7 @@ export function ChartRadialText() {
         <div className="flex items-center gap-2 leading-none font-medium">
           Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
         </div>
-        <div className="text-muted-foreground leading-none">
+        <div className="leading-none text-muted-foreground">
           Showing total visitors for the last 6 months
         </div>
       </CardFooter>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-advanced.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-advanced.tsx
index ca67a7184f..6c55b5e514 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-tooltip-advanced.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-advanced.tsx
@@ -90,19 +90,19 @@ export function ChartTooltipAdvanced() {
                       />
                       {chartConfig[name as keyof typeof chartConfig]?.label ||
                         name}
-                      <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
+                      <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums">
                         {value}
-                        <span className="text-muted-foreground font-normal">
+                        <span className="font-normal text-muted-foreground">
                           kcal
                         </span>
                       </div>
                       {/* Add this after the last item */}
                       {index === 1 && (
-                        <div className="text-foreground mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium">
+                        <div className="mt-1.5 flex basis-full items-center border-t pt-1.5 text-xs font-medium text-foreground">
                           Total
-                          <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
+                          <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums">
                             {item.payload.running + item.payload.swimming}
-                            <span className="text-muted-foreground font-normal">
+                            <span className="font-normal text-muted-foreground">
                               kcal
                             </span>
                           </div>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-tooltip-formatter.tsx b/apps/v4/registry/new-york-v4/charts/chart-tooltip-formatter.tsx
index 154b3b099a..6d0ebf02dd 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-tooltip-formatter.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-tooltip-formatter.tsx
@@ -76,12 +76,12 @@ export function ChartTooltipFormatter() {
                 <ChartTooltipContent
                   hideLabel
                   formatter={(value, name) => (
-                    <div className="text-muted-foreground flex min-w-[130px] items-center text-xs">
+                    <div className="flex min-w-[130px] items-center text-xs text-muted-foreground">
                       {chartConfig[name as keyof typeof chartConfig]?.label ||
                         name}
-                      <div className="text-foreground ml-auto flex items-baseline gap-0.5 font-mono font-medium tabular-nums">
+                      <div className="ml-auto flex items-baseline gap-0.5 font-mono font-medium text-foreground tabular-nums">
                         {value}
-                        <span className="text-muted-foreground font-normal">
+                        <span className="font-normal text-muted-foreground">
                           kcal
                         </span>
                       </div>
diff --git a/apps/v4/registry/new-york-v4/examples/aspect-ratio-demo.tsx b/apps/v4/registry/new-york-v4/examples/aspect-ratio-demo.tsx
index 1f9cdc5eeb..ff2d53da83 100644
--- a/apps/v4/registry/new-york-v4/examples/aspect-ratio-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/aspect-ratio-demo.tsx
@@ -4,7 +4,7 @@ import { AspectRatio } from "@/registry/new-york-v4/ui/aspect-ratio"
 
 export default function AspectRatioDemo() {
   return (
-    <AspectRatio ratio={16 / 9} className="bg-muted rounded-lg">
+    <AspectRatio ratio={16 / 9} className="rounded-lg bg-muted">
       <Image
         src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
         alt="Photo by Drew Beamer"
diff --git a/apps/v4/registry/new-york-v4/examples/avatar-demo.tsx b/apps/v4/registry/new-york-v4/examples/avatar-demo.tsx
index 12b992843e..cd6d1b9e24 100644
--- a/apps/v4/registry/new-york-v4/examples/avatar-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/avatar-demo.tsx
@@ -18,7 +18,7 @@ export default function AvatarDemo() {
         />
         <AvatarFallback>ER</AvatarFallback>
       </Avatar>
-      <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+      <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
         <Avatar>
           <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
           <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/registry/new-york-v4/examples/button-group-dropdown.tsx b/apps/v4/registry/new-york-v4/examples/button-group-dropdown.tsx
index a73cf27f5e..8de54f7220 100644
--- a/apps/v4/registry/new-york-v4/examples/button-group-dropdown.tsx
+++ b/apps/v4/registry/new-york-v4/examples/button-group-dropdown.tsx
@@ -28,7 +28,7 @@ export default function ButtonGroupDropdown() {
       <Button variant="outline">Follow</Button>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="outline" className="!pl-2">
+          <Button variant="outline" className="pl-2!">
             <ChevronDownIcon />
           </Button>
         </DropdownMenuTrigger>
diff --git a/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
index 0ec98bbf62..a41152bd15 100644
--- a/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
+++ b/apps/v4/registry/new-york-v4/examples/calendar-hijri.tsx
@@ -55,7 +55,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -69,61 +69,61 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
           defaultClassNames.day
         ),
         range_start: cn(
@@ -133,7 +133,7 @@ function Calendar({
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -224,7 +224,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/registry/new-york-v4/examples/carousel-api.tsx b/apps/v4/registry/new-york-v4/examples/carousel-api.tsx
index 527c5d73af..68c45960da 100644
--- a/apps/v4/registry/new-york-v4/examples/carousel-api.tsx
+++ b/apps/v4/registry/new-york-v4/examples/carousel-api.tsx
@@ -47,7 +47,7 @@ export default function CarouselDApiDemo() {
         <CarouselPrevious />
         <CarouselNext />
       </Carousel>
-      <div className="text-muted-foreground py-2 text-center text-sm">
+      <div className="py-2 text-center text-sm text-muted-foreground">
         Slide {current} of {count}
       </div>
     </div>
diff --git a/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx b/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx
index 483a0df986..5e3e0492c4 100644
--- a/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx
@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 
 export default function Component() {
   return (
-    <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
+    <div className="grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
       <div>
         <div className="absolute top-[45px] left-[-35px] z-10 text-sm font-medium">
           Label
@@ -75,7 +75,7 @@ export default function Component() {
           className="w-[8rem]"
         />
       </div>
-      <div className="!hidden md:!flex">
+      <div className="hidden! md:flex!">
         <TooltipDemo
           label="Page Views"
           payload={[
@@ -85,7 +85,7 @@ export default function Component() {
           indicator="line"
         />
       </div>
-      <div className="!items-start !justify-start">
+      <div className="items-start! justify-start!">
         <div className="absolute top-[60px] left-[50px] z-10 text-sm font-medium">
           Indicator
         </div>
@@ -156,7 +156,7 @@ function TooltipDemo({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5",
         className
       )}
     >
@@ -169,7 +169,7 @@ function TooltipDemo({
             <div
               key={index}
               className={cn(
-                "[&>svg]:text-muted-foreground flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                 indicator === "dot" && "items-center"
               )}
             >
@@ -204,7 +204,7 @@ function TooltipDemo({
                     {nestLabel ? tooltipLabel : null}
                     <span className="text-muted-foreground">{item.name}</span>
                   </div>
-                  <span className="text-foreground font-mono font-medium tabular-nums">
+                  <span className="font-mono font-medium text-foreground tabular-nums">
                     {item.value.toLocaleString()}
                   </span>
                 </div>
diff --git a/apps/v4/registry/new-york-v4/examples/checkbox-demo.tsx b/apps/v4/registry/new-york-v4/examples/checkbox-demo.tsx
index 62dabebc7b..4cdae4210d 100644
--- a/apps/v4/registry/new-york-v4/examples/checkbox-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/checkbox-demo.tsx
@@ -14,7 +14,7 @@ export default function CheckboxDemo() {
         <Checkbox id="terms-2" defaultChecked />
         <div className="grid gap-2">
           <Label htmlFor="terms-2">Accept terms and conditions</Label>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             By clicking this checkbox, you agree to the terms and conditions.
           </p>
         </div>
@@ -23,7 +23,7 @@ export default function CheckboxDemo() {
         <Checkbox id="toggle" disabled />
         <Label htmlFor="toggle">Enable notifications</Label>
       </div>
-      <Label className="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
+      <Label className="flex items-start gap-3 rounded-lg border p-3 hover:bg-accent/50 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950">
         <Checkbox
           id="toggle-2"
           defaultChecked
@@ -33,7 +33,7 @@ export default function CheckboxDemo() {
           <p className="text-sm leading-none font-medium">
             Enable notifications
           </p>
-          <p className="text-muted-foreground text-sm">
+          <p className="text-sm text-muted-foreground">
             You can enable or disable notifications at any time.
           </p>
         </div>
diff --git a/apps/v4/registry/new-york-v4/examples/checkbox-with-text.tsx b/apps/v4/registry/new-york-v4/examples/checkbox-with-text.tsx
index c90d242547..aca0e92de7 100644
--- a/apps/v4/registry/new-york-v4/examples/checkbox-with-text.tsx
+++ b/apps/v4/registry/new-york-v4/examples/checkbox-with-text.tsx
@@ -13,7 +13,7 @@ export default function CheckboxWithText() {
         >
           Accept terms and conditions
         </label>
-        <p className="text-muted-foreground text-sm">
+        <p className="text-sm text-muted-foreground">
           You agree to our Terms of Service and Privacy Policy.
         </p>
       </div>
diff --git a/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx b/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx
index d2522a81c2..690f78b925 100644
--- a/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx
+++ b/apps/v4/registry/new-york-v4/examples/combobox-dropdown-menu.tsx
@@ -43,7 +43,7 @@ export default function ComboboxDropdownMenu() {
   return (
     <div className="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center">
       <p className="text-sm leading-none font-medium">
-        <span className="bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs">
+        <span className="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground">
           {label}
         </span>
         <span className="text-muted-foreground">Create a new project</span>
diff --git a/apps/v4/registry/new-york-v4/examples/combobox-popover.tsx b/apps/v4/registry/new-york-v4/examples/combobox-popover.tsx
index 58377475a5..a5563ddd0e 100644
--- a/apps/v4/registry/new-york-v4/examples/combobox-popover.tsx
+++ b/apps/v4/registry/new-york-v4/examples/combobox-popover.tsx
@@ -53,7 +53,7 @@ export default function ComboboxPopover() {
 
   return (
     <div className="flex items-center space-x-4">
-      <p className="text-muted-foreground text-sm">Status</p>
+      <p className="text-sm text-muted-foreground">Status</p>
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild>
           <Button variant="outline" className="w-[150px] justify-start">
diff --git a/apps/v4/registry/new-york-v4/examples/command-dialog.tsx b/apps/v4/registry/new-york-v4/examples/command-dialog.tsx
index 9845354bf2..f45a32f7b7 100644
--- a/apps/v4/registry/new-york-v4/examples/command-dialog.tsx
+++ b/apps/v4/registry/new-york-v4/examples/command-dialog.tsx
@@ -38,9 +38,9 @@ export default function CommandDialogDemo() {
 
   return (
     <>
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         Press{" "}
-        <kbd className="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none">
+        <kbd className="pointer-events-none inline-flex h-5 items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100 select-none">
           <span className="text-xs">⌘</span>J
         </kbd>
       </p>
diff --git a/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx b/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
index 42b58b11e3..8059bc0f0b 100644
--- a/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/data-table-demo.tsx
@@ -284,7 +284,7 @@ export default function DataTableDemo() {
         </Table>
       </div>
       <div className="flex items-center justify-end space-x-2 py-4">
-        <div className="text-muted-foreground flex-1 text-sm">
+        <div className="flex-1 text-sm text-muted-foreground">
           {table.getFilteredSelectedRowModel().rows.length} of{" "}
           {table.getFilteredRowModel().rows.length} row(s) selected.
         </div>
diff --git a/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx b/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx
index e2be27ffdf..cc54734149 100644
--- a/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx
@@ -92,7 +92,7 @@ export default function DrawerDemo() {
                 <div className="text-7xl font-bold tracking-tighter">
                   {goal}
                 </div>
-                <div className="text-muted-foreground text-[0.70rem] uppercase">
+                <div className="text-[0.70rem] text-muted-foreground uppercase">
                   Calories/day
                 </div>
               </div>
diff --git a/apps/v4/registry/new-york-v4/examples/empty-avatar-group.tsx b/apps/v4/registry/new-york-v4/examples/empty-avatar-group.tsx
index 31f0158546..a1b2b7e9fa 100644
--- a/apps/v4/registry/new-york-v4/examples/empty-avatar-group.tsx
+++ b/apps/v4/registry/new-york-v4/examples/empty-avatar-group.tsx
@@ -20,7 +20,7 @@ export default function EmptyAvatarGroup() {
     <Empty>
       <EmptyHeader>
         <EmptyMedia>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:size-12 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
             <Avatar>
               <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/registry/new-york-v4/examples/empty-background.tsx b/apps/v4/registry/new-york-v4/examples/empty-background.tsx
index 753e5b1824..ab12cb8895 100644
--- a/apps/v4/registry/new-york-v4/examples/empty-background.tsx
+++ b/apps/v4/registry/new-york-v4/examples/empty-background.tsx
@@ -13,7 +13,7 @@ import {
 
 export default function EmptyMuted() {
   return (
-    <Empty className="from-muted/50 to-background h-full bg-gradient-to-b from-30%">
+    <Empty className="h-full bg-gradient-to-b from-muted/50 from-30% to-background">
       <EmptyHeader>
         <EmptyMedia variant="icon">
           <IconBell />
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-array.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-array.tsx
index a46f98a474..e316ff696c 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-array.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-array.tsx
@@ -59,7 +59,7 @@ export default function FormRhfArray() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-checkbox.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-checkbox.tsx
index e2da6b02e3..b8bd05368b 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-checkbox.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-checkbox.tsx
@@ -63,7 +63,7 @@ export default function FormRhfCheckbox() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-complex.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-complex.tsx
index 2c2e9ba96d..c290cb0ab8 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-complex.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-complex.tsx
@@ -100,7 +100,7 @@ export default function FormRhfComplex() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-demo.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-demo.tsx
index 0833edf66e..cfe31732ca 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-demo.tsx
@@ -53,7 +53,7 @@ export default function BugReportForm() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-input.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-input.tsx
index c3bdb4ffbe..3b1858d236 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-input.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-input.tsx
@@ -45,7 +45,7 @@ export default function FormRhfInput() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-password.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-password.tsx
index 931d641b25..81ab069827 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-password.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-password.tsx
@@ -109,7 +109,7 @@ export default function FormRhfPassword() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
@@ -182,7 +182,7 @@ export default function FormRhfPassword() {
                               className={
                                 isMet
                                   ? "size-4 text-green-500"
-                                  : "text-muted-foreground size-4"
+                                  : "size-4 text-muted-foreground"
                               }
                             />
                             <span
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-radiogroup.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-radiogroup.tsx
index 272efa59d6..24e5a866b3 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-radiogroup.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-radiogroup.tsx
@@ -64,7 +64,7 @@ export default function FormRhfRadioGroup() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-select.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-select.tsx
index 326a32e83e..3cb5100c35 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-select.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-select.tsx
@@ -63,7 +63,7 @@ export default function FormRhfSelect() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-switch.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-switch.tsx
index 0cb9e8236d..abb0d7fbb0 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-switch.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-switch.tsx
@@ -42,7 +42,7 @@ export default function FormRhfSwitch() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-rhf-textarea.tsx b/apps/v4/registry/new-york-v4/examples/form-rhf-textarea.tsx
index ea540dac69..cc84d228d6 100644
--- a/apps/v4/registry/new-york-v4/examples/form-rhf-textarea.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-rhf-textarea.tsx
@@ -42,7 +42,7 @@ export default function FormRhfTextarea() {
   function onSubmit(data: z.infer<typeof formSchema>) {
     toast("You submitted the following values:", {
       description: (
-        <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+        <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
           <code>{JSON.stringify(data, null, 2)}</code>
         </pre>
       ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-array.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-array.tsx
index 981f31fce7..41c8cd3b86 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-array.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-array.tsx
@@ -54,7 +54,7 @@ export default function FormTanstackArray() {
     onSubmit: async ({ value }) => {
       toast("You submitted the following values:", {
         description: (
-          <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+          <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
             <code>{JSON.stringify(value, null, 2)}</code>
           </pre>
         ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-checkbox.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-checkbox.tsx
index fc45059478..350c6f7884 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-checkbox.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-checkbox.tsx
@@ -62,7 +62,7 @@ export default function FormTanstackCheckbox() {
     onSubmit: async ({ value }) => {
       toast("You submitted the following values:", {
         description: (
-          <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+          <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
             <code>{JSON.stringify(value, null, 2)}</code>
           </pre>
         ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-complex.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-complex.tsx
index 031afd0c47..94736bbc18 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-complex.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-complex.tsx
@@ -93,7 +93,7 @@ export default function FormTanstackComplex() {
     onSubmit: async ({ value }) => {
       toast("You submitted the following values:", {
         description: (
-          <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+          <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
             <code>{JSON.stringify(value, null, 2)}</code>
           </pre>
         ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-demo.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-demo.tsx
index 54aa5989f2..8b9e7a6a42 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-demo.tsx
@@ -53,7 +53,7 @@ export default function BugReportForm() {
     onSubmit: async ({ value }) => {
       toast("You submitted the following values:", {
         description: (
-          <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+          <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
             <code>{JSON.stringify(value, null, 2)}</code>
           </pre>
         ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-input.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-input.tsx
index 927894e903..4190374326 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-input.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-input.tsx
@@ -45,7 +45,7 @@ export default function FormTanstackInput() {
     onSubmit: async ({ value }) => {
       toast("You submitted the following values:", {
         description: (
-          <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+          <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
             <code>{JSON.stringify(value, null, 2)}</code>
           </pre>
         ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-radiogroup.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-radiogroup.tsx
index a78405c976..540ecaaf4f 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-radiogroup.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-radiogroup.tsx
@@ -63,7 +63,7 @@ export default function FormTanstackRadioGroup() {
     onSubmit: async ({ value }) => {
       toast("You submitted the following values:", {
         description: (
-          <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+          <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
             <code>{JSON.stringify(value, null, 2)}</code>
           </pre>
         ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-select.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-select.tsx
index db579081c7..844adf4dbf 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-select.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-select.tsx
@@ -62,7 +62,7 @@ export default function FormTanstackSelect() {
     onSubmit: async ({ value }) => {
       toast("You submitted the following values:", {
         description: (
-          <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+          <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
             <code>{JSON.stringify(value, null, 2)}</code>
           </pre>
         ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-switch.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-switch.tsx
index dcbb64876a..425e6c06fd 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-switch.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-switch.tsx
@@ -41,7 +41,7 @@ export default function FormTanstackSwitch() {
     onSubmit: async ({ value }) => {
       toast("You submitted the following values:", {
         description: (
-          <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+          <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
             <code>{JSON.stringify(value, null, 2)}</code>
           </pre>
         ),
diff --git a/apps/v4/registry/new-york-v4/examples/form-tanstack-textarea.tsx b/apps/v4/registry/new-york-v4/examples/form-tanstack-textarea.tsx
index 9b2f2ca54c..527ac97b36 100644
--- a/apps/v4/registry/new-york-v4/examples/form-tanstack-textarea.tsx
+++ b/apps/v4/registry/new-york-v4/examples/form-tanstack-textarea.tsx
@@ -41,7 +41,7 @@ export default function FormTanstackTextarea() {
     onSubmit: async ({ value }) => {
       toast("You submitted the following values:", {
         description: (
-          <pre className="bg-code text-code-foreground mt-2 w-[320px] overflow-x-auto rounded-md p-4">
+          <pre className="mt-2 w-[320px] overflow-x-auto rounded-md bg-code p-4 text-code-foreground">
             <code>{JSON.stringify(value, null, 2)}</code>
           </pre>
         ),
diff --git a/apps/v4/registry/new-york-v4/examples/hover-card-demo.tsx b/apps/v4/registry/new-york-v4/examples/hover-card-demo.tsx
index f5cf7adc17..6dc2ef40a0 100644
--- a/apps/v4/registry/new-york-v4/examples/hover-card-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/hover-card-demo.tsx
@@ -29,7 +29,7 @@ export default function HoverCardDemo() {
             <p className="text-sm">
               The React Framework – created and maintained by @vercel.
             </p>
-            <div className="text-muted-foreground text-xs">
+            <div className="text-xs text-muted-foreground">
               Joined December 2021
             </div>
           </div>
diff --git a/apps/v4/registry/new-york-v4/examples/input-group-button.tsx b/apps/v4/registry/new-york-v4/examples/input-group-button.tsx
index 5aec623e38..6561d80449 100644
--- a/apps/v4/registry/new-york-v4/examples/input-group-button.tsx
+++ b/apps/v4/registry/new-york-v4/examples/input-group-button.tsx
@@ -59,7 +59,7 @@ export default function InputGroupButtonExample() {
             <p>You should not enter any sensitive information on this site.</p>
           </PopoverContent>
         </Popover>
-        <InputGroupAddon className="text-muted-foreground pl-1.5">
+        <InputGroupAddon className="pl-1.5 text-muted-foreground">
           https://
         </InputGroupAddon>
         <InputGroupInput id="input-secure-19" />
diff --git a/apps/v4/registry/new-york-v4/examples/input-group-demo.tsx b/apps/v4/registry/new-york-v4/examples/input-group-demo.tsx
index abcac38865..c7b8d118e5 100644
--- a/apps/v4/registry/new-york-v4/examples/input-group-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/input-group-demo.tsx
@@ -33,7 +33,7 @@ export default function InputGroupDemo() {
         <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
       </InputGroup>
       <InputGroup>
-        <InputGroupInput placeholder="example.com" className="!pl-1" />
+        <InputGroupInput placeholder="example.com" className="pl-1!" />
         <InputGroupAddon>
           <InputGroupText>https://</InputGroupText>
         </InputGroupAddon>
@@ -73,7 +73,7 @@ export default function InputGroupDemo() {
             </DropdownMenuContent>
           </DropdownMenu>
           <InputGroupText className="ml-auto">52% used</InputGroupText>
-          <Separator orientation="vertical" className="!h-4" />
+          <Separator orientation="vertical" className="h-4!" />
           <InputGroupButton
             variant="default"
             className="rounded-full"
@@ -88,7 +88,7 @@ export default function InputGroupDemo() {
       <InputGroup>
         <InputGroupInput placeholder="@shadcn" />
         <InputGroupAddon align="inline-end">
-          <div className="bg-primary text-primary-foreground flex size-4 items-center justify-center rounded-full">
+          <div className="flex size-4 items-center justify-center rounded-full bg-primary text-primary-foreground">
             <IconCheck className="size-3" />
           </div>
         </InputGroupAddon>
diff --git a/apps/v4/registry/new-york-v4/examples/input-group-dropdown.tsx b/apps/v4/registry/new-york-v4/examples/input-group-dropdown.tsx
index c7371e8f49..708e03af09 100644
--- a/apps/v4/registry/new-york-v4/examples/input-group-dropdown.tsx
+++ b/apps/v4/registry/new-york-v4/examples/input-group-dropdown.tsx
@@ -42,7 +42,7 @@ export default function InputGroupDropdown() {
         <InputGroupAddon align="inline-end">
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <InputGroupButton variant="ghost" className="!pr-1.5 text-xs">
+              <InputGroupButton variant="ghost" className="pr-1.5! text-xs">
                 Search In... <ChevronDownIcon className="size-3" />
               </InputGroupButton>
             </DropdownMenuTrigger>
diff --git a/apps/v4/registry/new-york-v4/examples/input-group-text.tsx b/apps/v4/registry/new-york-v4/examples/input-group-text.tsx
index d38c27e1c8..510ae18f17 100644
--- a/apps/v4/registry/new-york-v4/examples/input-group-text.tsx
+++ b/apps/v4/registry/new-york-v4/examples/input-group-text.tsx
@@ -22,7 +22,7 @@ export default function InputGroupTextExample() {
         <InputGroupAddon>
           <InputGroupText>https://</InputGroupText>
         </InputGroupAddon>
-        <InputGroupInput placeholder="example.com" className="!pl-0.5" />
+        <InputGroupInput placeholder="example.com" className="pl-0.5!" />
         <InputGroupAddon align="inline-end">
           <InputGroupText>.com</InputGroupText>
         </InputGroupAddon>
@@ -36,7 +36,7 @@ export default function InputGroupTextExample() {
       <InputGroup>
         <InputGroupTextarea placeholder="Enter your message" />
         <InputGroupAddon align="block-end">
-          <InputGroupText className="text-muted-foreground text-xs">
+          <InputGroupText className="text-xs text-muted-foreground">
             120 characters left
           </InputGroupText>
         </InputGroupAddon>
diff --git a/apps/v4/registry/new-york-v4/examples/input-with-text.tsx b/apps/v4/registry/new-york-v4/examples/input-with-text.tsx
index 7a47c5fd19..ee1bdb5110 100644
--- a/apps/v4/registry/new-york-v4/examples/input-with-text.tsx
+++ b/apps/v4/registry/new-york-v4/examples/input-with-text.tsx
@@ -6,7 +6,7 @@ export default function InputWithText() {
     <div className="grid w-full max-w-sm items-center gap-3">
       <Label htmlFor="email-2">Email</Label>
       <Input type="email" id="email-2" placeholder="Email" />
-      <p className="text-muted-foreground text-sm">Enter your email address.</p>
+      <p className="text-sm text-muted-foreground">Enter your email address.</p>
     </div>
   )
 }
diff --git a/apps/v4/registry/new-york-v4/examples/item-avatar.tsx b/apps/v4/registry/new-york-v4/examples/item-avatar.tsx
index c1b257b3c5..8ba20cee24 100644
--- a/apps/v4/registry/new-york-v4/examples/item-avatar.tsx
+++ b/apps/v4/registry/new-york-v4/examples/item-avatar.tsx
@@ -42,7 +42,7 @@ export default function ItemAvatar() {
       </Item>
       <Item variant="outline">
         <ItemMedia>
-          <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+          <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
             <Avatar className="hidden sm:flex">
               <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
               <AvatarFallback>CN</AvatarFallback>
diff --git a/apps/v4/registry/new-york-v4/examples/kbd-group.tsx b/apps/v4/registry/new-york-v4/examples/kbd-group.tsx
index eeee747f10..e93368adb1 100644
--- a/apps/v4/registry/new-york-v4/examples/kbd-group.tsx
+++ b/apps/v4/registry/new-york-v4/examples/kbd-group.tsx
@@ -3,7 +3,7 @@ import { Kbd, KbdGroup } from "@/registry/new-york-v4/ui/kbd"
 export default function KbdGroupExample() {
   return (
     <div className="flex flex-col items-center gap-4">
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         Use{" "}
         <KbdGroup>
           <Kbd>Ctrl + B</Kbd>
diff --git a/apps/v4/registry/new-york-v4/examples/kbd-tooltip.tsx b/apps/v4/registry/new-york-v4/examples/kbd-tooltip.tsx
index 1b1b165656..29fb1efbe2 100644
--- a/apps/v4/registry/new-york-v4/examples/kbd-tooltip.tsx
+++ b/apps/v4/registry/new-york-v4/examples/kbd-tooltip.tsx
@@ -18,9 +18,7 @@ export default function KbdTooltip() {
             </Button>
           </TooltipTrigger>
           <TooltipContent>
-            <div className="flex items-center gap-2">
-              Save Changes <Kbd>S</Kbd>
-            </div>
+            Save Changes <Kbd>S</Kbd>
           </TooltipContent>
         </Tooltip>
         <Tooltip>
@@ -30,13 +28,11 @@ export default function KbdTooltip() {
             </Button>
           </TooltipTrigger>
           <TooltipContent>
-            <div className="flex items-center gap-2">
-              Print Document{" "}
-              <KbdGroup>
-                <Kbd>Ctrl</Kbd>
-                <Kbd>P</Kbd>
-              </KbdGroup>
-            </div>
+            Print Document{" "}
+            <KbdGroup>
+              <Kbd>Ctrl</Kbd>
+              <Kbd>P</Kbd>
+            </KbdGroup>
           </TooltipContent>
         </Tooltip>
       </ButtonGroup>
diff --git a/apps/v4/registry/new-york-v4/examples/navigation-menu-demo.tsx b/apps/v4/registry/new-york-v4/examples/navigation-menu-demo.tsx
index 347dd38b36..9a6c1d7866 100644
--- a/apps/v4/registry/new-york-v4/examples/navigation-menu-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/navigation-menu-demo.tsx
@@ -66,13 +66,13 @@ export default function NavigationMenuDemo() {
               <li className="row-span-3">
                 <NavigationMenuLink asChild>
                   <a
-                    className="from-muted/50 to-muted flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b p-4 no-underline outline-hidden transition-all duration-200 select-none focus:shadow-md md:p-6"
+                    className="flex h-full w-full flex-col justify-end rounded-md bg-linear-to-b from-muted/50 to-muted p-4 no-underline outline-hidden transition-all duration-200 select-none focus:shadow-md md:p-6"
                     href="/"
                   >
                     <div className="mb-2 text-lg font-medium sm:mt-4">
                       shadcn/ui
                     </div>
-                    <p className="text-muted-foreground text-sm leading-tight">
+                    <p className="text-sm leading-tight text-muted-foreground">
                       Beautifully designed components built with Tailwind CSS.
                     </p>
                   </a>
@@ -205,7 +205,7 @@ function ListItem({
       <NavigationMenuLink asChild>
         <Link href={href}>
           <div className="text-sm leading-none font-medium">{title}</div>
-          <p className="text-muted-foreground line-clamp-2 text-sm leading-snug">
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
             {children}
           </p>
         </Link>
diff --git a/apps/v4/registry/new-york-v4/examples/popover-demo.tsx b/apps/v4/registry/new-york-v4/examples/popover-demo.tsx
index 2b6ea01652..23f1e17c9e 100644
--- a/apps/v4/registry/new-york-v4/examples/popover-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/popover-demo.tsx
@@ -17,7 +17,7 @@ export default function PopoverDemo() {
         <div className="grid gap-4">
           <div className="space-y-2">
             <h4 className="leading-none font-medium">Dimensions</h4>
-            <p className="text-muted-foreground text-sm">
+            <p className="text-sm text-muted-foreground">
               Set the dimensions for the layer.
             </p>
           </div>
diff --git a/apps/v4/registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx b/apps/v4/registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx
index d88dd9d5e7..ac5e6913db 100644
--- a/apps/v4/registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/scroll-area-horizontal-demo.tsx
@@ -38,9 +38,9 @@ export default function ScrollAreaHorizontalDemo() {
                 height={400}
               />
             </div>
-            <figcaption className="text-muted-foreground pt-2 text-xs">
+            <figcaption className="pt-2 text-xs text-muted-foreground">
               Photo by{" "}
-              <span className="text-foreground font-semibold">
+              <span className="font-semibold text-foreground">
                 {artwork.artist}
               </span>
             </figcaption>
diff --git a/apps/v4/registry/new-york-v4/examples/separator-demo.tsx b/apps/v4/registry/new-york-v4/examples/separator-demo.tsx
index 406eae1913..0b5369f9a9 100644
--- a/apps/v4/registry/new-york-v4/examples/separator-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/separator-demo.tsx
@@ -5,7 +5,7 @@ export default function SeparatorDemo() {
     <div>
       <div className="space-y-1">
         <h4 className="text-sm leading-none font-medium">Radix Primitives</h4>
-        <p className="text-muted-foreground text-sm">
+        <p className="text-sm text-muted-foreground">
           An open-source UI component library.
         </p>
       </div>
diff --git a/apps/v4/registry/new-york-v4/examples/textarea-with-text.tsx b/apps/v4/registry/new-york-v4/examples/textarea-with-text.tsx
index e0ba022ac7..05c209908d 100644
--- a/apps/v4/registry/new-york-v4/examples/textarea-with-text.tsx
+++ b/apps/v4/registry/new-york-v4/examples/textarea-with-text.tsx
@@ -6,7 +6,7 @@ export default function TextareaWithText() {
     <div className="grid w-full gap-3">
       <Label htmlFor="message-2">Your Message</Label>
       <Textarea placeholder="Type your message here." id="message-2" />
-      <p className="text-muted-foreground text-sm">
+      <p className="text-sm text-muted-foreground">
         Your message will be copied to the support team.
       </p>
     </div>
diff --git a/apps/v4/registry/new-york-v4/examples/typography-demo.tsx b/apps/v4/registry/new-york-v4/examples/typography-demo.tsx
index ec5af8eb5d..063ffeba74 100644
--- a/apps/v4/registry/new-york-v4/examples/typography-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/typography-demo.tsx
@@ -4,7 +4,7 @@ export default function TypographyDemo() {
       <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight text-balance">
         Taxing Laughter: The Joke Tax Chronicles
       </h1>
-      <p className="text-muted-foreground text-xl leading-7 [&:not(:first-child)]:mt-6">
+      <p className="text-xl leading-7 text-muted-foreground [&:not(:first-child)]:mt-6">
         Once upon a time, in a far-off land, there was a very lazy king who
         spent all day lounging on his throne. One day, his advisors came to him
         with a problem: the kingdom was running out of money.
@@ -16,7 +16,7 @@ export default function TypographyDemo() {
         The king thought long and hard, and finally came up with{" "}
         <a
           href="#"
-          className="text-primary font-medium underline underline-offset-4"
+          className="font-medium text-primary underline underline-offset-4"
         >
           a brilliant plan
         </a>
@@ -68,7 +68,7 @@ export default function TypographyDemo() {
       <div className="my-6 w-full overflow-y-auto">
         <table className="w-full">
           <thead>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
                 King&apos;s Treasury
               </th>
@@ -78,7 +78,7 @@ export default function TypographyDemo() {
             </tr>
           </thead>
           <tbody>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                 Empty
               </td>
@@ -86,7 +86,7 @@ export default function TypographyDemo() {
                 Overflowing
               </td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                 Modest
               </td>
@@ -94,7 +94,7 @@ export default function TypographyDemo() {
                 Satisfied
               </td>
             </tr>
-            <tr className="even:bg-muted m-0 border-t p-0">
+            <tr className="m-0 border-t p-0 even:bg-muted">
               <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
                 Full
               </td>
diff --git a/apps/v4/registry/new-york-v4/examples/typography-inline-code.tsx b/apps/v4/registry/new-york-v4/examples/typography-inline-code.tsx
index 123bd0f3b1..fbbc96ba68 100644
--- a/apps/v4/registry/new-york-v4/examples/typography-inline-code.tsx
+++ b/apps/v4/registry/new-york-v4/examples/typography-inline-code.tsx
@@ -1,6 +1,6 @@
 export default function TypographyInlineCode() {
   return (
-    <code className="bg-muted relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
+    <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">
       @radix-ui/react-alert-dialog
     </code>
   )
diff --git a/apps/v4/registry/new-york-v4/examples/typography-lead.tsx b/apps/v4/registry/new-york-v4/examples/typography-lead.tsx
index 1889c0eeb4..aac39ea29e 100644
--- a/apps/v4/registry/new-york-v4/examples/typography-lead.tsx
+++ b/apps/v4/registry/new-york-v4/examples/typography-lead.tsx
@@ -1,6 +1,6 @@
 export default function TypographyLead() {
   return (
-    <p className="text-muted-foreground text-xl">
+    <p className="text-xl text-muted-foreground">
       A modal dialog that interrupts the user with important content and expects
       a response.
     </p>
diff --git a/apps/v4/registry/new-york-v4/examples/typography-muted.tsx b/apps/v4/registry/new-york-v4/examples/typography-muted.tsx
index 322a357567..545dcfc74f 100644
--- a/apps/v4/registry/new-york-v4/examples/typography-muted.tsx
+++ b/apps/v4/registry/new-york-v4/examples/typography-muted.tsx
@@ -1,5 +1,5 @@
 export default function TypographyMuted() {
   return (
-    <p className="text-muted-foreground text-sm">Enter your email address.</p>
+    <p className="text-sm text-muted-foreground">Enter your email address.</p>
   )
 }
diff --git a/apps/v4/registry/new-york-v4/examples/typography-table.tsx b/apps/v4/registry/new-york-v4/examples/typography-table.tsx
index b0967b31e4..7a91dfda84 100644
--- a/apps/v4/registry/new-york-v4/examples/typography-table.tsx
+++ b/apps/v4/registry/new-york-v4/examples/typography-table.tsx
@@ -3,7 +3,7 @@ export default function TypographyTable() {
     <div className="my-6 w-full overflow-y-auto">
       <table className="w-full">
         <thead>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <th className="border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right">
               King&apos;s Treasury
             </th>
@@ -13,7 +13,7 @@ export default function TypographyTable() {
           </tr>
         </thead>
         <tbody>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
               Empty
             </td>
@@ -21,7 +21,7 @@ export default function TypographyTable() {
               Overflowing
             </td>
           </tr>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
               Modest
             </td>
@@ -29,7 +29,7 @@ export default function TypographyTable() {
               Satisfied
             </td>
           </tr>
-          <tr className="even:bg-muted m-0 border-t p-0">
+          <tr className="m-0 border-t p-0 even:bg-muted">
             <td className="border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right">
               Full
             </td>
diff --git a/apps/v4/registry/new-york-v4/internal/sidebar-group-collapsible.tsx b/apps/v4/registry/new-york-v4/internal/sidebar-group-collapsible.tsx
index 79b9399382..693a5ac06c 100644
--- a/apps/v4/registry/new-york-v4/internal/sidebar-group-collapsible.tsx
+++ b/apps/v4/registry/new-york-v4/internal/sidebar-group-collapsible.tsx
@@ -28,7 +28,7 @@ export default function AppSidebar() {
             <SidebarGroup>
               <SidebarGroupLabel
                 asChild
-                className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
+                className="text-sm hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               >
                 <CollapsibleTrigger>
                   Help
diff --git a/apps/v4/registry/new-york-v4/ui/accordion.tsx b/apps/v4/registry/new-york-v4/ui/accordion.tsx
index aa972da546..91e3a250ce 100644
--- a/apps/v4/registry/new-york-v4/ui/accordion.tsx
+++ b/apps/v4/registry/new-york-v4/ui/accordion.tsx
@@ -35,13 +35,13 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          "flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
           className
         )}
         {...props}
       >
         {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+        <ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
@@ -55,7 +55,7 @@ function AccordionContent({
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
       {...props}
     >
       <div className={cn("pt-0 pb-4", className)}>{children}</div>
diff --git a/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx b/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx
index 627a55f96e..9c57648364 100644
--- a/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx
+++ b/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx
@@ -36,7 +36,7 @@ function AlertDialogOverlay({
     <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -58,7 +58,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
           className
         )}
         {...props}
@@ -122,7 +122,7 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
@@ -136,7 +136,7 @@ function AlertDialogMedia({
     <div
       data-slot="alert-dialog-media"
       className={cn(
-        "bg-muted mb-2 inline-flex size-16 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
+        "mb-2 inline-flex size-16 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-8",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/alert.tsx b/apps/v4/registry/new-york-v4/ui/alert.tsx
index 14213546e5..f99164ed4b 100644
--- a/apps/v4/registry/new-york-v4/ui/alert.tsx
+++ b/apps/v4/registry/new-york-v4/ui/alert.tsx
@@ -4,13 +4,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
       },
     },
     defaultVariants: {
@@ -55,7 +55,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/avatar.tsx b/apps/v4/registry/new-york-v4/ui/avatar.tsx
index 1ac15704f7..ea65850570 100644
--- a/apps/v4/registry/new-york-v4/ui/avatar.tsx
+++ b/apps/v4/registry/new-york-v4/ui/avatar.tsx
@@ -46,7 +46,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        "bg-muted text-muted-foreground flex size-full items-center justify-center rounded-full text-sm group-data-[size=sm]/avatar:text-xs",
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
         className
       )}
       {...props}
@@ -59,7 +59,7 @@ function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
     <span
       data-slot="avatar-badge"
       className={cn(
-        "bg-primary text-primary-foreground ring-background absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full ring-2 select-none",
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -75,7 +75,7 @@ function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="avatar-group"
       className={cn(
-        "*:data-[slot=avatar]:ring-background group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2",
+        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
         className
       )}
       {...props}
@@ -91,7 +91,7 @@ function AvatarGroupCount({
     <div
       data-slot="avatar-group-count"
       className={cn(
-        "bg-muted text-muted-foreground ring-background relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm ring-2 group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/badge.tsx b/apps/v4/registry/new-york-v4/ui/badge.tsx
index beb56ed1cb..6eb2a057aa 100644
--- a/apps/v4/registry/new-york-v4/ui/badge.tsx
+++ b/apps/v4/registry/new-york-v4/ui/badge.tsx
@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
@@ -13,7 +13,7 @@ const badgeVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:
-          "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90",
         outline:
           "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
         ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
diff --git a/apps/v4/registry/new-york-v4/ui/breadcrumb.tsx b/apps/v4/registry/new-york-v4/ui/breadcrumb.tsx
index 542e76202a..004bb63a4c 100644
--- a/apps/v4/registry/new-york-v4/ui/breadcrumb.tsx
+++ b/apps/v4/registry/new-york-v4/ui/breadcrumb.tsx
@@ -13,7 +13,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
         className
       )}
       {...props}
@@ -43,7 +43,7 @@ function BreadcrumbLink({
   return (
     <Comp
       data-slot="breadcrumb-link"
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
   )
@@ -56,7 +56,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+      className={cn("font-normal text-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/new-york-v4/ui/button-group.tsx b/apps/v4/registry/new-york-v4/ui/button-group.tsx
index a0e83ca6d6..e89cfc8f0c 100644
--- a/apps/v4/registry/new-york-v4/ui/button-group.tsx
+++ b/apps/v4/registry/new-york-v4/ui/button-group.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { Separator } from "@/registry/new-york-v4/ui/separator"
 
 const buttonGroupVariants = cva(
-  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
@@ -49,7 +49,7 @@ function ButtonGroupText({
   return (
     <Comp
       className={cn(
-        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -67,7 +67,7 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/button.tsx b/apps/v4/registry/new-york-v4/ui/button.tsx
index b5ea4abd1e..4d38506cee 100644
--- a/apps/v4/registry/new-york-v4/ui/button.tsx
+++ b/apps/v4/registry/new-york-v4/ui/button.tsx
@@ -5,15 +5,15 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
@@ -23,7 +23,7 @@ const buttonVariants = cva(
       size: {
         default: "h-9 px-4 py-2 has-[>svg]:px-3",
         xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
         icon: "size-9",
         "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
diff --git a/apps/v4/registry/new-york-v4/ui/calendar.tsx b/apps/v4/registry/new-york-v4/ui/calendar.tsx
index 9b1432f05f..bbf311bf6c 100644
--- a/apps/v4/registry/new-york-v4/ui/calendar.tsx
+++ b/apps/v4/registry/new-york-v4/ui/calendar.tsx
@@ -33,7 +33,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -47,64 +47,64 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
           defaultClassNames.dropdown_root
         ),
         dropdown: cn(
-          "absolute bg-popover inset-0 opacity-0",
+          "absolute inset-0 bg-popover opacity-0",
           defaultClassNames.dropdown
         ),
         caption_label: cn(
-          "select-none font-medium",
+          "font-medium select-none",
           captionLayout === "label"
             ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          "flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-(--cell-size) select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-[0.8rem] text-muted-foreground select-none",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-md",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
             : "[&:first-child[data-selected=true]_button]:rounded-l-md",
@@ -117,7 +117,7 @@ function Calendar({
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
         today: cn(
-          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          "rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none",
           defaultClassNames.today
         ),
         outside: cn(
@@ -208,7 +208,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}
diff --git a/apps/v4/registry/new-york-v4/ui/card.tsx b/apps/v4/registry/new-york-v4/ui/card.tsx
index 681ad980f2..acf57dc5a5 100644
--- a/apps/v4/registry/new-york-v4/ui/card.tsx
+++ b/apps/v4/registry/new-york-v4/ui/card.tsx
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="card"
       className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
         className
       )}
       {...props}
@@ -42,7 +42,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="card-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/new-york-v4/ui/chart.tsx b/apps/v4/registry/new-york-v4/ui/chart.tsx
index 8b42f21096..1cdfc921b8 100644
--- a/apps/v4/registry/new-york-v4/ui/chart.tsx
+++ b/apps/v4/registry/new-york-v4/ui/chart.tsx
@@ -55,7 +55,7 @@ function ChartContainer({
         data-slot="chart"
         data-chart={chartId}
         className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -173,7 +173,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
@@ -190,7 +190,7 @@ function ChartTooltipContent({
               <div
                 key={item.dataKey}
                 className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                   indicator === "dot" && "items-center"
                 )}
               >
@@ -235,7 +235,7 @@ function ChartTooltipContent({
                         </span>
                       </div>
                       {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
+                        <span className="font-mono font-medium text-foreground tabular-nums">
                           {item.value.toLocaleString()}
                         </span>
                       )}
@@ -287,7 +287,7 @@ function ChartLegendContent({
             <div
               key={item.value}
               className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
               )}
             >
               {itemConfig?.icon && !hideIcon ? (
diff --git a/apps/v4/registry/new-york-v4/ui/checkbox.tsx b/apps/v4/registry/new-york-v4/ui/checkbox.tsx
index a3ec184106..f5a7e433f3 100644
--- a/apps/v4/registry/new-york-v4/ui/checkbox.tsx
+++ b/apps/v4/registry/new-york-v4/ui/checkbox.tsx
@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/combobox.tsx b/apps/v4/registry/new-york-v4/ui/combobox.tsx
index dc314fee75..f39a448958 100644
--- a/apps/v4/registry/new-york-v4/ui/combobox.tsx
+++ b/apps/v4/registry/new-york-v4/ui/combobox.tsx
@@ -33,7 +33,7 @@ function ComboboxTrigger({
       {children}
       <ChevronDownIcon
         data-slot="combobox-trigger-icon"
-        className="text-muted-foreground pointer-events-none size-4"
+        className="pointer-events-none size-4 text-muted-foreground"
       />
     </ComboboxPrimitive.Trigger>
   )
@@ -116,7 +116,7 @@ function ComboboxContent({
           data-slot="combobox-content"
           data-chips={!!anchor}
           className={cn(
-            "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none",
+            "group/combobox-content relative max-h-96 w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-md 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=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 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}
@@ -148,7 +148,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -184,7 +184,7 @@ function ComboboxLabel({
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
       className={cn(
-        "text-muted-foreground px-2 py-1.5 text-xs pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
+        "px-2 py-1.5 text-xs text-muted-foreground pointer-coarse:px-3 pointer-coarse:py-2 pointer-coarse:text-sm",
         className
       )}
       {...props}
@@ -203,7 +203,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
       className={cn(
-        "text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex",
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
         className
       )}
       {...props}
@@ -218,7 +218,7 @@ function ComboboxSeparator({
   return (
     <ComboboxPrimitive.Separator
       data-slot="combobox-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -233,7 +233,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border border-input bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-[3px] has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1.5 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -253,7 +253,7 @@ function ComboboxChip({
     <ComboboxPrimitive.Chip
       data-slot="combobox-chip"
       className={cn(
-        "bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        "flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/command.tsx b/apps/v4/registry/new-york-v4/ui/command.tsx
index fdfcbccb76..99155c7830 100644
--- a/apps/v4/registry/new-york-v4/ui/command.tsx
+++ b/apps/v4/registry/new-york-v4/ui/command.tsx
@@ -21,7 +21,7 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
         className
       )}
       {...props}
@@ -52,7 +52,7 @@ function CommandDialog({
         className={cn("overflow-hidden p-0", className)}
         showCloseButton={showCloseButton}
       >
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -73,7 +73,7 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}
@@ -118,7 +118,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
         className
       )}
       {...props}
@@ -133,7 +133,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("bg-border -mx-1 h-px", className)}
+      className={cn("-mx-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -147,7 +147,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )}
       {...props}
@@ -163,7 +163,7 @@ function CommandShortcut({
     <span
       data-slot="command-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/context-menu.tsx b/apps/v4/registry/new-york-v4/ui/context-menu.tsx
index e972fe5fd8..5aaca76552 100644
--- a/apps/v4/registry/new-york-v4/ui/context-menu.tsx
+++ b/apps/v4/registry/new-york-v4/ui/context-menu.tsx
@@ -66,7 +66,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )}
       {...props}
@@ -85,7 +85,7 @@ function ContextMenuSubContent({
     <ContextMenuPrimitive.SubContent
       data-slot="context-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}
@@ -102,7 +102,7 @@ function ContextMenuContent({
       <ContextMenuPrimitive.Content
         data-slot="context-menu-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className
         )}
         {...props}
@@ -126,7 +126,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -144,7 +144,7 @@ function ContextMenuCheckboxItem({
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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",
         className
       )}
       checked={checked}
@@ -169,7 +169,7 @@ function ContextMenuRadioItem({
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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",
         className
       )}
       {...props}
@@ -196,7 +196,7 @@ function ContextMenuLabel({
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        "px-2 py-1.5 text-sm font-medium text-foreground data-[inset]:pl-8",
         className
       )}
       {...props}
@@ -211,7 +211,7 @@ function ContextMenuSeparator({
   return (
     <ContextMenuPrimitive.Separator
       data-slot="context-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -225,7 +225,7 @@ function ContextMenuShortcut({
     <span
       data-slot="context-menu-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/dialog.tsx b/apps/v4/registry/new-york-v4/ui/dialog.tsx
index df27afa59f..b65149791b 100644
--- a/apps/v4/registry/new-york-v4/ui/dialog.tsx
+++ b/apps/v4/registry/new-york-v4/ui/dialog.tsx
@@ -39,7 +39,7 @@ function DialogOverlay({
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -61,7 +61,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
           className
         )}
         {...props}
@@ -70,7 +70,7 @@ function DialogContent({
         {showCloseButton && (
           <DialogPrimitive.Close
             data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
           >
             <XIcon />
             <span className="sr-only">Close</span>
@@ -138,7 +138,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/new-york-v4/ui/drawer.tsx b/apps/v4/registry/new-york-v4/ui/drawer.tsx
index 8aa69230a0..ad08671442 100644
--- a/apps/v4/registry/new-york-v4/ui/drawer.tsx
+++ b/apps/v4/registry/new-york-v4/ui/drawer.tsx
@@ -37,7 +37,7 @@ function DrawerOverlay({
     <DrawerPrimitive.Overlay
       data-slot="drawer-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ function DrawerContent({
       <DrawerPrimitive.Content
         data-slot="drawer-content"
         className={cn(
-          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
           "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
@@ -65,7 +65,7 @@ function DrawerContent({
         )}
         {...props}
       >
-        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+        <div className="mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full bg-muted group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
         {children}
       </DrawerPrimitive.Content>
     </DrawerPortal>
@@ -102,7 +102,7 @@ function DrawerTitle({
   return (
     <DrawerPrimitive.Title
       data-slot="drawer-title"
-      className={cn("text-foreground font-semibold", className)}
+      className={cn("font-semibold text-foreground", className)}
       {...props}
     />
   )
@@ -115,7 +115,7 @@ function DrawerDescription({
   return (
     <DrawerPrimitive.Description
       data-slot="drawer-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/new-york-v4/ui/dropdown-menu.tsx b/apps/v4/registry/new-york-v4/ui/dropdown-menu.tsx
index bffc327629..ae1fcf62f1 100644
--- a/apps/v4/registry/new-york-v4/ui/dropdown-menu.tsx
+++ b/apps/v4/registry/new-york-v4/ui/dropdown-menu.tsx
@@ -42,7 +42,7 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className
         )}
         {...props}
@@ -74,7 +74,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -92,7 +92,7 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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",
         className
       )}
       checked={checked}
@@ -128,7 +128,7 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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",
         className
       )}
       {...props}
@@ -170,7 +170,7 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -184,7 +184,7 @@ function DropdownMenuShortcut({
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
@@ -211,7 +211,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )}
       {...props}
@@ -230,7 +230,7 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/empty.tsx b/apps/v4/registry/new-york-v4/ui/empty.tsx
index df91e9d802..ce4b0095f6 100644
--- a/apps/v4/registry/new-york-v4/ui/empty.tsx
+++ b/apps/v4/registry/new-york-v4/ui/empty.tsx
@@ -29,12 +29,12 @@ function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const emptyMediaVariants = cva(
-  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6",
       },
     },
     defaultVariants: {
@@ -73,7 +73,7 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
     <div
       data-slot="empty-description"
       className={cn(
-        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/field.tsx b/apps/v4/registry/new-york-v4/ui/field.tsx
index 8e55b838c6..0a4e421602 100644
--- a/apps/v4/registry/new-york-v4/ui/field.tsx
+++ b/apps/v4/registry/new-york-v4/ui/field.tsx
@@ -66,7 +66,7 @@ const fieldVariants = cva(
           "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         ],
         responsive: [
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
           "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
           "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         ],
@@ -117,7 +117,7 @@ function FieldLabel({
       className={cn(
         "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
-        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10",
         className
       )}
       {...props}
@@ -143,9 +143,9 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance",
         "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
@@ -173,7 +173,7 @@ function FieldSeparator({
       <Separator className="absolute inset-0 top-1/2" />
       {children && (
         <span
-          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
           data-slot="field-separator-content"
         >
           {children}
@@ -226,7 +226,7 @@ function FieldError({
     <div
       role="alert"
       data-slot="field-error"
-      className={cn("text-destructive text-sm font-normal", className)}
+      className={cn("text-sm font-normal text-destructive", className)}
       {...props}
     >
       {content}
diff --git a/apps/v4/registry/new-york-v4/ui/form.tsx b/apps/v4/registry/new-york-v4/ui/form.tsx
index 5806a56f0c..3c994b8ca8 100644
--- a/apps/v4/registry/new-york-v4/ui/form.tsx
+++ b/apps/v4/registry/new-york-v4/ui/form.tsx
@@ -129,7 +129,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="form-description"
       id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
@@ -147,7 +147,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="form-message"
       id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
+      className={cn("text-sm text-destructive", className)}
       {...props}
     >
       {body}
diff --git a/apps/v4/registry/new-york-v4/ui/hover-card.tsx b/apps/v4/registry/new-york-v4/ui/hover-card.tsx
index 3e0c4daf8c..91e869c0d3 100644
--- a/apps/v4/registry/new-york-v4/ui/hover-card.tsx
+++ b/apps/v4/registry/new-york-v4/ui/hover-card.tsx
@@ -32,7 +32,7 @@ function HoverCardContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className
         )}
         {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/input-group.tsx b/apps/v4/registry/new-york-v4/ui/input-group.tsx
index 10a537d3f0..756f7381b8 100644
--- a/apps/v4/registry/new-york-v4/ui/input-group.tsx
+++ b/apps/v4/registry/new-york-v4/ui/input-group.tsx
@@ -14,7 +14,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
+        "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
         "h-9 min-w-0 has-[>textarea]:h-auto",
 
         // Variants based on alignment.
@@ -24,10 +24,10 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
 
         // Error state.
-        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+        "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
 
         className
       )}
@@ -37,7 +37,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
   {
     variants: {
       align: {
@@ -46,9 +46,9 @@ const inputGroupAddonVariants = cva(
         "inline-end":
           "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
         "block-start":
-          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
         "block-end":
-          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
+          "order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
       },
     },
     defaultVariants: {
@@ -80,12 +80,12 @@ function InputGroupAddon({
 }
 
 const inputGroupButtonVariants = cva(
-  "text-sm shadow-none flex gap-2 items-center",
+  "flex items-center gap-2 text-sm shadow-none",
   {
     variants: {
       size: {
-        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
-        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
         "icon-xs":
           "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
         "icon-sm": "size-8 p-0 has-[>svg]:p-0",
@@ -120,7 +120,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_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-4",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/input-otp.tsx b/apps/v4/registry/new-york-v4/ui/input-otp.tsx
index 614f70e383..6a556afacd 100644
--- a/apps/v4/registry/new-york-v4/ui/input-otp.tsx
+++ b/apps/v4/registry/new-york-v4/ui/input-otp.tsx
@@ -51,7 +51,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-[3px] data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -59,7 +59,7 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>
diff --git a/apps/v4/registry/new-york-v4/ui/input.tsx b/apps/v4/registry/new-york-v4/ui/input.tsx
index 89169058d0..f1124aea14 100644
--- a/apps/v4/registry/new-york-v4/ui/input.tsx
+++ b/apps/v4/registry/new-york-v4/ui/input.tsx
@@ -8,9 +8,9 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/item.tsx b/apps/v4/registry/new-york-v4/ui/item.tsx
index 10e0d36b26..4f132c9184 100644
--- a/apps/v4/registry/new-york-v4/ui/item.tsx
+++ b/apps/v4/registry/new-york-v4/ui/item.tsx
@@ -31,7 +31,7 @@ function ItemSeparator({
 }
 
 const itemVariants = cva(
-  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  "group/item flex flex-wrap items-center rounded-md border border-transparent text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-accent/50",
   {
     variants: {
       variant: {
@@ -40,8 +40,8 @@ const itemVariants = cva(
         muted: "bg-muted/50",
       },
       size: {
-        default: "p-4 gap-4 ",
-        sm: "py-3 px-4 gap-2.5",
+        default: "gap-4 p-4",
+        sm: "gap-2.5 px-4 py-3",
       },
     },
     defaultVariants: {
@@ -72,14 +72,14 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
+        icon: "size-8 rounded-sm border bg-muted [&_svg:not([class*='size-'])]:size-4",
         image:
-          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
+          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
       },
     },
     defaultVariants: {
@@ -134,8 +134,8 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="item-description"
       className={cn(
-        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
-        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        "line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/kbd.tsx b/apps/v4/registry/new-york-v4/ui/kbd.tsx
index 253c69f3db..2459224fbc 100644
--- a/apps/v4/registry/new-york-v4/ui/kbd.tsx
+++ b/apps/v4/registry/new-york-v4/ui/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn(
-        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none",
         "[&_svg:not([class*='size-'])]:size-3",
         "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
         className
diff --git a/apps/v4/registry/new-york-v4/ui/menubar.tsx b/apps/v4/registry/new-york-v4/ui/menubar.tsx
index a655c39c9f..4af16a4283 100644
--- a/apps/v4/registry/new-york-v4/ui/menubar.tsx
+++ b/apps/v4/registry/new-york-v4/ui/menubar.tsx
@@ -14,7 +14,7 @@ function Menubar({
     <MenubarPrimitive.Root
       data-slot="menubar"
       className={cn(
-        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
+        "flex h-9 items-center gap-1 rounded-md border bg-background p-1 shadow-xs",
         className
       )}
       {...props}
@@ -56,7 +56,7 @@ function MenubarTrigger({
     <MenubarPrimitive.Trigger
       data-slot="menubar-trigger"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+        "flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
         className
       )}
       {...props}
@@ -79,7 +79,7 @@ function MenubarContent({
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
+          "z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className
         )}
         {...props}
@@ -103,7 +103,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -121,7 +121,7 @@ function MenubarCheckboxItem({
     <MenubarPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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",
         className
       )}
       checked={checked}
@@ -146,7 +146,7 @@ function MenubarRadioItem({
     <MenubarPrimitive.RadioItem
       data-slot="menubar-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent 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",
         className
       )}
       {...props}
@@ -188,7 +188,7 @@ function MenubarSeparator({
   return (
     <MenubarPrimitive.Separator
       data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
@@ -202,7 +202,7 @@ function MenubarShortcut({
     <span
       data-slot="menubar-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
@@ -229,7 +229,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+        "flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
         className
       )}
       {...props}
@@ -248,7 +248,7 @@ function MenubarSubContent({
     <MenubarPrimitive.SubContent
       data-slot="menubar-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/native-select.tsx b/apps/v4/registry/new-york-v4/ui/native-select.tsx
index 0bb76819d5..ab7455a787 100644
--- a/apps/v4/registry/new-york-v4/ui/native-select.tsx
+++ b/apps/v4/registry/new-york-v4/ui/native-select.tsx
@@ -17,15 +17,15 @@ function NativeSelect({
         data-slot="native-select"
         data-size={size}
         className={cn(
-          "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
-          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1 dark:bg-input/30 dark:hover:bg-input/50",
+          "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
           className
         )}
         {...props}
       />
       <ChevronDownIcon
-        className="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none"
+        className="pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 text-muted-foreground opacity-50 select-none"
         aria-hidden="true"
         data-slot="native-select-icon"
       />
diff --git a/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx b/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx
index 06e5b7a37a..0a673f513c 100644
--- a/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx
+++ b/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx
@@ -59,7 +59,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 )
 
 function NavigationMenuTrigger({
@@ -90,8 +90,8 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 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-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        "top-0 left-0 w-full p-2 pr-2.5 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 md:absolute md:w-auto",
+        "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-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95",
         className
       )}
       {...props}
@@ -112,7 +112,7 @@ function NavigationMenuViewport({
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
           className
         )}
         {...props}
@@ -129,7 +129,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )}
       {...props}
@@ -145,12 +145,12 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Indicator
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in",
         className
       )}
       {...props}
     >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+      <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
     </NavigationMenuPrimitive.Indicator>
   )
 }
diff --git a/apps/v4/registry/new-york-v4/ui/popover.tsx b/apps/v4/registry/new-york-v4/ui/popover.tsx
index 9519cc4887..30058c4ec2 100644
--- a/apps/v4/registry/new-york-v4/ui/popover.tsx
+++ b/apps/v4/registry/new-york-v4/ui/popover.tsx
@@ -30,7 +30,7 @@ function PopoverContent({
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className
         )}
         {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/progress.tsx b/apps/v4/registry/new-york-v4/ui/progress.tsx
index bca13feb4b..5a0a5a64c9 100644
--- a/apps/v4/registry/new-york-v4/ui/progress.tsx
+++ b/apps/v4/registry/new-york-v4/ui/progress.tsx
@@ -14,14 +14,14 @@ function Progress({
     <ProgressPrimitive.Root
       data-slot="progress"
       className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
         className
       )}
       {...props}
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
+        className="h-full w-full flex-1 bg-primary transition-all"
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>
diff --git a/apps/v4/registry/new-york-v4/ui/radio-group.tsx b/apps/v4/registry/new-york-v4/ui/radio-group.tsx
index ddae3d48cc..fe514536ed 100644
--- a/apps/v4/registry/new-york-v4/ui/radio-group.tsx
+++ b/apps/v4/registry/new-york-v4/ui/radio-group.tsx
@@ -27,7 +27,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square size-4 shrink-0 rounded-full border border-input text-primary shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
@@ -36,7 +36,7 @@ function RadioGroupItem({
         data-slot="radio-group-indicator"
         className="relative flex items-center justify-center"
       >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-primary" />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
   )
diff --git a/apps/v4/registry/new-york-v4/ui/resizable.tsx b/apps/v4/registry/new-york-v4/ui/resizable.tsx
index bbd25ccbbf..a76832a10b 100644
--- a/apps/v4/registry/new-york-v4/ui/resizable.tsx
+++ b/apps/v4/registry/new-york-v4/ui/resizable.tsx
@@ -36,13 +36,13 @@ function ResizableHandle({
     <ResizablePrimitive.Separator
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
+        "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90",
         className
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+        <div className="z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border">
           <GripVerticalIcon className="size-2.5" />
         </div>
       )}
diff --git a/apps/v4/registry/new-york-v4/ui/scroll-area.tsx b/apps/v4/registry/new-york-v4/ui/scroll-area.tsx
index 0f873dcb52..73c4eb1cdc 100644
--- a/apps/v4/registry/new-york-v4/ui/scroll-area.tsx
+++ b/apps/v4/registry/new-york-v4/ui/scroll-area.tsx
@@ -18,7 +18,7 @@ function ScrollArea({
     >
       <ScrollAreaPrimitive.Viewport
         data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >
         {children}
       </ScrollAreaPrimitive.Viewport>
@@ -49,7 +49,7 @@ function ScrollBar({
     >
       <ScrollAreaPrimitive.ScrollAreaThumb
         data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
+        className="relative flex-1 rounded-full bg-border"
       />
     </ScrollAreaPrimitive.ScrollAreaScrollbar>
   )
diff --git a/apps/v4/registry/new-york-v4/ui/select.tsx b/apps/v4/registry/new-york-v4/ui/select.tsx
index fd01b74626..c0dc7120b4 100644
--- a/apps/v4/registry/new-york-v4/ui/select.tsx
+++ b/apps/v4/registry/new-york-v4/ui/select.tsx
@@ -37,7 +37,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className
       )}
       {...props}
@@ -62,7 +62,7 @@ function SelectContent({
       <SelectPrimitive.Content
         data-slot="select-content"
         className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          "relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
           className
@@ -94,7 +94,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
       {...props}
     />
   )
@@ -109,7 +109,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent 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 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
@@ -134,7 +134,7 @@ function SelectSeparator({
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/new-york-v4/ui/separator.tsx b/apps/v4/registry/new-york-v4/ui/separator.tsx
index 4c24b2a884..cd873e3631 100644
--- a/apps/v4/registry/new-york-v4/ui/separator.tsx
+++ b/apps/v4/registry/new-york-v4/ui/separator.tsx
@@ -17,7 +17,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/sheet.tsx b/apps/v4/registry/new-york-v4/ui/sheet.tsx
index 5963090576..cb53bb28b6 100644
--- a/apps/v4/registry/new-york-v4/ui/sheet.tsx
+++ b/apps/v4/registry/new-york-v4/ui/sheet.tsx
@@ -36,7 +36,7 @@ function SheetOverlay({
     <SheetPrimitive.Overlay
       data-slot="sheet-overlay"
       className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         className
       )}
       {...props}
@@ -60,22 +60,22 @@ function SheetContent({
       <SheetPrimitive.Content
         data-slot="sheet-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          "fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
           side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+            "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
           side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+            "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
           side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+            "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
           side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+            "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
           className
         )}
         {...props}
       >
         {children}
         {showCloseButton && (
-          <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
             <XIcon className="size-4" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
@@ -112,7 +112,7 @@ function SheetTitle({
   return (
     <SheetPrimitive.Title
       data-slot="sheet-title"
-      className={cn("text-foreground font-semibold", className)}
+      className={cn("font-semibold text-foreground", className)}
       {...props}
     />
   )
@@ -125,7 +125,7 @@ function SheetDescription({
   return (
     <SheetPrimitive.Description
       data-slot="sheet-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/new-york-v4/ui/sidebar.tsx b/apps/v4/registry/new-york-v4/ui/sidebar.tsx
index 5028be8044..da515df86d 100644
--- a/apps/v4/registry/new-york-v4/ui/sidebar.tsx
+++ b/apps/v4/registry/new-york-v4/ui/sidebar.tsx
@@ -139,7 +139,7 @@ function SidebarProvider({
             } as React.CSSProperties
           }
           className={cn(
-            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
             className
           )}
           {...props}
@@ -170,7 +170,7 @@ function Sidebar({
       <div
         data-slot="sidebar"
         className={cn(
-          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
           className
         )}
         {...props}
@@ -187,7 +187,7 @@ function Sidebar({
           data-sidebar="sidebar"
           data-slot="sidebar"
           data-mobile="true"
-          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
           style={
             {
               "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -207,7 +207,7 @@ function Sidebar({
 
   return (
     <div
-      className="group peer text-sidebar-foreground hidden md:block"
+      className="group peer hidden text-sidebar-foreground md:block"
       data-state={state}
       data-collapsible={state === "collapsed" ? collapsible : ""}
       data-variant={variant}
@@ -244,7 +244,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
         >
           {children}
         </div>
@@ -291,10 +291,10 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle Sidebar"
       className={cn(
-        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex",
         "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
@@ -309,7 +309,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
+        "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-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}
@@ -326,7 +326,7 @@ function SidebarInput({
     <Input
       data-slot="sidebar-input"
       data-sidebar="input"
-      className={cn("bg-background h-8 w-full shadow-none", className)}
+      className={cn("h-8 w-full bg-background shadow-none", className)}
       {...props}
     />
   )
@@ -362,7 +362,7 @@ function SidebarSeparator({
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      className={cn("mx-2 w-auto bg-sidebar-border", className)}
       {...props}
     />
   )
@@ -405,7 +405,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
@@ -426,7 +426,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 md:after:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -474,7 +474,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] 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 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-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-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -561,7 +561,7 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        "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 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 md:after:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -569,7 +569,7 @@ function SidebarMenuAction({
         "peer-data-[size=lg]/menu-button:top-2.5",
         "group-data-[collapsible=icon]:hidden",
         showOnHover &&
-          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
         className
       )}
       {...props}
@@ -586,7 +586,7 @@ function SidebarMenuBadge({
       data-slot="sidebar-menu-badge"
       data-sidebar="menu-badge"
       className={cn(
-        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none",
         "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
         "peer-data-[size=sm]/menu-button:top-1",
         "peer-data-[size=default]/menu-button:top-1.5",
@@ -643,7 +643,7 @@ function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
       data-slot="sidebar-menu-sub"
       data-sidebar="menu-sub"
       className={cn(
-        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
         "group-data-[collapsible=icon]:hidden",
         className
       )}
@@ -686,7 +686,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "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 flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
diff --git a/apps/v4/registry/new-york-v4/ui/skeleton.tsx b/apps/v4/registry/new-york-v4/ui/skeleton.tsx
index 32ea0ef7fb..3ec6be770b 100644
--- a/apps/v4/registry/new-york-v4/ui/skeleton.tsx
+++ b/apps/v4/registry/new-york-v4/ui/skeleton.tsx
@@ -4,7 +4,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="skeleton"
-      className={cn("bg-accent animate-pulse rounded-md", className)}
+      className={cn("animate-pulse rounded-md bg-accent", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/new-york-v4/ui/slider.tsx b/apps/v4/registry/new-york-v4/ui/slider.tsx
index 4b815ae64e..46ebc4b4df 100644
--- a/apps/v4/registry/new-york-v4/ui/slider.tsx
+++ b/apps/v4/registry/new-york-v4/ui/slider.tsx
@@ -39,13 +39,13 @@ function Slider({
       <SliderPrimitive.Track
         data-slot="slider-track"
         className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+          "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
         )}
       >
         <SliderPrimitive.Range
           data-slot="slider-range"
           className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+            "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
           )}
         />
       </SliderPrimitive.Track>
@@ -53,7 +53,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/apps/v4/registry/new-york-v4/ui/switch.tsx b/apps/v4/registry/new-york-v4/ui/switch.tsx
index 80dd45b2b0..8baa844fdb 100644
--- a/apps/v4/registry/new-york-v4/ui/switch.tsx
+++ b/apps/v4/registry/new-york-v4/ui/switch.tsx
@@ -17,7 +17,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
+        "peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
         className
       )}
       {...props}
@@ -25,7 +25,7 @@ function Switch({
       <SwitchPrimitive.Thumb
         data-slot="switch-thumb"
         className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          "pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
         )}
       />
     </SwitchPrimitive.Root>
diff --git a/apps/v4/registry/new-york-v4/ui/table.tsx b/apps/v4/registry/new-york-v4/ui/table.tsx
index 51b74dd525..e27f18316f 100644
--- a/apps/v4/registry/new-york-v4/ui/table.tsx
+++ b/apps/v4/registry/new-york-v4/ui/table.tsx
@@ -44,7 +44,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
     <tfoot
       data-slot="table-footer"
       className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
         className
       )}
       {...props}
@@ -57,7 +57,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
         className
       )}
       {...props}
@@ -70,7 +70,7 @@ function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        "h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
         className
       )}
       {...props}
@@ -98,7 +98,7 @@ function TableCaption({
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn("mt-4 text-sm text-muted-foreground", className)}
       {...props}
     />
   )
diff --git a/apps/v4/registry/new-york-v4/ui/tabs.tsx b/apps/v4/registry/new-york-v4/ui/tabs.tsx
index 7f73dcda31..b463afd170 100644
--- a/apps/v4/registry/new-york-v4/ui/tabs.tsx
+++ b/apps/v4/registry/new-york-v4/ui/tabs.tsx
@@ -26,7 +26,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
   {
     variants: {
       variant: {
@@ -64,10 +64,10 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_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-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start 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 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
+        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/textarea.tsx b/apps/v4/registry/new-york-v4/ui/textarea.tsx
index 7f21b5e78a..e67d8fefe5 100644
--- a/apps/v4/registry/new-york-v4/ui/textarea.tsx
+++ b/apps/v4/registry/new-york-v4/ui/textarea.tsx
@@ -7,7 +7,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/new-york-v4/ui/toggle.tsx b/apps/v4/registry/new-york-v4/ui/toggle.tsx
index 901c7f4459..5250c98ff7 100644
--- a/apps/v4/registry/new-york-v4/ui/toggle.tsx
+++ b/apps/v4/registry/new-york-v4/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { Toggle as TogglePrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -16,9 +16,9 @@ const toggleVariants = cva(
           "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
+        default: "h-9 min-w-9 px-2",
+        sm: "h-8 min-w-8 px-1.5",
+        lg: "h-10 min-w-10 px-2.5",
       },
     },
     defaultVariants: {
diff --git a/apps/v4/registry/new-york-v4/ui/tooltip.tsx b/apps/v4/registry/new-york-v4/ui/tooltip.tsx
index d80a14468c..ec65c1e425 100644
--- a/apps/v4/registry/new-york-v4/ui/tooltip.tsx
+++ b/apps/v4/registry/new-york-v4/ui/tooltip.tsx
@@ -42,13 +42,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-3 py-1.5 text-xs text-balance text-background fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
diff --git a/apps/v4/registry/styles.tsx b/apps/v4/registry/styles.tsx
index 0fde704b23..b83a967af8 100644
--- a/apps/v4/registry/styles.tsx
+++ b/apps/v4/registry/styles.tsx
@@ -4,7 +4,7 @@ export const STYLES = [
   {
     name: "vega",
     title: "Vega",
-    description: "The classic shadcn/ui look. Clean, neutral, and familiar.",
+    description: "Clean, neutral, and familiar",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -26,7 +26,7 @@ export const STYLES = [
   {
     name: "nova",
     title: "Nova",
-    description: "Reduced padding and margins for compact layouts.",
+    description: "Reduced padding and margins",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -49,7 +49,7 @@ export const STYLES = [
   {
     name: "maia",
     title: "Maia",
-    description: "Soft and rounded, with generous spacing.",
+    description: "Rounded, with generous spacing.",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -74,7 +74,7 @@ export const STYLES = [
   {
     name: "lyra",
     title: "Lyra",
-    description: "Boxy and sharp. Pairs well with mono fonts.",
+    description: "Boxy and sharp. For mono fonts.",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -96,7 +96,7 @@ export const STYLES = [
   {
     name: "mira",
     title: "Mira",
-    description: "Compact. Made for dense interfaces.",
+    description: "Made for compact interfaces.",
     icon: (
       <svg
         xmlns="http://www.w3.org/2000/svg"
diff --git a/apps/v4/registry/styles/style-lyra.css b/apps/v4/registry/styles/style-lyra.css
index c3513b4827..947c6c941f 100644
--- a/apps/v4/registry/styles/style-lyra.css
+++ b/apps/v4/registry/styles/style-lyra.css
@@ -1265,7 +1265,7 @@
 
   /* MARK: Tooltip */
   .cn-tooltip-content {
-    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-none px-3 py-1.5 text-xs;
+    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-none px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-none;
   }
 
   .cn-tooltip-content-logical {
@@ -1317,8 +1317,12 @@
     @apply size-6 rounded-none p-0 has-[>svg]:p-0;
   }
 
+  .cn-input-group-button-size-sm {
+    @apply gap-1;
+  }
+
   .cn-input-group-button-size-icon-sm {
-    @apply size-8 p-0 has-[>svg]:p-0;
+    @apply size-7 p-0 has-[>svg]:p-0;
   }
 
   .cn-input-group-text {
diff --git a/apps/v4/registry/styles/style-maia.css b/apps/v4/registry/styles/style-maia.css
index 0f21c0ac3f..e920fd74f5 100644
--- a/apps/v4/registry/styles/style-maia.css
+++ b/apps/v4/registry/styles/style-maia.css
@@ -1290,7 +1290,7 @@
 
   /* MARK: Tooltip */
   .cn-tooltip-content {
-    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl;
+    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-2xl px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-4xl;
   }
 
   .cn-tooltip-content-logical {
diff --git a/apps/v4/registry/styles/style-mira.css b/apps/v4/registry/styles/style-mira.css
index 89e0aef694..2768d792f4 100644
--- a/apps/v4/registry/styles/style-mira.css
+++ b/apps/v4/registry/styles/style-mira.css
@@ -1292,7 +1292,7 @@
 
   /* MARK: Tooltip */
   .cn-tooltip-content {
-    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md;
+    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm;
   }
 
   .cn-tooltip-content-logical {
@@ -1344,8 +1344,12 @@
     @apply size-6 p-0 has-[>svg]:p-0;
   }
 
+  .cn-input-group-button-size-sm {
+    @apply gap-1;
+  }
+
   .cn-input-group-button-size-icon-sm {
-    @apply size-8 p-0 has-[>svg]:p-0;
+    @apply size-7 p-0 has-[>svg]:p-0;
   }
 
   .cn-input-group-text {
diff --git a/apps/v4/registry/styles/style-nova.css b/apps/v4/registry/styles/style-nova.css
index 9fd15faff2..7032b2c9ea 100644
--- a/apps/v4/registry/styles/style-nova.css
+++ b/apps/v4/registry/styles/style-nova.css
@@ -1290,7 +1290,7 @@
 
   /* MARK: Tooltip */
   .cn-tooltip-content {
-    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs;
+    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm;
   }
 
   .cn-tooltip-content-logical {
diff --git a/apps/v4/registry/styles/style-vega.css b/apps/v4/registry/styles/style-vega.css
index e711366554..6e70f27f1e 100644
--- a/apps/v4/registry/styles/style-vega.css
+++ b/apps/v4/registry/styles/style-vega.css
@@ -1286,7 +1286,7 @@
 
   /* MARK: Tooltip */
   .cn-tooltip-content {
-    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs;
+    @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm;
   }
 
   .cn-tooltip-content-logical {
diff --git a/apps/v4/registry/themes.ts b/apps/v4/registry/themes.ts
index 48a26b8aa1..78b145fefa 100644
--- a/apps/v4/registry/themes.ts
+++ b/apps/v4/registry/themes.ts
@@ -99,11 +99,11 @@ export const THEMES: RegistryItem[] = [
         border: "oklch(0.923 0.003 48.717)",
         input: "oklch(0.923 0.003 48.717)",
         ring: "oklch(0.709 0.01 56.259)",
-        "chart-1": "oklch(0.646 0.222 41.116)",
-        "chart-2": "oklch(0.6 0.118 184.704)",
-        "chart-3": "oklch(0.398 0.07 227.392)",
-        "chart-4": "oklch(0.828 0.189 84.429)",
-        "chart-5": "oklch(0.769 0.188 70.08)",
+        "chart-1": "oklch(0.897 0.196 126.665)",
+        "chart-2": "oklch(0.768 0.233 130.85)",
+        "chart-3": "oklch(0.648 0.2 131.684)",
+        "chart-4": "oklch(0.532 0.157 131.589)",
+        "chart-5": "oklch(0.453 0.124 130.933)",
         radius: "0.625rem",
         sidebar: "oklch(0.985 0.001 106.423)",
         "sidebar-foreground": "oklch(0.147 0.004 49.25)",
@@ -133,11 +133,11 @@ export const THEMES: RegistryItem[] = [
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
         ring: "oklch(0.553 0.013 58.071)",
-        "chart-1": "oklch(0.488 0.243 264.376)",
-        "chart-2": "oklch(0.696 0.17 162.48)",
-        "chart-3": "oklch(0.769 0.188 70.08)",
-        "chart-4": "oklch(0.627 0.265 303.9)",
-        "chart-5": "oklch(0.645 0.246 16.439)",
+        "chart-1": "oklch(0.897 0.196 126.665)",
+        "chart-2": "oklch(0.768 0.233 130.85)",
+        "chart-3": "oklch(0.648 0.2 131.684)",
+        "chart-4": "oklch(0.532 0.157 131.589)",
+        "chart-5": "oklch(0.453 0.124 130.933)",
         sidebar: "oklch(0.216 0.006 56.043)",
         "sidebar-foreground": "oklch(0.985 0.001 106.423)",
         "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -173,11 +173,11 @@ export const THEMES: RegistryItem[] = [
         border: "oklch(0.92 0.004 286.32)",
         input: "oklch(0.92 0.004 286.32)",
         ring: "oklch(0.705 0.015 286.067)",
-        "chart-1": "oklch(0.646 0.222 41.116)",
-        "chart-2": "oklch(0.6 0.118 184.704)",
-        "chart-3": "oklch(0.398 0.07 227.392)",
-        "chart-4": "oklch(0.828 0.189 84.429)",
-        "chart-5": "oklch(0.769 0.188 70.08)",
+        "chart-1": "oklch(0.879 0.169 91.605)",
+        "chart-2": "oklch(0.769 0.188 70.08)",
+        "chart-3": "oklch(0.666 0.179 58.318)",
+        "chart-4": "oklch(0.555 0.163 48.998)",
+        "chart-5": "oklch(0.473 0.137 46.201)",
         radius: "0.625rem",
         sidebar: "oklch(0.985 0 0)",
         "sidebar-foreground": "oklch(0.141 0.005 285.823)",
@@ -207,11 +207,11 @@ export const THEMES: RegistryItem[] = [
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
         ring: "oklch(0.552 0.016 285.938)",
-        "chart-1": "oklch(0.488 0.243 264.376)",
-        "chart-2": "oklch(0.696 0.17 162.48)",
-        "chart-3": "oklch(0.769 0.188 70.08)",
-        "chart-4": "oklch(0.627 0.265 303.9)",
-        "chart-5": "oklch(0.645 0.246 16.439)",
+        "chart-1": "oklch(0.879 0.169 91.605)",
+        "chart-2": "oklch(0.769 0.188 70.08)",
+        "chart-3": "oklch(0.666 0.179 58.318)",
+        "chart-4": "oklch(0.555 0.163 48.998)",
+        "chart-5": "oklch(0.473 0.137 46.201)",
         sidebar: "oklch(0.21 0.006 285.885)",
         "sidebar-foreground": "oklch(0.985 0 0)",
         "sidebar-primary": "oklch(0.488 0.243 264.376)",
@@ -224,76 +224,298 @@ export const THEMES: RegistryItem[] = [
     },
   },
   {
-    name: "gray",
-    title: "Gray",
+    name: "mauve",
+    title: "Mauve",
     type: "registry:theme",
     cssVars: {
       light: {
         background: "oklch(1 0 0)",
-        foreground: "oklch(0.13 0.028 261.692)",
+        foreground: "oklch(0.145 0.008 326)",
         card: "oklch(1 0 0)",
-        "card-foreground": "oklch(0.13 0.028 261.692)",
+        "card-foreground": "oklch(0.145 0.008 326)",
         popover: "oklch(1 0 0)",
-        "popover-foreground": "oklch(0.13 0.028 261.692)",
-        primary: "oklch(0.21 0.034 264.665)",
-        "primary-foreground": "oklch(0.985 0.002 247.839)",
-        secondary: "oklch(0.967 0.003 264.542)",
-        "secondary-foreground": "oklch(0.21 0.034 264.665)",
-        muted: "oklch(0.967 0.003 264.542)",
-        "muted-foreground": "oklch(0.551 0.027 264.364)",
-        accent: "oklch(0.967 0.003 264.542)",
-        "accent-foreground": "oklch(0.21 0.034 264.665)",
+        "popover-foreground": "oklch(0.145 0.008 326)",
+        primary: "oklch(0.212 0.019 322.12)",
+        "primary-foreground": "oklch(0.985 0 0)",
+        secondary: "oklch(0.96 0.003 325.6)",
+        "secondary-foreground": "oklch(0.212 0.019 322.12)",
+        muted: "oklch(0.96 0.003 325.6)",
+        "muted-foreground": "oklch(0.542 0.034 322.5)",
+        accent: "oklch(0.96 0.003 325.6)",
+        "accent-foreground": "oklch(0.212 0.019 322.12)",
         destructive: "oklch(0.577 0.245 27.325)",
-        border: "oklch(0.928 0.006 264.531)",
-        input: "oklch(0.928 0.006 264.531)",
-        ring: "oklch(0.707 0.022 261.325)",
-        "chart-1": "oklch(0.646 0.222 41.116)",
-        "chart-2": "oklch(0.6 0.118 184.704)",
-        "chart-3": "oklch(0.398 0.07 227.392)",
-        "chart-4": "oklch(0.828 0.189 84.429)",
-        "chart-5": "oklch(0.769 0.188 70.08)",
+        border: "oklch(0.922 0.005 325.62)",
+        input: "oklch(0.922 0.005 325.62)",
+        ring: "oklch(0.711 0.019 323.02)",
+        "chart-1": "oklch(0.845 0.143 164.978)",
+        "chart-2": "oklch(0.696 0.17 162.48)",
+        "chart-3": "oklch(0.596 0.145 163.225)",
+        "chart-4": "oklch(0.508 0.118 165.612)",
+        "chart-5": "oklch(0.432 0.095 166.913)",
         radius: "0.625rem",
-        sidebar: "oklch(0.985 0.002 247.839)",
-        "sidebar-foreground": "oklch(0.13 0.028 261.692)",
-        "sidebar-primary": "oklch(0.21 0.034 264.665)",
-        "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
-        "sidebar-accent": "oklch(0.967 0.003 264.542)",
-        "sidebar-accent-foreground": "oklch(0.21 0.034 264.665)",
-        "sidebar-border": "oklch(0.928 0.006 264.531)",
-        "sidebar-ring": "oklch(0.707 0.022 261.325)",
+        sidebar: "oklch(0.985 0 0)",
+        "sidebar-foreground": "oklch(0.145 0.008 326)",
+        "sidebar-primary": "oklch(0.212 0.019 322.12)",
+        "sidebar-primary-foreground": "oklch(0.985 0 0)",
+        "sidebar-accent": "oklch(0.96 0.003 325.6)",
+        "sidebar-accent-foreground": "oklch(0.212 0.019 322.12)",
+        "sidebar-border": "oklch(0.922 0.005 325.62)",
+        "sidebar-ring": "oklch(0.711 0.019 323.02)",
       },
       dark: {
-        background: "oklch(0.13 0.028 261.692)",
-        foreground: "oklch(0.985 0.002 247.839)",
-        card: "oklch(0.21 0.034 264.665)",
-        "card-foreground": "oklch(0.985 0.002 247.839)",
-        popover: "oklch(0.21 0.034 264.665)",
-        "popover-foreground": "oklch(0.985 0.002 247.839)",
-        primary: "oklch(0.928 0.006 264.531)",
-        "primary-foreground": "oklch(0.21 0.034 264.665)",
-        secondary: "oklch(0.278 0.033 256.848)",
-        "secondary-foreground": "oklch(0.985 0.002 247.839)",
-        muted: "oklch(0.278 0.033 256.848)",
-        "muted-foreground": "oklch(0.707 0.022 261.325)",
-        accent: "oklch(0.278 0.033 256.848)",
-        "accent-foreground": "oklch(0.985 0.002 247.839)",
+        background: "oklch(0.145 0.008 326)",
+        foreground: "oklch(0.985 0 0)",
+        card: "oklch(0.212 0.019 322.12)",
+        "card-foreground": "oklch(0.985 0 0)",
+        popover: "oklch(0.212 0.019 322.12)",
+        "popover-foreground": "oklch(0.985 0 0)",
+        primary: "oklch(0.922 0.005 325.62)",
+        "primary-foreground": "oklch(0.212 0.019 322.12)",
+        secondary: "oklch(0.263 0.024 320.12)",
+        "secondary-foreground": "oklch(0.985 0 0)",
+        muted: "oklch(0.263 0.024 320.12)",
+        "muted-foreground": "oklch(0.711 0.019 323.02)",
+        accent: "oklch(0.263 0.024 320.12)",
+        "accent-foreground": "oklch(0.985 0 0)",
         destructive: "oklch(0.704 0.191 22.216)",
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
-        ring: "oklch(0.551 0.027 264.364)",
-        "chart-1": "oklch(0.488 0.243 264.376)",
+        ring: "oklch(0.542 0.034 322.5)",
+        "chart-1": "oklch(0.845 0.143 164.978)",
         "chart-2": "oklch(0.696 0.17 162.48)",
-        "chart-3": "oklch(0.769 0.188 70.08)",
-        "chart-4": "oklch(0.627 0.265 303.9)",
-        "chart-5": "oklch(0.645 0.246 16.439)",
-        sidebar: "oklch(0.21 0.034 264.665)",
-        "sidebar-foreground": "oklch(0.985 0.002 247.839)",
+        "chart-3": "oklch(0.596 0.145 163.225)",
+        "chart-4": "oklch(0.508 0.118 165.612)",
+        "chart-5": "oklch(0.432 0.095 166.913)",
+        sidebar: "oklch(0.212 0.019 322.12)",
+        "sidebar-foreground": "oklch(0.985 0 0)",
         "sidebar-primary": "oklch(0.488 0.243 264.376)",
-        "sidebar-primary-foreground": "oklch(0.985 0.002 247.839)",
-        "sidebar-accent": "oklch(0.278 0.033 256.848)",
-        "sidebar-accent-foreground": "oklch(0.985 0.002 247.839)",
+        "sidebar-primary-foreground": "oklch(0.985 0 0)",
+        "sidebar-accent": "oklch(0.263 0.024 320.12)",
+        "sidebar-accent-foreground": "oklch(0.985 0 0)",
         "sidebar-border": "oklch(1 0 0 / 10%)",
-        "sidebar-ring": "oklch(0.551 0.027 264.364)",
+        "sidebar-ring": "oklch(0.542 0.034 322.5)",
+      },
+    },
+  },
+  {
+    name: "olive",
+    title: "Olive",
+    type: "registry:theme",
+    cssVars: {
+      light: {
+        background: "oklch(1 0 0)",
+        foreground: "oklch(0.153 0.006 107.1)",
+        card: "oklch(1 0 0)",
+        "card-foreground": "oklch(0.153 0.006 107.1)",
+        popover: "oklch(1 0 0)",
+        "popover-foreground": "oklch(0.153 0.006 107.1)",
+        primary: "oklch(0.228 0.013 107.4)",
+        "primary-foreground": "oklch(0.988 0.003 106.5)",
+        secondary: "oklch(0.966 0.005 106.5)",
+        "secondary-foreground": "oklch(0.228 0.013 107.4)",
+        muted: "oklch(0.966 0.005 106.5)",
+        "muted-foreground": "oklch(0.58 0.031 107.3)",
+        accent: "oklch(0.966 0.005 106.5)",
+        "accent-foreground": "oklch(0.228 0.013 107.4)",
+        destructive: "oklch(0.577 0.245 27.325)",
+        border: "oklch(0.93 0.007 106.5)",
+        input: "oklch(0.93 0.007 106.5)",
+        ring: "oklch(0.737 0.021 106.9)",
+        "chart-1": "oklch(0.811 0.111 293.571)",
+        "chart-2": "oklch(0.606 0.25 292.717)",
+        "chart-3": "oklch(0.541 0.281 293.009)",
+        "chart-4": "oklch(0.491 0.27 292.581)",
+        "chart-5": "oklch(0.432 0.232 292.759)",
+        radius: "0.625rem",
+        sidebar: "oklch(0.988 0.003 106.5)",
+        "sidebar-foreground": "oklch(0.153 0.006 107.1)",
+        "sidebar-primary": "oklch(0.228 0.013 107.4)",
+        "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
+        "sidebar-accent": "oklch(0.966 0.005 106.5)",
+        "sidebar-accent-foreground": "oklch(0.228 0.013 107.4)",
+        "sidebar-border": "oklch(0.93 0.007 106.5)",
+        "sidebar-ring": "oklch(0.737 0.021 106.9)",
+      },
+      dark: {
+        background: "oklch(0.153 0.006 107.1)",
+        foreground: "oklch(0.988 0.003 106.5)",
+        card: "oklch(0.228 0.013 107.4)",
+        "card-foreground": "oklch(0.988 0.003 106.5)",
+        popover: "oklch(0.228 0.013 107.4)",
+        "popover-foreground": "oklch(0.988 0.003 106.5)",
+        primary: "oklch(0.93 0.007 106.5)",
+        "primary-foreground": "oklch(0.228 0.013 107.4)",
+        secondary: "oklch(0.286 0.016 107.4)",
+        "secondary-foreground": "oklch(0.988 0.003 106.5)",
+        muted: "oklch(0.286 0.016 107.4)",
+        "muted-foreground": "oklch(0.737 0.021 106.9)",
+        accent: "oklch(0.286 0.016 107.4)",
+        "accent-foreground": "oklch(0.988 0.003 106.5)",
+        destructive: "oklch(0.704 0.191 22.216)",
+        border: "oklch(1 0 0 / 10%)",
+        input: "oklch(1 0 0 / 15%)",
+        ring: "oklch(0.58 0.031 107.3)",
+        "chart-1": "oklch(0.811 0.111 293.571)",
+        "chart-2": "oklch(0.606 0.25 292.717)",
+        "chart-3": "oklch(0.541 0.281 293.009)",
+        "chart-4": "oklch(0.491 0.27 292.581)",
+        "chart-5": "oklch(0.432 0.232 292.759)",
+        sidebar: "oklch(0.228 0.013 107.4)",
+        "sidebar-foreground": "oklch(0.988 0.003 106.5)",
+        "sidebar-primary": "oklch(0.488 0.243 264.376)",
+        "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
+        "sidebar-accent": "oklch(0.286 0.016 107.4)",
+        "sidebar-accent-foreground": "oklch(0.988 0.003 106.5)",
+        "sidebar-border": "oklch(1 0 0 / 10%)",
+        "sidebar-ring": "oklch(0.58 0.031 107.3)",
+      },
+    },
+  },
+  {
+    name: "mist",
+    title: "Mist",
+    type: "registry:theme",
+    cssVars: {
+      light: {
+        background: "oklch(1 0 0)",
+        foreground: "oklch(0.148 0.004 228.8)",
+        card: "oklch(1 0 0)",
+        "card-foreground": "oklch(0.148 0.004 228.8)",
+        popover: "oklch(1 0 0)",
+        "popover-foreground": "oklch(0.148 0.004 228.8)",
+        primary: "oklch(0.218 0.008 223.9)",
+        "primary-foreground": "oklch(0.987 0.002 197.1)",
+        secondary: "oklch(0.963 0.002 197.1)",
+        "secondary-foreground": "oklch(0.218 0.008 223.9)",
+        muted: "oklch(0.963 0.002 197.1)",
+        "muted-foreground": "oklch(0.56 0.021 213.5)",
+        accent: "oklch(0.963 0.002 197.1)",
+        "accent-foreground": "oklch(0.218 0.008 223.9)",
+        destructive: "oklch(0.577 0.245 27.325)",
+        border: "oklch(0.925 0.005 214.3)",
+        input: "oklch(0.925 0.005 214.3)",
+        ring: "oklch(0.723 0.014 214.4)",
+        "chart-1": "oklch(0.81 0.117 11.638)",
+        "chart-2": "oklch(0.645 0.246 16.439)",
+        "chart-3": "oklch(0.586 0.253 17.585)",
+        "chart-4": "oklch(0.514 0.222 16.935)",
+        "chart-5": "oklch(0.455 0.188 13.697)",
+        radius: "0.625rem",
+        sidebar: "oklch(0.987 0.002 197.1)",
+        "sidebar-foreground": "oklch(0.148 0.004 228.8)",
+        "sidebar-primary": "oklch(0.218 0.008 223.9)",
+        "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
+        "sidebar-accent": "oklch(0.963 0.002 197.1)",
+        "sidebar-accent-foreground": "oklch(0.218 0.008 223.9)",
+        "sidebar-border": "oklch(0.925 0.005 214.3)",
+        "sidebar-ring": "oklch(0.723 0.014 214.4)",
+      },
+      dark: {
+        background: "oklch(0.148 0.004 228.8)",
+        foreground: "oklch(0.987 0.002 197.1)",
+        card: "oklch(0.218 0.008 223.9)",
+        "card-foreground": "oklch(0.987 0.002 197.1)",
+        popover: "oklch(0.218 0.008 223.9)",
+        "popover-foreground": "oklch(0.987 0.002 197.1)",
+        primary: "oklch(0.925 0.005 214.3)",
+        "primary-foreground": "oklch(0.218 0.008 223.9)",
+        secondary: "oklch(0.275 0.011 216.9)",
+        "secondary-foreground": "oklch(0.987 0.002 197.1)",
+        muted: "oklch(0.275 0.011 216.9)",
+        "muted-foreground": "oklch(0.723 0.014 214.4)",
+        accent: "oklch(0.275 0.011 216.9)",
+        "accent-foreground": "oklch(0.987 0.002 197.1)",
+        destructive: "oklch(0.704 0.191 22.216)",
+        border: "oklch(1 0 0 / 10%)",
+        input: "oklch(1 0 0 / 15%)",
+        ring: "oklch(0.56 0.021 213.5)",
+        "chart-1": "oklch(0.81 0.117 11.638)",
+        "chart-2": "oklch(0.645 0.246 16.439)",
+        "chart-3": "oklch(0.586 0.253 17.585)",
+        "chart-4": "oklch(0.514 0.222 16.935)",
+        "chart-5": "oklch(0.455 0.188 13.697)",
+        sidebar: "oklch(0.218 0.008 223.9)",
+        "sidebar-foreground": "oklch(0.987 0.002 197.1)",
+        "sidebar-primary": "oklch(0.488 0.243 264.376)",
+        "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
+        "sidebar-accent": "oklch(0.275 0.011 216.9)",
+        "sidebar-accent-foreground": "oklch(0.987 0.002 197.1)",
+        "sidebar-border": "oklch(1 0 0 / 10%)",
+        "sidebar-ring": "oklch(0.56 0.021 213.5)",
+      },
+    },
+  },
+  {
+    name: "taupe",
+    title: "Taupe",
+    type: "registry:theme",
+    cssVars: {
+      light: {
+        background: "oklch(1 0 0)",
+        foreground: "oklch(0.147 0.004 49.3)",
+        card: "oklch(1 0 0)",
+        "card-foreground": "oklch(0.147 0.004 49.3)",
+        popover: "oklch(1 0 0)",
+        "popover-foreground": "oklch(0.147 0.004 49.3)",
+        primary: "oklch(0.214 0.009 43.1)",
+        "primary-foreground": "oklch(0.986 0.002 67.8)",
+        secondary: "oklch(0.96 0.002 17.2)",
+        "secondary-foreground": "oklch(0.214 0.009 43.1)",
+        muted: "oklch(0.96 0.002 17.2)",
+        "muted-foreground": "oklch(0.547 0.021 43.1)",
+        accent: "oklch(0.96 0.002 17.2)",
+        "accent-foreground": "oklch(0.214 0.009 43.1)",
+        destructive: "oklch(0.577 0.245 27.325)",
+        border: "oklch(0.922 0.005 34.3)",
+        input: "oklch(0.922 0.005 34.3)",
+        ring: "oklch(0.714 0.014 41.2)",
+        "chart-1": "oklch(0.865 0.127 207.078)",
+        "chart-2": "oklch(0.715 0.143 215.221)",
+        "chart-3": "oklch(0.609 0.126 221.723)",
+        "chart-4": "oklch(0.52 0.105 223.128)",
+        "chart-5": "oklch(0.45 0.085 224.283)",
+        radius: "0.625rem",
+        sidebar: "oklch(0.986 0.002 67.8)",
+        "sidebar-foreground": "oklch(0.147 0.004 49.3)",
+        "sidebar-primary": "oklch(0.214 0.009 43.1)",
+        "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
+        "sidebar-accent": "oklch(0.96 0.002 17.2)",
+        "sidebar-accent-foreground": "oklch(0.214 0.009 43.1)",
+        "sidebar-border": "oklch(0.922 0.005 34.3)",
+        "sidebar-ring": "oklch(0.714 0.014 41.2)",
+      },
+      dark: {
+        background: "oklch(0.147 0.004 49.3)",
+        foreground: "oklch(0.986 0.002 67.8)",
+        card: "oklch(0.214 0.009 43.1)",
+        "card-foreground": "oklch(0.986 0.002 67.8)",
+        popover: "oklch(0.214 0.009 43.1)",
+        "popover-foreground": "oklch(0.986 0.002 67.8)",
+        primary: "oklch(0.922 0.005 34.3)",
+        "primary-foreground": "oklch(0.214 0.009 43.1)",
+        secondary: "oklch(0.268 0.011 36.5)",
+        "secondary-foreground": "oklch(0.986 0.002 67.8)",
+        muted: "oklch(0.268 0.011 36.5)",
+        "muted-foreground": "oklch(0.714 0.014 41.2)",
+        accent: "oklch(0.268 0.011 36.5)",
+        "accent-foreground": "oklch(0.986 0.002 67.8)",
+        destructive: "oklch(0.704 0.191 22.216)",
+        border: "oklch(1 0 0 / 10%)",
+        input: "oklch(1 0 0 / 15%)",
+        ring: "oklch(0.547 0.021 43.1)",
+        "chart-1": "oklch(0.865 0.127 207.078)",
+        "chart-2": "oklch(0.715 0.143 215.221)",
+        "chart-3": "oklch(0.609 0.126 221.723)",
+        "chart-4": "oklch(0.52 0.105 223.128)",
+        "chart-5": "oklch(0.45 0.085 224.283)",
+        sidebar: "oklch(0.214 0.009 43.1)",
+        "sidebar-foreground": "oklch(0.986 0.002 67.8)",
+        "sidebar-primary": "oklch(0.488 0.243 264.376)",
+        "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
+        "sidebar-accent": "oklch(0.268 0.011 36.5)",
+        "sidebar-accent-foreground": "oklch(0.986 0.002 67.8)",
+        "sidebar-border": "oklch(1 0 0 / 10%)",
+        "sidebar-ring": "oklch(0.547 0.021 43.1)",
       },
     },
   },
@@ -303,30 +525,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.67 0.16 58)",
-        "primary-foreground": "oklch(0.99 0.02 95)",
+        primary: "oklch(0.555 0.163 48.998)",
+        "primary-foreground": "oklch(0.987 0.022 95.277)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.88 0.15 92)",
-        "chart-2": "oklch(0.77 0.16 70)",
-        "chart-3": "oklch(0.67 0.16 58)",
-        "chart-4": "oklch(0.56 0.15 49)",
-        "chart-5": "oklch(0.47 0.12 46)",
-        "sidebar-primary": "oklch(0.67 0.16 58)",
-        "sidebar-primary-foreground": "oklch(0.99 0.02 95)",
+        "chart-1": "oklch(0.879 0.169 91.605)",
+        "chart-2": "oklch(0.769 0.188 70.08)",
+        "chart-3": "oklch(0.666 0.179 58.318)",
+        "chart-4": "oklch(0.555 0.163 48.998)",
+        "chart-5": "oklch(0.473 0.137 46.201)",
+        "sidebar-primary": "oklch(0.666 0.179 58.318)",
+        "sidebar-primary-foreground": "oklch(0.987 0.022 95.277)",
       },
       dark: {
-        primary: "oklch(0.77 0.16 70)",
-        "primary-foreground": "oklch(0.28 0.07 46)",
+        primary: "oklch(0.473 0.137 46.201)",
+        "primary-foreground": "oklch(0.987 0.022 95.277)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.88 0.15 92)",
-        "chart-2": "oklch(0.77 0.16 70)",
-        "chart-3": "oklch(0.67 0.16 58)",
-        "chart-4": "oklch(0.56 0.15 49)",
-        "chart-5": "oklch(0.47 0.12 46)",
-        "sidebar-primary": "oklch(0.77 0.16 70)",
-        "sidebar-primary-foreground": "oklch(0.28 0.07 46)",
+        "chart-1": "oklch(0.879 0.169 91.605)",
+        "chart-2": "oklch(0.769 0.188 70.08)",
+        "chart-3": "oklch(0.666 0.179 58.318)",
+        "chart-4": "oklch(0.555 0.163 48.998)",
+        "chart-5": "oklch(0.473 0.137 46.201)",
+        "sidebar-primary": "oklch(0.769 0.188 70.08)",
+        "sidebar-primary-foreground": "oklch(0.279 0.077 45.635)",
       },
     },
   },
@@ -349,7 +571,7 @@ export const THEMES: RegistryItem[] = [
         "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
       },
       dark: {
-        primary: "oklch(0.42 0.18 266)",
+        primary: "oklch(0.424 0.199 265.638)",
         "primary-foreground": "oklch(0.97 0.014 254.604)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
@@ -369,30 +591,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.61 0.11 222)",
-        "primary-foreground": "oklch(0.98 0.02 201)",
+        primary: "oklch(0.52 0.105 223.128)",
+        "primary-foreground": "oklch(0.984 0.019 200.873)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.87 0.12 207)",
-        "chart-2": "oklch(0.80 0.13 212)",
-        "chart-3": "oklch(0.71 0.13 215)",
-        "chart-4": "oklch(0.61 0.11 222)",
-        "chart-5": "oklch(0.52 0.09 223)",
-        "sidebar-primary": "oklch(0.61 0.11 222)",
-        "sidebar-primary-foreground": "oklch(0.98 0.02 201)",
+        "chart-1": "oklch(0.865 0.127 207.078)",
+        "chart-2": "oklch(0.715 0.143 215.221)",
+        "chart-3": "oklch(0.609 0.126 221.723)",
+        "chart-4": "oklch(0.52 0.105 223.128)",
+        "chart-5": "oklch(0.45 0.085 224.283)",
+        "sidebar-primary": "oklch(0.609 0.126 221.723)",
+        "sidebar-primary-foreground": "oklch(0.984 0.019 200.873)",
       },
       dark: {
-        primary: "oklch(0.71 0.13 215)",
-        "primary-foreground": "oklch(0.30 0.05 230)",
+        primary: "oklch(0.45 0.085 224.283)",
+        "primary-foreground": "oklch(0.984 0.019 200.873)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.87 0.12 207)",
-        "chart-2": "oklch(0.80 0.13 212)",
-        "chart-3": "oklch(0.71 0.13 215)",
-        "chart-4": "oklch(0.61 0.11 222)",
-        "chart-5": "oklch(0.52 0.09 223)",
-        "sidebar-primary": "oklch(0.80 0.13 212)",
-        "sidebar-primary-foreground": "oklch(0.30 0.05 230)",
+        "chart-1": "oklch(0.865 0.127 207.078)",
+        "chart-2": "oklch(0.715 0.143 215.221)",
+        "chart-3": "oklch(0.609 0.126 221.723)",
+        "chart-4": "oklch(0.52 0.105 223.128)",
+        "chart-5": "oklch(0.45 0.085 224.283)",
+        "sidebar-primary": "oklch(0.715 0.143 215.221)",
+        "sidebar-primary-foreground": "oklch(0.302 0.056 229.695)",
       },
     },
   },
@@ -402,30 +624,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.60 0.13 163)",
-        "primary-foreground": "oklch(0.98 0.02 166)",
+        primary: "oklch(0.508 0.118 165.612)",
+        "primary-foreground": "oklch(0.979 0.021 166.113)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.85 0.13 165)",
-        "chart-2": "oklch(0.77 0.15 163)",
-        "chart-3": "oklch(0.70 0.15 162)",
-        "chart-4": "oklch(0.60 0.13 163)",
-        "chart-5": "oklch(0.51 0.10 166)",
-        "sidebar-primary": "oklch(0.60 0.13 163)",
-        "sidebar-primary-foreground": "oklch(0.98 0.02 166)",
+        "chart-1": "oklch(0.845 0.143 164.978)",
+        "chart-2": "oklch(0.696 0.17 162.48)",
+        "chart-3": "oklch(0.596 0.145 163.225)",
+        "chart-4": "oklch(0.508 0.118 165.612)",
+        "chart-5": "oklch(0.432 0.095 166.913)",
+        "sidebar-primary": "oklch(0.596 0.145 163.225)",
+        "sidebar-primary-foreground": "oklch(0.979 0.021 166.113)",
       },
       dark: {
-        primary: "oklch(0.70 0.15 162)",
-        "primary-foreground": "oklch(0.26 0.05 173)",
+        primary: "oklch(0.432 0.095 166.913)",
+        "primary-foreground": "oklch(0.979 0.021 166.113)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.85 0.13 165)",
-        "chart-2": "oklch(0.77 0.15 163)",
-        "chart-3": "oklch(0.70 0.15 162)",
-        "chart-4": "oklch(0.60 0.13 163)",
-        "chart-5": "oklch(0.51 0.10 166)",
-        "sidebar-primary": "oklch(0.77 0.15 163)",
-        "sidebar-primary-foreground": "oklch(0.26 0.05 173)",
+        "chart-1": "oklch(0.845 0.143 164.978)",
+        "chart-2": "oklch(0.696 0.17 162.48)",
+        "chart-3": "oklch(0.596 0.145 163.225)",
+        "chart-4": "oklch(0.508 0.118 165.612)",
+        "chart-5": "oklch(0.432 0.095 166.913)",
+        "sidebar-primary": "oklch(0.696 0.17 162.48)",
+        "sidebar-primary-foreground": "oklch(0.262 0.051 172.552)",
       },
     },
   },
@@ -435,30 +657,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.59 0.26 323)",
-        "primary-foreground": "oklch(0.98 0.02 320)",
+        primary: "oklch(0.518 0.253 323.949)",
+        "primary-foreground": "oklch(0.977 0.017 320.058)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.83 0.13 321)",
-        "chart-2": "oklch(0.75 0.21 322)",
-        "chart-3": "oklch(0.67 0.26 322)",
-        "chart-4": "oklch(0.59 0.26 323)",
-        "chart-5": "oklch(0.52 0.23 324)",
-        "sidebar-primary": "oklch(0.59 0.26 323)",
-        "sidebar-primary-foreground": "oklch(0.98 0.02 320)",
+        "chart-1": "oklch(0.833 0.145 321.434)",
+        "chart-2": "oklch(0.667 0.295 322.15)",
+        "chart-3": "oklch(0.591 0.293 322.896)",
+        "chart-4": "oklch(0.518 0.253 323.949)",
+        "chart-5": "oklch(0.452 0.211 324.591)",
+        "sidebar-primary": "oklch(0.591 0.293 322.896)",
+        "sidebar-primary-foreground": "oklch(0.977 0.017 320.058)",
       },
       dark: {
-        primary: "oklch(0.67 0.26 322)",
-        "primary-foreground": "oklch(0.98 0.02 320)",
+        primary: "oklch(0.452 0.211 324.591)",
+        "primary-foreground": "oklch(0.977 0.017 320.058)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.83 0.13 321)",
-        "chart-2": "oklch(0.75 0.21 322)",
-        "chart-3": "oklch(0.67 0.26 322)",
-        "chart-4": "oklch(0.59 0.26 323)",
-        "chart-5": "oklch(0.52 0.23 324)",
-        "sidebar-primary": "oklch(0.75 0.21 322)",
-        "sidebar-primary-foreground": "oklch(0.98 0.02 320)",
+        "chart-1": "oklch(0.833 0.145 321.434)",
+        "chart-2": "oklch(0.667 0.295 322.15)",
+        "chart-3": "oklch(0.591 0.293 322.896)",
+        "chart-4": "oklch(0.518 0.253 323.949)",
+        "chart-5": "oklch(0.452 0.211 324.591)",
+        "sidebar-primary": "oklch(0.667 0.295 322.15)",
+        "sidebar-primary-foreground": "oklch(0.977 0.017 320.058)",
       },
     },
   },
@@ -468,7 +690,7 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.648 0.2 131.684)",
+        primary: "oklch(0.532 0.157 131.589)",
         "primary-foreground": "oklch(0.986 0.031 120.757)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
@@ -481,7 +703,7 @@ export const THEMES: RegistryItem[] = [
         "sidebar-primary-foreground": "oklch(0.986 0.031 120.757)",
       },
       dark: {
-        primary: "oklch(0.648 0.2 131.684)",
+        primary: "oklch(0.453 0.124 130.933)",
         "primary-foreground": "oklch(0.986 0.031 120.757)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
@@ -501,30 +723,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.51 0.23 277)",
-        "primary-foreground": "oklch(0.96 0.02 272)",
+        primary: "oklch(0.457 0.24 277.023)",
+        "primary-foreground": "oklch(0.962 0.018 272.314)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.79 0.10 275)",
-        "chart-2": "oklch(0.68 0.16 277)",
-        "chart-3": "oklch(0.59 0.20 277)",
-        "chart-4": "oklch(0.51 0.23 277)",
-        "chart-5": "oklch(0.46 0.21 277)",
-        "sidebar-primary": "oklch(0.51 0.23 277)",
-        "sidebar-primary-foreground": "oklch(0.96 0.02 272)",
+        "chart-1": "oklch(0.785 0.115 274.713)",
+        "chart-2": "oklch(0.585 0.233 277.117)",
+        "chart-3": "oklch(0.511 0.262 276.966)",
+        "chart-4": "oklch(0.457 0.24 277.023)",
+        "chart-5": "oklch(0.398 0.195 277.366)",
+        "sidebar-primary": "oklch(0.511 0.262 276.966)",
+        "sidebar-primary-foreground": "oklch(0.962 0.018 272.314)",
       },
       dark: {
-        primary: "oklch(0.59 0.20 277)",
-        "primary-foreground": "oklch(0.96 0.02 272)",
+        primary: "oklch(0.398 0.195 277.366)",
+        "primary-foreground": "oklch(0.962 0.018 272.314)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.79 0.10 275)",
-        "chart-2": "oklch(0.68 0.16 277)",
-        "chart-3": "oklch(0.59 0.20 277)",
-        "chart-4": "oklch(0.51 0.23 277)",
-        "chart-5": "oklch(0.46 0.21 277)",
-        "sidebar-primary": "oklch(0.68 0.16 277)",
-        "sidebar-primary-foreground": "oklch(0.96 0.02 272)",
+        "chart-1": "oklch(0.785 0.115 274.713)",
+        "chart-2": "oklch(0.585 0.233 277.117)",
+        "chart-3": "oklch(0.511 0.262 276.966)",
+        "chart-4": "oklch(0.457 0.24 277.023)",
+        "chart-5": "oklch(0.398 0.195 277.366)",
+        "sidebar-primary": "oklch(0.585 0.233 277.117)",
+        "sidebar-primary-foreground": "oklch(0.962 0.018 272.314)",
       },
     },
   },
@@ -534,30 +756,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.65 0.18 132)",
-        "primary-foreground": "oklch(0.99 0.03 121)",
+        primary: "oklch(0.532 0.157 131.589)",
+        "primary-foreground": "oklch(0.986 0.031 120.757)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.90 0.18 127)",
-        "chart-2": "oklch(0.85 0.21 129)",
-        "chart-3": "oklch(0.77 0.20 131)",
-        "chart-4": "oklch(0.65 0.18 132)",
-        "chart-5": "oklch(0.53 0.14 132)",
-        "sidebar-primary": "oklch(0.65 0.18 132)",
-        "sidebar-primary-foreground": "oklch(0.99 0.03 121)",
+        "chart-1": "oklch(0.897 0.196 126.665)",
+        "chart-2": "oklch(0.768 0.233 130.85)",
+        "chart-3": "oklch(0.648 0.2 131.684)",
+        "chart-4": "oklch(0.532 0.157 131.589)",
+        "chart-5": "oklch(0.453 0.124 130.933)",
+        "sidebar-primary": "oklch(0.648 0.2 131.684)",
+        "sidebar-primary-foreground": "oklch(0.986 0.031 120.757)",
       },
       dark: {
-        primary: "oklch(0.77 0.20 131)",
-        "primary-foreground": "oklch(0.27 0.07 132)",
+        primary: "oklch(0.453 0.124 130.933)",
+        "primary-foreground": "oklch(0.986 0.031 120.757)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.90 0.18 127)",
-        "chart-2": "oklch(0.85 0.21 129)",
-        "chart-3": "oklch(0.77 0.20 131)",
-        "chart-4": "oklch(0.65 0.18 132)",
-        "chart-5": "oklch(0.53 0.14 132)",
-        "sidebar-primary": "oklch(0.85 0.21 129)",
-        "sidebar-primary-foreground": "oklch(0.27 0.07 132)",
+        "chart-1": "oklch(0.897 0.196 126.665)",
+        "chart-2": "oklch(0.768 0.233 130.85)",
+        "chart-3": "oklch(0.648 0.2 131.684)",
+        "chart-4": "oklch(0.532 0.157 131.589)",
+        "chart-5": "oklch(0.453 0.124 130.933)",
+        "sidebar-primary": "oklch(0.768 0.233 130.85)",
+        "sidebar-primary-foreground": "oklch(0.274 0.072 132.109)",
       },
     },
   },
@@ -567,7 +789,7 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.646 0.222 41.116)",
+        primary: "oklch(0.553 0.195 38.402)",
         "primary-foreground": "oklch(0.98 0.016 73.684)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
@@ -580,7 +802,7 @@ export const THEMES: RegistryItem[] = [
         "sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
       },
       dark: {
-        primary: "oklch(0.705 0.213 47.604)",
+        primary: "oklch(0.47 0.157 37.304)",
         "primary-foreground": "oklch(0.98 0.016 73.684)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
@@ -600,30 +822,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.59 0.22 1)",
-        "primary-foreground": "oklch(0.97 0.01 343)",
+        primary: "oklch(0.525 0.223 3.958)",
+        "primary-foreground": "oklch(0.971 0.014 343.198)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.82 0.11 346)",
-        "chart-2": "oklch(0.73 0.18 350)",
-        "chart-3": "oklch(0.66 0.21 354)",
-        "chart-4": "oklch(0.59 0.22 1)",
-        "chart-5": "oklch(0.52 0.20 4)",
-        "sidebar-primary": "oklch(0.59 0.22 1)",
-        "sidebar-primary-foreground": "oklch(0.97 0.01 343)",
+        "chart-1": "oklch(0.823 0.12 346.018)",
+        "chart-2": "oklch(0.656 0.241 354.308)",
+        "chart-3": "oklch(0.592 0.249 0.584)",
+        "chart-4": "oklch(0.525 0.223 3.958)",
+        "chart-5": "oklch(0.459 0.187 3.815)",
+        "sidebar-primary": "oklch(0.592 0.249 0.584)",
+        "sidebar-primary-foreground": "oklch(0.971 0.014 343.198)",
       },
       dark: {
-        primary: "oklch(0.66 0.21 354)",
-        "primary-foreground": "oklch(0.97 0.01 343)",
+        primary: "oklch(0.459 0.187 3.815)",
+        "primary-foreground": "oklch(0.971 0.014 343.198)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.82 0.11 346)",
-        "chart-2": "oklch(0.73 0.18 350)",
-        "chart-3": "oklch(0.66 0.21 354)",
-        "chart-4": "oklch(0.59 0.22 1)",
-        "chart-5": "oklch(0.52 0.20 4)",
-        "sidebar-primary": "oklch(0.73 0.18 350)",
-        "sidebar-primary-foreground": "oklch(0.97 0.01 343)",
+        "chart-1": "oklch(0.823 0.12 346.018)",
+        "chart-2": "oklch(0.656 0.241 354.308)",
+        "chart-3": "oklch(0.592 0.249 0.584)",
+        "chart-4": "oklch(0.525 0.223 3.958)",
+        "chart-5": "oklch(0.459 0.187 3.815)",
+        "sidebar-primary": "oklch(0.656 0.241 354.308)",
+        "sidebar-primary-foreground": "oklch(0.971 0.014 343.198)",
       },
     },
   },
@@ -633,30 +855,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.56 0.25 302)",
-        "primary-foreground": "oklch(0.98 0.01 308)",
+        primary: "oklch(0.496 0.265 301.924)",
+        "primary-foreground": "oklch(0.977 0.014 308.299)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.83 0.11 306)",
-        "chart-2": "oklch(0.72 0.18 306)",
-        "chart-3": "oklch(0.63 0.23 304)",
-        "chart-4": "oklch(0.56 0.25 302)",
-        "chart-5": "oklch(0.50 0.24 302)",
-        "sidebar-primary": "oklch(0.56 0.25 302)",
-        "sidebar-primary-foreground": "oklch(0.98 0.01 308)",
+        "chart-1": "oklch(0.827 0.119 306.383)",
+        "chart-2": "oklch(0.627 0.265 303.9)",
+        "chart-3": "oklch(0.558 0.288 302.321)",
+        "chart-4": "oklch(0.496 0.265 301.924)",
+        "chart-5": "oklch(0.438 0.218 303.724)",
+        "sidebar-primary": "oklch(0.558 0.288 302.321)",
+        "sidebar-primary-foreground": "oklch(0.977 0.014 308.299)",
       },
       dark: {
-        primary: "oklch(0.63 0.23 304)",
-        "primary-foreground": "oklch(0.98 0.01 308)",
+        primary: "oklch(0.438 0.218 303.724)",
+        "primary-foreground": "oklch(0.977 0.014 308.299)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.83 0.11 306)",
-        "chart-2": "oklch(0.72 0.18 306)",
-        "chart-3": "oklch(0.63 0.23 304)",
-        "chart-4": "oklch(0.56 0.25 302)",
-        "chart-5": "oklch(0.50 0.24 302)",
-        "sidebar-primary": "oklch(0.72 0.18 306)",
-        "sidebar-primary-foreground": "oklch(0.98 0.01 308)",
+        "chart-1": "oklch(0.827 0.119 306.383)",
+        "chart-2": "oklch(0.627 0.265 303.9)",
+        "chart-3": "oklch(0.558 0.288 302.321)",
+        "chart-4": "oklch(0.496 0.265 301.924)",
+        "chart-5": "oklch(0.438 0.218 303.724)",
+        "sidebar-primary": "oklch(0.627 0.265 303.9)",
+        "sidebar-primary-foreground": "oklch(0.977 0.014 308.299)",
       },
     },
   },
@@ -666,7 +888,7 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.577 0.245 27.325)",
+        primary: "oklch(0.505 0.213 27.518)",
         "primary-foreground": "oklch(0.971 0.013 17.38)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
@@ -679,7 +901,7 @@ export const THEMES: RegistryItem[] = [
         "sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
       },
       dark: {
-        primary: "oklch(0.637 0.237 25.331)",
+        primary: "oklch(0.444 0.177 26.899)",
         "primary-foreground": "oklch(0.971 0.013 17.38)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
@@ -699,7 +921,7 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.586 0.253 17.585)",
+        primary: "oklch(0.514 0.222 16.935)",
         "primary-foreground": "oklch(0.969 0.015 12.422)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
@@ -712,7 +934,7 @@ export const THEMES: RegistryItem[] = [
         "sidebar-primary-foreground": "oklch(0.969 0.015 12.422)",
       },
       dark: {
-        primary: "oklch(0.645 0.246 16.439)",
+        primary: "oklch(0.455 0.188 13.697)",
         "primary-foreground": "oklch(0.969 0.015 12.422)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
@@ -733,30 +955,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.59 0.14 242)",
-        "primary-foreground": "oklch(0.98 0.01 237)",
+        primary: "oklch(0.5 0.134 242.749)",
+        "primary-foreground": "oklch(0.977 0.013 236.62)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.83 0.10 230)",
-        "chart-2": "oklch(0.75 0.14 233)",
-        "chart-3": "oklch(0.68 0.15 237)",
-        "chart-4": "oklch(0.59 0.14 242)",
-        "chart-5": "oklch(0.50 0.12 243)",
-        "sidebar-primary": "oklch(0.59 0.14 242)",
-        "sidebar-primary-foreground": "oklch(0.98 0.01 237)",
+        "chart-1": "oklch(0.828 0.111 230.318)",
+        "chart-2": "oklch(0.685 0.169 237.323)",
+        "chart-3": "oklch(0.588 0.158 241.966)",
+        "chart-4": "oklch(0.5 0.134 242.749)",
+        "chart-5": "oklch(0.443 0.11 240.79)",
+        "sidebar-primary": "oklch(0.588 0.158 241.966)",
+        "sidebar-primary-foreground": "oklch(0.977 0.013 236.62)",
       },
       dark: {
-        primary: "oklch(0.68 0.15 237)",
-        "primary-foreground": "oklch(0.29 0.06 243)",
+        primary: "oklch(0.443 0.11 240.79)",
+        "primary-foreground": "oklch(0.977 0.013 236.62)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.83 0.10 230)",
-        "chart-2": "oklch(0.75 0.14 233)",
-        "chart-3": "oklch(0.68 0.15 237)",
-        "chart-4": "oklch(0.59 0.14 242)",
-        "chart-5": "oklch(0.50 0.12 243)",
-        "sidebar-primary": "oklch(0.75 0.14 233)",
-        "sidebar-primary-foreground": "oklch(0.29 0.06 243)",
+        "chart-1": "oklch(0.828 0.111 230.318)",
+        "chart-2": "oklch(0.685 0.169 237.323)",
+        "chart-3": "oklch(0.588 0.158 241.966)",
+        "chart-4": "oklch(0.5 0.134 242.749)",
+        "chart-5": "oklch(0.443 0.11 240.79)",
+        "sidebar-primary": "oklch(0.685 0.169 237.323)",
+        "sidebar-primary-foreground": "oklch(0.293 0.066 243.157)",
       },
     },
   },
@@ -766,30 +988,30 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.60 0.10 185)",
-        "primary-foreground": "oklch(0.98 0.01 181)",
+        primary: "oklch(0.511 0.096 186.391)",
+        "primary-foreground": "oklch(0.984 0.014 180.72)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
-        "chart-1": "oklch(0.85 0.13 181)",
-        "chart-2": "oklch(0.78 0.13 182)",
-        "chart-3": "oklch(0.70 0.12 183)",
-        "chart-4": "oklch(0.60 0.10 185)",
-        "chart-5": "oklch(0.51 0.09 186)",
-        "sidebar-primary": "oklch(0.60 0.10 185)",
-        "sidebar-primary-foreground": "oklch(0.98 0.01 181)",
+        "chart-1": "oklch(0.855 0.138 181.071)",
+        "chart-2": "oklch(0.704 0.14 182.503)",
+        "chart-3": "oklch(0.6 0.118 184.704)",
+        "chart-4": "oklch(0.511 0.096 186.391)",
+        "chart-5": "oklch(0.437 0.078 188.216)",
+        "sidebar-primary": "oklch(0.6 0.118 184.704)",
+        "sidebar-primary-foreground": "oklch(0.984 0.014 180.72)",
       },
       dark: {
-        primary: "oklch(0.70 0.12 183)",
-        "primary-foreground": "oklch(0.28 0.04 193)",
+        primary: "oklch(0.437 0.078 188.216)",
+        "primary-foreground": "oklch(0.984 0.014 180.72)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
-        "chart-1": "oklch(0.85 0.13 181)",
-        "chart-2": "oklch(0.78 0.13 182)",
-        "chart-3": "oklch(0.70 0.12 183)",
-        "chart-4": "oklch(0.60 0.10 185)",
-        "chart-5": "oklch(0.51 0.09 186)",
-        "sidebar-primary": "oklch(0.78 0.13 182)",
-        "sidebar-primary-foreground": "oklch(0.28 0.04 193)",
+        "chart-1": "oklch(0.855 0.138 181.071)",
+        "chart-2": "oklch(0.704 0.14 182.503)",
+        "chart-3": "oklch(0.6 0.118 184.704)",
+        "chart-4": "oklch(0.511 0.096 186.391)",
+        "chart-5": "oklch(0.437 0.078 188.216)",
+        "sidebar-primary": "oklch(0.704 0.14 182.503)",
+        "sidebar-primary-foreground": "oklch(0.277 0.046 192.524)",
       },
     },
   },
@@ -799,7 +1021,7 @@ export const THEMES: RegistryItem[] = [
     type: "registry:theme",
     cssVars: {
       light: {
-        primary: "oklch(0.541 0.281 293.009)",
+        primary: "oklch(0.491 0.27 292.581)",
         "primary-foreground": "oklch(0.969 0.016 293.756)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
@@ -812,7 +1034,7 @@ export const THEMES: RegistryItem[] = [
         "sidebar-primary-foreground": "oklch(0.969 0.016 293.756)",
       },
       dark: {
-        primary: "oklch(0.606 0.25 292.717)",
+        primary: "oklch(0.432 0.232 292.759)",
         "primary-foreground": "oklch(0.969 0.016 293.756)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
diff --git a/apps/v4/scripts/build-registry.mts b/apps/v4/scripts/build-registry.mts
index 96444214b3..998e906305 100644
--- a/apps/v4/scripts/build-registry.mts
+++ b/apps/v4/scripts/build-registry.mts
@@ -2,7 +2,7 @@ import { spawn } from "child_process"
 import { promises as fs } from "fs"
 import path from "path"
 import { rimraf } from "rimraf"
-import { registrySchema } from "shadcn/schema"
+import { registrySchema, type RegistryItem } from "shadcn/schema"
 import {
   createStyleMap,
   transformDirection,
@@ -13,6 +13,7 @@ import { Project, ScriptKind } from "ts-morph"
 
 import { getAllBlocks } from "@/lib/blocks"
 import { legacyStyles } from "@/registry/_legacy-styles"
+import { BASE_COLORS } from "@/registry/base-colors"
 import { BASES, type Base } from "@/registry/bases"
 import { PRESETS } from "@/registry/config"
 import { STYLES } from "@/registry/styles"
@@ -21,6 +22,20 @@ import { STYLES } from "@/registry/styles"
 // This is used by the v4 site.
 const WHITELISTED_STYLES = ["new-york-v4"]
 
+// Template directories to archive during build.
+const TEMPLATE_NAMES = [
+  "next-app",
+  "vite-app",
+  "react-router-app",
+  "start-app",
+  "astro-app",
+  "next-monorepo",
+  "vite-monorepo",
+  "react-router-monorepo",
+  "start-monorepo",
+  "astro-monorepo",
+]
+
 // Collect paths for batch prettier formatting at the end.
 const prettierPaths: string[] = []
 
@@ -86,6 +101,9 @@ try {
   console.log("\n⚙️ Building public/r/config.json...")
   await buildConfig()
 
+  console.log("\n📦 Building public/r/templates...")
+  await buildTemplates()
+
   // Copy UI to examples before cleanup.
   console.log("\n📋 Copying UI to examples...")
   await copyUIToExamples()
@@ -94,9 +112,15 @@ try {
   console.log("\n🔄 Building RTL examples...")
   await buildRtlExamples()
 
+  console.log("\n📦 Building public/r/index.json...")
+  await buildIndex()
+
   console.log("\n📋 Building public/r/registries.json...")
   await buildRegistriesJson()
 
+  console.log("\n🎨 Building public/r/colors...")
+  await buildColors()
+
   // Batch format all collected files with prettier at the end.
   if (prettierPaths.length > 0) {
     console.log(`\n✨ Formatting ${prettierPaths.length} files...`)
@@ -599,6 +623,51 @@ async function copyUIToExamples() {
   )
 }
 
+async function buildIndex() {
+  // Import ui/_registry.ts from each base.
+  const baseUiRegistries = await Promise.all(
+    Array.from(BASES).map(async (base) => {
+      const { ui } = await import(
+        `../registry/bases/${base.name}/ui/_registry.ts`
+      )
+      return { baseName: base.name, items: ui as RegistryItem[] }
+    })
+  )
+
+  // Dedupe components by name and merge links across bases.
+  type IndexItem = Omit<RegistryItem, "meta"> & {
+    meta?: { links?: Record<string, RegistryItem["meta"]> }
+  }
+  const componentMap = new Map<string, IndexItem>()
+  for (const { baseName, items } of baseUiRegistries) {
+    for (const item of items) {
+      if (!componentMap.has(item.name)) {
+        const { meta, ...rest } = item
+        componentMap.set(item.name, {
+          ...rest,
+          ...(meta?.links
+            ? { meta: { links: { [baseName]: meta.links } } }
+            : {}),
+        })
+      } else if (item.meta?.links) {
+        const existing = componentMap.get(item.name)!
+        existing.meta = existing.meta || {}
+        existing.meta.links = existing.meta.links || {}
+        existing.meta.links[baseName] = item.meta.links
+      }
+    }
+  }
+
+  // Sort alphabetically by name.
+  const index = Array.from(componentMap.values()).sort((a, b) =>
+    a.name.localeCompare(b.name)
+  )
+
+  const outputPath = path.join(process.cwd(), "public/r/index.json")
+  await fs.writeFile(outputPath, JSON.stringify(index, null, 2))
+  prettierPaths.push(outputPath)
+}
+
 async function buildRegistriesJson() {
   const directoryPath = path.join(process.cwd(), "registry/directory.json")
   const directoryContent = await fs.readFile(directoryPath, "utf8")
@@ -676,3 +745,100 @@ async function batchPrettier(paths: string[]) {
     proc.on("error", reject)
   })
 }
+
+async function buildTemplates() {
+  const templatesDir = path.resolve(process.cwd(), "../../templates")
+  const outputDir = path.join(process.cwd(), "public/r/templates")
+  await fs.mkdir(outputDir, { recursive: true })
+
+  await Promise.all(
+    TEMPLATE_NAMES.map(async (name) => {
+      const templatePath = path.join(templatesDir, name)
+
+      // Verify the template directory exists.
+      try {
+        await fs.access(templatePath)
+      } catch {
+        console.log(`   ⚠️ templates/${name} not found, skipping`)
+        return
+      }
+
+      const outputPath = path.join(outputDir, `${name}.tar.gz`)
+
+      await new Promise<void>((resolve, reject) => {
+        const proc = spawn(
+          "tar",
+          [
+            "-czf",
+            outputPath,
+            "--exclude",
+            "node_modules",
+            "--exclude",
+            ".git",
+            "--exclude",
+            "pnpm-lock.yaml",
+            "-C",
+            templatesDir,
+            name,
+          ],
+          { cwd: process.cwd(), stdio: "pipe" }
+        )
+        let stderr = ""
+        proc.stderr?.on("data", (data) => (stderr += data))
+        proc.on("close", (code) => {
+          if (code !== 0) {
+            reject(new Error(`tar exited with code ${code}: ${stderr}`))
+          } else {
+            resolve()
+          }
+        })
+        proc.on("error", reject)
+      })
+
+      // Zero out the gzip mtime header (bytes 4-7) for deterministic output.
+      const buf = await fs.readFile(outputPath)
+      buf[4] = buf[5] = buf[6] = buf[7] = 0
+      await fs.writeFile(outputPath, buf)
+
+      console.log(`   ✅ ${name}.tar.gz`)
+    })
+  )
+}
+
+async function buildColors() {
+  const colorsTargetPath = path.join(process.cwd(), "public/r/colors")
+  await fs.mkdir(colorsTargetPath, { recursive: true })
+
+  await Promise.all(
+    BASE_COLORS.map(async (baseColor) => {
+      const light = (baseColor.cssVars?.light ?? {}) as Record<string, string>
+      const dark = (baseColor.cssVars?.dark ?? {}) as Record<string, string>
+
+      const cssVarKeys = Object.keys(light).filter(
+        (key) => !key.startsWith("sidebar")
+      )
+
+      const rootVars = cssVarKeys
+        .map((key) => `    --${key}: ${light[key]};`)
+        .join("\n")
+      const darkVars = cssVarKeys
+        .filter((key) => dark[key])
+        .map((key) => `    --${key}: ${dark[key]};`)
+        .join("\n")
+
+      const payload = {
+        inlineColors: { light, dark },
+        cssVars: { light, dark },
+        cssVarsV4: baseColor.cssVars,
+        inlineColorsTemplate:
+          "@tailwind base;\n@tailwind components;\n@tailwind utilities;\n  ",
+        cssVarsTemplate: `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n  :root {\n${rootVars}\n  }\n\n  .dark {\n${darkVars}\n  }\n}\n\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply bg-background text-foreground;\n  }\n}`,
+      }
+
+      const outputPath = path.join(colorsTargetPath, `${baseColor.name}.json`)
+      await fs.writeFile(outputPath, JSON.stringify(payload, null, 2))
+      prettierPaths.push(outputPath)
+      console.log(`   ✅ ${baseColor.name}.json`)
+    })
+  )
+}
diff --git a/apps/v4/scripts/capture-explore.mts b/apps/v4/scripts/capture-explore.mts
new file mode 100644
index 0000000000..edeaab4dea
--- /dev/null
+++ b/apps/v4/scripts/capture-explore.mts
@@ -0,0 +1,114 @@
+import { existsSync, mkdirSync } from "fs"
+import path from "path"
+import puppeteer from "puppeteer"
+import { decodePreset } from "shadcn/preset"
+
+import { EXPLORE_PRESETS } from "../lib/explore"
+
+const PRESETS_PATH = path.join(process.cwd(), "public/presets")
+const force = process.argv.includes("--force")
+
+// ----------------------------------------------------------------------------
+// Capture explore preset screenshots.
+// ----------------------------------------------------------------------------
+async function captureScreenshots() {
+  // Ensure output directory exists.
+  if (!existsSync(PRESETS_PATH)) {
+    mkdirSync(PRESETS_PATH, { recursive: true })
+  }
+
+  const presets = force
+    ? EXPLORE_PRESETS
+    : EXPLORE_PRESETS.filter((code) => {
+        const lightPath = path.join(PRESETS_PATH, `${code}-light.png`)
+        const darkPath = path.join(PRESETS_PATH, `${code}-dark.png`)
+        return !existsSync(lightPath) || !existsSync(darkPath)
+      })
+
+  if (presets.length === 0) {
+    console.log("✨ All screenshots exist, nothing to capture")
+    return
+  }
+
+  const browser = await puppeteer.launch({
+    defaultViewport: {
+      width: 1280,
+      height: 720,
+      deviceScaleFactor: 2,
+    },
+  })
+
+  for (const code of presets) {
+    const decoded = decodePreset(code)
+    if (!decoded) {
+      console.warn(`⚠ Skipping invalid preset code: ${code}`)
+      continue
+    }
+
+    const pageUrl = `http://localhost:4000/preview/radix/preview?preset=${code}`
+
+    const page = await browser.newPage()
+    await page.goto(pageUrl, {
+      waitUntil: "networkidle2",
+    })
+
+    console.log(`- Capturing ${code}...`)
+
+    for (const theme of ["light", "dark"] as const) {
+      const screenshotPath = path.join(
+        PRESETS_PATH,
+        `${code}-${theme}.png`
+      )
+
+      if (!force && existsSync(screenshotPath)) {
+        continue
+      }
+
+      // Set theme and reload page.
+      await page.evaluate((currentTheme) => {
+        localStorage.setItem("theme", currentTheme)
+      }, theme)
+
+      await page.reload({ waitUntil: "networkidle2" })
+
+      // Wait for animations to complete.
+      await new Promise((resolve) => setTimeout(resolve, 1000))
+
+      // Hide Tailwind indicator.
+      await page.evaluate(() => {
+        const indicator = document.querySelector("[data-tailwind-indicator]")
+        if (indicator) {
+          indicator.remove()
+        }
+      })
+
+      // Capture the target element.
+      const element = await page.$('[data-slot="capture-target"]')
+      if (element) {
+        await element.screenshot({
+          path: screenshotPath,
+        })
+      } else {
+        console.warn(`⚠ No [data-slot="capture-target"] found for ${code} (${theme}), capturing full page`)
+        await page.screenshot({
+          path: screenshotPath,
+        })
+      }
+    }
+
+    await page.close()
+  }
+
+  await browser.close()
+}
+
+try {
+  console.log("🔍 Capturing explore preset screenshots...")
+
+  await captureScreenshots()
+
+  console.log("✅ Done!")
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}
diff --git a/apps/v4/styles/globals.css b/apps/v4/styles/globals.css
index d2a128d968..c31ff9342e 100644
--- a/apps/v4/styles/globals.css
+++ b/apps/v4/styles/globals.css
@@ -23,13 +23,13 @@
   --breakpoint-4xl: 2000px;
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);
@@ -203,7 +203,7 @@
 }
 
 @utility section-soft {
-  @apply from-background to-surface/40 dark:bg-background 3xl:fixed:bg-none bg-gradient-to-b;
+  @apply from-background to-surface/40 dark:bg-background 3xl:fixed:bg-none bg-linear-to-b;
 }
 
 @utility theme-container {
diff --git a/deprecated/www/public/r/registries.json b/deprecated/www/public/r/registries.json
index 51cdf8d0ac..ad58f9e498 100644
--- a/deprecated/www/public/r/registries.json
+++ b/deprecated/www/public/r/registries.json
@@ -27,7 +27,7 @@
   "@fancy": "https://fancycomponents.dev/r/{name}.json",
   "@formcn": "https://formcn.dev/r/{name}.json",
   "@heseui": "https://www.heseui.com/r/{name}.json",
-  "@hooks": "https://shadcn-hooks.vercel.app/r/{name}.json",
+  "@hooks": "https://shadcn-hooks.com/r/{name}.json",
   "@intentui": "https://intentui.com/r/{name}",
   "@kibo-ui": "https://www.kibo-ui.com/r/{name}.json",
   "@kokonutui": "https://kokonutui.com/r/{name}.json",
diff --git a/package.json b/package.json
index e8f79874d6..36baaf47a7 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "registry:build": "pnpm --filter=v4 registry:build && pnpm lint:fix && pnpm format:write -- --loglevel silent",
     "registry": "turbo run registry",
     "registry:capture": "pnpm --filter=v4 registry:capture",
+    "explore:capture": "pnpm --filter=v4 explore:capture",
     "examples:build": "pnpm --filter=v4 examples:build",
     "dev": "turbo run dev --parallel",
     "shadcn:dev": "turbo --filter=shadcn dev",
@@ -49,7 +50,7 @@
     "@changesets/cli": "^2.26.1",
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^17.6.3",
-    "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
+    "@ianvs/prettier-plugin-sort-imports": "^4.6.1",
     "@manypkg/cli": "^0.20.0",
     "@typescript-eslint/eslint-plugin": "^8.49.0",
     "@typescript-eslint/parser": "^8.49.0",
@@ -64,8 +65,8 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-tailwindcss": "3.13.1",
     "motion": "^12.12.1",
-    "prettier": "^2.8.8",
-    "pretty-quick": "^3.1.3",
+    "prettier": "^3.4.2",
+    "pretty-quick": "^4.0.0",
     "puppeteer": "^23.6.0",
     "tailwindcss": "^3.4.18",
     "tsx": "^4.1.4",
diff --git a/packages/shadcn/CHANGELOG.md b/packages/shadcn/CHANGELOG.md
index c95f3d2e86..af41afecce 100644
--- a/packages/shadcn/CHANGELOG.md
+++ b/packages/shadcn/CHANGELOG.md
@@ -1,5 +1,55 @@
 # @shadcn/ui
 
+## 4.0.0
+
+### Major Changes
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`605246f93b8c0c56eee0c1b25ccaa526e5cbdc1d`](https://github.com/shadcn-ui/ui/commit/605246f93b8c0c56eee0c1b25ccaa526e5cbdc1d) Thanks [@shadcn](https://github.com/shadcn)! - add --monorepo flag and monorepo support for vite, start and react-router
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`da10396f2b9b248c23bef05234ce222b0868ace4`](https://github.com/shadcn-ui/ui/commit/da10396f2b9b248c23bef05234ce222b0868ace4) Thanks [@shadcn](https://github.com/shadcn)! - add new base colors: mauve, olive, mist and taupe
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`ce1f9259bfe043b3105350a3357249458ac41a1b`](https://github.com/shadcn-ui/ui/commit/ce1f9259bfe043b3105350a3357249458ac41a1b) Thanks [@shadcn](https://github.com/shadcn)! - added `--preset` flag to `init` command
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`642d802eeef86a01a861de20e6da851cd3d8c974`](https://github.com/shadcn-ui/ui/commit/642d802eeef86a01a861de20e6da851cd3d8c974) Thanks [@shadcn](https://github.com/shadcn)! - use multiplicative instead of addition for --radius calc
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`b9b30a23e644c952fbe52db337bfdd427bc6449f`](https://github.com/shadcn-ui/ui/commit/b9b30a23e644c952fbe52db337bfdd427bc6449f) Thanks [@shadcn](https://github.com/shadcn)! - add shadcn/skills
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`642d802eeef86a01a861de20e6da851cd3d8c974`](https://github.com/shadcn-ui/ui/commit/642d802eeef86a01a861de20e6da851cd3d8c974) Thanks [@shadcn](https://github.com/shadcn)! - deprecate --base-color, --src-dir, --no-base-style flags
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`3bc23a60c7c825647265bca0942c330d1e93fcaa`](https://github.com/shadcn-ui/ui/commit/3bc23a60c7c825647265bca0942c330d1e93fcaa) Thanks [@shadcn](https://github.com/shadcn)! - deprecate create and make it an alias of init
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`fae5e7829263d80eb4b19bdcc9b8ea595060b837`](https://github.com/shadcn-ui/ui/commit/fae5e7829263d80eb4b19bdcc9b8ea595060b837) Thanks [@shadcn](https://github.com/shadcn)! - add astro template support
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`4bdd23291c499159098e2b2e27b738041a514558`](https://github.com/shadcn-ui/ui/commit/4bdd23291c499159098e2b2e27b738041a514558) Thanks [@shadcn](https://github.com/shadcn)! - add --reinstall flag for init
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`4fa2ef66ed6e99a02ea4524e45568440968a6c27`](https://github.com/shadcn-ui/ui/commit/4fa2ef66ed6e99a02ea4524e45568440968a6c27) Thanks [@shadcn](https://github.com/shadcn)! - add shadcn docs command
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`642d802eeef86a01a861de20e6da851cd3d8c974`](https://github.com/shadcn-ui/ui/commit/642d802eeef86a01a861de20e6da851cd3d8c974) Thanks [@shadcn](https://github.com/shadcn)! - add --base to shadcn init
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`642d802eeef86a01a861de20e6da851cd3d8c974`](https://github.com/shadcn-ui/ui/commit/642d802eeef86a01a861de20e6da851cd3d8c974) Thanks [@shadcn](https://github.com/shadcn)! - deprecate --css-variables flag from shadcn add
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`0d3f6a0812c51b36a6c7618e3b9eadd758860321`](https://github.com/shadcn-ui/ui/commit/0d3f6a0812c51b36a6c7618e3b9eadd758860321) Thanks [@shadcn](https://github.com/shadcn)! - deprecate registry:build and registry:mcp
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`4307815c0fa7576668e1d39999a284e350dbfc66`](https://github.com/shadcn-ui/ui/commit/4307815c0fa7576668e1d39999a284e350dbfc66) Thanks [@shadcn](https://github.com/shadcn)! - add preset code support
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`5f9691670188b5b411f84d16ca7db2693c922155`](https://github.com/shadcn-ui/ui/commit/5f9691670188b5b411f84d16ca7db2693c922155) Thanks [@shadcn](https://github.com/shadcn)! - refactor shadcn info command to output llm-friendly output
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`642d802eeef86a01a861de20e6da851cd3d8c974`](https://github.com/shadcn-ui/ui/commit/642d802eeef86a01a861de20e6da851cd3d8c974) Thanks [@shadcn](https://github.com/shadcn)! - refactor ordering of updaters
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`646f884e8fddd196cff3e118184733522516193d`](https://github.com/shadcn-ui/ui/commit/646f884e8fddd196cff3e118184733522516193d) Thanks [@shadcn](https://github.com/shadcn)! - add --dry-run, --diff and --view to the add command
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`642d802eeef86a01a861de20e6da851cd3d8c974`](https://github.com/shadcn-ui/ui/commit/642d802eeef86a01a861de20e6da851cd3d8c974) Thanks [@shadcn](https://github.com/shadcn)! - getTailwindCssFile fallback to config.tailwind.css
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`642d802eeef86a01a861de20e6da851cd3d8c974`](https://github.com/shadcn-ui/ui/commit/642d802eeef86a01a861de20e6da851cd3d8c974) Thanks [@shadcn](https://github.com/shadcn)! - add support for hooks, lib and ui install for workspaces
+
+### Patch Changes
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`4a96d95bde1bb2e692e61808ccc6b9c8e00676f4`](https://github.com/shadcn-ui/ui/commit/4a96d95bde1bb2e692e61808ccc6b9c8e00676f4) Thanks [@shadcn](https://github.com/shadcn)! - fix kbd display in tooltip
+
+- [#9804](https://github.com/shadcn-ui/ui/pull/9804) [`2ddd920e4d7c251eb96c88398b98bfe1f6ea0b8a`](https://github.com/shadcn-ui/ui/commit/2ddd920e4d7c251eb96c88398b98bfe1f6ea0b8a) Thanks [@shadcn](https://github.com/shadcn)! - warn if in monorepo and cwd not set
+
+- [#9708](https://github.com/shadcn-ui/ui/pull/9708) [`82f03d0f1dd12efb5395a0b8689533588d778d0c`](https://github.com/shadcn-ui/ui/commit/82f03d0f1dd12efb5395a0b8689533588d778d0c) Thanks [@shadcn](https://github.com/shadcn)! - handling of apply directive inside utility
+
 ## 3.8.5
 
 ### Patch Changes
diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json
index 20396f5a20..7ec9a08ff3 100644
--- a/packages/shadcn/package.json
+++ b/packages/shadcn/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shadcn",
-  "version": "3.8.5",
+  "version": "4.0.0",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"
@@ -51,6 +51,10 @@
       "types": "./dist/icons/index.d.ts",
       "default": "./dist/icons/index.js"
     },
+    "./preset": {
+      "types": "./dist/preset/index.d.ts",
+      "default": "./dist/preset/index.js"
+    },
     "./tailwind.css": {
       "style": "./dist/tailwind.css"
     }
@@ -61,7 +65,7 @@
     "build": "tsup",
     "typecheck": "tsc --noEmit",
     "clean": "rimraf dist && rimraf components",
-    "start:dev": "cross-env REGISTRY_URL=http://localhost:4000/r node dist/index.js",
+    "start:dev": "cross-env REGISTRY_URL=http://localhost:4000/r SHADCN_TEMPLATE_DIR=../../templates node dist/index.js",
     "start:prod": "cross-env REGISTRY_URL=https://ui.shadcn.com/r node dist/index.js",
     "start": "node dist/index.js",
     "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
@@ -71,7 +75,7 @@
     "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next",
     "pub:release": "pnpm build && pnpm publish --access public",
     "test": "vitest run",
-    "test:dev": "REGISTRY_URL=http://localhost:4000/r vitest run",
+    "test:dev": "REGISTRY_URL=http://localhost:4000/r SHADCN_TEMPLATE_DIR=../../templates vitest run",
     "mcp:inspect": "pnpm dlx @modelcontextprotocol/inspector node dist/index.js mcp"
   },
   "dependencies": {
diff --git a/packages/shadcn/src/commands/add.ts b/packages/shadcn/src/commands/add.ts
index e2cc919418..bfe30c165d 100644
--- a/packages/shadcn/src/commands/add.ts
+++ b/packages/shadcn/src/commands/add.ts
@@ -1,13 +1,21 @@
 import path from "path"
 import { runInit } from "@/src/commands/init"
 import { preFlightAdd } from "@/src/preflights/preflight-add"
+import {
+  promptForBase,
+  promptForPreset,
+  resolveRegistryBaseConfig,
+} from "@/src/preset/presets"
 import { getRegistryItems, getShadcnRegistryIndex } from "@/src/registry/api"
 import { DEPRECATED_COMPONENTS } from "@/src/registry/constants"
 import { clearRegistryContext } from "@/src/registry/context"
 import { registryItemTypeSchema } from "@/src/registry/schema"
 import { isUniversalRegistryItem } from "@/src/registry/utils"
+import { getTemplateForFramework } from "@/src/templates/index"
 import { addComponents } from "@/src/utils/add-components"
 import { createProject } from "@/src/utils/create-project"
+import { dryRunComponents } from "@/src/utils/dry-run"
+import { formatDryRunResult } from "@/src/utils/dry-run-formatter"
 import { loadEnvFiles } from "@/src/utils/env-loader"
 import * as ERRORS from "@/src/utils/errors"
 import { createConfig, getConfig } from "@/src/utils/get-config"
@@ -16,6 +24,7 @@ import { handleError } from "@/src/utils/handle-error"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
 import { ensureRegistriesInConfig } from "@/src/utils/registries"
+import { spinner } from "@/src/utils/spinner"
 import { updateAppIndex } from "@/src/utils/update-app-index"
 import { Command } from "commander"
 import prompts from "prompts"
@@ -29,8 +38,9 @@ export const addOptionsSchema = z.object({
   all: z.boolean(),
   path: z.string().optional(),
   silent: z.boolean(),
-  srcDir: z.boolean().optional(),
-  cssVariables: z.boolean(),
+  dryRun: z.boolean(),
+  diff: z.union([z.string(), z.literal(true)]).optional(),
+  view: z.union([z.string(), z.literal(true)]).optional(),
 })
 
 export const add = new Command()
@@ -47,27 +57,21 @@ export const add = new Command()
   .option("-a, --all", "add all available components", false)
   .option("-p, --path <path>", "the path to add the component to.")
   .option("-s, --silent", "mute output.", false)
-  .option(
-    "--src-dir",
-    "use the src directory when creating a new project.",
-    false
-  )
-  .option(
-    "--no-src-dir",
-    "do not use the src directory when creating a new project."
-  )
-  .option("--css-variables", "use css variables for theming.", true)
-  .option("--no-css-variables", "do not use css variables for theming.")
+  .option("--dry-run", "preview changes without writing files.", false)
+  .option("--diff [path]", "show diff for a file.")
+  .option("--view [path]", "show file contents.")
   .action(async (components, opts) => {
     try {
       const options = addOptionsSchema.parse({
         components,
-        cwd: path.resolve(opts.cwd),
         ...opts,
+        cwd: path.resolve(opts.cwd),
       })
 
       await loadEnvFiles(options.cwd)
 
+      const isDryRun = options.dryRun || options.diff || options.view
+
       let initialConfig = await getConfig(options.cwd)
       if (!initialConfig) {
         initialConfig = createConfig({
@@ -101,13 +105,13 @@ export const add = new Command()
           itemType !== "registry:style" &&
           itemType !== "registry:base"
 
-        if (isUniversalRegistryItem(registryItem)) {
+        if (isUniversalRegistryItem(registryItem) && !isDryRun) {
           await addComponents(components, initialConfig, options)
           return
         }
-
         if (
           !options.yes &&
+          !isDryRun &&
           (itemType === "registry:style" || itemType === "registry:theme")
         ) {
           logger.break()
@@ -169,6 +173,23 @@ export const add = new Command()
           process.exit(1)
         }
 
+        // Infer template from project framework.
+        const inferredTemplate = getTemplateForFramework(
+          projectInfo?.framework.name
+        )
+
+        // Prompt for base and preset.
+        const base = await promptForBase()
+        const { url: initUrl } = await promptForPreset({
+          rtl: false,
+          base,
+          template: inferredTemplate,
+        })
+
+        // Resolve registry:base config.
+        const { registryBaseConfig, installStyleIndex } =
+          await resolveRegistryBaseConfig(initUrl, options.cwd)
+
         config = await runInit({
           cwd: options.cwd,
           yes: true,
@@ -177,11 +198,11 @@ export const add = new Command()
           skipPreflight: false,
           silent: options.silent && !hasNewRegistries,
           isNewProject: false,
-          srcDir: options.srcDir,
-          cssVariables: options.cssVariables,
-          installStyleIndex: shouldInstallStyleIndex,
-          baseColor: shouldInstallStyleIndex ? undefined : "neutral",
-          components: options.components,
+          cssVariables: true,
+          rtl: false,
+          installStyleIndex,
+          components: [initUrl, ...(options.components ?? [])],
+          registryBaseConfig,
         })
         initHasRun = true
       }
@@ -192,7 +213,6 @@ export const add = new Command()
         const { projectPath, template } = await createProject({
           cwd: options.cwd,
           force: options.overwrite,
-          srcDir: options.srcDir,
           components: options.components,
         })
         if (!projectPath) {
@@ -201,30 +221,35 @@ export const add = new Command()
         }
         options.cwd = projectPath
 
-        if (template === "next-monorepo") {
-          options.cwd = path.resolve(options.cwd, "apps/web")
-          config = await getConfig(options.cwd)
-        } else {
-          config = await runInit({
-            cwd: options.cwd,
-            yes: true,
-            force: true,
-            defaults: false,
-            skipPreflight: true,
-            silent: !hasNewRegistries && options.silent,
-            isNewProject: true,
-            srcDir: options.srcDir,
-            cssVariables: options.cssVariables,
-            installStyleIndex: shouldInstallStyleIndex,
-            baseColor: shouldInstallStyleIndex ? undefined : "neutral",
-            components: options.components,
-          })
-          initHasRun = true
+        // Prompt for base and preset.
+        const selectedBase = await promptForBase()
+        const { url: initUrl } = await promptForPreset({
+          rtl: false,
+          base: selectedBase,
+          template,
+        })
+        const { registryBaseConfig, installStyleIndex } =
+          await resolveRegistryBaseConfig(initUrl, options.cwd)
 
-          shouldUpdateAppIndex =
-            options.components?.length === 1 &&
-            !!options.components[0].match(/\/chat\/b\//)
-        }
+        config = await runInit({
+          cwd: options.cwd,
+          yes: true,
+          force: true,
+          defaults: false,
+          skipPreflight: true,
+          silent: !hasNewRegistries && options.silent,
+          isNewProject: true,
+          cssVariables: true,
+          rtl: false,
+          installStyleIndex,
+          components: [initUrl, ...(options.components ?? [])],
+          registryBaseConfig,
+        })
+        initHasRun = true
+
+        shouldUpdateAppIndex =
+          options.components?.length === 1 &&
+          !!options.components[0].match(/\/chat\/b\//)
       }
 
       if (!config) {
@@ -238,10 +263,35 @@ export const add = new Command()
         config,
         {
           silent: options.silent || hasNewRegistries,
+          writeFile: !isDryRun,
         }
       )
       config = updatedConfig
 
+      // Dry-run mode: preview changes without writing files.
+      // --diff and --view imply --dry-run.
+      if (isDryRun) {
+        const dryRunSpinner = spinner("Resolving items.", {
+          silent: options.silent,
+        }).start()
+        const dryRunResult = await dryRunComponents(
+          options.components,
+          config,
+          {
+            overwrite: options.overwrite,
+          }
+        )
+        dryRunSpinner.stop()
+
+        logger.log(
+          formatDryRunResult(dryRunResult, options.components, {
+            diff: options.diff,
+            view: options.view,
+          })
+        )
+        return
+      }
+
       if (!initHasRun) {
         await addComponents(options.components, config, options)
       }
diff --git a/packages/shadcn/src/commands/build.ts b/packages/shadcn/src/commands/build.ts
index b6992ef331..5515f94689 100644
--- a/packages/shadcn/src/commands/build.ts
+++ b/packages/shadcn/src/commands/build.ts
@@ -1,6 +1,7 @@
 import * as fs from "fs/promises"
 import * as path from "path"
 import { preFlightBuild } from "@/src/preflights/preflight-build"
+import { SHADCN_URL } from "@/src/registry/constants"
 import { registryItemSchema, registrySchema } from "@/src/schema"
 import { handleError } from "@/src/utils/handle-error"
 import { highlighter } from "@/src/utils/highlighter"
diff --git a/packages/shadcn/src/commands/create.ts b/packages/shadcn/src/commands/create.ts
deleted file mode 100644
index 53357cf6b4..0000000000
--- a/packages/shadcn/src/commands/create.ts
+++ /dev/null
@@ -1,395 +0,0 @@
-import path from "path"
-import { getPreset, getPresets, getRegistryItems } from "@/src/registry/api"
-import { configWithDefaults } from "@/src/registry/config"
-import { REGISTRY_URL } from "@/src/registry/constants"
-import { clearRegistryContext } from "@/src/registry/context"
-import { isUrl } from "@/src/registry/utils"
-import { Preset } from "@/src/schema"
-import { addComponents } from "@/src/utils/add-components"
-import { handleError } from "@/src/utils/handle-error"
-import { highlighter } from "@/src/utils/highlighter"
-import { logger } from "@/src/utils/logger"
-import { ensureRegistriesInConfig } from "@/src/utils/registries"
-import { updateFiles } from "@/src/utils/updaters/update-files"
-import { Command } from "commander"
-import dedent from "dedent"
-import open from "open"
-import prompts from "prompts"
-import validateProjectName from "validate-npm-package-name"
-
-import { initOptionsSchema, runInit } from "./init"
-
-const SHADCN_URL = REGISTRY_URL.replace(/\/r\/?$/, "")
-
-const CREATE_TEMPLATES = {
-  next: "Next.js",
-  vite: "Vite",
-  start: "TanStack Start",
-} as const
-
-type Template = keyof typeof CREATE_TEMPLATES
-
-export const create = new Command()
-  .name("create")
-  .description("create a new project with shadcn/ui")
-  .argument("[name]", "the name of your project")
-  .option(
-    "-t, --template <template>",
-    "the template to use. e.g. next, start or vite"
-  )
-  .option("-p, --preset [name]", "use a preset configuration")
-  .option(
-    "-c, --cwd <cwd>",
-    "the working directory. defaults to the current directory.",
-    process.cwd()
-  )
-  .option(
-    "--src-dir",
-    "use the src directory when creating a new project.",
-    false
-  )
-  .option(
-    "--no-src-dir",
-    "do not use the src directory when creating a new project."
-  )
-  .option("-y, --yes", "skip confirmation prompt.", true)
-  .option("--rtl", "enable RTL support.", false)
-  .action(async (name, opts) => {
-    try {
-      // If no preset provided, open create URL with template and rtl params.
-      const hasNoPreset = !name && !opts.preset
-      if (hasNoPreset) {
-        const searchParams: Record<string, string> = {}
-        if (opts.template) {
-          searchParams.template = opts.template
-        }
-        if (opts.rtl) {
-          searchParams.rtl = "true"
-
-          // Recommend base-ui in RTL.
-          searchParams.base = "base"
-        }
-        const createUrl = getShadcnCreateUrl(
-          Object.keys(searchParams).length > 0 ? searchParams : undefined
-        )
-        logger.log("Build your own shadcn/ui.")
-        logger.log(
-          `You will be taken to ${highlighter.info(
-            createUrl
-          )} to build your custom design system.`
-        )
-        logger.break()
-
-        const { proceed } = await prompts({
-          type: "confirm",
-          name: "proceed",
-          message: "Open in browser?",
-          initial: true,
-        })
-
-        if (proceed) {
-          await open(createUrl)
-        }
-
-        process.exit(0)
-      }
-
-      // Prompt for project name if not provided.
-      let projectName = name
-      if (!projectName) {
-        const { enteredName } = await prompts({
-          type: "text",
-          name: "enteredName",
-          message: "What is your project named?",
-          initial: opts.template ? `${opts.template}-app` : "my-app",
-          format: (value: string) => value.trim(),
-          validate: (name) => {
-            const validation = validateProjectName(
-              path.basename(path.resolve(name))
-            )
-            if (validation.validForNewPackages) {
-              return true
-            }
-            return "Invalid project name. Name should be lowercase, URL-friendly, and not start with a period or underscore."
-          },
-        })
-
-        if (!enteredName) {
-          process.exit(0)
-        }
-
-        projectName = enteredName
-      }
-
-      // Prompt for template if not provided.
-      let template = opts.template
-      if (!template) {
-        const { selectedTemplate } = await prompts({
-          type: "select",
-          name: "selectedTemplate",
-          message: `Which ${highlighter.info(
-            "template"
-          )} would you like to use?`,
-          choices: Object.entries(CREATE_TEMPLATES).map(([key, value]) => ({
-            title: value,
-            value: key,
-          })),
-        })
-
-        if (!selectedTemplate) {
-          process.exit(0)
-        }
-
-        template = selectedTemplate
-      }
-
-      // Handle preset selection.
-      const presetResult = await handlePresetOption(
-        opts.preset ?? true,
-        opts.rtl
-      )
-
-      if (!presetResult) {
-        process.exit(0)
-      }
-
-      // Determine initUrl and baseColor based on preset type.
-      let initUrl: string
-      let baseColor: string
-
-      if ("_isUrl" in presetResult) {
-        // User provided a URL directly.
-        const url = new URL(presetResult.url)
-        if (opts.rtl) {
-          url.searchParams.set("rtl", "true")
-        }
-        initUrl = url.toString()
-        baseColor = url.searchParams.get("baseColor") ?? "neutral"
-      } else {
-        // User selected a preset by name.
-        initUrl = buildInitUrl(presetResult, opts.rtl)
-        baseColor = presetResult.baseColor
-      }
-
-      // Fetch the registry:base item to get its config.
-      let shadowConfig = configWithDefaults({})
-      const { config: updatedConfig } = await ensureRegistriesInConfig(
-        [initUrl],
-        shadowConfig,
-        { silent: true }
-      )
-      shadowConfig = updatedConfig
-
-      const [item] = await getRegistryItems([initUrl], {
-        config: shadowConfig,
-      })
-
-      // Extract config from registry:base item.
-      let registryBaseConfig = undefined
-      if (item?.type === "registry:base" && item.config) {
-        registryBaseConfig = item.config
-      }
-
-      const options = initOptionsSchema.parse({
-        cwd: path.resolve(opts.cwd),
-        name: projectName,
-        components: [initUrl],
-        yes: opts.yes,
-        defaults: false,
-        force: false,
-        silent: false,
-        isNewProject: true,
-        srcDir: opts.srcDir,
-        cssVariables: true,
-        rtl: opts.rtl,
-        template,
-        baseColor,
-        installStyleIndex: false,
-        registryBaseConfig,
-        skipPreflight: false,
-      })
-
-      const config = await runInit(options)
-
-      // Add component example.
-      if (config) {
-        const components = ["component-example"]
-        if (opts.rtl) {
-          components.push("direction")
-        }
-        await addComponents(components, config, {
-          silent: true,
-          overwrite: true,
-        })
-
-        const templateFiles = getTemplateFiles(template as Template)
-        if (templateFiles.length > 0) {
-          await updateFiles(templateFiles, config, {
-            overwrite: true,
-            silent: true,
-          })
-        }
-      }
-
-      logger.log(
-        `${highlighter.success(
-          "Success!"
-        )} Project initialization completed.\nYou may now add components.`
-      )
-      logger.break()
-    } catch (error) {
-      logger.break()
-      handleError(error)
-    } finally {
-      clearRegistryContext()
-    }
-  })
-
-function buildInitUrl(preset: Preset, rtl: boolean) {
-  const params = new URLSearchParams({
-    base: preset.base,
-    style: preset.style,
-    baseColor: preset.baseColor,
-    theme: preset.theme,
-    iconLibrary: preset.iconLibrary,
-    font: preset.font,
-    rtl: String(rtl || preset.rtl),
-    menuAccent: preset.menuAccent,
-    menuColor: preset.menuColor,
-    radius: preset.radius,
-  })
-
-  return `${getShadcnInitUrl()}?${params.toString()}`
-}
-
-async function handlePresetOption(presetArg: string | boolean, rtl: boolean) {
-  // If --preset is used without a name, show interactive list.
-  if (presetArg === true) {
-    const presets = await getPresets()
-
-    const { selectedPreset } = await prompts({
-      type: "select",
-      name: "selectedPreset",
-      message: `Which ${highlighter.info("preset")} would you like to use?`,
-      choices: [
-        ...presets.map((preset) => ({
-          title: preset.title,
-          description: preset.description,
-          value: preset.name,
-        })),
-        {
-          title: "Custom",
-          description: "Build your own on https://ui.shadcn.com",
-          value: "custom",
-        },
-      ],
-    })
-
-    if (!selectedPreset) {
-      return null
-    }
-
-    if (selectedPreset === "custom") {
-      const url = getShadcnCreateUrl(rtl ? { rtl: "true" } : undefined)
-      logger.info(`\nOpening ${highlighter.info(url)} in your browser...\n`)
-      await open(url)
-      return null
-    }
-
-    return presets.find((p) => p.name === selectedPreset) ?? null
-  }
-
-  // If --preset NAME or URL is provided.
-  if (typeof presetArg === "string") {
-    // Check if it's a URL.
-    if (isUrl(presetArg)) {
-      return { _isUrl: true, url: presetArg } as const
-    }
-
-    // Otherwise, fetch that preset by name.
-    const preset = await getPreset(presetArg)
-
-    if (!preset) {
-      const presets = await getPresets()
-      const presetNames = presets.map((p) => p.name).join(", ")
-      logger.error(
-        `Preset "${presetArg}" not found. Available presets: ${presetNames}`
-      )
-      process.exit(1)
-    }
-
-    return preset
-  }
-
-  return null
-}
-
-function getTemplateFiles(template: Template) {
-  switch (template) {
-    case "vite":
-      return [
-        {
-          type: "registry:file" as const,
-          path: "src/App.tsx",
-          target: "src/App.tsx",
-          content: dedent`import { ComponentExample } from "@/components/component-example";
-
-export function App() {
-  return <ComponentExample />;
-}
-
-export default App;
-`,
-        },
-      ]
-    case "next":
-      return [
-        {
-          type: "registry:page" as const,
-          path: "app/page.tsx",
-          target: "app/page.tsx",
-          content: dedent`import { ComponentExample } from "@/components/component-example";
-
-export default function Page() {
-  return <ComponentExample />;
-}
-`,
-        },
-      ]
-    case "start":
-      return [
-        {
-          type: "registry:file" as const,
-          path: "src/routes/index.tsx",
-          target: "src/routes/index.tsx",
-          content: dedent`import { createFileRoute } from "@tanstack/react-router";
-import { ComponentExample } from "@/components/component-example";
-
-export const Route = createFileRoute("/")({ component: App });
-
-function App() {
-  return (
-    <ComponentExample />
-  );
-}
-`,
-        },
-      ]
-    default:
-      return []
-  }
-}
-
-function getShadcnCreateUrl(searchParams?: Record<string, string>) {
-  const url = new URL(`${SHADCN_URL}/create`)
-  if (searchParams) {
-    for (const [key, value] of Object.entries(searchParams)) {
-      url.searchParams.set(key, value)
-    }
-  }
-  return url.toString()
-}
-
-function getShadcnInitUrl() {
-  return `${SHADCN_URL}/init`
-}
diff --git a/packages/shadcn/src/commands/diff.ts b/packages/shadcn/src/commands/diff.ts
index 3e1dfa5738..677d5224c8 100644
--- a/packages/shadcn/src/commands/diff.ts
+++ b/packages/shadcn/src/commands/diff.ts
@@ -8,6 +8,11 @@ import {
 } from "@/src/registry/api"
 import { registryIndexSchema } from "@/src/schema"
 import { Config, getConfig } from "@/src/utils/get-config"
+import {
+  formatMonorepoMessage,
+  getMonorepoTargets,
+  isMonorepoRoot,
+} from "@/src/utils/get-monorepo-info"
 import { handleError } from "@/src/utils/handle-error"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
@@ -25,7 +30,7 @@ const updateOptionsSchema = z.object({
 
 export const diff = new Command()
   .name("diff")
-  .description("check for updates against the registry")
+  .description("[DEPRECATED] Use `add [component] --diff` instead.")
   .argument("[component]", "the component name")
   .option("-y, --yes", "skip confirmation prompt.", false)
   .option(
@@ -49,6 +54,15 @@ export const diff = new Command()
 
       const config = await getConfig(cwd)
       if (!config) {
+        // Check if we're in a monorepo root.
+        if (await isMonorepoRoot(cwd)) {
+          const targets = await getMonorepoTargets(cwd)
+          if (targets.length > 0) {
+            formatMonorepoMessage("diff [component]", targets)
+            process.exit(1)
+          }
+        }
+
         logger.warn(
           `Configuration is missing. Please run ${highlighter.success(
             `init`
diff --git a/packages/shadcn/src/commands/docs.ts b/packages/shadcn/src/commands/docs.ts
new file mode 100644
index 0000000000..798c9bdb0f
--- /dev/null
+++ b/packages/shadcn/src/commands/docs.ts
@@ -0,0 +1,90 @@
+import path from "path"
+import { getShadcnRegistryIndex } from "@/src/registry/api"
+import { getBase, getConfig } from "@/src/utils/get-config"
+import { handleError } from "@/src/utils/handle-error"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import { Command } from "commander"
+
+export const docs = new Command()
+  .name("docs")
+  .description("get docs, api references and usage examples for components")
+  .argument("<components...>", "component names")
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .option(
+    "-b, --base <base>",
+    "the base to use either 'base' or 'radix'. defaults to project base."
+  )
+  .option("--json", "output as JSON.", false)
+  .action(async (components, opts) => {
+    try {
+      const cwd = path.resolve(opts.cwd)
+      const config = await getConfig(cwd)
+      const base = opts.base ?? getBase(config?.style)
+
+      const index = await getShadcnRegistryIndex()
+
+      if (!index) {
+        logger.error("Failed to fetch the registry index.")
+        process.exit(1)
+      }
+
+      const results: {
+        component: string
+        base: string
+        links: Record<string, string>
+      }[] = []
+
+      for (const component of components) {
+        const item = index.find((entry) => entry.name === component)
+
+        if (!item) {
+          logger.error(
+            `Component ${highlighter.info(
+              component
+            )} not found in the shadcn registry.`
+          )
+          process.exit(1)
+        }
+
+        const links = (
+          item.meta?.links as Record<string, Record<string, string>>
+        )?.[base]
+
+        if (!links || Object.keys(links).length === 0) {
+          logger.warn(
+            `No documentation links available for ${highlighter.info(
+              component
+            )}.`
+          )
+          continue
+        }
+
+        results.push({ component, base, links })
+      }
+
+      if (opts.json) {
+        console.log(JSON.stringify({ base, results }, null, 2))
+        return
+      }
+
+      // Compute max key length across all results for consistent alignment.
+      const maxKeyLength = Math.max(
+        ...results.flatMap((r) => Object.keys(r.links).map((k) => k.length))
+      )
+
+      for (const { component, links } of results) {
+        logger.log(highlighter.info(component))
+        for (const [key, value] of Object.entries(links)) {
+          logger.log(`  - ${key.padEnd(maxKeyLength + 2)}${value}`)
+        }
+        logger.break()
+      }
+    } catch (error) {
+      handleError(error)
+    }
+  })
diff --git a/packages/shadcn/src/commands/info.ts b/packages/shadcn/src/commands/info.ts
index 2ff0f08b90..ab5afddd31 100644
--- a/packages/shadcn/src/commands/info.ts
+++ b/packages/shadcn/src/commands/info.ts
@@ -1,9 +1,25 @@
-import { getConfig } from "@/src/utils/get-config"
-import { getProjectInfo } from "@/src/utils/get-project-info"
+import { existsSync } from "fs"
+import path from "path"
+import { SHADCN_URL } from "@/src/registry/constants"
+import { getBase, getConfig } from "@/src/utils/get-config"
+import {
+  formatMonorepoMessage,
+  getMonorepoTargets,
+  isMonorepoRoot,
+} from "@/src/utils/get-monorepo-info"
+import {
+  getProjectComponents,
+  getProjectInfo,
+  type ProjectInfo,
+} from "@/src/utils/get-project-info"
 import { handleError } from "@/src/utils/handle-error"
+import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
 import { Command } from "commander"
 
+const GITHUB_RAW_BASE =
+  "https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases"
+
 export const info = new Command()
   .name("info")
   .description("get information about your project")
@@ -12,14 +28,220 @@ export const info = new Command()
     "the working directory. defaults to the current directory.",
     process.cwd()
   )
+  .option("--json", "output as JSON.", false)
   .action(async (opts) => {
     try {
-      logger.info("> project info")
-      console.log(await getProjectInfo(opts.cwd))
-      logger.break()
-      logger.info("> components.json")
-      console.log(await getConfig(opts.cwd))
+      const cwd = path.resolve(opts.cwd)
+
+      // Check if we're in a monorepo root.
+      if (
+        !existsSync(path.resolve(cwd, "components.json")) &&
+        (await isMonorepoRoot(cwd))
+      ) {
+        const targets = await getMonorepoTargets(cwd)
+        if (targets.length > 0) {
+          if (opts.json) {
+            console.log(
+              JSON.stringify(
+                {
+                  error: "monorepo_root",
+                  message:
+                    "You are running info from a monorepo root. Use the -c flag to specify a workspace.",
+                  targets: targets.map((t) => t.name),
+                },
+                null,
+                2
+              )
+            )
+          } else {
+            formatMonorepoMessage("info", targets)
+          }
+          process.exit(1)
+        }
+      }
+
+      const projectInfo = await getProjectInfo(cwd)
+      const config = await getConfig(cwd)
+      const components = await getProjectComponents(cwd)
+      const base = getBase(config?.style)
+      const data = collectInfo(projectInfo, config, components, base)
+
+      if (opts.json) {
+        console.log(JSON.stringify(data, null, 2))
+        return
+      }
+
+      printInfo(data)
     } catch (error) {
       handleError(error)
     }
   })
+
+function getRegistries(
+  registries: Record<string, string | { url: string }> | undefined
+) {
+  if (!registries) {
+    return {}
+  }
+
+  const result: Record<string, string> = {}
+  for (const [name, value] of Object.entries(registries)) {
+    result[name] = typeof value === "string" ? value : value.url
+  }
+  return result
+}
+
+function collectInfo(
+  projectInfo: ProjectInfo | null,
+  config: Awaited<ReturnType<typeof getConfig>>,
+  components: string[],
+  base: string
+) {
+  return {
+    project: projectInfo
+      ? {
+          framework: projectInfo.framework.label,
+          frameworkName: projectInfo.framework.name,
+          frameworkVersion: projectInfo.frameworkVersion ?? null,
+          srcDirectory: projectInfo.isSrcDir,
+          rsc: projectInfo.isRSC,
+          typescript: projectInfo.isTsx,
+          tailwindVersion: projectInfo.tailwindVersion ?? null,
+          tailwindConfig: projectInfo.tailwindConfigFile ?? null,
+          tailwindCss: projectInfo.tailwindCssFile ?? null,
+          importAlias: projectInfo.aliasPrefix ?? null,
+        }
+      : null,
+    config: config
+      ? {
+          style: config.style,
+          base,
+          rsc: config.rsc,
+          typescript: config.tsx,
+          iconLibrary: config.iconLibrary ?? null,
+          rtl: config.rtl ?? false,
+          menuColor: config.menuColor ?? null,
+          menuAccent: config.menuAccent ?? null,
+          aliases: {
+            components: config.aliases.components,
+            utils: config.aliases.utils,
+            ui: config.aliases.ui ?? null,
+            lib: config.aliases.lib ?? null,
+            hooks: config.aliases.hooks ?? null,
+          },
+          resolvedPaths: {
+            cwd: config.resolvedPaths.cwd,
+            tailwindConfig: config.resolvedPaths.tailwindConfig || null,
+            tailwindCss: config.resolvedPaths.tailwindCss || null,
+            utils: config.resolvedPaths.utils,
+            components: config.resolvedPaths.components,
+            lib: config.resolvedPaths.lib,
+            hooks: config.resolvedPaths.hooks,
+            ui: config.resolvedPaths.ui,
+          },
+          registries: getRegistries(config.registries),
+        }
+      : null,
+    components,
+    links: {
+      docs: `${SHADCN_URL}/docs`,
+      components: `${SHADCN_URL}/docs/components/${base}/[component].md`,
+      ui: `${GITHUB_RAW_BASE}/${base}/ui/[component].tsx`,
+      examples: `${GITHUB_RAW_BASE}/${base}/examples/[component]-example.tsx`,
+      schema: "https://ui.shadcn.com/schema.json",
+    },
+  }
+}
+
+function printInfo(data: ReturnType<typeof collectInfo>) {
+  // Project.
+  logger.log(highlighter.info("Project"))
+  if (data.project) {
+    printEntries({
+      framework: `${data.project.framework} (${data.project.frameworkName})`,
+      frameworkVersion: data.project.frameworkVersion ?? "-",
+      srcDirectory: data.project.srcDirectory ? "Yes" : "No",
+      rsc: data.project.rsc ? "Yes" : "No",
+      typescript: data.project.typescript ? "Yes" : "No",
+      tailwindVersion: data.project.tailwindVersion ?? "-",
+      tailwindConfig: data.project.tailwindConfig ?? "-",
+      tailwindCss: data.project.tailwindCss ?? "-",
+      importAlias: data.project.importAlias ?? "-",
+    })
+  } else {
+    logger.log("  No project info detected.")
+  }
+
+  // Config.
+  logger.break()
+  logger.log(highlighter.info("Configuration"))
+  if (data.config) {
+    printEntries({
+      style: data.config.style,
+      base: data.config.base,
+      rsc: data.config.rsc ? "Yes" : "No",
+      typescript: data.config.typescript ? "Yes" : "No",
+      iconLibrary: data.config.iconLibrary ?? "-",
+      rtl: data.config.rtl ? "Yes" : "No",
+      menuColor: data.config.menuColor ?? "-",
+      menuAccent: data.config.menuAccent ?? "-",
+    })
+
+    // Aliases.
+    logger.break()
+    logger.log(highlighter.info("Aliases"))
+    printEntries({
+      components: data.config.aliases.components,
+      utils: data.config.aliases.utils,
+      ui: data.config.aliases.ui ?? "-",
+      lib: data.config.aliases.lib ?? "-",
+      hooks: data.config.aliases.hooks ?? "-",
+    })
+
+    // Resolved paths.
+    logger.break()
+    logger.log(highlighter.info("Resolved Paths"))
+    printEntries({
+      cwd: data.config.resolvedPaths.cwd,
+      tailwindConfig: data.config.resolvedPaths.tailwindConfig ?? "-",
+      tailwindCss: data.config.resolvedPaths.tailwindCss ?? "-",
+      utils: data.config.resolvedPaths.utils,
+      components: data.config.resolvedPaths.components,
+      lib: data.config.resolvedPaths.lib,
+      hooks: data.config.resolvedPaths.hooks,
+      ui: data.config.resolvedPaths.ui,
+    })
+
+    // Registries.
+    if (Object.keys(data.config.registries).length > 0) {
+      logger.break()
+      logger.log("registries:")
+      printEntries(data.config.registries)
+    }
+  } else {
+    logger.log("  No components.json found.")
+  }
+
+  // Installed components.
+  logger.break()
+  logger.log(highlighter.info("Installed Components"))
+  if (data.components.length > 0) {
+    logger.log(`  ${data.components.join(", ")}`)
+  } else {
+    logger.log("  No components installed.")
+  }
+
+  // Links.
+  logger.break()
+  logger.log(highlighter.info("Links"))
+  printEntries(data.links)
+
+  logger.break()
+}
+
+function printEntries(entries: Record<string, string>) {
+  const maxKeyLength = Math.max(...Object.keys(entries).map((k) => k.length))
+  for (const [key, value] of Object.entries(entries)) {
+    logger.log(`  ${key.padEnd(maxKeyLength + 2)}${value}`)
+  }
+}
diff --git a/packages/shadcn/src/commands/init.ts b/packages/shadcn/src/commands/init.ts
index 86abfbbab9..f44ab98661 100644
--- a/packages/shadcn/src/commands/init.ts
+++ b/packages/shadcn/src/commands/init.ts
@@ -1,24 +1,33 @@
 import { promises as fs } from "fs"
 import path from "path"
 import { preFlightInit } from "@/src/preflights/preflight-init"
+import { decodePreset, isPresetCode } from "@/src/preset/preset"
 import {
-  getRegistryBaseColors,
-  getRegistryItems,
-  getRegistryStyles,
-} from "@/src/registry/api"
-import { buildUrlAndHeadersForRegistryItem } from "@/src/registry/builder"
-import { configWithDefaults } from "@/src/registry/config"
-import { BASE_COLORS, BUILTIN_REGISTRIES } from "@/src/registry/constants"
+  DEFAULT_PRESETS,
+  promptForBase,
+  promptForPreset,
+  resolveInitUrl,
+  resolveRegistryBaseConfig,
+} from "@/src/preset/presets"
+import { getRegistryBaseColors, getRegistryStyles } from "@/src/registry/api"
+import { BUILTIN_REGISTRIES, SHADCN_URL } from "@/src/registry/constants"
 import { clearRegistryContext } from "@/src/registry/context"
+import { registryConfigSchema } from "@/src/registry/schema"
+import { isUrl } from "@/src/registry/utils"
 import { rawConfigSchema } from "@/src/schema"
+import {
+  getTemplateForFramework,
+  resolveTemplate,
+  templates,
+} from "@/src/templates/index"
 import { addComponents } from "@/src/utils/add-components"
-import { TEMPLATES, createProject } from "@/src/utils/create-project"
+import { createProject } from "@/src/utils/create-project"
 import { loadEnvFiles } from "@/src/utils/env-loader"
 import * as ERRORS from "@/src/utils/errors"
 import {
-  FILE_BACKUP_SUFFIX,
   createFileBackup,
   deleteFileBackup,
+  FILE_BACKUP_SUFFIX,
   restoreFileBackup,
 } from "@/src/utils/file-helper"
 import {
@@ -26,12 +35,17 @@ import {
   DEFAULT_TAILWIND_CONFIG,
   DEFAULT_TAILWIND_CSS,
   DEFAULT_UTILS,
-  createConfig,
   getConfig,
   resolveConfigPaths,
   type Config,
 } from "@/src/utils/get-config"
 import {
+  formatMonorepoMessage,
+  getMonorepoTargets,
+  isMonorepoRoot,
+} from "@/src/utils/get-monorepo-info"
+import {
+  getProjectComponents,
   getProjectConfig,
   getProjectInfo,
   getProjectTailwindVersionFromConfig,
@@ -41,226 +55,482 @@ import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
 import { ensureRegistriesInConfig } from "@/src/utils/registries"
 import { spinner } from "@/src/utils/spinner"
-import { updateTailwindContent } from "@/src/utils/updaters/update-tailwind-content"
 import { Command } from "commander"
 import deepmerge from "deepmerge"
 import fsExtra from "fs-extra"
 import prompts from "prompts"
 import { z } from "zod"
 
-process.on("exit", (code) => {
-  const filePath = path.resolve(process.cwd(), "components.json")
-
-  // Delete backup if successful.
-  if (code === 0) {
-    return deleteFileBackup(filePath)
-  }
-
-  // Restore backup if error.
-  return restoreFileBackup(filePath)
-})
-
 export const initOptionsSchema = z.object({
   cwd: z.string(),
   name: z.string().optional(),
+  preset: z.union([z.boolean(), z.string()]).optional(),
   components: z.array(z.string()).optional(),
   yes: z.boolean(),
   defaults: z.boolean(),
   force: z.boolean(),
+  reinstall: z.boolean().optional(),
   silent: z.boolean(),
-  isNewProject: z.boolean(),
-  srcDir: z.boolean().optional(),
-  cssVariables: z.boolean(),
+  isNewProject: z.boolean().default(false),
+  cssVariables: z.boolean().default(true),
   rtl: z.boolean().optional(),
-  template: z
-    .string()
-    .optional()
-    .refine(
-      (val) => {
-        if (val) {
-          return TEMPLATES[val as keyof typeof TEMPLATES]
-        }
-        return true
-      },
-      {
-        message:
-          "Invalid template. Please use 'next', 'vite', 'start' or 'next-monorepo'.",
-      }
-    ),
-  baseColor: z
-    .string()
-    .optional()
-    .refine(
-      (val) => {
-        if (val) {
-          return BASE_COLORS.find((color) => color.name === val)
-        }
-
-        return true
-      },
-      {
-        message: `Invalid base color. Please use '${BASE_COLORS.map(
-          (color) => color.name
-        ).join("', '")}'`,
-      }
-    ),
-  installStyleIndex: z.boolean(),
-  // Config from registry:base item to merge into components.json.
+  base: z.enum(["radix", "base"]).optional(),
+  template: z.string().optional(),
+  monorepo: z.boolean().optional(),
+  existingConfig: z.record(z.unknown()).optional(),
+  installStyleIndex: z.boolean().default(true),
   registryBaseConfig: rawConfigSchema.deepPartial().optional(),
 })
 
 export const init = new Command()
   .name("init")
+  .alias("create")
   .description("initialize your project and install dependencies")
   .argument("[components...]", "names, url or local path to component")
   .option(
     "-t, --template <template>",
-    "the template to use. (next, start, vite, next-monorepo)"
-  )
-  .option(
-    "-b, --base-color <base-color>",
-    "the base color to use. (neutral, gray, zinc, stone, slate)",
-    undefined
+    "the template to use. (next, start, vite, react-router, laravel, astro)"
   )
+  .option("-b, --base <base>", "the component library to use. (radix, base)")
+  .option("--monorepo", "scaffold a monorepo project.")
+  .option("--no-monorepo", "skip the monorepo prompt.")
+  .option("-p, --preset [name]", "use a preset configuration")
   .option("-y, --yes", "skip confirmation prompt.", true)
-  .option("-d, --defaults,", "use default configuration.", false)
+  .option(
+    "-d, --defaults",
+    "use default configuration: --template=next --preset=base-nova",
+    false
+  )
   .option("-f, --force", "force overwrite of existing configuration.", false)
   .option(
     "-c, --cwd <cwd>",
     "the working directory. defaults to the current directory.",
     process.cwd()
   )
+  .option("-n, --name <name>", "the name for the new project.")
   .option("-s, --silent", "mute output.", false)
-  .option(
-    "--src-dir",
-    "use the src directory when creating a new project.",
-    false
-  )
-  .option(
-    "--no-src-dir",
-    "do not use the src directory when creating a new project."
-  )
   .option("--css-variables", "use css variables for theming.", true)
   .option("--no-css-variables", "do not use css variables for theming.")
-  .option("--no-base-style", "do not install the base shadcn style.")
-  .option("--rtl", "enable RTL support.", false)
+  .option("--rtl", "enable RTL support.")
+  .option("--no-rtl", "disable RTL support.")
+  .option("--reinstall", "re-install existing UI components.")
+  .option("--no-reinstall", "do not re-install existing UI components.")
   .action(async (components, opts) => {
+    let componentsJsonBackupPath: string | undefined
+    let reinstallComponents: string[] = []
+
+    // Restore components.json backup on unexpected exit (e.g. process.exit in preflight).
+    const restoreBackupOnExit = () => {
+      if (componentsJsonBackupPath) {
+        restoreFileBackup(
+          componentsJsonBackupPath.replace(FILE_BACKUP_SUFFIX, "")
+        )
+      }
+    }
+    process.on("exit", restoreBackupOnExit)
+
     try {
-      // Apply defaults when --defaults flag is set.
-      if (opts.defaults) {
-        opts.template = opts.template || "next"
-        opts.baseColor = opts.baseColor || "neutral"
+      const options = initOptionsSchema.parse({
+        ...opts,
+        reinstall: opts.reinstall,
+        cwd: path.resolve(opts.cwd),
+      })
+      const presetsByName = new Map(Object.entries(DEFAULT_PRESETS))
+
+      let presetBase: string | undefined
+
+      if (options.defaults) {
+        options.template = options.template || "next"
+        options.base = options.base || "base"
+        options.reinstall = options.reinstall ?? false
       }
 
-      const options = initOptionsSchema.parse({
-        cwd: path.resolve(opts.cwd),
-        isNewProject: false,
-        components,
-        ...opts,
-        installStyleIndex: opts.baseStyle,
-      })
+      if (options.template && !(options.template in templates)) {
+        logger.error(
+          `Invalid template: ${highlighter.info(
+            options.template
+          )}. Available templates: ${Object.keys(templates)
+            .map((t) => highlighter.info(t))
+            .join(", ")}.`
+        )
+        logger.break()
+        process.exit(1)
+      }
+
+      if (
+        typeof options.preset === "string" &&
+        !isUrl(options.preset) &&
+        !isPresetCode(options.preset)
+      ) {
+        const knownPresetNames = Array.from(presetsByName.keys())
+
+        if (!presetsByName.has(options.preset)) {
+          logger.error(
+            `Invalid preset: ${highlighter.info(
+              options.preset
+            )}. Available presets: ${knownPresetNames.join(", ")}`
+          )
+          logger.break()
+          process.exit(1)
+        }
+      }
+
+      const cwd = options.cwd
+      const hasExistingConfig = fsExtra.existsSync(
+        path.resolve(cwd, "components.json")
+      )
+
+      // Check if we're in a monorepo root before proceeding.
+      // Skip this check when --monorepo is set, since the template
+      // handler knows how to initialize each workspace.
+      if (
+        !options.monorepo &&
+        !hasExistingConfig &&
+        (await isMonorepoRoot(cwd))
+      ) {
+        const projectInfo = await getProjectInfo(cwd)
+        if (!projectInfo || projectInfo.framework.name === "manual") {
+          const targets = await getMonorepoTargets(cwd)
+          if (targets.length > 0) {
+            formatMonorepoMessage("init", targets)
+            process.exit(1)
+          }
+        }
+      }
+
+      if (hasExistingConfig && !options.force) {
+        const { overwrite } = await prompts({
+          type: "confirm",
+          name: "overwrite",
+          message: `A ${highlighter.info(
+            "components.json"
+          )} file already exists. Would you like to overwrite it?`,
+          initial: false,
+        })
+
+        if (!overwrite) {
+          logger.info(
+            `  To start over, remove the ${highlighter.info(
+              "components.json"
+            )} file and run ${highlighter.info("init")} again.`
+          )
+          logger.break()
+          process.exit(1)
+        }
+
+        options.force = true
+      }
+
+      let existingConfig: Record<string, unknown> | undefined
+      if (hasExistingConfig) {
+        try {
+          existingConfig = await fsExtra.readJson(
+            path.resolve(cwd, "components.json")
+          )
+        } catch {
+          // Ignore read errors.
+        }
+
+        // Pass existing config so preflight can use it (e.g. tailwind.css path in monorepos).
+        if (existingConfig) {
+          options.existingConfig = existingConfig
+        }
+
+        let shouldReinstall = options.reinstall
+
+        if (shouldReinstall === undefined) {
+          const { reinstall } = await prompts({
+            type: "confirm",
+            name: "reinstall",
+            message: `Would you like to re-install existing UI components?`,
+            initial: false,
+          })
+          shouldReinstall = reinstall
+        }
+
+        if (shouldReinstall) {
+          reinstallComponents = await getProjectComponents(cwd)
+          if (reinstallComponents.length) {
+            logger.break()
+            logger.log(
+              "  The following components will be re-installed and overwritten:"
+            )
+            for (let i = 0; i < reinstallComponents.length; i += 8) {
+              logger.log(
+                `  - ${reinstallComponents.slice(i, i + 8).join(", ")}`
+              )
+            }
+            logger.break()
+          }
+        }
+      }
+
+      if (
+        options.preset === undefined &&
+        components.length === 0 &&
+        !options.defaults
+      ) {
+        // Determine template for the create URL.
+        const hasPackageJson = fsExtra.existsSync(
+          path.resolve(cwd, "package.json")
+        )
+
+        // Prompt for template only for new projects without -t flag.
+        if (!options.template && !hasPackageJson) {
+          const { template } = await prompts({
+            type: "select",
+            name: "template",
+            message: "Select a template",
+            choices: Object.entries(templates).map(([value, t]) => ({
+              title: t.title,
+              value,
+              description: t.description,
+              disabled: options.monorepo && value === "laravel",
+            })),
+          })
+
+          if (!template) {
+            process.exit(1)
+          }
+
+          options.template = template
+        }
+
+        // Try to infer template for existing projects.
+        if (!options.template && hasPackageJson) {
+          const projectInfo = await getProjectInfo(cwd)
+          const detectedTemplate = getTemplateForFramework(
+            projectInfo?.framework.name
+          )
+          if (detectedTemplate) {
+            options.template = detectedTemplate
+          }
+        }
+
+        // Laravel cannot be scaffolded — exit early with instructions.
+        if (options.template === "laravel" && !hasPackageJson) {
+          logger.break()
+          logger.log(
+            `  Please create a new app with ${highlighter.info(
+              "laravel new --react"
+            )} first then run ${highlighter.info("shadcn init")}.`
+          )
+          logger.log(
+            `  See ${highlighter.info(
+              `${SHADCN_URL}/docs/installation/laravel`
+            )} for more information.`
+          )
+          logger.break()
+          process.exit(0)
+        }
+
+        // Prompt for monorepo if the template supports it (new projects only).
+        if (
+          options.monorepo === undefined &&
+          !hasPackageJson &&
+          options.template &&
+          templates[options.template as keyof typeof templates]?.monorepo
+        ) {
+          const { monorepo } = await prompts({
+            type: "confirm",
+            name: "monorepo",
+            message: "Would you like to set up a monorepo?",
+            initial: false,
+          })
+          options.monorepo = monorepo
+        }
+
+        // Prompt for base if not provided.
+        if (!options.base) {
+          options.base = await promptForBase()
+        }
+
+        // Show interactive preset list.
+        options.preset = true
+      }
+
+      if (options.preset !== undefined) {
+        const presetArg = options.preset === true ? true : options.preset
+
+        if (presetArg === true) {
+          const result = await promptForPreset({
+            rtl: options.rtl ?? false,
+            template: options.template,
+            base: options.base!,
+          })
+          components = [result.url, ...components]
+          presetBase = result.base
+        }
+
+        if (typeof presetArg === "string") {
+          let initUrl: string
+
+          if (isUrl(presetArg)) {
+            const url = new URL(presetArg)
+            if (options.rtl) {
+              url.searchParams.set("rtl", "true")
+            } else if (options.rtl === false) {
+              url.searchParams.delete("rtl")
+            }
+            initUrl = url.toString()
+            presetBase = url.searchParams.get("base") ?? undefined
+          } else if (isPresetCode(presetArg)) {
+            const decoded = decodePreset(presetArg)
+            if (!decoded) {
+              logger.error(
+                `Invalid preset code: ${highlighter.info(presetArg)}`
+              )
+              logger.break()
+              process.exit(1)
+            }
+            // Preset codes no longer carry base — use "radix" as placeholder.
+            // The correct base is set in the URL after resolution below.
+            initUrl = resolveInitUrl(
+              {
+                ...decoded,
+                base: "radix",
+                rtl: options.rtl ?? false,
+              },
+              { template: options.template }
+            )
+            presetBase = undefined
+          } else {
+            const preset = presetsByName.get(presetArg)
+            if (!preset) {
+              throw new Error(`Unknown preset: ${presetArg}`)
+            }
+            initUrl = resolveInitUrl(
+              {
+                ...preset,
+                base: options.base ?? "radix",
+                rtl: options.rtl ?? preset.rtl,
+              },
+              { template: options.template }
+            )
+            presetBase = undefined
+          }
+
+          components = [initUrl, ...components]
+        }
+      }
+
+      // Resolve base: --base flag > preset/prompt/URL > existing config > prompt.
+      let resolvedBase: string =
+        options.base ??
+        presetBase ??
+        (existingConfig?.style
+          ? (existingConfig.style as string).startsWith("base-")
+            ? "base"
+            : "radix"
+          : "")
+
+      if (!resolvedBase) {
+        if (components.length > 0) {
+          // When initializing from a registry item, default to radix.
+          // The registry:base config will override this.
+          resolvedBase = "radix"
+        } else {
+          const base = await promptForBase()
+          resolvedBase = base
+          options.base = base
+        }
+      }
+
+      // Build the --defaults URL now that base is resolved.
+      if (options.defaults && !components.some(isUrl)) {
+        const initUrl = resolveInitUrl(
+          {
+            ...DEFAULT_PRESETS.nova,
+            base: resolvedBase,
+            rtl: options.rtl ?? false,
+          },
+          { template: options.template }
+        )
+        components = [initUrl, ...components]
+      }
+
+      // Ensure the init URL has the correct base.
+      if (components.length > 0 && isUrl(components[0])) {
+        const url = new URL(components[0])
+        url.searchParams.set("base", resolvedBase)
+        components[0] = url.toString()
+      }
+
+      // Confirm if the user is switching bases during reinit.
+      if (existingConfig?.style) {
+        const confirmedBase = await confirmBaseSwitch(
+          existingConfig.style as string,
+          resolvedBase
+        )
+        if (confirmedBase !== resolvedBase) {
+          resolvedBase = confirmedBase
+          if (components.length > 0 && isUrl(components[0])) {
+            const url = new URL(components[0])
+            url.searchParams.set("base", confirmedBase)
+            components[0] = url.toString()
+          }
+        }
+      }
+
+      // Add re-install components after preset selection.
+      if (reinstallComponents.length) {
+        components = [...components, ...reinstallComponents]
+      }
+
+      options.components = components
 
       await loadEnvFiles(options.cwd)
 
       // We need to check if we're initializing with a new style.
       // This will allow us to determine if we need to install the base style.
-      // And if we should prompt the user for a base color.
       if (components.length > 0) {
-        // We don't know the full config at this point.
-        // So we'll use a shadow config to fetch the first item.
-        let shadowConfig = configWithDefaults(
-          createConfig({
-            resolvedPaths: {
-              cwd: options.cwd,
-            },
-          })
-        )
+        // Back up existing components.json if it exists.
+        // Since components.json might not be valid at this point,
+        // temporarily rename it to allow preflight to run.
+        const componentsJsonPath = path.resolve(cwd, "components.json")
 
-        // Check if there's a components.json file.
-        // If so, we'll merge with our shadow config.
-        const componentsJsonPath = path.resolve(options.cwd, "components.json")
-        if (fsExtra.existsSync(componentsJsonPath)) {
-          const existingConfig = await fsExtra.readJson(componentsJsonPath)
-          const config = rawConfigSchema.partial().parse(existingConfig)
-          const baseConfig = createConfig({
-            resolvedPaths: {
-              cwd: options.cwd,
-            },
-          })
-          shadowConfig = configWithDefaults({
-            ...config,
-            resolvedPaths: {
-              ...baseConfig.resolvedPaths,
-              cwd: options.cwd,
-            },
-          })
-
-          // Since components.json might not be valid at this point.
-          // Temporarily rename components.json to allow preflight to run.
-          // We'll rename it back after preflight.
-          createFileBackup(componentsJsonPath)
-        }
-
-        // Ensure all registries used in components are configured.
-        const { config: updatedConfig } = await ensureRegistriesInConfig(
-          components,
-          shadowConfig,
-          {
-            silent: true,
-            writeFile: false,
-          }
-        )
-        shadowConfig = updatedConfig
-
-        // This forces a shadowConfig validation early in the process.
-        buildUrlAndHeadersForRegistryItem(components[0], shadowConfig)
-
-        const [item] = await getRegistryItems([components[0]], {
-          config: shadowConfig,
-        })
-
-        // Set options from registry:base.
-        if (item?.type === "registry:base") {
-          if (item.config) {
-            // Merge config values into shadowConfig.
-            shadowConfig = configWithDefaults(
-              deepmerge(shadowConfig, item.config)
+        if (hasExistingConfig) {
+          componentsJsonBackupPath =
+            createFileBackup(componentsJsonPath) ?? undefined
+          if (!componentsJsonBackupPath) {
+            logger.warn(
+              `Could not back up ${highlighter.info("components.json")}.`
             )
-            // Store config to be merged into components.json later.
-            options.registryBaseConfig = item.config
           }
-          options.installStyleIndex =
-            item.extends === "none" ? false : options.installStyleIndex
         }
 
-        if (item?.type === "registry:style") {
-          // Set a default base color so we're not prompted.
-          // The style will extend or override it.
-          options.baseColor = "neutral"
+        // Resolve registry:base config from the first component.
+        const { registryBaseConfig, installStyleIndex } =
+          await resolveRegistryBaseConfig(components[0], cwd, {
+            registries: existingConfig?.registries as
+              | z.infer<typeof registryConfigSchema>
+              | undefined,
+          })
 
-          // If the style extends none, we don't want to install the base style.
-          options.installStyleIndex =
-            item.extends === "none" ? false : options.installStyleIndex
+        if (!installStyleIndex) {
+          options.installStyleIndex = false
         }
-      }
 
-      // If --no-base-style, we don't want to prompt for a base color either.
-      if (!options.installStyleIndex) {
-        options.baseColor = "neutral"
+        if (registryBaseConfig) {
+          options.registryBaseConfig = registryBaseConfig
+        }
       }
 
       await runInit(options)
 
+      logger.break()
       logger.log(
-        `${highlighter.success(
-          "Success!"
-        )} Project initialization completed.\nYou may now add components.`
+        `Project initialization completed.\nYou may now add components.`
       )
 
-      // We need when running with custom cwd.
-      deleteFileBackup(path.resolve(options.cwd, "components.json"))
+      // Success — remove the backup and exit listener.
+      process.removeListener("exit", restoreBackupOnExit)
+      deleteFileBackup(path.resolve(cwd, "components.json"))
       logger.break()
     } catch (error) {
+      // Restore handled by exit listener, but also do it here for non-exit errors.
+      process.removeListener("exit", restoreBackupOnExit)
+      restoreBackupOnExit()
       logger.break()
       handleError(error)
     } finally {
@@ -274,8 +544,29 @@ export async function runInit(
   }
 ) {
   let projectInfo
-  let newProjectTemplate
-  if (!options.skipPreflight) {
+  let newProjectTemplate: keyof typeof templates | undefined
+
+  // Resolve the effective template if --monorepo is set.
+  const explicitTemplate = options.template as
+    | keyof typeof templates
+    | undefined
+  const resolvedTemplateConfig = explicitTemplate
+    ? resolveTemplate(templates[explicitTemplate], {
+        monorepo: options.monorepo,
+      })
+    : undefined
+
+  // When a monorepo template with an init handler is explicitly provided
+  // and the project already exists, skip the standard preflight
+  // — the template manages each workspace directly.
+  const hasExplicitMonorepoInit =
+    options.monorepo &&
+    resolvedTemplateConfig?.init &&
+    fsExtra.existsSync(path.resolve(options.cwd, "package.json"))
+
+  if (hasExplicitMonorepoInit) {
+    projectInfo = await getProjectInfo(options.cwd)
+  } else if (!options.skipPreflight) {
     const preflight = await preFlightInit(options)
     if (preflight.errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT]) {
       const { projectPath, template } = await createProject(options)
@@ -294,11 +585,36 @@ export async function runInit(
     projectInfo = await getProjectInfo(options.cwd)
   }
 
-  if (newProjectTemplate === "next-monorepo") {
-    options.cwd = path.resolve(options.cwd, "apps/web")
-    return await getConfig(options.cwd)
+  // Use the template from project creation if available,
+  // or fall back to the explicit --template flag.
+  const templateKey = newProjectTemplate ?? explicitTemplate
+  const selectedTemplate = templateKey
+    ? resolveTemplate(templates[templateKey], { monorepo: options.monorepo })
+    : undefined
+
+  const components = [
+    ...(options.installStyleIndex ? ["index"] : []),
+    ...(options.components ?? []),
+    // Add button component for new template-based projects.
+    ...(selectedTemplate ? ["button"] : []),
+  ]
+
+  if (selectedTemplate?.init) {
+    const result = await selectedTemplate.init({
+      projectPath: options.cwd,
+      components,
+      registryBaseConfig: options.registryBaseConfig,
+      rtl: options.rtl ?? false,
+      silent: options.silent,
+    })
+
+    // Run postInit for new projects (e.g. git init).
+    await selectedTemplate.postInit({ projectPath: options.cwd })
+
+    return result
   }
 
+  // Standard init path for existing projects.
   const projectConfig = await getProjectConfig(options.cwd, projectInfo)
 
   let config = projectConfig
@@ -316,20 +632,10 @@ export async function runInit(
     })
 
     if (!proceed) {
-      process.exit(0)
+      process.exit(1)
     }
   }
 
-  // Prepare the list of components to be added.
-  const components = [
-    // "index" is the default shadcn style.
-    // Why index? Because when style is true, we read style from components.json and fetch that.
-    // i.e new-york from components.json then fetch /styles/new-york/index.
-    // TODO: Fix this so that we can extend any style i.e --style=new-york.
-    ...(options.installStyleIndex ? ["index"] : []),
-    ...(options.components ?? []),
-  ]
-
   // Ensure registries are configured for the components we're about to add.
   const fullConfigForRegistry = await resolveConfigPaths(options.cwd, config)
   const { config: configWithRegistries } = await ensureRegistriesInConfig(
@@ -355,10 +661,20 @@ export async function runInit(
     return { ...merged, registries } as typeof config
   }
 
-  // Merge with backup config if it exists and not using --force.
-  if (!options.force && fsExtra.existsSync(backupPath)) {
+  // Merge with backup config if it exists.
+  if (fsExtra.existsSync(backupPath)) {
     const existingConfig = await fsExtra.readJson(backupPath)
-    config = mergeConfig(existingConfig, config)
+    if (options.force) {
+      // With --force, only preserve registries from existing config.
+      if (existingConfig.registries) {
+        config.registries = {
+          ...existingConfig.registries,
+          ...(config.registries || {}),
+        }
+      }
+    } else {
+      config = mergeConfig(existingConfig, config)
+    }
   }
 
   // Merge config from registry:base item.
@@ -388,21 +704,16 @@ export async function runInit(
   await addComponents(components, fullConfig, {
     // Init will always overwrite files.
     overwrite: true,
+    // Reinstall should overwrite existing CSS variables.
+    overwriteCssVars: options.reinstall || undefined,
     silent: options.silent,
     isNewProject:
       options.isNewProject || projectInfo?.framework.name === "next-app",
   })
 
-  // If a new project is using src dir, let's update the tailwind content config.
-  // TODO: Handle this per framework.
-  if (options.isNewProject && options.srcDir) {
-    await updateTailwindContent(
-      ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
-      fullConfig,
-      {
-        silent: options.silent,
-      }
-    )
+  // Run postInit for new projects without a custom init (e.g. git init).
+  if (selectedTemplate) {
+    await selectedTemplate.postInit({ projectPath: options.cwd })
   }
 
   return fullConfig
@@ -502,6 +813,10 @@ async function promptForConfig(defaultConfig: Config | null = null) {
     },
   ])
 
+  if (!options.style) {
+    process.exit(1)
+  }
+
   return rawConfigSchema.parse({
     $schema: "https://ui.shadcn.com/schema.json",
     style: options.style,
@@ -529,14 +844,13 @@ async function promptForMinimalConfig(
   opts: z.infer<typeof initOptionsSchema>
 ) {
   let style = defaultConfig.style
-  let baseColor = opts.baseColor
+  let baseColor = "neutral"
   let cssVariables = defaultConfig.tailwind.cssVariables
   let iconLibrary = defaultConfig.iconLibrary ?? "lucide"
 
   if (!opts.defaults) {
-    const [styles, baseColors, tailwindVersion] = await Promise.all([
+    const [styles, tailwindVersion] = await Promise.all([
       getRegistryStyles(),
-      getRegistryBaseColors(),
       getProjectTailwindVersionFromConfig(defaultConfig),
     ])
 
@@ -553,24 +867,14 @@ async function promptForMinimalConfig(
         })),
         initial: 0,
       },
-      {
-        type: opts.baseColor ? null : "select",
-        name: "tailwindBaseColor",
-        message: `Which color would you like to use as the ${highlighter.info(
-          "base color"
-        )}?`,
-        choices: baseColors.map((color) => ({
-          title: color.label,
-          value: color.name,
-        })),
-      },
     ])
 
     style = options.style ?? style ?? "new-york"
-    baseColor = options.tailwindBaseColor ?? baseColor
-    cssVariables = opts.cssVariables
   }
 
+  // Always respect the explicit --css-variables / --no-css-variables flag.
+  cssVariables = opts.cssVariables
+
   return rawConfigSchema.parse({
     $schema: defaultConfig?.$schema,
     style,
@@ -586,3 +890,32 @@ async function promptForMinimalConfig(
     aliases: defaultConfig?.aliases,
   })
 }
+
+async function confirmBaseSwitch(existingStyle: string, resolvedBase: string) {
+  // Styles prefixed with "base-" use Base UI. Everything else is Radix.
+  const oldBase = existingStyle.startsWith("base-") ? "base" : "radix"
+  if (resolvedBase === oldBase) return resolvedBase
+
+  logger.warn(
+    `  You are switching from ${highlighter.info(
+      oldBase
+    )} to ${highlighter.info(resolvedBase)}.`
+  )
+  logger.warn(
+    `  Components outside the ${highlighter.info(
+      "ui"
+    )} directory that depend on ${highlighter.info(
+      oldBase
+    )} primitives may need manual updates.`
+  )
+  logger.break()
+
+  const { proceed } = await prompts({
+    type: "confirm",
+    name: "proceed",
+    message: "Would you like to continue?",
+    initial: false,
+  })
+
+  return proceed ? resolvedBase : oldBase
+}
diff --git a/packages/shadcn/src/commands/registry/build.ts b/packages/shadcn/src/commands/registry/build.ts
index bfd62578fd..942640684d 100644
--- a/packages/shadcn/src/commands/registry/build.ts
+++ b/packages/shadcn/src/commands/registry/build.ts
@@ -1,10 +1,11 @@
 import * as fs from "fs/promises"
 import * as path from "path"
 import { preFlightRegistryBuild } from "@/src/preflights/preflight-registry"
+import { SHADCN_URL } from "@/src/registry/constants"
 import { recursivelyResolveFileImports } from "@/src/registry/utils"
 import { configSchema, registryItemSchema, registrySchema } from "@/src/schema"
 import * as ERRORS from "@/src/utils/errors"
-import { ProjectInfo, getProjectInfo } from "@/src/utils/get-project-info"
+import { getProjectInfo, ProjectInfo } from "@/src/utils/get-project-info"
 import { handleError } from "@/src/utils/handle-error"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
diff --git a/packages/shadcn/src/index.ts b/packages/shadcn/src/index.ts
index 61527f9010..9ab1fb9c8a 100644
--- a/packages/shadcn/src/index.ts
+++ b/packages/shadcn/src/index.ts
@@ -1,15 +1,13 @@
 #!/usr/bin/env node
 import { add } from "@/src/commands/add"
 import { build } from "@/src/commands/build"
-import { create } from "@/src/commands/create"
 import { diff } from "@/src/commands/diff"
+import { docs } from "@/src/commands/docs"
 import { info } from "@/src/commands/info"
 import { init } from "@/src/commands/init"
 import { mcp } from "@/src/commands/mcp"
 import { migrate } from "@/src/commands/migrate"
 import { registry } from "@/src/commands/registry"
-import { build as registryBuild } from "@/src/commands/registry/build"
-import { mcp as registryMcp } from "@/src/commands/registry/mcp"
 import { search } from "@/src/commands/search"
 import { view } from "@/src/commands/view"
 import { Command } from "commander"
@@ -22,7 +20,7 @@ process.on("SIGTERM", () => process.exit(0))
 async function main() {
   const program = new Command()
     .name("shadcn")
-    .description("add items from registries to your project")
+    .description("build your component library")
     .version(
       packageJson.version || "1.0.0",
       "-v, --version",
@@ -31,9 +29,9 @@ async function main() {
 
   program
     .addCommand(init)
-    .addCommand(create)
     .addCommand(add)
     .addCommand(diff)
+    .addCommand(docs)
     .addCommand(view)
     .addCommand(search)
     .addCommand(migrate)
@@ -41,8 +39,6 @@ async function main() {
     .addCommand(build)
     .addCommand(mcp)
     .addCommand(registry)
-  // Legacy registry commands.
-  program.addCommand(registryBuild).addCommand(registryMcp)
 
   program.parse()
 }
diff --git a/packages/shadcn/src/mcp/index.ts b/packages/shadcn/src/mcp/index.ts
index 23c4d3c05a..4daca0e3cc 100644
--- a/packages/shadcn/src/mcp/index.ts
+++ b/packages/shadcn/src/mcp/index.ts
@@ -186,8 +186,8 @@ server.setRequestHandler(CallToolRequestSchema, async (request) => {
                 For example: \`${await npxShadcn(
                   "view @shadcn"
                 )}\` or \`${await npxShadcn(
-                "view @shadcn @acme"
-              )}\` to view multiple registries.
+                  "view @shadcn @acme"
+                )}\` to view multiple registries.
                 `,
             },
           ],
diff --git a/packages/shadcn/src/migrations/migrate-rtl.ts b/packages/shadcn/src/migrations/migrate-rtl.ts
index 8f1509bcc7..ed55f9d1a0 100644
--- a/packages/shadcn/src/migrations/migrate-rtl.ts
+++ b/packages/shadcn/src/migrations/migrate-rtl.ts
@@ -1,5 +1,6 @@
 import { promises as fs } from "fs"
 import path from "path"
+import { SHADCN_URL } from "@/src/registry/constants"
 import { Config } from "@/src/utils/get-config"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
@@ -15,7 +16,7 @@ const FILES_NEEDING_MANUAL_REVIEW = [
   "calendar.tsx",
 ]
 
-const RTL_DOCS_URL = "https://ui.shadcn.com/docs/rtl#manual-migration-optional"
+const RTL_DOCS_URL = `${SHADCN_URL}/docs/rtl#manual-migration-optional`
 
 export async function migrateRtl(
   config: Config,
diff --git a/packages/shadcn/src/preflights/preflight-add.ts b/packages/shadcn/src/preflights/preflight-add.ts
index 24b141af44..d9bdb628e7 100644
--- a/packages/shadcn/src/preflights/preflight-add.ts
+++ b/packages/shadcn/src/preflights/preflight-add.ts
@@ -1,7 +1,13 @@
 import path from "path"
 import { addOptionsSchema } from "@/src/commands/add"
+import { SHADCN_URL } from "@/src/registry/constants"
 import * as ERRORS from "@/src/utils/errors"
 import { getConfig } from "@/src/utils/get-config"
+import {
+  formatMonorepoMessage,
+  getMonorepoTargets,
+  isMonorepoRoot,
+} from "@/src/utils/get-monorepo-info"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
 import fs from "fs-extra"
@@ -25,6 +31,15 @@ export async function preFlightAdd(options: z.infer<typeof addOptionsSchema>) {
 
   // Check for existing components.json file.
   if (!fs.existsSync(path.resolve(options.cwd, "components.json"))) {
+    // Check if we're in a monorepo root.
+    if (await isMonorepoRoot(options.cwd)) {
+      const targets = await getMonorepoTargets(options.cwd)
+      if (targets.length > 0) {
+        formatMonorepoMessage("add [component]", targets)
+        process.exit(1)
+      }
+    }
+
     errors[ERRORS.MISSING_CONFIG] = true
     return {
       errors,
@@ -51,9 +66,7 @@ export async function preFlightAdd(options: z.infer<typeof addOptionsSchema>) {
       )} file by running the ${highlighter.info("init")} command.`
     )
     logger.error(
-      `Learn more at ${highlighter.info(
-        "https://ui.shadcn.com/docs/components-json"
-      )}.`
+      `Learn more at ${highlighter.info(`${SHADCN_URL}/docs/components-json`)}.`
     )
     logger.break()
     process.exit(1)
diff --git a/packages/shadcn/src/preflights/preflight-init.ts b/packages/shadcn/src/preflights/preflight-init.ts
index 11a51f0054..be5340fe37 100644
--- a/packages/shadcn/src/preflights/preflight-init.ts
+++ b/packages/shadcn/src/preflights/preflight-init.ts
@@ -1,6 +1,11 @@
 import path from "path"
 import { initOptionsSchema } from "@/src/commands/init"
 import * as ERRORS from "@/src/utils/errors"
+import {
+  formatMonorepoMessage,
+  getMonorepoTargets,
+  isMonorepoRoot,
+} from "@/src/utils/get-monorepo-info"
 import { getProjectInfo } from "@/src/utils/get-project-info"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
@@ -54,10 +59,26 @@ export async function preFlightInit(
   const frameworkSpinner = spinner(`Verifying framework.`, {
     silent: options.silent,
   }).start()
-  const projectInfo = await getProjectInfo(options.cwd)
+  const tailwind = options.existingConfig?.tailwind as
+    | Record<string, unknown>
+    | undefined
+  const projectInfo = await getProjectInfo(options.cwd, {
+    configCssFile: typeof tailwind?.css === "string" ? tailwind.css : undefined,
+  })
   if (!projectInfo || projectInfo?.framework.name === "manual") {
     errors[ERRORS.UNSUPPORTED_FRAMEWORK] = true
     frameworkSpinner?.fail()
+
+    // Check if we're in a monorepo root.
+    // Skip when --monorepo is set.
+    if (!options.monorepo && (await isMonorepoRoot(options.cwd))) {
+      const targets = await getMonorepoTargets(options.cwd)
+      if (targets.length > 0) {
+        formatMonorepoMessage("init", targets)
+        process.exit(1)
+      }
+    }
+
     logger.break()
     if (projectInfo?.framework.links.installation) {
       logger.error(
@@ -81,7 +102,7 @@ export async function preFlightInit(
   let tailwindSpinnerMessage = "Validating Tailwind CSS."
 
   if (projectInfo.tailwindVersion === "v4") {
-    tailwindSpinnerMessage = `Validating Tailwind CSS config. Found ${highlighter.info(
+    tailwindSpinnerMessage = `Validating Tailwind CSS. Found ${highlighter.info(
       "v4"
     )}.`
   }
diff --git a/packages/shadcn/src/preflights/preflight-migrate.ts b/packages/shadcn/src/preflights/preflight-migrate.ts
index 8c5f647155..f63cf10f4b 100644
--- a/packages/shadcn/src/preflights/preflight-migrate.ts
+++ b/packages/shadcn/src/preflights/preflight-migrate.ts
@@ -1,6 +1,7 @@
 import path from "path"
 import { addOptionsSchema } from "@/src/commands/add"
 import { migrateOptionsSchema } from "@/src/commands/migrate"
+import { SHADCN_URL } from "@/src/registry/constants"
 import * as ERRORS from "@/src/utils/errors"
 import { getConfig } from "@/src/utils/get-config"
 import { highlighter } from "@/src/utils/highlighter"
@@ -54,9 +55,7 @@ export async function preFlightMigrate(
       )} file by running the ${highlighter.info("init")} command.`
     )
     logger.error(
-      `Learn more at ${highlighter.info(
-        "https://ui.shadcn.com/docs/components-json"
-      )}.`
+      `Learn more at ${highlighter.info(`${SHADCN_URL}/docs/components-json`)}.`
     )
     logger.break()
     process.exit(1)
diff --git a/packages/shadcn/src/preset/index.ts b/packages/shadcn/src/preset/index.ts
new file mode 100644
index 0000000000..9ea739cf83
--- /dev/null
+++ b/packages/shadcn/src/preset/index.ts
@@ -0,0 +1,23 @@
+// Browser-safe re-export of preset utilities.
+// Use `shadcn/preset` for client-side code.
+export {
+  PRESET_BASES,
+  PRESET_STYLES,
+  PRESET_BASE_COLORS,
+  PRESET_THEMES,
+  PRESET_ICON_LIBRARIES,
+  PRESET_FONTS,
+  PRESET_RADII,
+  PRESET_MENU_ACCENTS,
+  PRESET_MENU_COLORS,
+  DEFAULT_PRESET_CONFIG,
+  toBase62,
+  fromBase62,
+  encodePreset,
+  decodePreset,
+  isPresetCode,
+  isValidPreset,
+  generateRandomConfig,
+  generateRandomPreset,
+  type PresetConfig,
+} from "./preset"
diff --git a/packages/shadcn/src/preset/preset.test.ts b/packages/shadcn/src/preset/preset.test.ts
new file mode 100644
index 0000000000..35d51c95fa
--- /dev/null
+++ b/packages/shadcn/src/preset/preset.test.ts
@@ -0,0 +1,212 @@
+import { describe, expect, it } from "vitest"
+
+import {
+  decodePreset,
+  DEFAULT_PRESET_CONFIG,
+  encodePreset,
+  fromBase62,
+  generateRandomPreset,
+  isPresetCode,
+  isValidPreset,
+  PRESET_BASE_COLORS,
+  PRESET_FONTS,
+  PRESET_ICON_LIBRARIES,
+  PRESET_MENU_ACCENTS,
+  PRESET_MENU_COLORS,
+  PRESET_RADII,
+  PRESET_STYLES,
+  PRESET_THEMES,
+  toBase62,
+  type PresetConfig,
+} from "./preset"
+
+describe("base62", () => {
+  it("should round-trip numbers", () => {
+    for (const n of [0, 1, 61, 62, 100, 1000, 8388607]) {
+      expect(fromBase62(toBase62(n))).toBe(n)
+    }
+  })
+
+  it("should encode 0 as '0'", () => {
+    expect(toBase62(0)).toBe("0")
+  })
+
+  it("should return -1 for invalid base62 characters", () => {
+    expect(fromBase62("!@#")).toBe(-1)
+  })
+})
+
+describe("encodePreset / decodePreset", () => {
+  it("should round-trip the default config", () => {
+    const code = encodePreset(DEFAULT_PRESET_CONFIG)
+    const decoded = decodePreset(code)
+    expect(decoded).toEqual(DEFAULT_PRESET_CONFIG)
+  })
+
+  it("should round-trip a custom config", () => {
+    const config: PresetConfig = {
+      style: "lyra",
+      baseColor: "zinc",
+      theme: "blue",
+      iconLibrary: "tabler",
+      font: "jetbrains-mono",
+      radius: "large",
+      menuAccent: "bold",
+      menuColor: "inverted",
+    }
+    const code = encodePreset(config)
+    const decoded = decodePreset(code)
+    expect(decoded).toEqual(config)
+  })
+
+  it("should produce short codes (max 9 chars)", () => {
+    const code = encodePreset(DEFAULT_PRESET_CONFIG)
+    expect(code.length).toBeLessThanOrEqual(9)
+  })
+
+  it("should start with the version character", () => {
+    const code = encodePreset(DEFAULT_PRESET_CONFIG)
+    expect(code[0]).toBe("a")
+  })
+
+  it("should handle partial config by filling defaults", () => {
+    const code = encodePreset({ style: "lyra" })
+    const decoded = decodePreset(code)
+    expect(decoded).not.toBeNull()
+    expect(decoded!.style).toBe("lyra")
+    expect(decoded!.theme).toBe(DEFAULT_PRESET_CONFIG.theme)
+  })
+
+  it("should round-trip all styles", () => {
+    for (const style of PRESET_STYLES) {
+      const code = encodePreset({ style })
+      const decoded = decodePreset(code)
+      expect(decoded).not.toBeNull()
+      expect(decoded!.style).toBe(style)
+    }
+  })
+
+  it("should round-trip all themes", () => {
+    for (const theme of PRESET_THEMES) {
+      const code = encodePreset({ theme })
+      const decoded = decodePreset(code)
+      expect(decoded!.theme).toBe(theme)
+    }
+  })
+
+  it("should round-trip all fonts", () => {
+    for (const font of PRESET_FONTS) {
+      const code = encodePreset({ font })
+      const decoded = decodePreset(code)
+      expect(decoded!.font).toBe(font)
+    }
+  })
+
+  it("should round-trip all icon libraries", () => {
+    for (const iconLibrary of PRESET_ICON_LIBRARIES) {
+      const code = encodePreset({ iconLibrary })
+      const decoded = decodePreset(code)
+      expect(decoded!.iconLibrary).toBe(iconLibrary)
+    }
+  })
+
+  it("should round-trip all radii", () => {
+    for (const radius of PRESET_RADII) {
+      const code = encodePreset({ radius })
+      const decoded = decodePreset(code)
+      expect(decoded!.radius).toBe(radius)
+    }
+  })
+
+  it("should round-trip all base colors", () => {
+    for (const baseColor of PRESET_BASE_COLORS) {
+      const code = encodePreset({ baseColor })
+      const decoded = decodePreset(code)
+      expect(decoded!.baseColor).toBe(baseColor)
+    }
+  })
+
+  it("should round-trip all menu accents and colors", () => {
+    for (const menuAccent of PRESET_MENU_ACCENTS) {
+      for (const menuColor of PRESET_MENU_COLORS) {
+        const code = encodePreset({ menuAccent, menuColor })
+        const decoded = decodePreset(code)
+        expect(decoded!.menuAccent).toBe(menuAccent)
+        expect(decoded!.menuColor).toBe(menuColor)
+      }
+    }
+  })
+})
+
+describe("decodePreset edge cases", () => {
+  it("should return null for empty string", () => {
+    expect(decodePreset("")).toBeNull()
+  })
+
+  it("should return null for single character", () => {
+    expect(decodePreset("A")).toBeNull()
+  })
+
+  it("should return null for wrong version prefix", () => {
+    expect(decodePreset("b123")).toBeNull()
+  })
+
+  it("should return null for invalid base62 characters", () => {
+    expect(decodePreset("A!@#")).toBeNull()
+  })
+})
+
+describe("isPresetCode", () => {
+  it("should return true for valid preset codes", () => {
+    const code = encodePreset(DEFAULT_PRESET_CONFIG)
+    expect(isPresetCode(code)).toBe(true)
+  })
+
+  it("should return false for empty string", () => {
+    expect(isPresetCode("")).toBe(false)
+  })
+
+  it("should return false for URLs", () => {
+    expect(isPresetCode("https://ui.shadcn.com/init?foo=bar")).toBe(false)
+  })
+
+  it("should return false for named presets", () => {
+    expect(isPresetCode("radix-nova")).toBe(false)
+  })
+
+  it("should return false for strings that are too long", () => {
+    expect(isPresetCode("A1234567890")).toBe(false)
+  })
+
+  it("should return false for invalid characters after version", () => {
+    expect(isPresetCode("A!@#")).toBe(false)
+  })
+})
+
+describe("isValidPreset", () => {
+  it("should return true for encodable presets", () => {
+    const code = encodePreset(DEFAULT_PRESET_CONFIG)
+    expect(isValidPreset(code)).toBe(true)
+  })
+
+  it("should return false for invalid codes", () => {
+    expect(isValidPreset("")).toBe(false)
+    expect(isValidPreset("b123")).toBe(false)
+  })
+})
+
+describe("generateRandomPreset", () => {
+  it("should produce a valid preset code", () => {
+    const code = generateRandomPreset()
+    expect(isPresetCode(code)).toBe(true)
+    expect(isValidPreset(code)).toBe(true)
+  })
+
+  it("should round-trip through decode", () => {
+    const code = generateRandomPreset()
+    const decoded = decodePreset(code)
+    expect(decoded).not.toBeNull()
+    const reEncoded = encodePreset(decoded!)
+    expect(reEncoded).toBe(code)
+  })
+})
diff --git a/packages/shadcn/src/preset/preset.ts b/packages/shadcn/src/preset/preset.ts
new file mode 100644
index 0000000000..2ec9457d27
--- /dev/null
+++ b/packages/shadcn/src/preset/preset.ts
@@ -0,0 +1,231 @@
+// Preset encoding/decoding utilities.
+// Bit-packs design system params into a single integer,
+// then encodes as base62 with a version prefix character.
+// Browser-safe: no Node.js dependencies.
+//
+// Rules for backward compat:
+//   1. Never reorder existing value arrays — only append.
+//   2. New fields must have their default at index 0.
+//   3. Only append new fields to the end of PRESET_FIELDS.
+//   4. Stay under 53 bits total (JS safe integer limit).
+
+// Value arrays — order matters for backward compat. Never reorder, only append.
+export const PRESET_BASES = ["radix", "base"] as const
+
+export const PRESET_STYLES = ["nova", "vega", "maia", "lyra", "mira"] as const
+
+export const PRESET_BASE_COLORS = [
+  "neutral",
+  "stone",
+  "zinc",
+  "gray",
+  "mauve",
+  "olive",
+  "mist",
+  "taupe",
+] as const
+
+export const PRESET_THEMES = [
+  "neutral",
+  "stone",
+  "zinc",
+  "gray",
+  "amber",
+  "blue",
+  "cyan",
+  "emerald",
+  "fuchsia",
+  "green",
+  "indigo",
+  "lime",
+  "orange",
+  "pink",
+  "purple",
+  "red",
+  "rose",
+  "sky",
+  "teal",
+  "violet",
+  "yellow",
+  "mauve",
+  "olive",
+  "mist",
+  "taupe",
+] as const
+
+export const PRESET_ICON_LIBRARIES = [
+  "lucide",
+  "hugeicons",
+  "tabler",
+  "phosphor",
+  "remixicon",
+] as const
+
+export const PRESET_FONTS = [
+  "inter",
+  "noto-sans",
+  "nunito-sans",
+  "figtree",
+  "roboto",
+  "raleway",
+  "dm-sans",
+  "public-sans",
+  "outfit",
+  "jetbrains-mono",
+  "geist",
+  "geist-mono",
+  "lora",
+  "merriweather",
+  "playfair-display",
+  "noto-serif",
+  "roboto-slab",
+] as const
+
+export const PRESET_RADII = [
+  "default",
+  "none",
+  "small",
+  "medium",
+  "large",
+] as const
+
+export const PRESET_MENU_ACCENTS = ["subtle", "bold"] as const
+export const PRESET_MENU_COLORS = ["default", "inverted"] as const
+
+// Field definitions in pack order. Total: 40 bits, 13 bits headroom.
+// Note: `base` was removed (was bits 40-42). Old codes are backward-compatible
+// because `base` was the last field — decoder stops at bit 40 and ignores the rest.
+const PRESET_FIELDS = [
+  { key: "menuColor", values: PRESET_MENU_COLORS, bits: 3 },
+  { key: "menuAccent", values: PRESET_MENU_ACCENTS, bits: 3 },
+  { key: "radius", values: PRESET_RADII, bits: 4 },
+  { key: "font", values: PRESET_FONTS, bits: 6 },
+  { key: "iconLibrary", values: PRESET_ICON_LIBRARIES, bits: 6 },
+  { key: "theme", values: PRESET_THEMES, bits: 6 },
+  { key: "baseColor", values: PRESET_BASE_COLORS, bits: 6 },
+  { key: "style", values: PRESET_STYLES, bits: 6 },
+] as const
+
+export type PresetConfig = {
+  style: (typeof PRESET_STYLES)[number]
+  baseColor: (typeof PRESET_BASE_COLORS)[number]
+  theme: (typeof PRESET_THEMES)[number]
+  iconLibrary: (typeof PRESET_ICON_LIBRARIES)[number]
+  font: (typeof PRESET_FONTS)[number]
+  radius: (typeof PRESET_RADII)[number]
+  menuAccent: (typeof PRESET_MENU_ACCENTS)[number]
+  menuColor: (typeof PRESET_MENU_COLORS)[number]
+}
+
+export const DEFAULT_PRESET_CONFIG: PresetConfig = Object.fromEntries(
+  PRESET_FIELDS.map((f) => [f.key, f.values[0]])
+) as PresetConfig
+
+// Base62 alphabet.
+const BASE62 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"
+
+// Version prefix — 'a' = version 1.
+const VERSION_CHAR = "a"
+
+export function toBase62(num: number) {
+  if (num === 0) return "0"
+  let result = ""
+  let n = num
+  while (n > 0) {
+    result = BASE62[n % 62] + result
+    n = Math.floor(n / 62)
+  }
+  return result
+}
+
+export function fromBase62(str: string) {
+  let result = 0
+  for (let i = 0; i < str.length; i++) {
+    const idx = BASE62.indexOf(str[i])
+    if (idx === -1) return -1
+    result = result * 62 + idx
+  }
+  return result
+}
+
+// Encode a PresetConfig into a short alphanumeric code.
+export function encodePreset(config: Partial<PresetConfig>) {
+  const merged = { ...DEFAULT_PRESET_CONFIG, ...config }
+
+  // Uses multiplication instead of bitwise ops (JS bitwise truncates to 32 bits).
+  let bits = 0
+  let offset = 0
+  for (const field of PRESET_FIELDS) {
+    const idx = (field.values as readonly string[]).indexOf(
+      merged[field.key as keyof PresetConfig]
+    )
+    bits += (idx === -1 ? 0 : idx) * 2 ** offset
+    offset += field.bits
+  }
+
+  return VERSION_CHAR + toBase62(bits)
+}
+
+// Decode a preset code back into a PresetConfig.
+export function decodePreset(code: string): PresetConfig | null {
+  if (!code || code.length < 2) {
+    return null
+  }
+
+  if (code[0] !== VERSION_CHAR) {
+    return null
+  }
+
+  const bits = fromBase62(code.slice(1))
+  if (bits < 0) return null
+
+  const result = {} as Record<string, string>
+  let offset = 0
+  for (const field of PRESET_FIELDS) {
+    const idx = Math.floor(bits / 2 ** offset) % 2 ** field.bits
+    result[field.key] =
+      idx < field.values.length ? field.values[idx] : field.values[0]
+    offset += field.bits
+  }
+
+  return result as PresetConfig
+}
+
+// Check if a string looks like a preset code (version char + base62).
+export function isPresetCode(value: string) {
+  if (!value || value.length < 2 || value.length > 10) {
+    return false
+  }
+
+  if (value[0] !== VERSION_CHAR) {
+    return false
+  }
+
+  for (let i = 1; i < value.length; i++) {
+    if (BASE62.indexOf(value[i]) === -1) {
+      return false
+    }
+  }
+
+  return true
+}
+
+// Validate that a preset code decodes successfully.
+export function isValidPreset(code: string) {
+  return decodePreset(code) !== null
+}
+
+// Generate a random PresetConfig.
+export function generateRandomConfig(): PresetConfig {
+  const pick = <T>(arr: readonly T[]) =>
+    arr[Math.floor(Math.random() * arr.length)]
+
+  return Object.fromEntries(
+    PRESET_FIELDS.map((f) => [f.key, pick(f.values)])
+  ) as PresetConfig
+}
+
+// Generate a random preset code.
+export function generateRandomPreset() {
+  return encodePreset(generateRandomConfig())
+}
diff --git a/packages/shadcn/src/preset/presets.test.ts b/packages/shadcn/src/preset/presets.test.ts
new file mode 100644
index 0000000000..826ffef413
--- /dev/null
+++ b/packages/shadcn/src/preset/presets.test.ts
@@ -0,0 +1,74 @@
+import { REGISTRY_URL } from "@/src/registry/constants"
+import { describe, expect, it } from "vitest"
+
+import { resolveCreateUrl, resolveInitUrl } from "./presets"
+
+const SHADCN_URL = REGISTRY_URL.replace(/\/r\/?$/, "")
+
+const mockPreset = {
+  name: "default",
+  title: "Default",
+  description: "The default preset.",
+  base: "radix",
+  style: "new-york-v4",
+  baseColor: "neutral",
+  theme: "default",
+  iconLibrary: "lucide",
+  font: "inter",
+  rtl: false,
+  menuAccent: "subtle" as const,
+  menuColor: "default" as const,
+  radius: "0.5",
+}
+
+describe("createPresetUrl", () => {
+  it("should not include rtl by default", () => {
+    const url = resolveCreateUrl()
+    const parsed = new URL(url)
+    expect(parsed.origin + parsed.pathname).toBe(`${SHADCN_URL}/create`)
+    expect(parsed.searchParams.has("rtl")).toBe(false)
+  })
+
+  it("should append search params when provided", () => {
+    const url = resolveCreateUrl({ rtl: true, template: "next" })
+    const parsed = new URL(url)
+    expect(parsed.searchParams.get("rtl")).toBe("true")
+    expect(parsed.searchParams.get("template")).toBe("next")
+  })
+})
+
+describe("buildInitUrl", () => {
+  it("should build url with all preset fields as query params", () => {
+    const url = resolveInitUrl(mockPreset)
+    const parsed = new URL(url)
+    expect(parsed.origin + parsed.pathname).toBe(`${SHADCN_URL}/init`)
+    expect(parsed.searchParams.get("base")).toBe("radix")
+    expect(parsed.searchParams.get("style")).toBe("new-york-v4")
+    expect(parsed.searchParams.get("baseColor")).toBe("neutral")
+    expect(parsed.searchParams.get("theme")).toBe("default")
+    expect(parsed.searchParams.get("iconLibrary")).toBe("lucide")
+    expect(parsed.searchParams.get("font")).toBe("inter")
+    expect(parsed.searchParams.get("rtl")).toBe("false")
+    expect(parsed.searchParams.get("menuAccent")).toBe("subtle")
+    expect(parsed.searchParams.get("menuColor")).toBe("default")
+    expect(parsed.searchParams.get("radius")).toBe("0.5")
+  })
+
+  it("should set rtl=true when preset.rtl is true", () => {
+    const url = resolveInitUrl({ ...mockPreset, rtl: true })
+    const parsed = new URL(url)
+    expect(parsed.searchParams.get("rtl")).toBe("true")
+  })
+
+  it("should include template when provided", () => {
+    const url = resolveInitUrl(mockPreset, { template: "next" })
+    const parsed = new URL(url)
+    expect(parsed.searchParams.get("template")).toBe("next")
+  })
+
+  it("should not include template when not provided", () => {
+    const url = resolveInitUrl(mockPreset)
+    const parsed = new URL(url)
+    expect(parsed.searchParams.has("template")).toBe(false)
+  })
+})
diff --git a/packages/shadcn/src/preset/presets.ts b/packages/shadcn/src/preset/presets.ts
new file mode 100644
index 0000000000..f1a06c4107
--- /dev/null
+++ b/packages/shadcn/src/preset/presets.ts
@@ -0,0 +1,273 @@
+import { getRegistryItems } from "@/src/registry/api"
+import { buildUrlAndHeadersForRegistryItem } from "@/src/registry/builder"
+import { configWithDefaults } from "@/src/registry/config"
+import { REGISTRY_URL, SHADCN_URL } from "@/src/registry/constants"
+import { type registryConfigSchema } from "@/src/registry/schema"
+import { createConfig } from "@/src/utils/get-config"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import { ensureRegistriesInConfig } from "@/src/utils/registries"
+import open from "open"
+import prompts from "prompts"
+import { type z } from "zod"
+
+export const DEFAULT_PRESETS = {
+  nova: {
+    title: "Nova",
+    description: "Lucide / Geist",
+    style: "nova",
+    baseColor: "neutral",
+    theme: "neutral",
+    iconLibrary: "lucide",
+    font: "geist",
+    menuAccent: "subtle" as const,
+    menuColor: "default" as const,
+    radius: "default",
+    rtl: false,
+  },
+  vega: {
+    title: "Vega",
+    description: "Lucide / Inter",
+    style: "vega",
+    baseColor: "neutral",
+    theme: "neutral",
+    iconLibrary: "lucide",
+    font: "inter",
+    menuAccent: "subtle" as const,
+    menuColor: "default" as const,
+    radius: "default",
+    rtl: false,
+  },
+  maia: {
+    title: "Maia",
+    description: "Hugeicons / Figtree",
+    style: "maia",
+    baseColor: "neutral",
+    theme: "neutral",
+    iconLibrary: "hugeicons",
+    font: "figtree",
+    menuAccent: "subtle" as const,
+    menuColor: "default" as const,
+    radius: "default",
+    rtl: false,
+  },
+  lyra: {
+    title: "Lyra",
+    description: "Phosphor / JetBrains Mono",
+    style: "lyra",
+    baseColor: "neutral",
+    theme: "neutral",
+    iconLibrary: "phosphor",
+    font: "jetbrains-mono",
+    menuAccent: "subtle" as const,
+    menuColor: "default" as const,
+    radius: "default",
+    rtl: false,
+  },
+  mira: {
+    title: "Mira",
+    description: "Hugeicons / Inter",
+    style: "mira",
+    baseColor: "neutral",
+    theme: "neutral",
+    iconLibrary: "hugeicons",
+    font: "inter",
+    menuAccent: "subtle" as const,
+    menuColor: "default" as const,
+    radius: "default",
+    rtl: false,
+  },
+}
+
+export function resolveCreateUrl(
+  searchParams?: Partial<{
+    command: "create" | "init"
+    template: string
+    rtl: boolean
+    base: string
+  }>
+) {
+  const url = new URL(`${SHADCN_URL}/create`)
+  const { rtl, ...params } = searchParams ?? {}
+
+  for (const [key, value] of Object.entries(params)) {
+    if (value !== undefined) {
+      url.searchParams.set(key, String(value))
+    }
+  }
+
+  // Do not set rtl if it's false.
+  if (rtl) {
+    url.searchParams.set("rtl", "true")
+  }
+
+  return url.toString()
+}
+
+export function resolveInitUrl(
+  preset: {
+    base: string
+    style: string
+    baseColor: string
+    theme: string
+    iconLibrary: string
+    font: string
+    rtl: boolean
+    menuAccent: string
+    menuColor: string
+    radius: string
+  },
+  options?: { template?: string }
+) {
+  const params = new URLSearchParams({
+    base: preset.base,
+    style: preset.style,
+    baseColor: preset.baseColor,
+    theme: preset.theme,
+    iconLibrary: preset.iconLibrary,
+    font: preset.font,
+    rtl: String(preset.rtl ?? false),
+    menuAccent: preset.menuAccent,
+    menuColor: preset.menuColor,
+    radius: preset.radius,
+  })
+
+  if (options?.template) {
+    params.set("template", options.template)
+  }
+
+  return `${SHADCN_URL}/init?${params.toString()}`
+}
+
+export async function promptForBase() {
+  const { base } = await prompts({
+    type: "select",
+    name: "base",
+    message: `Select a ${highlighter.info("component library")}`,
+    choices: [
+      { title: "Radix", value: "radix" },
+      { title: "Base", value: "base" },
+    ],
+  })
+  if (!base) process.exit(1)
+  return base as "radix" | "base"
+}
+
+export async function promptForPreset(options: {
+  rtl: boolean
+  base: string
+  template?: string
+}) {
+  const presets = Object.entries(DEFAULT_PRESETS)
+
+  const { selectedPreset } = await prompts({
+    type: "select",
+    name: "selectedPreset",
+    message: `Which ${highlighter.info("preset")} would you like to use?`,
+    choices: [
+      ...presets.map(([name, preset]) => ({
+        title: preset.title,
+        description: preset.description,
+        value: name,
+      })),
+      {
+        title: "Custom",
+        description: `Build your own at ${highlighter.info(`${SHADCN_URL}/create`)}`,
+        value: "custom",
+      },
+    ],
+  })
+
+  if (!selectedPreset) {
+    process.exit(1)
+  }
+
+  if (selectedPreset === "custom") {
+    const createUrl = resolveCreateUrl({
+      command: "init",
+      rtl: options.rtl,
+      base: options.base,
+      ...(options.template && { template: options.template }),
+    })
+    logger.break()
+    logger.log(`  Build your custom preset on ${highlighter.info(createUrl)}`)
+    logger.log(
+      `  Then ${highlighter.info(
+        "copy and run the command"
+      )} from ui.shadcn.com.`
+    )
+    logger.break()
+
+    const { proceed } = await prompts({
+      type: "confirm",
+      name: "proceed",
+      message: "Open in browser?",
+      initial: true,
+    })
+
+    if (proceed) {
+      await open(createUrl)
+    }
+
+    process.exit(0)
+  }
+
+  const preset = DEFAULT_PRESETS[selectedPreset as keyof typeof DEFAULT_PRESETS]
+  if (!preset) {
+    process.exit(1)
+  }
+
+  return {
+    url: resolveInitUrl(
+      { ...preset, base: options.base, rtl: options.rtl },
+      {
+        template: options.template,
+      }
+    ),
+    base: options.base,
+  }
+}
+
+export async function resolveRegistryBaseConfig(
+  initUrl: string,
+  cwd: string,
+  options?: {
+    registries?: z.infer<typeof registryConfigSchema>
+  }
+) {
+  // Use a shadow config to fetch the registry:base item.
+  let shadowConfig = configWithDefaults(
+    createConfig({
+      resolvedPaths: {
+        cwd,
+      },
+      ...(options?.registries && { registries: options.registries }),
+    })
+  )
+
+  // Ensure all registries used in the init URL are configured.
+  const { config: updatedConfig } = await ensureRegistriesInConfig(
+    [initUrl],
+    shadowConfig,
+    {
+      silent: true,
+      writeFile: false,
+    }
+  )
+  shadowConfig = updatedConfig
+
+  // This forces a shadowConfig validation early in the process.
+  buildUrlAndHeadersForRegistryItem(initUrl, shadowConfig)
+
+  const [item] = await getRegistryItems([initUrl], {
+    config: shadowConfig,
+  })
+
+  const registryBaseConfig =
+    item?.type === "registry:base" && item.config ? item.config : undefined
+
+  return {
+    registryBaseConfig,
+    installStyleIndex: item?.extends !== "none",
+  }
+}
diff --git a/packages/shadcn/src/registry/api.test.ts b/packages/shadcn/src/registry/api.test.ts
index 2b231efb88..f2513aa0d5 100644
--- a/packages/shadcn/src/registry/api.test.ts
+++ b/packages/shadcn/src/registry/api.test.ts
@@ -14,7 +14,7 @@ import {
   RegistryParseError,
   RegistryUnauthorizedError,
 } from "@/src/registry/errors"
-import { HttpResponse, http } from "msw"
+import { http, HttpResponse } from "msw"
 import { setupServer } from "msw/node"
 import {
   afterAll,
diff --git a/packages/shadcn/src/registry/config.ts b/packages/shadcn/src/registry/config.ts
index 89ecda34de..a05bd9c9e1 100644
--- a/packages/shadcn/src/registry/config.ts
+++ b/packages/shadcn/src/registry/config.ts
@@ -1,6 +1,6 @@
 import { BUILTIN_REGISTRIES, FALLBACK_STYLE } from "@/src/registry/constants"
 import { configSchema } from "@/src/schema"
-import { Config, DeepPartial, createConfig } from "@/src/utils/get-config"
+import { Config, createConfig, DeepPartial } from "@/src/utils/get-config"
 import deepmerge from "deepmerge"
 
 function resolveStyleFromConfig(config: DeepPartial<Config>) {
diff --git a/packages/shadcn/src/registry/constants.ts b/packages/shadcn/src/registry/constants.ts
index a11e90bd4f..5075da7cb2 100644
--- a/packages/shadcn/src/registry/constants.ts
+++ b/packages/shadcn/src/registry/constants.ts
@@ -4,6 +4,8 @@ import { z } from "zod"
 export const REGISTRY_URL =
   process.env.REGISTRY_URL ?? "https://ui.shadcn.com/r"
 
+export const SHADCN_URL = REGISTRY_URL.replace(/\/r\/?$/, "")
+
 export const FALLBACK_STYLE = "new-york-v4"
 
 export const BASE_COLORS = [
@@ -11,10 +13,6 @@ export const BASE_COLORS = [
     name: "neutral",
     label: "Neutral",
   },
-  {
-    name: "gray",
-    label: "Gray",
-  },
   {
     name: "zinc",
     label: "Zinc",
@@ -24,8 +22,20 @@ export const BASE_COLORS = [
     label: "Stone",
   },
   {
-    name: "slate",
-    label: "Slate",
+    name: "mauve",
+    label: "Mauve",
+  },
+  {
+    name: "olive",
+    label: "Olive",
+  },
+  {
+    name: "mist",
+    label: "Mist",
+  },
+  {
+    name: "taupe",
+    label: "Taupe",
   },
 ] as const
 
diff --git a/packages/shadcn/src/registry/errors.ts b/packages/shadcn/src/registry/errors.ts
index 42dd47fdbc..18f7a7e1ff 100644
--- a/packages/shadcn/src/registry/errors.ts
+++ b/packages/shadcn/src/registry/errors.ts
@@ -1,3 +1,4 @@
+import { SHADCN_URL } from "@/src/registry/constants"
 import { z } from "zod"
 
 // Error codes for programmatic error handling
@@ -76,7 +77,10 @@ export class RegistryError extends Error {
 }
 
 export class RegistryNotFoundError extends RegistryError {
-  constructor(public readonly url: string, cause?: unknown) {
+  constructor(
+    public readonly url: string,
+    cause?: unknown
+  ) {
     const message = `The item at ${url} was not found. It may not exist at the registry.`
 
     super(message, {
@@ -92,7 +96,10 @@ export class RegistryNotFoundError extends RegistryError {
 }
 
 export class RegistryGoneError extends RegistryError {
-  constructor(public readonly url: string, cause?: unknown) {
+  constructor(
+    public readonly url: string,
+    cause?: unknown
+  ) {
     const message = `The item at ${url} is no longer available. It may have been removed or expired.`
 
     super(message, {
@@ -108,7 +115,10 @@ export class RegistryGoneError extends RegistryError {
 }
 
 export class RegistryUnauthorizedError extends RegistryError {
-  constructor(public readonly url: string, cause?: unknown) {
+  constructor(
+    public readonly url: string,
+    cause?: unknown
+  ) {
     const message = `You are not authorized to access the item at ${url}. If this is a remote registry, you may need to authenticate.`
 
     super(message, {
@@ -124,7 +134,10 @@ export class RegistryUnauthorizedError extends RegistryError {
 }
 
 export class RegistryForbiddenError extends RegistryError {
-  constructor(public readonly url: string, cause?: unknown) {
+  constructor(
+    public readonly url: string,
+    cause?: unknown
+  ) {
     const message = `You are not authorized to access the item at ${url}. If this is a remote registry, you may need to authenticate.`
 
     super(message, {
@@ -199,7 +212,10 @@ export class RegistryNotConfiguredError extends RegistryError {
 }
 
 export class RegistryLocalFileError extends RegistryError {
-  constructor(public readonly filePath: string, cause?: unknown) {
+  constructor(
+    public readonly filePath: string,
+    cause?: unknown
+  ) {
     super(`Failed to read local registry file: ${filePath}`, {
       code: RegistryErrorCode.LOCAL_FILE_ERROR,
       cause,
@@ -213,7 +229,10 @@ export class RegistryLocalFileError extends RegistryError {
 export class RegistryParseError extends RegistryError {
   public readonly parseError: unknown
 
-  constructor(public readonly item: string, parseError: unknown) {
+  constructor(
+    public readonly item: string,
+    parseError: unknown
+  ) {
     let message = `Failed to parse registry item: ${item}`
 
     if (parseError instanceof z.ZodError) {
@@ -226,8 +245,7 @@ export class RegistryParseError extends RegistryError {
       code: RegistryErrorCode.PARSE_ERROR,
       cause: parseError,
       context: { item },
-      suggestion:
-        "The registry item may be corrupted or have an invalid format. Please make sure it returns a valid JSON object. See https://ui.shadcn.com/schema/registry-item.json.",
+      suggestion: `The registry item may be corrupted or have an invalid format. Please make sure it returns a valid JSON object. See ${SHADCN_URL}/schema/registry-item.json.`,
     })
 
     this.parseError = parseError
@@ -283,7 +301,10 @@ export class ConfigMissingError extends RegistryError {
 }
 
 export class ConfigParseError extends RegistryError {
-  constructor(public readonly cwd: string, parseError: unknown) {
+  constructor(
+    public readonly cwd: string,
+    parseError: unknown
+  ) {
     let message = `Invalid components.json configuration in ${cwd}.`
 
     if (parseError instanceof z.ZodError) {
diff --git a/packages/shadcn/src/registry/fetcher.test.ts b/packages/shadcn/src/registry/fetcher.test.ts
index 0523bc8ee6..549addb04e 100644
--- a/packages/shadcn/src/registry/fetcher.test.ts
+++ b/packages/shadcn/src/registry/fetcher.test.ts
@@ -6,7 +6,7 @@ import {
   RegistryNotFoundError,
   RegistryUnauthorizedError,
 } from "@/src/registry/errors"
-import { HttpResponse, http } from "msw"
+import { http, HttpResponse } from "msw"
 import { setupServer } from "msw/node"
 import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest"
 
diff --git a/packages/shadcn/src/registry/resolver.test.ts b/packages/shadcn/src/registry/resolver.test.ts
index bcc7fdddb5..088ab63807 100644
--- a/packages/shadcn/src/registry/resolver.test.ts
+++ b/packages/shadcn/src/registry/resolver.test.ts
@@ -2,7 +2,7 @@
 import { promises as fs } from "fs"
 import { tmpdir } from "os"
 import path from "path"
-import { HttpResponse, http } from "msw"
+import { http, HttpResponse } from "msw"
 import { setupServer } from "msw/node"
 import {
   afterAll,
@@ -770,9 +770,9 @@ describe("resolveRegistryTree - dependency ordering", () => {
     expect(hasCircularB).toBe(true)
 
     // Should have logged a warning about circular dependency
-    expect(consoleSpy).toHaveBeenCalledWith(
-      "Circular dependency detected in registry items"
-    )
+    // expect(consoleSpy).toHaveBeenCalledWith(
+    //   "Circular dependency detected in registry items"
+    // )
 
     consoleSpy.mockRestore()
   })
diff --git a/packages/shadcn/src/registry/resolver.ts b/packages/shadcn/src/registry/resolver.ts
index 73ba2b7099..7eca7d5240 100644
--- a/packages/shadcn/src/registry/resolver.ts
+++ b/packages/shadcn/src/registry/resolver.ts
@@ -720,7 +720,7 @@ function topologicalSortRegistryItems(
   }
 
   if (sorted.length !== items.length) {
-    console.warn("Circular dependency detected in registry items")
+    // console.warn("Circular dependency detected in registry items")
     // Return all items even if there are circular dependencies
     // Items not in sorted are part of circular dependencies
     const sortedHashes = new Set(
diff --git a/packages/shadcn/src/registry/schema.ts b/packages/shadcn/src/registry/schema.ts
index c6e51da81a..5ed646627d 100644
--- a/packages/shadcn/src/registry/schema.ts
+++ b/packages/shadcn/src/registry/schema.ts
@@ -142,6 +142,7 @@ export const registryItemFontSchema = z.object({
   variable: z.string(),
   weight: z.array(z.string()).optional(),
   subsets: z.array(z.string()).optional(),
+  selector: z.string().optional(),
 })
 
 // Common fields shared by all registry items.
diff --git a/packages/shadcn/src/registry/search.ts b/packages/shadcn/src/registry/search.ts
index 0d9cb5b753..460fd80f69 100644
--- a/packages/shadcn/src/registry/search.ts
+++ b/packages/shadcn/src/registry/search.ts
@@ -80,7 +80,7 @@ function searchItems<
     description?: string
     addCommandArgument?: string
     [key: string]: any
-  } = SearchableItem
+  } = SearchableItem,
 >(
   items: T[],
   options: {
diff --git a/packages/shadcn/src/registry/utils.test.ts b/packages/shadcn/src/registry/utils.test.ts
index e45b47695e..fd43ea192d 100644
--- a/packages/shadcn/src/registry/utils.test.ts
+++ b/packages/shadcn/src/registry/utils.test.ts
@@ -443,7 +443,7 @@ describe("deduplicateFilesByTarget", () => {
         ui: "/test/project/components/ui",
       },
       ...overrides,
-    } as Config)
+    }) as Config
 
   test("should deduplicate files with same resolved path", async () => {
     const config = createMockConfig()
diff --git a/packages/shadcn/src/registry/utils.ts b/packages/shadcn/src/registry/utils.ts
index ad7443ab8c..7f1951f077 100644
--- a/packages/shadcn/src/registry/utils.ts
+++ b/packages/shadcn/src/registry/utils.ts
@@ -7,7 +7,7 @@ import {
   registryItemSchema,
 } from "@/src/schema"
 import { Config } from "@/src/utils/get-config"
-import { ProjectInfo, getProjectInfo } from "@/src/utils/get-project-info"
+import { getProjectInfo, ProjectInfo } from "@/src/utils/get-project-info"
 import { resolveImport } from "@/src/utils/resolve-import"
 import {
   findCommonRoot,
diff --git a/packages/shadcn/src/templates/astro.ts b/packages/shadcn/src/templates/astro.ts
new file mode 100644
index 0000000000..424477881b
--- /dev/null
+++ b/packages/shadcn/src/templates/astro.ts
@@ -0,0 +1,60 @@
+import dedent from "dedent"
+
+import { createTemplate } from "./create-template"
+import { fontsourceMonorepoInit } from "./monorepo"
+
+export const astro = createTemplate({
+  name: "astro",
+  title: "Astro",
+  defaultProjectName: "astro-app",
+  templateDir: "astro-app",
+  frameworks: ["astro"],
+  create: async () => {
+    // Empty for now.
+  },
+  files: [
+    {
+      type: "registry:page",
+      path: "src/pages/index.astro",
+      target: "src/pages/index.astro",
+      content: dedent`---
+import Layout from "@/layouts/main.astro"
+import { ComponentExample } from "@/components/component-example"
+---
+
+<Layout>
+  <ComponentExample client:load />
+</Layout>
+`,
+    },
+  ],
+  monorepo: {
+    templateDir: "astro-monorepo",
+    packageManager: "pnpm",
+    installArgs: ["--no-frozen-lockfile"],
+    init: fontsourceMonorepoInit,
+    files: [
+      {
+        type: "registry:page",
+        path: "src/pages/index.astro",
+        target: "src/pages/index.astro",
+        content: dedent`---
+import "@workspace/ui/globals.css"
+import { ComponentExample } from "@/components/component-example"
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Astro App</title>
+  </head>
+  <body>
+    <ComponentExample client:load />
+  </body>
+</html>
+`,
+      },
+    ],
+  },
+})
diff --git a/packages/shadcn/src/templates/create-template.ts b/packages/shadcn/src/templates/create-template.ts
new file mode 100644
index 0000000000..063ca04027
--- /dev/null
+++ b/packages/shadcn/src/templates/create-template.ts
@@ -0,0 +1,194 @@
+import os from "os"
+import path from "path"
+import { REGISTRY_URL } from "@/src/registry/constants"
+import type { RegistryItem } from "@/src/registry/schema"
+import type { Config } from "@/src/utils/get-config"
+import { handleError } from "@/src/utils/handle-error"
+import { spinner } from "@/src/utils/spinner"
+import { execa } from "execa"
+import fs from "fs-extra"
+
+export const TEMPLATE_BASE_URL = `${REGISTRY_URL}/templates`
+
+export interface TemplateOptions {
+  projectPath: string
+  packageManager: string
+  cwd: string
+}
+
+export interface TemplateInitOptions {
+  projectPath: string
+  components: string[]
+  registryBaseConfig?: Record<string, unknown>
+  rtl: boolean
+  silent: boolean
+}
+
+export interface TemplateConfig {
+  name: string
+  title: string
+  description?: string
+  defaultProjectName: string
+  // The template directory name (e.g. "next-app", "vite-app").
+  templateDir: string
+  // Force a specific package manager for this template.
+  packageManager?: string
+  // Framework names that map to this template.
+  frameworks?: string[]
+  // Custom args passed to `packageManager install`.
+  installArgs?: string[]
+  scaffold?: (options: TemplateOptions) => Promise<void>
+  create: (options: TemplateOptions) => Promise<void>
+  init?: (options: TemplateInitOptions) => Promise<Config>
+  files?: RegistryItem["files"]
+  postInit?: (options: { projectPath: string }) => Promise<void>
+  // Monorepo overrides. When --monorepo is passed, these fields
+  // are merged over the base template config.
+  monorepo?: {
+    templateDir: string
+    defaultProjectName?: string
+    packageManager?: string
+    installArgs?: string[]
+    init?: (options: TemplateInitOptions) => Promise<Config>
+    files?: RegistryItem["files"]
+  }
+}
+
+export function createTemplate(config: TemplateConfig) {
+  return {
+    ...config,
+    frameworks: config.frameworks ?? [],
+    scaffold:
+      config.scaffold ??
+      defaultScaffold({
+        title: config.title,
+        templateDir: config.templateDir,
+        installArgs: config.installArgs,
+      }),
+    postInit: config.postInit ?? defaultPostInit,
+  }
+}
+
+// Resolve effective template config for --monorepo mode.
+export function resolveTemplate(
+  template: ReturnType<typeof createTemplate>,
+  { monorepo }: { monorepo?: boolean }
+) {
+  if (!monorepo || !template.monorepo) {
+    return template
+  }
+
+  const m = template.monorepo
+  const resolved = {
+    ...template,
+    templateDir: m.templateDir,
+    defaultProjectName: m.defaultProjectName ?? m.templateDir,
+    packageManager: m.packageManager ?? template.packageManager,
+    installArgs: m.installArgs ?? template.installArgs,
+    init: m.init ?? template.init,
+    files: m.files ?? template.files,
+  }
+
+  // Rebuild scaffold with monorepo overrides.
+  resolved.scaffold = defaultScaffold({
+    title: template.title,
+    templateDir: m.templateDir,
+    installArgs: resolved.installArgs,
+  })
+
+  return resolved
+}
+
+// Default scaffold that fetches a pre-built template archive.
+function defaultScaffold({
+  title,
+  templateDir,
+  installArgs,
+}: {
+  title: string
+  templateDir: string
+  installArgs?: string[]
+}) {
+  return async ({ projectPath, packageManager }: TemplateOptions) => {
+    const createSpinner = spinner(
+      `Creating a new ${title} project. This may take a few minutes.`
+    ).start()
+
+    try {
+      const localTemplateDir = process.env.SHADCN_TEMPLATE_DIR
+      if (localTemplateDir) {
+        // Use local template directory for development.
+        const localTemplatePath = path.resolve(localTemplateDir, templateDir)
+        await fs.copy(localTemplatePath, projectPath, {
+          filter: (src) => !src.includes("node_modules"),
+        })
+      } else {
+        // Fetch the pre-built template archive.
+        const templatePath = path.join(
+          os.tmpdir(),
+          `shadcn-template-${Date.now()}`
+        )
+        await fs.ensureDir(templatePath)
+        const response = await fetch(
+          `${TEMPLATE_BASE_URL}/${templateDir}.tar.gz`
+        )
+        if (!response.ok) {
+          throw new Error(`Failed to download template: ${response.statusText}`)
+        }
+
+        // Write and extract the tar file.
+        const tarPath = path.resolve(templatePath, "template.tar.gz")
+        await fs.writeFile(tarPath, Buffer.from(await response.arrayBuffer()))
+        await execa("tar", ["-xzf", tarPath, "-C", templatePath])
+        const extractedPath = path.resolve(templatePath, templateDir)
+        await fs.move(extractedPath, projectPath)
+        await fs.remove(templatePath)
+      }
+
+      // Remove pnpm-lock.yaml if using a different package manager.
+      if (packageManager !== "pnpm") {
+        const lockFilePath = path.join(projectPath, "pnpm-lock.yaml")
+        if (fs.existsSync(lockFilePath)) {
+          await fs.remove(lockFilePath)
+        }
+      }
+
+      // Run install.
+      const args = ["install", ...(installArgs ?? [])]
+      await execa(packageManager, args, {
+        cwd: projectPath,
+      })
+
+      // Write project name to the package.json.
+      const packageJsonPath = path.join(projectPath, "package.json")
+      if (fs.existsSync(packageJsonPath)) {
+        const packageJsonContent = await fs.readFile(packageJsonPath, "utf8")
+        const packageJson = JSON.parse(packageJsonContent)
+        packageJson.name = path.basename(projectPath)
+        await fs.writeFile(
+          packageJsonPath,
+          JSON.stringify(packageJson, null, 2)
+        )
+      }
+
+      createSpinner?.succeed(`Creating a new ${title} project.`)
+    } catch (error) {
+      createSpinner?.fail(
+        `Something went wrong creating a new ${title} project.`
+      )
+      handleError(error)
+    }
+  }
+}
+
+// Initialize a git repository and create an initial commit.
+// Silently ignores failures (e.g. git not installed).
+async function defaultPostInit({ projectPath }: { projectPath: string }) {
+  try {
+    await execa("git", ["init"], { cwd: projectPath })
+    await execa("git", ["add", "-A"], { cwd: projectPath })
+    await execa("git", ["commit", "-m", "feat: initial commit"], {
+      cwd: projectPath,
+    })
+  } catch {}
+}
diff --git a/packages/shadcn/src/templates/index.ts b/packages/shadcn/src/templates/index.ts
new file mode 100644
index 0000000000..84982ad94c
--- /dev/null
+++ b/packages/shadcn/src/templates/index.ts
@@ -0,0 +1,37 @@
+import { astro } from "./astro"
+import { laravel } from "./laravel"
+import { next } from "./next"
+import { reactRouter } from "./react-router"
+import { start } from "./start"
+import { vite } from "./vite"
+
+export {
+  createTemplate,
+  resolveTemplate,
+  TEMPLATE_BASE_URL,
+} from "./create-template"
+export type { TemplateInitOptions, TemplateOptions } from "./create-template"
+
+export const templates = {
+  next,
+  vite,
+  start,
+  "react-router": reactRouter,
+  astro,
+  laravel,
+}
+
+// Resolve a template key from a detected framework name.
+export function getTemplateForFramework(frameworkName?: string) {
+  if (!frameworkName) {
+    return undefined
+  }
+
+  for (const [key, template] of Object.entries(templates)) {
+    if (template.frameworks.includes(frameworkName)) {
+      return key
+    }
+  }
+
+  return undefined
+}
diff --git a/packages/shadcn/src/templates/laravel.ts b/packages/shadcn/src/templates/laravel.ts
new file mode 100644
index 0000000000..6bc54d3c4c
--- /dev/null
+++ b/packages/shadcn/src/templates/laravel.ts
@@ -0,0 +1,32 @@
+import { SHADCN_URL } from "@/src/registry/constants"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+
+import { createTemplate } from "./create-template"
+
+export const laravel = createTemplate({
+  name: "laravel",
+  title: "Laravel",
+  description: "Requires `laravel new`",
+  defaultProjectName: "laravel-app",
+  templateDir: "laravel-app",
+  frameworks: ["laravel"],
+  scaffold: async () => {
+    logger.break()
+    logger.log(
+      `  Please create a new app with ${highlighter.info(
+        "laravel new --react"
+      )} first then run ${highlighter.info("shadcn init")}.`
+    )
+    logger.log(
+      `  See ${highlighter.info(
+        `${SHADCN_URL}/docs/installation/laravel`
+      )} for more information.`
+    )
+    logger.break()
+    process.exit(0)
+  },
+  create: async () => {
+    // Not used — scaffold exits early.
+  },
+})
diff --git a/packages/shadcn/src/templates/monorepo.ts b/packages/shadcn/src/templates/monorepo.ts
new file mode 100644
index 0000000000..eb7047b66d
--- /dev/null
+++ b/packages/shadcn/src/templates/monorepo.ts
@@ -0,0 +1,134 @@
+import path from "path"
+import { iconLibraries, type IconLibraryName } from "@/src/icons/libraries"
+import { configWithDefaults } from "@/src/registry/config"
+import { resolveRegistryTree } from "@/src/registry/resolver"
+import { rawConfigSchema } from "@/src/schema"
+import { addComponents } from "@/src/utils/add-components"
+import { resolveConfigPaths } from "@/src/utils/get-config"
+import { ensureRegistriesInConfig } from "@/src/utils/registries"
+import { updateCss } from "@/src/utils/updaters/update-css"
+import { updateCssVars } from "@/src/utils/updaters/update-css-vars"
+import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
+import deepmerge from "deepmerge"
+import fs from "fs-extra"
+
+import type { TemplateInitOptions } from "./create-template"
+
+// Shared monorepo init for non-Next.js templates (vite, react-router, start).
+// Uses fontsource for fonts instead of next/font.
+export async function fontsourceMonorepoInit(options: TemplateInitOptions) {
+  const packagesUiPath = path.resolve(options.projectPath, "packages/ui")
+  const appsWebPath = path.resolve(options.projectPath, "apps/web")
+
+  // Update packages/ui/components.json.
+  const packagesUiConfigPath = path.resolve(packagesUiPath, "components.json")
+  let packagesUiConfig = await fs.readJson(packagesUiConfigPath)
+  if (options.registryBaseConfig) {
+    packagesUiConfig = deepmerge(packagesUiConfig, options.registryBaseConfig)
+  }
+  packagesUiConfig.tailwind.baseColor = "neutral"
+  if (options.rtl) {
+    packagesUiConfig.rtl = true
+  }
+  await fs.writeJson(packagesUiConfigPath, packagesUiConfig, {
+    spaces: 2,
+  })
+
+  // Update apps/web/components.json.
+  const appsWebConfigPath = path.resolve(appsWebPath, "components.json")
+  let appsWebConfig = await fs.readJson(appsWebConfigPath)
+  if (options.registryBaseConfig) {
+    appsWebConfig = deepmerge(appsWebConfig, options.registryBaseConfig)
+  }
+  appsWebConfig.tailwind.baseColor = "neutral"
+  if (options.rtl) {
+    appsWebConfig.rtl = true
+  }
+  await fs.writeJson(appsWebConfigPath, appsWebConfig, { spaces: 2 })
+
+  // Apply preset CSS/style to packages/ui directly.
+  // We use the packages/ui config so addProjectComponents runs
+  // instead of addWorkspaceComponents. This keeps CSS/deps in packages/ui.
+  const resolvedPackagesUiConfig = await resolveConfigPaths(
+    packagesUiPath,
+    rawConfigSchema.parse(packagesUiConfig)
+  )
+  const { config: packagesUiWithRegistries } = await ensureRegistriesInConfig(
+    options.components,
+    resolvedPackagesUiConfig,
+    { silent: true }
+  )
+  // Skip fonts here — we handle them explicitly below.
+  await addComponents(options.components, packagesUiWithRegistries, {
+    overwrite: true,
+    silent: options.silent,
+    isNewProject: true,
+    skipFonts: true,
+  })
+
+  const resolvedAppsWebConfig = await resolveConfigPaths(
+    appsWebPath,
+    rawConfigSchema.parse(appsWebConfig)
+  )
+
+  // Handle fonts at the packages/ui level using fontsource.
+  // packages/ui has no framework config, so massageTreeForFonts can't detect the framework.
+  // We resolve the tree to get fonts and manually add fontsource deps + CSS.
+  const tree = await resolveRegistryTree(
+    options.components,
+    configWithDefaults(packagesUiWithRegistries)
+  )
+  if (tree?.fonts?.length) {
+    const [fontSans] = tree.fonts
+
+    // Add fontsource dependency.
+    const fontName = fontSans.name.replace("font-", "")
+    const fontSourceDependency = `@fontsource-variable/${fontName}`
+    await updateDependencies(
+      [fontSourceDependency],
+      [],
+      resolvedPackagesUiConfig,
+      { silent: true }
+    )
+
+    // Add font CSS variable to @theme inline in packages/ui CSS.
+    await updateCssVars(
+      {
+        theme: {
+          [fontSans.font.variable]: fontSans.font.family,
+        },
+      },
+      resolvedPackagesUiConfig,
+      {
+        silent: options.silent,
+        overwriteCssVars: false,
+        tailwindVersion: "v4",
+      }
+    )
+
+    // Add fontsource import to packages/ui CSS.
+    await updateCss(
+      {
+        [`@import "${fontSourceDependency}"`]: {},
+      },
+      resolvedPackagesUiConfig,
+      {
+        silent: options.silent,
+      }
+    )
+  }
+
+  // Install icon library packages in both workspaces.
+  const iconLibrary = resolvedPackagesUiConfig.iconLibrary as IconLibraryName
+  if (iconLibrary && iconLibrary in iconLibraries) {
+    const iconPackages = [...iconLibraries[iconLibrary].packages]
+    await updateDependencies(iconPackages, [], resolvedPackagesUiConfig, {
+      silent: true,
+    })
+    await updateDependencies(iconPackages, [], resolvedAppsWebConfig, {
+      silent: true,
+    })
+  }
+
+  return resolvedAppsWebConfig
+}
diff --git a/packages/shadcn/src/templates/next.ts b/packages/shadcn/src/templates/next.ts
new file mode 100644
index 0000000000..ef16aad99f
--- /dev/null
+++ b/packages/shadcn/src/templates/next.ts
@@ -0,0 +1,164 @@
+import path from "path"
+import { iconLibraries, type IconLibraryName } from "@/src/icons/libraries"
+import { configWithDefaults } from "@/src/registry/config"
+import { resolveRegistryTree } from "@/src/registry/resolver"
+import { rawConfigSchema } from "@/src/schema"
+import { addComponents } from "@/src/utils/add-components"
+import { resolveConfigPaths } from "@/src/utils/get-config"
+import { ensureRegistriesInConfig } from "@/src/utils/registries"
+import { updateCssVars } from "@/src/utils/updaters/update-css-vars"
+import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
+import { updateFonts } from "@/src/utils/updaters/update-fonts"
+import dedent from "dedent"
+import deepmerge from "deepmerge"
+import fs from "fs-extra"
+
+import { createTemplate } from "./create-template"
+
+export const next = createTemplate({
+  name: "next",
+  title: "Next.js",
+  defaultProjectName: "next-app",
+  templateDir: "next-app",
+  frameworks: ["next-app", "next-pages"],
+  create: async () => {
+    // Empty for now.
+  },
+  files: [
+    {
+      type: "registry:page",
+      path: "app/page.tsx",
+      target: "app/page.tsx",
+      content: dedent`import { ComponentExample } from "@/components/component-example";
+
+export default function Page() {
+  return <ComponentExample />;
+}
+`,
+    },
+  ],
+  monorepo: {
+    templateDir: "next-monorepo",
+    packageManager: "pnpm",
+    // pnpm enables frozen lockfile in CI by default.
+    // The template lockfile may drift, so force-disable it explicitly.
+    installArgs: ["--no-frozen-lockfile"],
+    init: async (options) => {
+      const packagesUiPath = path.resolve(options.projectPath, "packages/ui")
+      const appsWebPath = path.resolve(options.projectPath, "apps/web")
+
+      // Update packages/ui/components.json.
+      const packagesUiConfigPath = path.resolve(
+        packagesUiPath,
+        "components.json"
+      )
+      let packagesUiConfig = await fs.readJson(packagesUiConfigPath)
+      if (options.registryBaseConfig) {
+        packagesUiConfig = deepmerge(
+          packagesUiConfig,
+          options.registryBaseConfig
+        )
+      }
+      packagesUiConfig.tailwind.baseColor = "neutral"
+      if (options.rtl) {
+        packagesUiConfig.rtl = true
+      }
+      await fs.writeJson(packagesUiConfigPath, packagesUiConfig, {
+        spaces: 2,
+      })
+
+      // Update apps/web/components.json.
+      const appsWebConfigPath = path.resolve(appsWebPath, "components.json")
+      let appsWebConfig = await fs.readJson(appsWebConfigPath)
+      if (options.registryBaseConfig) {
+        appsWebConfig = deepmerge(appsWebConfig, options.registryBaseConfig)
+      }
+      appsWebConfig.tailwind.baseColor = "neutral"
+      if (options.rtl) {
+        appsWebConfig.rtl = true
+      }
+      await fs.writeJson(appsWebConfigPath, appsWebConfig, { spaces: 2 })
+
+      // Apply preset CSS/style to packages/ui directly.
+      // We use the packages/ui config (not apps/web) so addProjectComponents runs
+      // instead of addWorkspaceComponents. This keeps CSS/deps in packages/ui.
+      const resolvedPackagesUiConfig = await resolveConfigPaths(
+        packagesUiPath,
+        rawConfigSchema.parse(packagesUiConfig)
+      )
+      const { config: packagesUiWithRegistries } =
+        await ensureRegistriesInConfig(
+          options.components,
+          resolvedPackagesUiConfig,
+          { silent: true }
+        )
+      // Skip fonts here — we handle them explicitly below using the apps/web config.
+      await addComponents(options.components, packagesUiWithRegistries, {
+        overwrite: true,
+        silent: options.silent,
+        isNewProject: true,
+        skipFonts: true,
+      })
+
+      const resolvedAppsWebConfig = await resolveConfigPaths(
+        appsWebPath,
+        rawConfigSchema.parse(appsWebConfig)
+      )
+
+      // Handle fonts at the apps/web level.
+      // packages/ui has no next.config so massageTreeForFonts can't detect Next.js.
+      // We resolve the tree to get fonts, then apply them using the apps/web config.
+      // which has next.config and layout.tsx.
+      const tree = await resolveRegistryTree(
+        options.components,
+        configWithDefaults(packagesUiWithRegistries)
+      )
+      if (tree?.fonts?.length) {
+        // Add font CSS variables to packages/ui CSS (same as massageTreeForFonts for Next.js).
+        const themeCssVars: Record<string, string> = {}
+        for (const font of tree.fonts) {
+          themeCssVars[font.font.variable] = `var(${font.font.variable})`
+        }
+
+        await updateCssVars({ theme: themeCssVars }, resolvedPackagesUiConfig, {
+          silent: options.silent,
+          overwriteCssVars: false,
+          tailwindVersion: "v4",
+        })
+
+        // Update layout.tsx in apps/web with the font import and className.
+        await updateFonts(tree.fonts, resolvedAppsWebConfig, {
+          silent: options.silent,
+        })
+      }
+
+      // Install icon library packages in both workspaces.
+      const iconLibrary =
+        resolvedPackagesUiConfig.iconLibrary as IconLibraryName
+      if (iconLibrary && iconLibrary in iconLibraries) {
+        const iconPackages = [...iconLibraries[iconLibrary].packages]
+        await updateDependencies(iconPackages, [], resolvedPackagesUiConfig, {
+          silent: true,
+        })
+        await updateDependencies(iconPackages, [], resolvedAppsWebConfig, {
+          silent: true,
+        })
+      }
+
+      return resolvedAppsWebConfig
+    },
+    files: [
+      {
+        type: "registry:page",
+        path: "app/page.tsx",
+        target: "app/page.tsx",
+        content: dedent`import { ComponentExample } from "@/components/component-example";
+
+export default function Page() {
+  return <ComponentExample />;
+}
+`,
+      },
+    ],
+  },
+})
diff --git a/packages/shadcn/src/templates/react-router.ts b/packages/shadcn/src/templates/react-router.ts
new file mode 100644
index 0000000000..24b6bd7060
--- /dev/null
+++ b/packages/shadcn/src/templates/react-router.ts
@@ -0,0 +1,47 @@
+import dedent from "dedent"
+
+import { createTemplate } from "./create-template"
+import { fontsourceMonorepoInit } from "./monorepo"
+
+export const reactRouter = createTemplate({
+  name: "react-router",
+  title: "React Router",
+  defaultProjectName: "react-router-app",
+  templateDir: "react-router-app",
+  frameworks: ["react-router"],
+  create: async () => {
+    // Empty for now.
+  },
+  files: [
+    {
+      type: "registry:file",
+      path: "app/routes/home.tsx",
+      target: "app/routes/home.tsx",
+      content: dedent`import { ComponentExample } from "@/components/component-example";
+
+export default function Home() {
+  return <ComponentExample />;
+}
+`,
+    },
+  ],
+  monorepo: {
+    templateDir: "react-router-monorepo",
+    packageManager: "pnpm",
+    installArgs: ["--no-frozen-lockfile"],
+    init: fontsourceMonorepoInit,
+    files: [
+      {
+        type: "registry:file",
+        path: "app/routes/home.tsx",
+        target: "app/routes/home.tsx",
+        content: dedent`import { ComponentExample } from "@/components/component-example";
+
+export default function Home() {
+  return <ComponentExample />;
+}
+`,
+      },
+    ],
+  },
+})
diff --git a/packages/shadcn/src/templates/start.ts b/packages/shadcn/src/templates/start.ts
new file mode 100644
index 0000000000..ce232d871b
--- /dev/null
+++ b/packages/shadcn/src/templates/start.ts
@@ -0,0 +1,57 @@
+import dedent from "dedent"
+
+import { createTemplate } from "./create-template"
+import { fontsourceMonorepoInit } from "./monorepo"
+
+export const start = createTemplate({
+  name: "start",
+  title: "TanStack Start",
+  defaultProjectName: "start-app",
+  templateDir: "start-app",
+  frameworks: ["tanstack-start"],
+  create: async () => {
+    // Empty for now.
+  },
+  files: [
+    {
+      type: "registry:file",
+      path: "src/routes/index.tsx",
+      target: "src/routes/index.tsx",
+      content: dedent`import { createFileRoute } from "@tanstack/react-router";
+import { ComponentExample } from "@/components/component-example";
+
+export const Route = createFileRoute("/")({ component: App });
+
+function App() {
+  return (
+    <ComponentExample />
+  );
+}
+`,
+    },
+  ],
+  monorepo: {
+    templateDir: "start-monorepo",
+    packageManager: "pnpm",
+    installArgs: ["--no-frozen-lockfile"],
+    init: fontsourceMonorepoInit,
+    files: [
+      {
+        type: "registry:file",
+        path: "src/routes/index.tsx",
+        target: "src/routes/index.tsx",
+        content: dedent`import { createFileRoute } from "@tanstack/react-router";
+import { ComponentExample } from "@/components/component-example";
+
+export const Route = createFileRoute("/")({ component: App });
+
+function App() {
+  return (
+    <ComponentExample />
+  );
+}
+`,
+      },
+    ],
+  },
+})
diff --git a/packages/shadcn/src/templates/vite.ts b/packages/shadcn/src/templates/vite.ts
new file mode 100644
index 0000000000..4af5294fc9
--- /dev/null
+++ b/packages/shadcn/src/templates/vite.ts
@@ -0,0 +1,51 @@
+import dedent from "dedent"
+
+import { createTemplate } from "./create-template"
+import { fontsourceMonorepoInit } from "./monorepo"
+
+export const vite = createTemplate({
+  name: "vite",
+  title: "Vite",
+  defaultProjectName: "vite-app",
+  templateDir: "vite-app",
+  frameworks: ["vite"],
+  create: async () => {
+    // Empty for now.
+  },
+  files: [
+    {
+      type: "registry:file",
+      path: "src/App.tsx",
+      target: "src/App.tsx",
+      content: dedent`import { ComponentExample } from "@/components/component-example";
+
+export function App() {
+  return <ComponentExample />;
+}
+
+export default App;
+`,
+    },
+  ],
+  monorepo: {
+    templateDir: "vite-monorepo",
+    packageManager: "pnpm",
+    installArgs: ["--no-frozen-lockfile"],
+    init: fontsourceMonorepoInit,
+    files: [
+      {
+        type: "registry:file",
+        path: "src/App.tsx",
+        target: "src/App.tsx",
+        content: dedent`import { ComponentExample } from "@/components/component-example";
+
+export function App() {
+  return <ComponentExample />;
+}
+
+export default App;
+`,
+      },
+    ],
+  },
+})
diff --git a/packages/shadcn/src/utils/add-components.ts b/packages/shadcn/src/utils/add-components.ts
index 38663a04a3..aca5b609c6 100644
--- a/packages/shadcn/src/utils/add-components.ts
+++ b/packages/shadcn/src/utils/add-components.ts
@@ -20,7 +20,6 @@ import { isSafeTarget } from "@/src/utils/is-safe-target"
 import { logger } from "@/src/utils/logger"
 import { spinner } from "@/src/utils/spinner"
 import { updateCss } from "@/src/utils/updaters/update-css"
-import { updateCssVars } from "@/src/utils/updaters/update-css-vars"
 import { updateDependencies } from "@/src/utils/updaters/update-dependencies"
 import { updateEnvVars } from "@/src/utils/updaters/update-env-vars"
 import { updateFiles } from "@/src/utils/updaters/update-files"
@@ -36,8 +35,10 @@ export async function addComponents(
   config: Config,
   options: {
     overwrite?: boolean
+    overwriteCssVars?: boolean
     silent?: boolean
     isNewProject?: boolean
+    skipFonts?: boolean
     registryHeaders?: Record<string, Record<string, string>>
     path?: string
   }
@@ -62,7 +63,10 @@ export async function addComponents(
     })
   }
 
-  return await addProjectComponents(components, config, options)
+  return await addProjectComponents(components, config, {
+    ...options,
+    skipFonts: options.skipFonts,
+  })
 }
 
 async function addProjectComponents(
@@ -70,8 +74,10 @@ async function addProjectComponents(
   config: z.infer<typeof configSchema>,
   options: {
     overwrite?: boolean
+    overwriteCssVars?: boolean
     silent?: boolean
     isNewProject?: boolean
+    skipFonts?: boolean
     path?: string
   }
 ) {
@@ -100,38 +106,28 @@ async function addProjectComponents(
 
   const tailwindVersion = await getProjectTailwindVersionFromConfig(config)
 
-  tree = await massageTreeForFonts(tree, config)
+  if (!options.skipFonts) {
+    tree = await massageTreeForFonts(tree, config)
+  }
+
+  await updateDependencies(tree.dependencies, tree.devDependencies, config, {
+    silent: options.silent,
+  })
 
   await updateTailwindConfig(tree.tailwind?.config, config, {
     silent: options.silent,
     tailwindVersion,
   })
 
-  const overwriteCssVars = await shouldOverwriteCssVars(components, config)
-  await updateCssVars(tree.cssVars, config, {
-    cleanupDefaultNextStyles: options.isNewProject,
-    silent: options.silent,
-    tailwindVersion,
-    tailwindConfig: tree.tailwind?.config,
-    overwriteCssVars,
-  })
-
-  // Add CSS updater
-  await updateCss(tree.css, config, {
-    silent: options.silent,
-  })
-
   await updateEnvVars(tree.envVars, config, {
     silent: options.silent,
   })
 
-  await updateDependencies(tree.dependencies, tree.devDependencies, config, {
-    silent: options.silent,
-  })
-
-  await updateFonts(tree.fonts, config, {
-    silent: options.silent,
-  })
+  if (!options.skipFonts) {
+    await updateFonts(tree.fonts, config, {
+      silent: options.silent,
+    })
+  }
 
   await updateFiles(tree.files, config, {
     overwrite: options.overwrite,
@@ -139,6 +135,21 @@ async function addProjectComponents(
     path: options.path,
   })
 
+  // Write CSS last so the file watcher triggers a rebuild
+  // after all component files and dependencies are in place.
+  const overwriteCssVars = tree.cssVars
+    ? (options.overwriteCssVars ??
+      (await shouldOverwriteCssVars(components, config)))
+    : undefined
+  await updateCss(tree.css, config, {
+    silent: options.silent,
+    cssVars: tree.cssVars,
+    cleanupDefaultNextStyles: options.isNewProject,
+    overwriteCssVars,
+    tailwindVersion,
+    tailwindConfig: tree.tailwind?.config,
+  })
+
   if (tree.docs) {
     logger.info(tree.docs)
   }
@@ -150,6 +161,7 @@ async function addWorkspaceComponents(
   workspaceConfig: z.infer<typeof workspaceConfigSchema>,
   options: {
     overwrite?: boolean
+    overwriteCssVars?: boolean
     silent?: boolean
     isNewProject?: boolean
     isRemote?: boolean
@@ -163,7 +175,7 @@ async function addWorkspaceComponents(
   const registrySpinner = spinner(`Checking registry.`, {
     silent: options.silent,
   })?.start()
-  const tree = await resolveRegistryTree(components, configWithDefaults(config))
+  let tree = await resolveRegistryTree(components, configWithDefaults(config))
 
   if (!tree) {
     registrySpinner?.fail()
@@ -185,18 +197,31 @@ async function addWorkspaceComponents(
 
   const rootSpinner = spinner(`Installing components.`)?.start()
 
-  // Process global updates (tailwind, css vars, dependencies) first for the main target.
+  // Process global updates for the main target.
   // These should typically go to the UI package in a workspace.
   const mainTargetConfig = workspaceConfig.ui
-  const tailwindVersion = await getProjectTailwindVersionFromConfig(
-    mainTargetConfig
-  )
+  const tailwindVersion =
+    await getProjectTailwindVersionFromConfig(mainTargetConfig)
   const workspaceRoot = findCommonRoot(
     config.resolvedPaths.cwd,
     mainTargetConfig.resolvedPaths.ui
   )
 
-  // 1. Update tailwind config.
+  // Massage tree for fonts using the app config for framework detection.
+  // This adds fontsource deps + CSS for non-Next, or next/font CSS vars for Next.
+  tree = await massageTreeForFonts(tree, config)
+
+  // 1. Update dependencies.
+  await updateDependencies(
+    tree.dependencies,
+    tree.devDependencies,
+    mainTargetConfig,
+    {
+      silent: true,
+    }
+  )
+
+  // 2. Update tailwind config.
   if (tree.tailwind?.config) {
     await updateTailwindConfig(tree.tailwind?.config, mainTargetConfig, {
       silent: true,
@@ -210,53 +235,21 @@ async function addWorkspaceComponents(
     )
   }
 
-  // 2. Update css vars.
-  if (tree.cssVars) {
-    const overwriteCssVars = await shouldOverwriteCssVars(components, config)
-    await updateCssVars(tree.cssVars, mainTargetConfig, {
-      silent: true,
-      tailwindVersion,
-      tailwindConfig: tree.tailwind?.config,
-      overwriteCssVars,
-    })
-    filesUpdated.push(
-      path.relative(workspaceRoot, mainTargetConfig.resolvedPaths.tailwindCss)
-    )
-  }
-
-  // 3. Update CSS
-  if (tree.css) {
-    await updateCss(tree.css, mainTargetConfig, {
-      silent: true,
-    })
-    filesUpdated.push(
-      path.relative(workspaceRoot, mainTargetConfig.resolvedPaths.tailwindCss)
-    )
-  }
-
-  // 4. Update environment variables
+  // 3. Update environment variables.
   if (tree.envVars) {
     await updateEnvVars(tree.envVars, mainTargetConfig, {
       silent: true,
     })
   }
 
-  // 5. Update dependencies.
-  await updateDependencies(
-    tree.dependencies,
-    tree.devDependencies,
-    mainTargetConfig,
-    {
-      silent: true,
-    }
-  )
-
-  // 6. Update fonts.
-  await updateFonts(tree.fonts, mainTargetConfig, {
+  // 4. Update fonts.
+  // Fonts modify the app's layout file (e.g. app/layout.tsx),
+  // so we use the app config, not the UI workspace config.
+  await updateFonts(tree.fonts, config, {
     silent: true,
   })
 
-  // 7. Group files by their type to determine target config and update files.
+  // 5. Group files by their type to determine target config and update files.
   const filesByType = new Map<string, typeof tree.files>()
 
   for (const file of tree.files ?? []) {
@@ -267,11 +260,21 @@ async function addWorkspaceComponents(
     filesByType.get(type)!.push(file)
   }
 
+  const FILE_TYPE_TO_CONFIG_KEY: Record<string, string> = {
+    "registry:ui": "ui",
+    "registry:hook": "hooks",
+    "registry:lib": "lib",
+  }
+
   // Process each type of component with its appropriate target config.
   for (const type of Array.from(filesByType.keys())) {
     const typeFiles = filesByType.get(type)!
 
-    let targetConfig = type === "registry:ui" ? workspaceConfig.ui : config
+    const configKey = FILE_TYPE_TO_CONFIG_KEY[type]
+    const targetConfig =
+      configKey && workspaceConfig[configKey]
+        ? workspaceConfig[configKey]
+        : config
 
     const typeWorkspaceRoot = findCommonRoot(
       config.resolvedPaths.cwd,
@@ -310,58 +313,79 @@ async function addWorkspaceComponents(
     )
   }
 
+  // 6. Write CSS last so the file watcher triggers a rebuild
+  // after all component files and dependencies are in place.
+  const overwriteCssVars = tree.cssVars
+    ? (options.overwriteCssVars ??
+      (await shouldOverwriteCssVars(components, config)))
+    : undefined
+  await updateCss(tree.css, mainTargetConfig, {
+    silent: true,
+    cssVars: tree.cssVars,
+    overwriteCssVars,
+    tailwindVersion,
+    tailwindConfig: tree.tailwind?.config,
+  })
+  if (tree.cssVars || tree.css) {
+    filesUpdated.push(
+      path.relative(workspaceRoot, mainTargetConfig.resolvedPaths.tailwindCss)
+    )
+  }
+
   rootSpinner?.succeed()
 
-  // Sort files.
-  filesCreated.sort()
-  filesUpdated.sort()
-  filesSkipped.sort()
+  // Deduplicate and sort files.
+  const dedupedCreated = Array.from(new Set(filesCreated)).sort()
+  const dedupedUpdated = Array.from(
+    new Set(filesUpdated.filter((file) => !filesCreated.includes(file)))
+  ).sort()
+  const dedupedSkipped = Array.from(new Set(filesSkipped)).sort()
 
-  const hasUpdatedFiles = filesCreated.length || filesUpdated.length
-  if (!hasUpdatedFiles && !filesSkipped.length) {
+  const hasUpdatedFiles = dedupedCreated.length || dedupedUpdated.length
+  if (!hasUpdatedFiles && !dedupedSkipped.length) {
     spinner(`No files updated.`, {
       silent: options.silent,
     })?.info()
   }
 
-  if (filesCreated.length) {
+  if (dedupedCreated.length) {
     spinner(
-      `Created ${filesCreated.length} ${
-        filesCreated.length === 1 ? "file" : "files"
+      `Created ${dedupedCreated.length} ${
+        dedupedCreated.length === 1 ? "file" : "files"
       }:`,
       {
         silent: options.silent,
       }
     )?.succeed()
-    for (const file of filesCreated) {
+    for (const file of dedupedCreated) {
       logger.log(`  - ${file}`)
     }
   }
 
-  if (filesUpdated.length) {
+  if (dedupedUpdated.length) {
     spinner(
-      `Updated ${filesUpdated.length} ${
-        filesUpdated.length === 1 ? "file" : "files"
+      `Updated ${dedupedUpdated.length} ${
+        dedupedUpdated.length === 1 ? "file" : "files"
       }:`,
       {
         silent: options.silent,
       }
     )?.info()
-    for (const file of filesUpdated) {
+    for (const file of dedupedUpdated) {
       logger.log(`  - ${file}`)
     }
   }
 
-  if (filesSkipped.length) {
+  if (dedupedSkipped.length) {
     spinner(
-      `Skipped ${filesSkipped.length} ${
-        filesUpdated.length === 1 ? "file" : "files"
+      `Skipped ${dedupedSkipped.length} ${
+        dedupedSkipped.length === 1 ? "file" : "files"
       }: (use --overwrite to overwrite)`,
       {
         silent: options.silent,
       }
     )?.info()
-    for (const file of filesSkipped) {
+    for (const file of dedupedSkipped) {
       logger.log(`  - ${file}`)
     }
   }
diff --git a/packages/shadcn/src/utils/create-project.test.ts b/packages/shadcn/src/utils/create-project.test.ts
index d7446ad128..7ae2ddc958 100644
--- a/packages/shadcn/src/utils/create-project.test.ts
+++ b/packages/shadcn/src/utils/create-project.test.ts
@@ -1,4 +1,3 @@
-import { fetchRegistry } from "@/src/registry/fetcher"
 import { spinner } from "@/src/utils/spinner"
 import { execa } from "execa"
 import fs from "fs-extra"
@@ -13,13 +12,12 @@ import {
   type MockInstance,
 } from "vitest"
 
-import { TEMPLATES, createProject } from "./create-project"
+import { createProject } from "./create-project"
 
 // Mock dependencies
 vi.mock("fs-extra")
 vi.mock("execa")
 vi.mock("prompts")
-vi.mock("@/src/registry/fetcher")
 vi.mock("@/src/utils/get-package-manager", () => ({
   getPackageManager: vi.fn().mockResolvedValue("npm"),
 }))
@@ -46,7 +44,7 @@ describe("createProject", () => {
     vi.mocked(fs.move).mockResolvedValue(undefined)
     vi.mocked(fs.remove).mockResolvedValue(undefined)
 
-    // Mock execa to resolve immediately without actual execution
+    // Mock execa for template scaffold commands.
     vi.mocked(execa).mockResolvedValue({
       stdout: "",
       stderr: "",
@@ -61,7 +59,7 @@ describe("createProject", () => {
       killed: false,
     } as any)
 
-    // Mock fetch for monorepo template
+    // Mock fetch for template download.
     global.fetch = vi.fn().mockResolvedValue({
       ok: true,
       arrayBuffer: () => Promise.resolve(new ArrayBuffer(0)),
@@ -70,9 +68,6 @@ describe("createProject", () => {
     // Reset prompts mock
     vi.mocked(prompts).mockResolvedValue({ type: "next", name: "my-app" })
 
-    // Reset registry mock
-    vi.mocked(fetchRegistry).mockResolvedValue([])
-
     // Mock spinner function
     const mockSpinner = {
       start: vi.fn().mockReturnThis(),
@@ -110,55 +105,42 @@ describe("createProject", () => {
     const result = await createProject({
       cwd: "/test",
       force: false,
-      srcDir: false,
     })
 
     expect(result).toEqual({
       projectPath: "/test/my-app",
       projectName: "my-app",
-      template: TEMPLATES.next,
+      template: "next",
     })
-
-    expect(execa).toHaveBeenCalledWith(
-      "npx",
-      expect.arrayContaining(["create-next-app@latest", "/test/my-app"]),
-      expect.any(Object)
-    )
   })
 
-  it("should create a monorepo project when selected", async () => {
+  it("should create a monorepo project with --monorepo flag", async () => {
     vi.mocked(prompts).mockResolvedValue({
-      type: "next-monorepo",
+      type: "next",
       name: "my-monorepo",
     })
 
     const result = await createProject({
       cwd: "/test",
       force: false,
-      srcDir: false,
+      monorepo: true,
     })
 
     expect(result).toEqual({
       projectPath: "/test/my-monorepo",
       projectName: "my-monorepo",
-      template: TEMPLATES["next-monorepo"],
+      template: "next",
     })
   })
 
-  it("should handle remote components and force next template", async () => {
-    vi.mocked(fetchRegistry).mockResolvedValue([
-      {
-        meta: { nextVersion: "13.0.0" },
-      },
-    ])
-
+  it("should force next template for remote components", async () => {
     const result = await createProject({
       cwd: "/test",
       force: true,
       components: ["/chat/b/some-component"],
     })
 
-    expect(result.template).toBe(TEMPLATES.next)
+    expect(result.template).toBe("next")
   })
 
   it("should throw error if project path already exists", async () => {
@@ -195,20 +177,4 @@ describe("createProject", () => {
 
     expect(mockExit).toHaveBeenCalledWith(1)
   })
-
-  it("should include --no-react-compiler flag for Next.js (latest)", async () => {
-    vi.mocked(prompts).mockResolvedValue({ type: "next", name: "my-app" })
-
-    await createProject({
-      cwd: "/test",
-      force: false,
-      srcDir: false,
-    })
-
-    expect(execa).toHaveBeenCalledWith(
-      "npx",
-      expect.arrayContaining(["--no-react-compiler"]),
-      expect.any(Object)
-    )
-  })
 })
diff --git a/packages/shadcn/src/utils/create-project.ts b/packages/shadcn/src/utils/create-project.ts
index ba2823a41a..edcedfca13 100644
--- a/packages/shadcn/src/utils/create-project.ts
+++ b/packages/shadcn/src/utils/create-project.ts
@@ -1,73 +1,36 @@
-import os from "os"
 import path from "path"
 import { initOptionsSchema } from "@/src/commands/init"
-import { fetchRegistry } from "@/src/registry/fetcher"
+import { resolveTemplate, templates } from "@/src/templates/index"
 import { getPackageManager } from "@/src/utils/get-package-manager"
-import { handleError } from "@/src/utils/handle-error"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
-import { spinner } from "@/src/utils/spinner"
-import { execa } from "execa"
 import fs from "fs-extra"
 import prompts from "prompts"
 import { z } from "zod"
 
-const GITHUB_TEMPLATE_URL =
-  "https://codeload.github.com/shadcn-ui/ui/tar.gz/main"
-
-export const TEMPLATES = {
-  next: "next",
-  "next-monorepo": "next-monorepo",
-  vite: "vite",
-  start: "start",
-} as const
-
 export async function createProject(
   options: Pick<
     z.infer<typeof initOptionsSchema>,
-    "cwd" | "name" | "force" | "srcDir" | "components" | "template"
+    "cwd" | "name" | "force" | "components" | "template" | "monorepo"
   >
 ) {
-  options = {
-    srcDir: false,
-    ...options,
-  }
-
-  let template: keyof typeof TEMPLATES =
-    options.template && TEMPLATES[options.template as keyof typeof TEMPLATES]
-      ? (options.template as keyof typeof TEMPLATES)
+  let template: keyof typeof templates =
+    options.template && options.template in templates
+      ? (options.template as keyof typeof templates)
       : "next"
-  let projectName: string =
-    options.name ??
-    (template === TEMPLATES.next ||
-    template === TEMPLATES.vite ||
-    template === TEMPLATES.start
-      ? "my-app"
-      : "my-monorepo")
-  let nextVersion = "latest"
+
+  const resolved = resolveTemplate(templates[template], {
+    monorepo: options.monorepo,
+  })
+  let projectName: string = options.name ?? resolved.defaultProjectName
 
   const isRemoteComponent =
     options.components?.length === 1 &&
     !!options.components[0].match(/\/chat\/b\//)
 
-  if (options.components && isRemoteComponent) {
-    try {
-      const [result] = await fetchRegistry(options.components)
-      const { meta } = z
-        .object({
-          meta: z.object({
-            nextVersion: z.string(),
-          }),
-        })
-        .parse(result)
-      nextVersion = meta.nextVersion
-
-      // Force template to next for remote components.
-      template = TEMPLATES.next
-    } catch (error) {
-      logger.break()
-      handleError(error)
-    }
+  // Force template to next for remote components.
+  if (isRemoteComponent) {
+    template = "next"
   }
 
   if (!options.force) {
@@ -78,12 +41,11 @@ export async function createProject(
         message: `The path ${highlighter.info(
           options.cwd
         )} does not contain a package.json file.\n  Would you like to start a new project?`,
-        choices: [
-          { title: "Next.js", value: "next" },
-          { title: "Next.js (Monorepo)", value: "next-monorepo" },
-          { title: "Vite", value: "vite" },
-          { title: "TanStack Start", value: "start" },
-        ],
+        choices: Object.entries(templates).map(([key, t]) => ({
+          title: t.title,
+          value: key,
+          description: t.description,
+        })),
         initial: 0,
       },
       {
@@ -103,11 +65,18 @@ export async function createProject(
     projectName = name ?? projectName
   }
 
-  const packageManager = await getPackageManager(options.cwd, {
-    withFallback: true,
+  // Re-resolve after potential template change from prompt.
+  const effectiveTemplate = resolveTemplate(templates[template], {
+    monorepo: options.monorepo,
   })
 
-  const projectPath = `${options.cwd}/${projectName}`
+  const packageManager =
+    effectiveTemplate.packageManager ??
+    (await getPackageManager(options.cwd, {
+      withFallback: true,
+    }))
+
+  const projectPath = path.join(options.cwd, projectName)
 
   // Check if path is writable.
   try {
@@ -134,32 +103,11 @@ export async function createProject(
     process.exit(1)
   }
 
-  if (template === TEMPLATES.next) {
-    await createNextProject(projectPath, {
-      version: nextVersion,
-      cwd: options.cwd,
-      packageManager,
-      srcDir: !!options.srcDir,
-    })
-  }
-
-  if (template === TEMPLATES["next-monorepo"]) {
-    await createMonorepoProject(projectPath, {
-      packageManager,
-    })
-  }
-
-  if (template === TEMPLATES.vite) {
-    await createViteProject(projectPath, {
-      packageManager,
-    })
-  }
-
-  if (template === TEMPLATES.start) {
-    await createStartProject(projectPath, {
-      packageManager,
-    })
-  }
+  await effectiveTemplate.scaffold({
+    projectPath,
+    packageManager,
+    cwd: options.cwd,
+  })
 
   return {
     projectPath,
@@ -167,270 +115,3 @@ export async function createProject(
     template,
   }
 }
-
-async function createNextProject(
-  projectPath: string,
-  options: {
-    version: string
-    cwd: string
-    packageManager: string
-    srcDir: boolean
-  }
-) {
-  const createSpinner = spinner(
-    `Creating a new Next.js project. This may take a few minutes.`
-  ).start()
-
-  // Note: pnpm fails here. Fallback to npx with --use-PACKAGE-MANAGER.
-  const args = [
-    "--tailwind",
-    "--eslint",
-    "--typescript",
-    "--app",
-    options.srcDir ? "--src-dir" : "--no-src-dir",
-    "--no-import-alias",
-    `--use-${options.packageManager}`,
-  ]
-
-  if (
-    options.version.startsWith("15") ||
-    options.version.startsWith("latest") ||
-    options.version.startsWith("canary")
-  ) {
-    args.push("--turbopack")
-  }
-
-  if (
-    options.version.startsWith("latest") ||
-    options.version.startsWith("canary")
-  ) {
-    args.push("--no-react-compiler")
-  }
-
-  try {
-    await execa(
-      "npx",
-      [`create-next-app@${options.version}`, projectPath, "--silent", ...args],
-      {
-        cwd: options.cwd,
-      }
-    )
-  } catch (error) {
-    logger.break()
-    logger.error(
-      `Something went wrong creating a new Next.js project. Please try again.`
-    )
-    process.exit(1)
-  }
-
-  createSpinner?.succeed("Creating a new Next.js project.")
-}
-
-async function createMonorepoProject(
-  projectPath: string,
-  options: {
-    packageManager: string
-  }
-) {
-  const createSpinner = spinner(
-    `Creating a new Next.js monorepo. This may take a few minutes.`
-  ).start()
-
-  try {
-    // Get the template.
-    const templatePath = path.join(os.tmpdir(), `shadcn-template-${Date.now()}`)
-    await fs.ensureDir(templatePath)
-    const response = await fetch(GITHUB_TEMPLATE_URL)
-    if (!response.ok) {
-      throw new Error(`Failed to download template: ${response.statusText}`)
-    }
-
-    // Write the tar file
-    const tarPath = path.resolve(templatePath, "template.tar.gz")
-    await fs.writeFile(tarPath, Buffer.from(await response.arrayBuffer()))
-    await execa("tar", [
-      "-xzf",
-      tarPath,
-      "-C",
-      templatePath,
-      "--strip-components=2",
-      "ui-main/templates/monorepo-next",
-    ])
-    const extractedPath = path.resolve(templatePath, "monorepo-next")
-    await fs.move(extractedPath, projectPath)
-    await fs.remove(templatePath)
-
-    // Run install.
-    await execa(options.packageManager, ["install"], {
-      cwd: projectPath,
-    })
-    // await execa("cd", [cwd])
-
-    // Write project name to the package.json
-    const packageJsonPath = path.join(projectPath, "package.json")
-    if (fs.existsSync(packageJsonPath)) {
-      const packageJsonContent = await fs.readFile(packageJsonPath, "utf8")
-      const packageJson = JSON.parse(packageJsonContent)
-      packageJson.name = projectPath.split("/").pop()
-      await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2))
-    }
-
-    // Try git init.
-    const cwd = process.cwd()
-    await execa("git", ["--version"], { cwd: projectPath })
-    await execa("git", ["init"], { cwd: projectPath })
-    await execa("git", ["add", "-A"], { cwd: projectPath })
-    await execa("git", ["commit", "-m", "Initial commit"], {
-      cwd: projectPath,
-    })
-
-    createSpinner?.succeed("Creating a new Next.js monorepo.")
-  } catch (error) {
-    createSpinner?.fail("Something went wrong creating a new Next.js monorepo.")
-    handleError(error)
-  }
-}
-
-async function createViteProject(
-  projectPath: string,
-  options: {
-    packageManager: string
-  }
-) {
-  const createSpinner = spinner(
-    `Creating a new Vite project. This may take a few minutes.`
-  ).start()
-
-  try {
-    // Get the template.
-    const templatePath = path.join(os.tmpdir(), `shadcn-template-${Date.now()}`)
-    await fs.ensureDir(templatePath)
-    const response = await fetch(GITHUB_TEMPLATE_URL)
-    if (!response.ok) {
-      throw new Error(`Failed to download template: ${response.statusText}`)
-    }
-
-    // Write the tar file.
-    const tarPath = path.resolve(templatePath, "template.tar.gz")
-    await fs.writeFile(tarPath, Buffer.from(await response.arrayBuffer()))
-    await execa("tar", [
-      "-xzf",
-      tarPath,
-      "-C",
-      templatePath,
-      "--strip-components=2",
-      "ui-main/templates/vite-app",
-    ])
-    const extractedPath = path.resolve(templatePath, "vite-app")
-    await fs.move(extractedPath, projectPath)
-    await fs.remove(templatePath)
-
-    // Remove pnpm-lock.yaml if using a different package manager.
-    if (options.packageManager !== "pnpm") {
-      const lockFilePath = path.join(projectPath, "pnpm-lock.yaml")
-      if (fs.existsSync(lockFilePath)) {
-        await fs.remove(lockFilePath)
-      }
-    }
-
-    // Run install.
-    await execa(options.packageManager, ["install"], {
-      cwd: projectPath,
-    })
-
-    // Write project name to the package.json.
-    const packageJsonPath = path.join(projectPath, "package.json")
-    if (fs.existsSync(packageJsonPath)) {
-      const packageJsonContent = await fs.readFile(packageJsonPath, "utf8")
-      const packageJson = JSON.parse(packageJsonContent)
-      packageJson.name = projectPath.split("/").pop()
-      await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2))
-    }
-
-    // Try git init.
-    await execa("git", ["--version"], { cwd: projectPath })
-    await execa("git", ["init"], { cwd: projectPath })
-    await execa("git", ["add", "-A"], { cwd: projectPath })
-    await execa("git", ["commit", "-m", "Initial commit"], {
-      cwd: projectPath,
-    })
-
-    createSpinner?.succeed("Creating a new Vite project.")
-  } catch (error) {
-    createSpinner?.fail("Something went wrong creating a new Vite project.")
-    handleError(error)
-  }
-}
-
-async function createStartProject(
-  projectPath: string,
-  options: {
-    packageManager: string
-  }
-) {
-  const createSpinner = spinner(
-    `Creating a new TanStack Start project. This may take a few minutes.`
-  ).start()
-
-  try {
-    // Get the template.
-    const templatePath = path.join(os.tmpdir(), `shadcn-template-${Date.now()}`)
-    await fs.ensureDir(templatePath)
-    const response = await fetch(GITHUB_TEMPLATE_URL)
-    if (!response.ok) {
-      throw new Error(`Failed to download template: ${response.statusText}`)
-    }
-
-    // Write the tar file.
-    const tarPath = path.resolve(templatePath, "template.tar.gz")
-    await fs.writeFile(tarPath, Buffer.from(await response.arrayBuffer()))
-    await execa("tar", [
-      "-xzf",
-      tarPath,
-      "-C",
-      templatePath,
-      "--strip-components=2",
-      "ui-main/templates/start-app",
-    ])
-    const extractedPath = path.resolve(templatePath, "start-app")
-    await fs.move(extractedPath, projectPath)
-    await fs.remove(templatePath)
-
-    // Remove pnpm-lock.yaml if using a different package manager.
-    if (options.packageManager !== "pnpm") {
-      const lockFilePath = path.join(projectPath, "pnpm-lock.yaml")
-      if (fs.existsSync(lockFilePath)) {
-        await fs.remove(lockFilePath)
-      }
-    }
-
-    // Run install.
-    await execa(options.packageManager, ["install"], {
-      cwd: projectPath,
-    })
-
-    // Write project name to the package.json.
-    const packageJsonPath = path.join(projectPath, "package.json")
-    if (fs.existsSync(packageJsonPath)) {
-      const packageJsonContent = await fs.readFile(packageJsonPath, "utf8")
-      const packageJson = JSON.parse(packageJsonContent)
-      packageJson.name = projectPath.split("/").pop()
-      await fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2))
-    }
-
-    // Try git init.
-    await execa("git", ["--version"], { cwd: projectPath })
-    await execa("git", ["init"], { cwd: projectPath })
-    await execa("git", ["add", "-A"], { cwd: projectPath })
-    await execa("git", ["commit", "-m", "Initial commit"], {
-      cwd: projectPath,
-    })
-
-    createSpinner?.succeed("Creating a new TanStack Start project.")
-  } catch (error) {
-    createSpinner?.fail(
-      "Something went wrong creating a new TanStack Start project."
-    )
-    handleError(error)
-  }
-}
diff --git a/packages/shadcn/src/utils/dry-run-formatter.ts b/packages/shadcn/src/utils/dry-run-formatter.ts
new file mode 100644
index 0000000000..3b51578b7d
--- /dev/null
+++ b/packages/shadcn/src/utils/dry-run-formatter.ts
@@ -0,0 +1,780 @@
+import type { DryRunFile, DryRunResult } from "@/src/utils/dry-run"
+import { diffWords, structuredPatch } from "diff"
+import { bold, cyan, dim, green, red, yellow } from "kleur/colors"
+
+const MAX_OVERVIEW_FILES = 5
+
+const BOX_TOP = dim("┌" + "─".repeat(46))
+const BOX_BOTTOM = dim("└" + "─".repeat(46))
+
+const ACTION_GLYPHS: Record<DryRunFile["action"], string> = {
+  create: "+",
+  overwrite: "~",
+  skip: "=",
+}
+
+const ACTION_LABELS: Record<DryRunFile["action"], string> = {
+  create: "create",
+  overwrite: "overwrite",
+  skip: "skip (identical)",
+}
+
+// Color an action label.
+function colorAction(action: DryRunFile["action"] | "update") {
+  if (action === "create") return green(action)
+  if (action === "overwrite" || action === "update") return yellow(action)
+  return dim(action)
+}
+
+// Format the shared header line.
+function formatHeader(componentNames: string[]) {
+  return `${bold("┌")} ${bold(`shadcn add ${componentNames.join(", ")}`)} ${dim(
+    "(dry run)"
+  )}`
+}
+
+// Check if a CSS path matches a filter.
+function matchesCssPath(cssPath: string, filterPath: string) {
+  return (
+    cssPath === filterPath ||
+    cssPath.includes(filterPath) ||
+    cssPath.endsWith(filterPath)
+  )
+}
+
+// Push a content box (border + lines + border) into the output.
+function pushContentBox(
+  lines: string[],
+  contentLines: string[],
+  formatLine: (line: string) => string = (l) => l
+) {
+  lines.push(`${dim("│")} ${BOX_TOP}`)
+  for (const line of contentLines) {
+    lines.push(`${dim("│")} ${dim("│")} ${formatLine(line)}`)
+  }
+  lines.push(`${dim("│")} ${BOX_BOTTOM}`)
+}
+
+export function formatDryRunResult(
+  result: DryRunResult,
+  componentNames: string[],
+  options: {
+    diff?: string | true
+    view?: string | true
+  } = {}
+) {
+  // --diff and --view get a focused output with just the file.
+  if (options.diff) {
+    if (typeof options.diff === "string") {
+      return formatDiffOutput(result, componentNames, options.diff)
+    }
+    return formatDiffOverview(result, componentNames)
+  }
+
+  if (options.view) {
+    if (typeof options.view === "string") {
+      return formatViewOutput(result, componentNames, options.view)
+    }
+    return formatViewOverview(result, componentNames)
+  }
+
+  return formatSummaryOutput(result, componentNames)
+}
+
+// Full summary output for --dry-run.
+function formatSummaryOutput(result: DryRunResult, componentNames: string[]) {
+  const lines: string[] = []
+
+  lines.push(formatHeader(componentNames))
+  lines.push(dim("│"))
+
+  formatFilesSection(result, lines)
+  formatListSection("Dependencies", result.dependencies, lines)
+  formatListSection("Dev Dependencies", result.devDependencies, lines)
+  formatCssSection(result, lines)
+  formatEnvVarsSection(result, lines)
+  formatFontsSection(result, lines)
+
+  // Overwrite warning.
+  const overwriteCount = result.files.filter(
+    (f) => f.action === "overwrite"
+  ).length
+  if (overwriteCount > 0) {
+    lines.push(
+      yellow(
+        `⚠ ${overwriteCount} ${
+          overwriteCount === 1 ? "file" : "files"
+        } will be overwritten.`
+      )
+    )
+    lines.push(dim("│"))
+  }
+
+  // Summary line.
+  const summaryParts: string[] = []
+  if (result.files.length > 0) {
+    summaryParts.push(
+      `${result.files.length} ${result.files.length === 1 ? "file" : "files"}`
+    )
+  }
+  if (result.dependencies.length > 0) {
+    summaryParts.push(
+      `${result.dependencies.length} ${
+        result.dependencies.length === 1 ? "dep" : "deps"
+      }`
+    )
+  }
+  if (result.css?.cssVarsCount) {
+    summaryParts.push(`${result.css.cssVarsCount} CSS vars`)
+  }
+  if (summaryParts.length > 0) {
+    lines.push(`${dim("│")} ${dim(summaryParts.join(", "))}`)
+    lines.push(dim("│"))
+  }
+
+  // Footer.
+  lines.push(`${dim("│")} ${dim("Run with --diff to view changes.")}`)
+  lines.push(`${dim("│")} ${dim("Run with --view to view file contents.")}`)
+  lines.push(`${dim("└")} ${dim("Run without --dry-run to apply.")}`)
+
+  return lines.join("\n")
+}
+
+// Focused output for --diff <path>.
+function formatDiffOutput(
+  result: DryRunResult,
+  componentNames: string[],
+  filterPath: string
+) {
+  const lines: string[] = []
+
+  lines.push(formatHeader(componentNames))
+  lines.push(dim("│"))
+
+  const filesToDiff = resolveFilterPath(result.files, filterPath)
+  const cssMatch = result.css && matchesCssPath(result.css.path, filterPath)
+
+  if (filesToDiff.length === 0 && !cssMatch) {
+    lines.push(
+      `${dim("│")} ${yellow(`No file matching "${filterPath}" found.`)}`
+    )
+    lines.push(dim("│"))
+  } else {
+    for (const file of filesToDiff) {
+      formatFileDiff(file, lines)
+    }
+
+    if (cssMatch && result.css) {
+      lines.push(
+        `${dim("├")} ${bold(result.css.path)} ${dim("(")}${colorAction(
+          result.css.action
+        )}${dim(")")}`
+      )
+
+      if (result.css.action === "create" || !result.css.existingContent) {
+        pushContentBox(lines, result.css.content.split("\n"), (l) =>
+          green(`+${l}`)
+        )
+      } else {
+        const diffLines = computeUnifiedDiff(
+          result.css.existingContent,
+          result.css.content,
+          result.css.path,
+          { fullContext: true }
+        )
+        pushContentBox(lines, diffLines)
+      }
+
+      lines.push(dim("│"))
+    }
+  }
+
+  lines.push(`${dim("└")} ${dim("Run without --dry-run to apply.")}`)
+
+  return lines.join("\n")
+}
+
+// Overview output for --diff (no path).
+function formatDiffOverview(result: DryRunResult, componentNames: string[]) {
+  const lines: string[] = []
+
+  lines.push(formatHeader(componentNames))
+  lines.push(dim("│"))
+
+  const filesToDiff = result.files.slice(0, MAX_OVERVIEW_FILES)
+
+  if (filesToDiff.length === 0 && !result.css) {
+    lines.push(`${dim("│")} ${dim("No changes.")}`)
+    lines.push(dim("│"))
+  } else {
+    for (const file of filesToDiff) {
+      formatFileDiff(file, lines)
+    }
+
+    const total = result.files.length
+    if (total > MAX_OVERVIEW_FILES) {
+      lines.push(dim("│"))
+    }
+  }
+
+  const total = result.files.length
+  if (total > MAX_OVERVIEW_FILES) {
+    lines.push(
+      `  ${dim(
+        `Showing ${MAX_OVERVIEW_FILES} of ${total} files. Use --diff <path> to view a specific file.`
+      )}`
+    )
+  }
+
+  lines.push(`${dim("└")} ${dim("Run without --dry-run to apply.")}`)
+
+  return lines.join("\n")
+}
+
+// Overview output for --view (no path).
+function formatViewOverview(result: DryRunResult, componentNames: string[]) {
+  const lines: string[] = []
+
+  lines.push(formatHeader(componentNames))
+  lines.push(dim("│"))
+
+  const filesToView = result.files.slice(0, MAX_OVERVIEW_FILES)
+
+  if (filesToView.length === 0 && !result.css) {
+    lines.push(`${dim("│")} ${dim("No files.")}`)
+    lines.push(dim("│"))
+  } else {
+    for (const file of filesToView) {
+      const contentLines = file.content.split("\n")
+      lines.push(
+        `${dim("├")} ${bold(file.path)} ${dim("(")}${colorAction(
+          file.action
+        )}${dim(")")} ${dim(`${contentLines.length} lines`)}`
+      )
+      pushContentBox(lines, contentLines)
+      lines.push(dim("│"))
+    }
+
+    const total = result.files.length
+    if (total > MAX_OVERVIEW_FILES) {
+      lines.push(dim("│"))
+    }
+  }
+
+  const total = result.files.length
+  if (total > MAX_OVERVIEW_FILES) {
+    lines.push(
+      `  ${dim(
+        `Showing ${MAX_OVERVIEW_FILES} of ${total} files. Use --view <path> to view a specific file.`
+      )}`
+    )
+  }
+
+  lines.push(`${dim("└")} ${dim("Run without --dry-run to apply.")}`)
+
+  return lines.join("\n")
+}
+
+// Format a single file's diff block.
+function formatFileDiff(file: DryRunFile, lines: string[]) {
+  lines.push(
+    `${dim("├")} ${bold(file.path)} ${dim("(")}${colorAction(file.action)}${dim(
+      ")"
+    )}`
+  )
+
+  if (file.action === "skip") {
+    lines.push(`${dim("│")} ${dim("No changes.")}`)
+  } else if (file.action === "create") {
+    pushContentBox(lines, file.content.split("\n"), (l) => green(`+${l}`))
+  } else {
+    const diffLines = computeUnifiedDiff(
+      file.existingContent!,
+      file.content,
+      file.path
+    )
+    pushContentBox(lines, diffLines)
+  }
+
+  lines.push(dim("│"))
+}
+
+// Focused output for --view <path>.
+function formatViewOutput(
+  result: DryRunResult,
+  componentNames: string[],
+  filterPath: string
+) {
+  const lines: string[] = []
+
+  lines.push(formatHeader(componentNames))
+  lines.push(dim("│"))
+
+  const filesToView = resolveFilterPath(result.files, filterPath)
+  const cssMatch = result.css && matchesCssPath(result.css.path, filterPath)
+
+  if (filesToView.length === 0 && !cssMatch) {
+    lines.push(
+      `${dim("│")} ${yellow(`No file matching "${filterPath}" found.`)}`
+    )
+    lines.push(dim("│"))
+  } else {
+    for (const file of filesToView) {
+      const contentLines = file.content.split("\n")
+      lines.push(
+        `${dim("├")} ${bold(file.path)} ${dim("(")}${colorAction(
+          file.action
+        )}${dim(")")} ${dim(`${contentLines.length} lines`)}`
+      )
+      pushContentBox(lines, contentLines)
+      lines.push(dim("│"))
+    }
+
+    if (cssMatch && result.css) {
+      const contentLines = result.css.content.split("\n")
+      lines.push(
+        `${dim("├")} ${bold(result.css.path)} ${dim("(")}${colorAction(
+          result.css.action
+        )}${dim(")")} ${dim(`${contentLines.length} lines`)}`
+      )
+      pushContentBox(lines, contentLines)
+      lines.push(dim("│"))
+    }
+  }
+
+  lines.push(`${dim("└")} ${dim("Run without --dry-run to apply.")}`)
+
+  return lines.join("\n")
+}
+
+function formatFilesSection(result: DryRunResult, lines: string[]) {
+  if (result.files.length === 0) {
+    return
+  }
+
+  // Build summary counts.
+  const counts = { create: 0, overwrite: 0, skip: 0 }
+  for (const f of result.files) {
+    counts[f.action]++
+  }
+  const summaryParts: string[] = []
+  if (counts.create > 0) {
+    summaryParts.push(green(`+${counts.create} new`))
+  }
+  if (counts.overwrite > 0) {
+    summaryParts.push(yellow(`~${counts.overwrite} overwrite`))
+  }
+  if (counts.skip > 0) {
+    summaryParts.push(dim(`=${counts.skip} skip`))
+  }
+  const summary =
+    summaryParts.length > 0 ? ` ${summaryParts.join(dim(", "))}` : ""
+
+  lines.push(
+    `${dim("├")} ${bold("Files")} ${dim(`(${result.files.length})`)}${summary}`
+  )
+
+  // Find the longest path for alignment.
+  const maxPathLen = Math.max(...result.files.map((f) => f.path.length))
+
+  for (const file of result.files) {
+    const glyph = ACTION_GLYPHS[file.action]
+    const label = ACTION_LABELS[file.action]
+    const padding = " ".repeat(Math.max(1, maxPathLen - file.path.length + 2))
+
+    const colorFn =
+      file.action === "create"
+        ? green
+        : file.action === "overwrite"
+          ? yellow
+          : dim
+
+    const pathStr = file.action === "skip" ? dim(file.path) : file.path
+
+    lines.push(
+      `${dim("│")} ${colorFn(glyph)} ${pathStr}${padding}${colorFn(label)}`
+    )
+  }
+
+  lines.push(dim("│"))
+}
+
+function formatListSection(title: string, items: string[], lines: string[]) {
+  if (!items.length) {
+    return
+  }
+
+  lines.push(`${dim("├")} ${bold(title)} ${dim(`(${items.length})`)}`)
+  for (const item of items) {
+    lines.push(`${dim("│")} ${green("+")} ${item}`)
+  }
+  lines.push(dim("│"))
+}
+
+function formatCssSection(result: DryRunResult, lines: string[]) {
+  if (!result.css) {
+    return
+  }
+
+  lines.push(`${dim("├")} ${bold("CSS")}`)
+
+  if (result.css.cssVarsCount > 0) {
+    lines.push(
+      `${dim("│")} ${green("+")} ${
+        result.css.cssVarsCount
+      } CSS variables added to ${cyan(result.css.path)}`
+    )
+  } else {
+    lines.push(`${dim("│")} ${green("+")} Updated ${cyan(result.css.path)}`)
+  }
+
+  lines.push(dim("│"))
+}
+
+function formatEnvVarsSection(result: DryRunResult, lines: string[]) {
+  if (!result.envVars) {
+    return
+  }
+
+  const vars = Object.keys(result.envVars.variables)
+  lines.push(`${dim("├")} ${bold("Environment Variables")}`)
+  for (const key of vars) {
+    lines.push(`${dim("│")} ${green("+")} ${key}`)
+  }
+  lines.push(dim("│"))
+}
+
+function formatFontsSection(result: DryRunResult, lines: string[]) {
+  if (!result.fonts.length) {
+    return
+  }
+
+  lines.push(`${dim("├")} ${bold("Fonts")}`)
+  for (const font of result.fonts) {
+    lines.push(
+      `${dim("│")} ${green("+")} ${font.name} ${dim(`(${font.provider})`)}`
+    )
+  }
+  lines.push(dim("│"))
+}
+
+// Resolve a partial path filter against the file list.
+// Returns matching files. Supports partial matching (e.g. "button" matches "components/ui/button.tsx").
+export function resolveFilterPath(files: DryRunFile[], filterPath: string) {
+  // Exact match first.
+  const exact = files.filter((f) => f.path === filterPath)
+  if (exact.length > 0) {
+    return exact
+  }
+
+  // Partial match: check if the filter appears in the path.
+  return files.filter(
+    (f) =>
+      f.path.includes(filterPath) ||
+      f.path.replace(/\\/g, "/").includes(filterPath)
+  )
+}
+
+type HunkEntry = {
+  kind: "context" | "removed" | "added"
+  formatted: string
+}
+
+// Compute a unified diff using the `diff` package.
+// Use fullContext for CSS files so the existing vars are visible alongside new ones.
+function computeUnifiedDiff(
+  oldStr: string,
+  newStr: string,
+  filePath: string,
+  options: { fullContext?: boolean } = {}
+) {
+  // Check if the only differences are formatting (whitespace, quotes, semicolons).
+  if (isFormattingOnly(oldStr, newStr)) {
+    return [dim("  Formatting-only changes (spacing, quotes, semicolons).")]
+  }
+
+  // Normalize both files so structuredPatch only sees real content changes.
+  // This gives us correct hunk positions and line counts.
+  const normalizedOld = normalizeFileForDiff(oldStr)
+  const normalizedNew = normalizeFileForDiff(newStr)
+
+  const contextLines = options.fullContext
+    ? Math.max(
+        normalizedOld.split("\n").length,
+        normalizedNew.split("\n").length
+      )
+    : 3
+
+  const patch = structuredPatch(
+    `a/${filePath}`,
+    `b/${filePath}`,
+    normalizedOld,
+    normalizedNew,
+    "",
+    "",
+    { context: contextLines }
+  )
+
+  if (!patch.hunks.length) {
+    return [dim("  No changes.")]
+  }
+
+  const output: string[] = [dim(`--- a/${filePath}`), dim(`+++ b/${filePath}`)]
+
+  // Use the actual new file lines for display.
+  const newLines = newStr.split("\n")
+
+  for (const hunk of patch.hunks) {
+    const { entries, newLineIndex: _ } = processHunk(hunk, newLines)
+
+    // Skip hunks that have no real changes after formatting suppression.
+    if (!entries.some((e) => e.kind !== "context")) {
+      continue
+    }
+
+    // Recompute hunk header from actual entries.
+    const contextCount = entries.filter((e) => e.kind === "context").length
+    const removedCount = entries.filter((e) => e.kind === "removed").length
+    const addedCount = entries.filter((e) => e.kind === "added").length
+
+    output.push(
+      cyan(
+        `@@ -${hunk.oldStart},${contextCount + removedCount} +${
+          hunk.newStart
+        },${contextCount + addedCount} @@`
+      )
+    )
+
+    for (const entry of entries) {
+      output.push(entry.formatted)
+    }
+  }
+
+  return output
+}
+
+// Process a single hunk into typed entries, suppressing formatting-only changes.
+function processHunk(
+  hunk: { oldStart: number; newStart: number; lines: string[] },
+  newLines: string[]
+) {
+  const entries: HunkEntry[] = []
+  let newLineIndex = hunk.newStart - 1
+  let i = 0
+
+  while (i < hunk.lines.length) {
+    const line = hunk.lines[i]
+
+    if (line.startsWith("-")) {
+      // Collect consecutive removed and added lines.
+      const removed: string[] = []
+      while (i < hunk.lines.length && hunk.lines[i].startsWith("-")) {
+        removed.push(hunk.lines[i].slice(1))
+        i++
+      }
+      while (i < hunk.lines.length && hunk.lines[i].startsWith("\\")) {
+        i++
+      }
+      const added: string[] = []
+      while (i < hunk.lines.length && hunk.lines[i].startsWith("+")) {
+        added.push(hunk.lines[i].slice(1))
+        i++
+      }
+      while (i < hunk.lines.length && hunk.lines[i].startsWith("\\")) {
+        i++
+      }
+
+      newLineIndex = processChangeGroup(
+        removed,
+        added,
+        newLines,
+        newLineIndex,
+        entries
+      )
+    } else if (line.startsWith("+")) {
+      const actual = newLines[newLineIndex] ?? line.slice(1)
+      entries.push({ kind: "added", formatted: green(`+${actual}`) })
+      newLineIndex++
+      i++
+    } else if (line.startsWith("\\")) {
+      i++
+    } else {
+      const actual = newLines[newLineIndex] ?? line.slice(1)
+      entries.push({ kind: "context", formatted: dim(` ${actual}`) })
+      newLineIndex++
+      i++
+    }
+  }
+
+  return { entries, newLineIndex }
+}
+
+// Process a group of removed/added lines, detecting formatting-only changes.
+function processChangeGroup(
+  removed: string[],
+  added: string[],
+  newLines: string[],
+  newLineIndex: number,
+  entries: HunkEntry[]
+) {
+  // Check if the entire group is formatting-only (e.g., multi-line to single-line).
+  if (isGroupFormattingOnly(removed, added)) {
+    for (let j = 0; j < added.length; j++) {
+      const actual = newLines[newLineIndex] ?? added[j]
+      entries.push({ kind: "context", formatted: dim(` ${actual}`) })
+      newLineIndex++
+    }
+    return newLineIndex
+  }
+
+  // Collapse continuation lines in the removed group so we can
+  // match multi-line removed statements against single-line added ones.
+  // e.g., ["default:", '  "h-8..."'] → ["default: \"h-8...\""].
+  const collapsedRemoved = collapseContLines(removed)
+  const normalizedCollapsed = collapsedRemoved.map(normalizeLine)
+  const usedCollapsed = new Set<number>()
+
+  for (let j = 0; j < added.length; j++) {
+    const actualNewLine = newLines[newLineIndex] ?? added[j]
+    const normalizedAdded = normalizeLine(added[j])
+
+    // Find a matching collapsed removed statement.
+    const matchIdx = normalizedCollapsed.findIndex(
+      (nr, idx) => !usedCollapsed.has(idx) && nr === normalizedAdded
+    )
+
+    if (matchIdx !== -1) {
+      // Formatting-only change — show as context.
+      usedCollapsed.add(matchIdx)
+      entries.push({ kind: "context", formatted: dim(` ${actualNewLine}`) })
+    } else {
+      // Real change — find best unmatched removed statement for inline diff.
+      const unmatchedIdx = normalizedCollapsed.findIndex(
+        (_, idx) => !usedCollapsed.has(idx)
+      )
+      if (unmatchedIdx !== -1) {
+        usedCollapsed.add(unmatchedIdx)
+        const { oldHighlighted, newHighlighted } = highlightInlineChanges(
+          collapsedRemoved[unmatchedIdx],
+          actualNewLine
+        )
+        entries.push({ kind: "removed", formatted: oldHighlighted })
+        entries.push({ kind: "added", formatted: newHighlighted })
+      } else {
+        entries.push({
+          kind: "added",
+          formatted: green(`+${actualNewLine}`),
+        })
+      }
+    }
+    newLineIndex++
+  }
+
+  // Remaining unmatched removed statements.
+  for (let j = 0; j < collapsedRemoved.length; j++) {
+    if (!usedCollapsed.has(j)) {
+      entries.push({
+        kind: "removed",
+        formatted: red(`-${collapsedRemoved[j]}`),
+      })
+    }
+  }
+
+  return newLineIndex
+}
+
+// Normalize a file for diffing: apply per-line formatting normalization
+// while preserving line structure so hunk positions are correct.
+function normalizeFileForDiff(str: string) {
+  return str
+    .split("\n")
+    .map((line) => {
+      // Preserve indentation, normalize quotes and semicolons.
+      const indent = line.match(/^(\s*)/)?.[1] ?? ""
+      const content = line.slice(indent.length)
+      return (
+        indent +
+        content
+          .replace(/['"]/g, '"') // Normalize quotes to double.
+          .replace(/;$/g, "") // Remove trailing semicolons.
+      )
+    })
+    .join("\n")
+}
+
+// Collapse continuation lines in a group of removed lines.
+// Joins lines where a key ends with `:` and the next line is an indented value.
+// e.g., ["      default:", '        "h-8..."'] → ['      default: "h-8..."'].
+function collapseContLines(lines: string[]) {
+  const result: string[] = []
+
+  for (let i = 0; i < lines.length; i++) {
+    let line = lines[i]
+
+    // If line ends with `:` (after trimming) and next line is a continuation value.
+    while (i + 1 < lines.length && line.trimEnd().endsWith(":")) {
+      i++
+      line = line.trimEnd() + " " + lines[i].trim()
+    }
+
+    result.push(line)
+  }
+
+  return result
+}
+
+// Highlight inline word-level changes between two lines.
+function highlightInlineChanges(oldLine: string, newLine: string) {
+  const changes = diffWords(oldLine, newLine)
+
+  let oldHighlighted = "-"
+  let newHighlighted = "+"
+
+  for (const change of changes) {
+    if (change.added) {
+      newHighlighted += bold(green(change.value))
+    } else if (change.removed) {
+      oldHighlighted += bold(red(change.value))
+    } else {
+      oldHighlighted += red(change.value)
+      newHighlighted += green(change.value)
+    }
+  }
+
+  return { oldHighlighted, newHighlighted }
+}
+
+// Normalize a line for formatting comparison.
+function normalizeLine(line: string) {
+  return line
+    .replace(/\s+/g, " ") // Collapse whitespace.
+    .trim()
+    .replace(/['"]/g, "'") // Normalize quotes.
+    .replace(/;/g, "") // Remove all semicolons.
+    .replace(/,$/, "") // Remove trailing commas.
+}
+
+// Detect if differences between two strings are formatting-only.
+// Joins normalized lines with a space so multi-line vs single-line wrapping is ignored.
+function isFormattingOnly(oldStr: string, newStr: string) {
+  const normalize = (str: string) =>
+    str
+      .split("\n")
+      .map(normalizeLine)
+      .filter((line) => line.length > 0)
+      .join(" ")
+
+  return normalize(oldStr) === normalize(newStr)
+}
+
+// Detect if a group of removed/added lines is formatting-only.
+// Handles cases like multi-line to single-line reformatting.
+function isGroupFormattingOnly(removed: string[], added: string[]) {
+  const normalizeGroup = (lines: string[]) =>
+    lines
+      .map(normalizeLine)
+      .filter((line) => line.length > 0)
+      .join(" ")
+
+  return normalizeGroup(removed) === normalizeGroup(added)
+}
diff --git a/packages/shadcn/src/utils/dry-run.ts b/packages/shadcn/src/utils/dry-run.ts
new file mode 100644
index 0000000000..6c6779d6cc
--- /dev/null
+++ b/packages/shadcn/src/utils/dry-run.ts
@@ -0,0 +1,311 @@
+import { existsSync, promises as fs } from "fs"
+import path from "path"
+import { getRegistryBaseColor } from "@/src/registry/api"
+import { configWithDefaults } from "@/src/registry/config"
+import { resolveRegistryTree } from "@/src/registry/resolver"
+import { registryResolvedItemsTreeSchema } from "@/src/schema"
+import { isContentSame } from "@/src/utils/compare"
+import { isEnvFile } from "@/src/utils/env-helpers"
+import type { Config } from "@/src/utils/get-config"
+import { getProjectInfo } from "@/src/utils/get-project-info"
+import { transform } from "@/src/utils/transformers"
+import { transformAsChild } from "@/src/utils/transformers/transform-aschild"
+import { transformCleanup } from "@/src/utils/transformers/transform-cleanup"
+import { transformCssVars as transformCssVarsTransformer } from "@/src/utils/transformers/transform-css-vars"
+import { transformIcons } from "@/src/utils/transformers/transform-icons"
+import { transformImport } from "@/src/utils/transformers/transform-import"
+import { transformMenu } from "@/src/utils/transformers/transform-menu"
+import { transformRsc } from "@/src/utils/transformers/transform-rsc"
+import { transformRtl } from "@/src/utils/transformers/transform-rtl"
+import { transformTwPrefixes } from "@/src/utils/transformers/transform-tw-prefix"
+import { transformCss } from "@/src/utils/updaters/update-css"
+import { transformCssVars } from "@/src/utils/updaters/update-css-vars"
+import {
+  findCommonRoot,
+  resolveFilePath,
+} from "@/src/utils/updaters/update-files"
+import { massageTreeForFonts } from "@/src/utils/updaters/update-fonts"
+import type { z } from "zod"
+
+export type DryRunFile = {
+  path: string
+  action: "create" | "overwrite" | "skip"
+  content: string
+  existingContent?: string
+  type: string
+}
+
+export type DryRunCss = {
+  path: string
+  content: string
+  existingContent?: string
+  action: "create" | "update"
+  cssVarsCount: number
+}
+
+export type DryRunEnvVars = {
+  path: string
+  variables: Record<string, string>
+  action: "create" | "update"
+}
+
+export type DryRunFont = {
+  name: string
+  provider: string
+}
+
+export type DryRunResult = {
+  files: DryRunFile[]
+  dependencies: string[]
+  devDependencies: string[]
+  css: DryRunCss | null
+  envVars: DryRunEnvVars | null
+  fonts: DryRunFont[]
+  docs: string | null
+}
+
+export async function dryRunComponents(
+  components: string[],
+  config: Config,
+  options: {
+    overwrite?: boolean
+    overwriteCssVars?: boolean
+    skipFonts?: boolean
+  } = {}
+) {
+  const result: DryRunResult = {
+    files: [],
+    dependencies: [],
+    devDependencies: [],
+    css: null,
+    envVars: null,
+    fonts: [],
+    docs: null,
+  }
+
+  if (!components.length) {
+    return result
+  }
+
+  // Resolve the registry tree (read-only).
+  let tree = await resolveRegistryTree(components, configWithDefaults(config))
+
+  if (!tree) {
+    throw new Error("Failed to fetch components from registry.")
+  }
+
+  // Massage tree for fonts (read-only).
+  if (!options.skipFonts) {
+    tree = await massageTreeForFonts(tree, config)
+  }
+
+  // Dependencies pass through deduplicated.
+  result.dependencies = Array.from(new Set(tree.dependencies ?? []))
+  result.devDependencies = Array.from(new Set(tree.devDependencies ?? []))
+
+  // Docs pass through directly.
+  result.docs = tree.docs ?? null
+
+  // Process files.
+  await processFiles(tree, config, result, options)
+
+  // Process CSS.
+  await processCss(tree, config, result, options)
+
+  // Process env vars.
+  processEnvVars(tree, config, result)
+
+  // Process fonts.
+  if (!options.skipFonts) {
+    processFonts(tree, result)
+  }
+
+  return result
+}
+
+async function processFiles(
+  tree: z.infer<typeof registryResolvedItemsTreeSchema>,
+  config: Config,
+  result: DryRunResult,
+  options: { overwrite?: boolean }
+) {
+  const files = tree.files
+  if (!files?.length) {
+    return
+  }
+
+  const [projectInfo, baseColor] = await Promise.all([
+    getProjectInfo(config.resolvedPaths.cwd),
+    config.tailwind.baseColor
+      ? getRegistryBaseColor(config.tailwind.baseColor)
+      : Promise.resolve(undefined),
+  ])
+
+  for (let index = 0; index < files.length; index++) {
+    const file = files[index]
+    if (!file.content) {
+      continue
+    }
+
+    let filePath = resolveFilePath(file, config, {
+      isSrcDir: projectInfo?.isSrcDir,
+      framework: projectInfo?.framework.name,
+      commonRoot: findCommonRoot(
+        files.map((f) => f.path),
+        file.path
+      ),
+      fileIndex: index,
+    })
+
+    if (!filePath) {
+      continue
+    }
+
+    if (!config.tsx) {
+      filePath = filePath.replace(/\.tsx?$/, (match) =>
+        match === ".tsx" ? ".jsx" : ".js"
+      )
+    }
+
+    const existingFile = existsSync(filePath)
+    const relativePath = path.relative(config.resolvedPaths.cwd, filePath)
+
+    // Run transformers (same as update-files.ts).
+    const isUniversalItemFile =
+      file.type === "registry:file" || file.type === "registry:item"
+    const content =
+      isEnvFile(filePath) || isUniversalItemFile
+        ? file.content
+        : await transform(
+            {
+              filename: file.path,
+              raw: file.content,
+              config,
+              baseColor,
+              transformJsx: !config.tsx,
+              isRemote: false,
+            },
+            [
+              transformImport,
+              transformRsc,
+              transformCssVarsTransformer,
+              transformTwPrefixes,
+              transformIcons,
+              transformMenu,
+              transformAsChild,
+              transformRtl,
+              transformCleanup,
+            ]
+          )
+
+    // Determine action.
+    let action: DryRunFile["action"] = "create"
+    let oldContent: string | undefined
+    if (existingFile) {
+      oldContent = await fs.readFile(filePath, "utf-8")
+      if (isContentSame(oldContent, content)) {
+        action = "skip"
+      } else {
+        action = "overwrite"
+      }
+    }
+
+    result.files.push({
+      path: relativePath,
+      action,
+      content,
+      ...(action === "overwrite" && { existingContent: oldContent }),
+      type: file.type ?? "registry:ui",
+    })
+  }
+}
+
+async function processCss(
+  tree: z.infer<typeof registryResolvedItemsTreeSchema>,
+  config: Config,
+  result: DryRunResult,
+  options: { overwriteCssVars?: boolean }
+) {
+  const hasCss = tree.css && Object.keys(tree.css).length > 0
+  const hasCssVars = Object.keys(tree.cssVars ?? {}).length > 0
+
+  if (!config.resolvedPaths.tailwindCss || (!hasCss && !hasCssVars)) {
+    return
+  }
+
+  const cssFilepath = config.resolvedPaths.tailwindCss
+  const existingFile = existsSync(cssFilepath)
+  const relativePath = path.relative(config.resolvedPaths.cwd, cssFilepath)
+
+  const existingContent = existingFile
+    ? await fs.readFile(cssFilepath, "utf8")
+    : ""
+  let output = existingContent
+
+  // Apply CSS vars transform.
+  if (hasCssVars) {
+    output = await transformCssVars(output, tree.cssVars!, config, {
+      overwriteCssVars: options.overwriteCssVars,
+    })
+  }
+
+  // Apply CSS transform.
+  if (hasCss) {
+    output = await transformCss(output, tree.css!)
+  }
+
+  // Count CSS variables across all modes.
+  let cssVarsCount = 0
+  if (tree.cssVars) {
+    for (const vars of Object.values(tree.cssVars)) {
+      if (vars) {
+        cssVarsCount += Object.keys(vars).length
+      }
+    }
+  }
+
+  result.css = {
+    path: relativePath,
+    content: output,
+    ...(existingFile && { existingContent }),
+    action: existingFile ? "update" : "create",
+    cssVarsCount,
+  }
+}
+
+function processEnvVars(
+  tree: z.infer<typeof registryResolvedItemsTreeSchema>,
+  config: Config,
+  result: DryRunResult
+) {
+  if (!tree.envVars || Object.keys(tree.envVars).length === 0) {
+    return
+  }
+
+  const envFilePath = path.join(config.resolvedPaths.cwd, ".env.local")
+  const existingFile = existsSync(envFilePath)
+  const relativePath = path.relative(config.resolvedPaths.cwd, envFilePath)
+
+  result.envVars = {
+    path: relativePath,
+    variables: tree.envVars,
+    action: existingFile ? "update" : "create",
+  }
+}
+
+function processFonts(
+  tree: z.infer<typeof registryResolvedItemsTreeSchema>,
+  result: DryRunResult
+) {
+  if (!tree.fonts?.length) {
+    return
+  }
+
+  for (const font of tree.fonts) {
+    result.fonts.push({
+      name: font.font.family,
+      provider:
+        font.font.provider === "google" ? "Google Fonts" : font.font.provider,
+    })
+  }
+}
diff --git a/packages/shadcn/src/utils/frameworks.ts b/packages/shadcn/src/utils/frameworks.ts
index e9680e9277..d81e09530b 100644
--- a/packages/shadcn/src/utils/frameworks.ts
+++ b/packages/shadcn/src/utils/frameworks.ts
@@ -1,9 +1,11 @@
+import { SHADCN_URL } from "@/src/registry/constants"
+
 export const FRAMEWORKS = {
   "next-app": {
     name: "next-app",
     label: "Next.js",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/next",
+      installation: `${SHADCN_URL}/docs/installation/next`,
       tailwind: "https://tailwindcss.com/docs/guides/nextjs",
     },
   },
@@ -11,7 +13,7 @@ export const FRAMEWORKS = {
     name: "next-pages",
     label: "Next.js",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/next",
+      installation: `${SHADCN_URL}/docs/installation/next`,
       tailwind: "https://tailwindcss.com/docs/guides/nextjs",
     },
   },
@@ -19,7 +21,7 @@ export const FRAMEWORKS = {
     name: "remix",
     label: "Remix",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/remix",
+      installation: `${SHADCN_URL}/docs/installation/remix`,
       tailwind: "https://tailwindcss.com/docs/guides/remix",
     },
   },
@@ -27,7 +29,7 @@ export const FRAMEWORKS = {
     name: "react-router",
     label: "React Router",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/react-router",
+      installation: `${SHADCN_URL}/docs/installation/react-router`,
       tailwind:
         "https://tailwindcss.com/docs/installation/framework-guides/react-router",
     },
@@ -36,7 +38,7 @@ export const FRAMEWORKS = {
     name: "vite",
     label: "Vite",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/vite",
+      installation: `${SHADCN_URL}/docs/installation/vite`,
       tailwind: "https://tailwindcss.com/docs/guides/vite",
     },
   },
@@ -44,7 +46,7 @@ export const FRAMEWORKS = {
     name: "astro",
     label: "Astro",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/astro",
+      installation: `${SHADCN_URL}/docs/installation/astro`,
       tailwind: "https://tailwindcss.com/docs/guides/astro",
     },
   },
@@ -52,7 +54,7 @@ export const FRAMEWORKS = {
     name: "laravel",
     label: "Laravel",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/laravel",
+      installation: `${SHADCN_URL}/docs/installation/laravel`,
       tailwind: "https://tailwindcss.com/docs/guides/laravel",
     },
   },
@@ -60,7 +62,7 @@ export const FRAMEWORKS = {
     name: "tanstack-start",
     label: "TanStack Start",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/tanstack",
+      installation: `${SHADCN_URL}/docs/installation/tanstack`,
       tailwind: "https://tailwindcss.com/docs/installation/using-postcss",
     },
   },
@@ -68,7 +70,7 @@ export const FRAMEWORKS = {
     name: "gatsby",
     label: "Gatsby",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/gatsby",
+      installation: `${SHADCN_URL}/docs/installation/gatsby`,
       tailwind: "https://tailwindcss.com/docs/guides/gatsby",
     },
   },
@@ -76,7 +78,7 @@ export const FRAMEWORKS = {
     name: "expo",
     label: "Expo",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/expo",
+      installation: `${SHADCN_URL}/docs/installation/expo`,
       tailwind: "https://www.nativewind.dev/docs/getting-started/installation",
     },
   },
@@ -84,7 +86,7 @@ export const FRAMEWORKS = {
     name: "manual",
     label: "Manual",
     links: {
-      installation: "https://ui.shadcn.com/docs/installation/manual",
+      installation: `${SHADCN_URL}/docs/installation/manual`,
       tailwind: "https://tailwindcss.com/docs/installation",
     },
   },
diff --git a/packages/shadcn/src/utils/get-config.ts b/packages/shadcn/src/utils/get-config.ts
index b9a0c35282..9e7784ab70 100644
--- a/packages/shadcn/src/utils/get-config.ts
+++ b/packages/shadcn/src/utils/get-config.ts
@@ -216,6 +216,10 @@ export async function getTargetStyleFromConfig(cwd: string, fallback: string) {
   return projectInfo?.tailwindVersion === "v4" ? "new-york-v4" : fallback
 }
 
+export function getBase(style: string | undefined) {
+  return style?.startsWith("base-") ? "base" : "radix"
+}
+
 export type DeepPartial<T> = {
   [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P]
 }
diff --git a/packages/shadcn/src/utils/get-monorepo-info.test.ts b/packages/shadcn/src/utils/get-monorepo-info.test.ts
new file mode 100644
index 0000000000..7c06188e0a
--- /dev/null
+++ b/packages/shadcn/src/utils/get-monorepo-info.test.ts
@@ -0,0 +1,289 @@
+import path from "path"
+import { logger } from "@/src/utils/logger"
+import fs from "fs-extra"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+import {
+  formatMonorepoMessage,
+  getMonorepoTargets,
+  isMonorepoRoot,
+} from "./get-monorepo-info"
+
+let tmpDir: string
+
+beforeEach(async () => {
+  tmpDir = path.join(
+    await fs.realpath(require("os").tmpdir()),
+    `shadcn-monorepo-test-${Date.now()}`
+  )
+  await fs.ensureDir(tmpDir)
+})
+
+afterEach(async () => {
+  await fs.remove(tmpDir)
+})
+
+describe("isMonorepoRoot", () => {
+  it("should detect pnpm-workspace.yaml", async () => {
+    await fs.writeFile(
+      path.join(tmpDir, "pnpm-workspace.yaml"),
+      "packages:\n  - apps/*\n"
+    )
+    expect(await isMonorepoRoot(tmpDir)).toBe(true)
+  })
+
+  it("should detect package.json with workspaces array", async () => {
+    await fs.writeJson(path.join(tmpDir, "package.json"), {
+      name: "root",
+      workspaces: ["apps/*", "packages/*"],
+    })
+    expect(await isMonorepoRoot(tmpDir)).toBe(true)
+  })
+
+  it("should detect package.json with workspaces.packages", async () => {
+    await fs.writeJson(path.join(tmpDir, "package.json"), {
+      name: "root",
+      workspaces: { packages: ["apps/*"] },
+    })
+    expect(await isMonorepoRoot(tmpDir)).toBe(true)
+  })
+
+  it("should detect lerna.json", async () => {
+    await fs.writeJson(path.join(tmpDir, "lerna.json"), { version: "0.0.0" })
+    expect(await isMonorepoRoot(tmpDir)).toBe(true)
+  })
+
+  it("should detect nx.json", async () => {
+    await fs.writeJson(path.join(tmpDir, "nx.json"), {})
+    expect(await isMonorepoRoot(tmpDir)).toBe(true)
+  })
+
+  it("should return false for a regular project", async () => {
+    await fs.writeJson(path.join(tmpDir, "package.json"), { name: "my-app" })
+    expect(await isMonorepoRoot(tmpDir)).toBe(false)
+  })
+
+  it("should return false for an empty directory", async () => {
+    expect(await isMonorepoRoot(tmpDir)).toBe(false)
+  })
+})
+
+describe("getMonorepoTargets", () => {
+  it("should find targets from pnpm-workspace.yaml", async () => {
+    // Set up monorepo structure.
+    await fs.writeFile(
+      path.join(tmpDir, "pnpm-workspace.yaml"),
+      "packages:\n  - 'apps/*'\n"
+    )
+    await fs.writeJson(path.join(tmpDir, "package.json"), { name: "root" })
+
+    // Create an app with a Next.js config.
+    const webDir = path.join(tmpDir, "apps", "web")
+    await fs.ensureDir(webDir)
+    await fs.writeJson(path.join(webDir, "package.json"), { name: "web" })
+    await fs.writeFile(
+      path.join(webDir, "next.config.mjs"),
+      "export default {}"
+    )
+
+    const targets = await getMonorepoTargets(tmpDir)
+    expect(targets).toEqual([{ name: "apps/web", hasConfig: false }])
+  })
+
+  it("should find targets from package.json workspaces", async () => {
+    await fs.writeJson(path.join(tmpDir, "package.json"), {
+      name: "root",
+      workspaces: ["apps/*"],
+    })
+
+    const webDir = path.join(tmpDir, "apps", "web")
+    await fs.ensureDir(webDir)
+    await fs.writeJson(path.join(webDir, "package.json"), { name: "web" })
+    await fs.writeFile(path.join(webDir, "vite.config.ts"), "export default {}")
+
+    const targets = await getMonorepoTargets(tmpDir)
+    expect(targets).toEqual([{ name: "apps/web", hasConfig: false }])
+  })
+
+  it("should set hasConfig when components.json exists", async () => {
+    await fs.writeFile(
+      path.join(tmpDir, "pnpm-workspace.yaml"),
+      "packages:\n  - apps/*\n"
+    )
+    await fs.writeJson(path.join(tmpDir, "package.json"), { name: "root" })
+
+    const webDir = path.join(tmpDir, "apps", "web")
+    await fs.ensureDir(webDir)
+    await fs.writeJson(path.join(webDir, "package.json"), { name: "web" })
+    await fs.writeFile(
+      path.join(webDir, "next.config.mjs"),
+      "export default {}"
+    )
+    await fs.writeJson(path.join(webDir, "components.json"), {})
+
+    const targets = await getMonorepoTargets(tmpDir)
+    expect(targets).toEqual([{ name: "apps/web", hasConfig: true }])
+  })
+
+  it("should find multiple targets", async () => {
+    await fs.writeFile(
+      path.join(tmpDir, "pnpm-workspace.yaml"),
+      "packages:\n  - apps/*\n"
+    )
+    await fs.writeJson(path.join(tmpDir, "package.json"), { name: "root" })
+
+    // apps/web with Next.js.
+    const webDir = path.join(tmpDir, "apps", "web")
+    await fs.ensureDir(webDir)
+    await fs.writeJson(path.join(webDir, "package.json"), { name: "web" })
+    await fs.writeFile(
+      path.join(webDir, "next.config.mjs"),
+      "export default {}"
+    )
+
+    // apps/docs with Vite.
+    const docsDir = path.join(tmpDir, "apps", "docs")
+    await fs.ensureDir(docsDir)
+    await fs.writeJson(path.join(docsDir, "package.json"), { name: "docs" })
+    await fs.writeFile(
+      path.join(docsDir, "vite.config.ts"),
+      "export default {}"
+    )
+
+    const targets = await getMonorepoTargets(tmpDir)
+    expect(targets).toHaveLength(2)
+    expect(targets.map((t) => t.name).sort()).toEqual(["apps/docs", "apps/web"])
+  })
+
+  it("should skip directories without package.json", async () => {
+    await fs.writeFile(
+      path.join(tmpDir, "pnpm-workspace.yaml"),
+      "packages:\n  - apps/*\n"
+    )
+    await fs.writeJson(path.join(tmpDir, "package.json"), { name: "root" })
+
+    // Directory without package.json.
+    const libDir = path.join(tmpDir, "apps", "lib")
+    await fs.ensureDir(libDir)
+    await fs.writeFile(
+      path.join(libDir, "next.config.mjs"),
+      "export default {}"
+    )
+
+    const targets = await getMonorepoTargets(tmpDir)
+    expect(targets).toEqual([])
+  })
+
+  it("should skip directories without framework config or components.json", async () => {
+    await fs.writeFile(
+      path.join(tmpDir, "pnpm-workspace.yaml"),
+      "packages:\n  - packages/*\n"
+    )
+    await fs.writeJson(path.join(tmpDir, "package.json"), { name: "root" })
+
+    // A utility package with no framework config.
+    const utilsDir = path.join(tmpDir, "packages", "utils")
+    await fs.ensureDir(utilsDir)
+    await fs.writeJson(path.join(utilsDir, "package.json"), { name: "utils" })
+
+    const targets = await getMonorepoTargets(tmpDir)
+    expect(targets).toEqual([])
+  })
+
+  it("should return empty for no workspace patterns", async () => {
+    await fs.writeJson(path.join(tmpDir, "package.json"), { name: "root" })
+    const targets = await getMonorepoTargets(tmpDir)
+    expect(targets).toEqual([])
+  })
+
+  it("should detect astro, remix, and svelte configs", async () => {
+    await fs.writeFile(
+      path.join(tmpDir, "pnpm-workspace.yaml"),
+      "packages:\n  - apps/*\n"
+    )
+    await fs.writeJson(path.join(tmpDir, "package.json"), { name: "root" })
+
+    const astroDir = path.join(tmpDir, "apps", "astro-app")
+    await fs.ensureDir(astroDir)
+    await fs.writeJson(path.join(astroDir, "package.json"), {
+      name: "astro-app",
+    })
+    await fs.writeFile(
+      path.join(astroDir, "astro.config.mjs"),
+      "export default {}"
+    )
+
+    const targets = await getMonorepoTargets(tmpDir)
+    expect(targets).toEqual([{ name: "apps/astro-app", hasConfig: false }])
+  })
+
+  it("should deduplicate patterns from both pnpm-workspace.yaml and package.json", async () => {
+    await fs.writeFile(
+      path.join(tmpDir, "pnpm-workspace.yaml"),
+      "packages:\n  - apps/*\n"
+    )
+    await fs.writeJson(path.join(tmpDir, "package.json"), {
+      name: "root",
+      workspaces: ["apps/*"],
+    })
+
+    const webDir = path.join(tmpDir, "apps", "web")
+    await fs.ensureDir(webDir)
+    await fs.writeJson(path.join(webDir, "package.json"), { name: "web" })
+    await fs.writeFile(
+      path.join(webDir, "next.config.mjs"),
+      "export default {}"
+    )
+
+    const targets = await getMonorepoTargets(tmpDir)
+    // Should not duplicate the target.
+    expect(targets).toEqual([{ name: "apps/web", hasConfig: false }])
+  })
+})
+
+describe("formatMonorepoMessage", () => {
+  it("should log the monorepo message with targets", () => {
+    const logSpy = vi.spyOn(logger, "log")
+    const breakSpy = vi.spyOn(logger, "break")
+
+    formatMonorepoMessage("init", [
+      { name: "apps/web", hasConfig: false },
+      { name: "apps/docs", hasConfig: true },
+    ])
+
+    expect(breakSpy).toHaveBeenCalled()
+    const allLogCalls = logSpy.mock.calls.map((c) => c[0] as string)
+
+    // Should mention monorepo root.
+    expect(allLogCalls.some((msg) => msg.includes("monorepo root"))).toBe(true)
+    // Should mention -c flag.
+    expect(allLogCalls.some((msg) => msg.includes("-c"))).toBe(true)
+    // Should list both targets.
+    expect(
+      allLogCalls.some((msg) => msg.includes("shadcn init -c apps/web"))
+    ).toBe(true)
+    expect(
+      allLogCalls.some((msg) => msg.includes("shadcn init -c apps/docs"))
+    ).toBe(true)
+
+    logSpy.mockRestore()
+    breakSpy.mockRestore()
+  })
+
+  it("should use the correct command name", () => {
+    const logSpy = vi.spyOn(logger, "log")
+
+    formatMonorepoMessage("add [component]", [
+      { name: "apps/web", hasConfig: false },
+    ])
+
+    const allLogCalls = logSpy.mock.calls.map((c) => c[0] as string)
+    expect(
+      allLogCalls.some((msg) =>
+        msg.includes("shadcn add [component] -c apps/web")
+      )
+    ).toBe(true)
+
+    logSpy.mockRestore()
+  })
+})
diff --git a/packages/shadcn/src/utils/get-monorepo-info.ts b/packages/shadcn/src/utils/get-monorepo-info.ts
new file mode 100644
index 0000000000..7a6c969d81
--- /dev/null
+++ b/packages/shadcn/src/utils/get-monorepo-info.ts
@@ -0,0 +1,159 @@
+import path from "path"
+import { highlighter } from "@/src/utils/highlighter"
+import { logger } from "@/src/utils/logger"
+import fg from "fast-glob"
+import fs from "fs-extra"
+
+const FRAMEWORK_CONFIG_FILES = [
+  "next.config.*",
+  "vite.config.*",
+  "astro.config.*",
+  "remix.config.*",
+  "nuxt.config.*",
+  "svelte.config.*",
+  "gatsby-config.*",
+  "angular.json",
+]
+
+// Checks for workspace signals at the given directory.
+export async function isMonorepoRoot(cwd: string) {
+  // pnpm workspaces.
+  if (fs.existsSync(path.resolve(cwd, "pnpm-workspace.yaml"))) {
+    return true
+  }
+
+  // npm/yarn workspaces.
+  const packageJsonPath = path.resolve(cwd, "package.json")
+  if (fs.existsSync(packageJsonPath)) {
+    try {
+      const packageJson = await fs.readJson(packageJsonPath)
+      if (packageJson.workspaces) {
+        return true
+      }
+    } catch {
+      // Ignore parse errors.
+    }
+  }
+
+  // Lerna.
+  if (fs.existsSync(path.resolve(cwd, "lerna.json"))) {
+    return true
+  }
+
+  // Nx.
+  if (fs.existsSync(path.resolve(cwd, "nx.json"))) {
+    return true
+  }
+
+  return false
+}
+
+// Finds app directories in a monorepo that contain framework configs or components.json.
+export async function getMonorepoTargets(cwd: string) {
+  const patterns = await getWorkspacePatterns(cwd)
+
+  if (!patterns.length) {
+    return []
+  }
+
+  // Resolve patterns to directories.
+  const dirs = await fg(patterns, {
+    cwd,
+    onlyDirectories: true,
+    ignore: ["**/node_modules/**"],
+  })
+
+  const targets: { name: string; hasConfig: boolean }[] = []
+
+  for (const dir of dirs) {
+    const fullPath = path.resolve(cwd, dir)
+
+    // Check if it has a package.json (it's an actual workspace).
+    if (!fs.existsSync(path.resolve(fullPath, "package.json"))) {
+      continue
+    }
+
+    const hasComponentsJson = fs.existsSync(
+      path.resolve(fullPath, "components.json")
+    )
+
+    // Check for framework config files.
+    const hasFrameworkConfig = FRAMEWORK_CONFIG_FILES.some((pattern) => {
+      const matches = fg.sync(pattern, {
+        cwd: fullPath,
+        dot: true,
+      })
+      return matches.length > 0
+    })
+
+    if (hasComponentsJson || hasFrameworkConfig) {
+      targets.push({
+        name: dir,
+        hasConfig: hasComponentsJson,
+      })
+    }
+  }
+
+  return targets
+}
+
+// Formats and logs the monorepo detection message.
+export function formatMonorepoMessage(
+  command: string,
+  targets: { name: string; hasConfig: boolean }[]
+) {
+  logger.break()
+  logger.log(
+    `It looks like you are running ${highlighter.info(
+      command
+    )} from a monorepo root.`
+  )
+  logger.log(
+    `To use shadcn in a specific workspace, use the ${highlighter.info(
+      "-c"
+    )} flag:`
+  )
+  logger.break()
+
+  for (const target of targets) {
+    logger.log(`  shadcn ${command} -c ${target.name}`)
+  }
+
+  logger.break()
+}
+
+async function getWorkspacePatterns(cwd: string) {
+  const patterns: string[] = []
+
+  // Read pnpm-workspace.yaml.
+  const pnpmWorkspacePath = path.resolve(cwd, "pnpm-workspace.yaml")
+  if (fs.existsSync(pnpmWorkspacePath)) {
+    const content = await fs.readFile(pnpmWorkspacePath, "utf8")
+    // Simple regex parse to extract patterns from packages list.
+    const matches = Array.from(
+      content.matchAll(/^\s*-\s*["']?([^"'\n#]+)["']?\s*$/gm)
+    )
+    for (const match of matches) {
+      patterns.push(match[1].trim())
+    }
+  }
+
+  // Read package.json workspaces.
+  const packageJsonPath = path.resolve(cwd, "package.json")
+  if (fs.existsSync(packageJsonPath)) {
+    try {
+      const packageJson = await fs.readJson(packageJsonPath)
+      const workspaces = Array.isArray(packageJson.workspaces)
+        ? packageJson.workspaces
+        : packageJson.workspaces?.packages
+      if (Array.isArray(workspaces)) {
+        // Filter out negation patterns.
+        patterns.push(...workspaces.filter((w: string) => !w.startsWith("!")))
+      }
+    } catch {
+      // Ignore parse errors.
+    }
+  }
+
+  return Array.from(new Set(patterns))
+}
diff --git a/packages/shadcn/src/utils/get-project-info.ts b/packages/shadcn/src/utils/get-project-info.ts
index f70b609b62..affc185ef3 100644
--- a/packages/shadcn/src/utils/get-project-info.ts
+++ b/packages/shadcn/src/utils/get-project-info.ts
@@ -1,6 +1,9 @@
+import { promises as fsPromises } from "fs"
 import path from "path"
+import { getShadcnRegistryIndex } from "@/src/registry/api"
+import { SHADCN_URL } from "@/src/registry/constants"
 import { rawConfigSchema } from "@/src/schema"
-import { FRAMEWORKS, Framework } from "@/src/utils/frameworks"
+import { Framework, FRAMEWORKS } from "@/src/utils/frameworks"
 import { Config, getConfig, resolveConfigPaths } from "@/src/utils/get-config"
 import { getPackageInfo } from "@/src/utils/get-package-info"
 import fg from "fast-glob"
@@ -36,7 +39,10 @@ const TS_CONFIG_SCHEMA = z.object({
   }),
 })
 
-export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
+export async function getProjectInfo(
+  cwd: string,
+  opts?: { configCssFile?: string }
+): Promise<ProjectInfo | null> {
   const [
     configFiles,
     isSrcDir,
@@ -58,7 +64,7 @@ export async function getProjectInfo(cwd: string): Promise<ProjectInfo | null> {
     fs.pathExists(path.resolve(cwd, "src")),
     isTypeScriptProject(cwd),
     getTailwindConfigFile(cwd),
-    getTailwindCssFile(cwd),
+    getTailwindCssFile(cwd, opts?.configCssFile),
     getTailwindVersion(cwd),
     getTsConfigAliasPrefix(cwd),
     getPackageInfo(cwd, false),
@@ -240,7 +246,15 @@ export async function getTailwindVersion(
   return "v4"
 }
 
-export async function getTailwindCssFile(cwd: string) {
+export async function getTailwindCssFile(cwd: string, configCssFile?: string) {
+  // If the existing config has a known CSS file, check it first.
+  if (configCssFile) {
+    const resolvedPath = path.resolve(cwd, configCssFile)
+    if (await fs.pathExists(resolvedPath)) {
+      return configCssFile
+    }
+  }
+
   const [files, tailwindVersion] = await Promise.all([
     fg.glob(["**/*.css", "**/*.scss"], {
       cwd,
@@ -410,3 +424,25 @@ export async function getProjectTailwindVersionFromConfig(config: {
 
   return projectInfo.tailwindVersion
 }
+
+export async function getProjectComponents(cwd: string) {
+  const existingConfig = await getConfig(cwd)
+  if (!existingConfig) {
+    return []
+  }
+
+  const resolvedConfig = await resolveConfigPaths(cwd, existingConfig)
+  const uiDir = resolvedConfig.resolvedPaths.ui
+  if (!fs.existsSync(uiDir)) {
+    return []
+  }
+
+  const registryIndex = await getShadcnRegistryIndex()
+  const registryNames = new Set(registryIndex?.map((item) => item.name) ?? [])
+
+  const files = await fsPromises.readdir(uiDir)
+  return files
+    .filter((f) => /\.(tsx|jsx)$/.test(f))
+    .map((f) => path.basename(f, path.extname(f)))
+    .filter((name) => registryNames.has(name))
+}
diff --git a/packages/shadcn/src/utils/transformers/transform-cleanup.ts b/packages/shadcn/src/utils/transformers/transform-cleanup.ts
index b882df6bdc..fb8d5a0d95 100644
--- a/packages/shadcn/src/utils/transformers/transform-cleanup.ts
+++ b/packages/shadcn/src/utils/transformers/transform-cleanup.ts
@@ -1,7 +1,7 @@
 import { Transformer } from "@/src/utils/transformers"
 import {
-  NoSubstitutionTemplateLiteral,
   Node,
+  NoSubstitutionTemplateLiteral,
   Project,
   ScriptKind,
   SourceFile,
diff --git a/packages/shadcn/src/utils/transformers/transform-jsx.ts b/packages/shadcn/src/utils/transformers/transform-jsx.ts
index c8b0da6bed..c3bf7fcbf5 100644
--- a/packages/shadcn/src/utils/transformers/transform-jsx.ts
+++ b/packages/shadcn/src/utils/transformers/transform-jsx.ts
@@ -1,6 +1,6 @@
 import { type Transformer } from "@/src/utils/transformers"
 import { transformFromAstSync } from "@babel/core"
-import { ParserOptions, parse } from "@babel/parser"
+import { parse, ParserOptions } from "@babel/parser"
 // @ts-ignore
 import transformTypescript from "@babel/plugin-transform-typescript"
 import * as recast from "recast"
diff --git a/packages/shadcn/src/utils/transformers/transform-tw-prefix.ts b/packages/shadcn/src/utils/transformers/transform-tw-prefix.ts
index 897ddae456..70ec3e7cdb 100644
--- a/packages/shadcn/src/utils/transformers/transform-tw-prefix.ts
+++ b/packages/shadcn/src/utils/transformers/transform-tw-prefix.ts
@@ -2,8 +2,8 @@ import { Transformer } from "@/src/utils/transformers"
 import { SyntaxKind } from "ts-morph"
 
 import {
-  TailwindVersion,
   getProjectTailwindVersionFromConfig,
+  TailwindVersion,
 } from "../get-project-info"
 import { splitClassName } from "./transform-css-vars"
 
diff --git a/packages/shadcn/src/utils/updaters/update-css-vars.ts b/packages/shadcn/src/utils/updaters/update-css-vars.ts
index fc1aea4109..ba9d11bf66 100644
--- a/packages/shadcn/src/utils/updaters/update-css-vars.ts
+++ b/packages/shadcn/src/utils/updaters/update-css-vars.ts
@@ -430,13 +430,13 @@ function updateThemePlugin(cssVars: z.infer<typeof registryItemCssVarsSchema>) {
 
         if (variable === "radius") {
           const radiusVariables = {
-            sm: "calc(var(--radius) - 4px)",
-            md: "calc(var(--radius) - 2px)",
+            sm: "calc(var(--radius) * 0.6)",
+            md: "calc(var(--radius) * 0.8)",
             lg: "var(--radius)",
-            xl: "calc(var(--radius) + 4px)",
-            "2xl": "calc(var(--radius) + 8px)",
-            "3xl": "calc(var(--radius) + 12px)",
-            "4xl": "calc(var(--radius) + 16px)",
+            xl: "calc(var(--radius) * 1.4)",
+            "2xl": "calc(var(--radius) * 1.8)",
+            "3xl": "calc(var(--radius) * 2.2)",
+            "4xl": "calc(var(--radius) * 2.6)",
           }
           for (const [key, value] of Object.entries(radiusVariables)) {
             const cssVarNode = postcss.decl({
diff --git a/packages/shadcn/src/utils/updaters/update-css.ts b/packages/shadcn/src/utils/updaters/update-css.ts
index b474891cfc..1727ff9ceb 100644
--- a/packages/shadcn/src/utils/updaters/update-css.ts
+++ b/packages/shadcn/src/utils/updaters/update-css.ts
@@ -1,14 +1,21 @@
 import { promises as fs } from "fs"
 import path from "path"
-import { registryItemCssSchema } from "@/src/schema"
+import {
+  registryItemCssSchema,
+  registryItemCssVarsSchema,
+  registryItemTailwindSchema,
+} from "@/src/schema"
 import { Config } from "@/src/utils/get-config"
+import { TailwindVersion } from "@/src/utils/get-project-info"
 import { highlighter } from "@/src/utils/highlighter"
 import { spinner } from "@/src/utils/spinner"
+import { transformCssVars } from "@/src/utils/updaters/update-css-vars"
 import postcss from "postcss"
 import AtRule from "postcss/lib/at-rule"
 import Declaration from "postcss/lib/declaration"
 import Root from "postcss/lib/root"
 import Rule from "postcss/lib/rule"
+import { twMerge } from "tailwind-merge"
 import { z } from "zod"
 
 export async function updateCss(
@@ -16,13 +23,17 @@ export async function updateCss(
   config: Config,
   options: {
     silent?: boolean
+    cssVars?: z.infer<typeof registryItemCssVarsSchema>
+    cleanupDefaultNextStyles?: boolean
+    overwriteCssVars?: boolean
+    tailwindVersion?: TailwindVersion
+    tailwindConfig?: z.infer<typeof registryItemTailwindSchema>["config"]
   }
 ) {
-  if (
-    !config.resolvedPaths.tailwindCss ||
-    !css ||
-    Object.keys(css).length === 0
-  ) {
+  const hasCss = css && Object.keys(css).length > 0
+  const hasCssVars = Object.keys(options.cssVars ?? {}).length > 0
+
+  if (!config.resolvedPaths.tailwindCss || (!hasCss && !hasCssVars)) {
     return
   }
 
@@ -43,8 +54,23 @@ export async function updateCss(
     }
   ).start()
 
-  const raw = await fs.readFile(cssFilepath, "utf8")
-  let output = await transformCss(raw, css)
+  let output = await fs.readFile(cssFilepath, "utf8")
+
+  // Apply CSS vars transform first if provided.
+  if (hasCssVars) {
+    output = await transformCssVars(output, options.cssVars!, config, {
+      cleanupDefaultNextStyles: options.cleanupDefaultNextStyles,
+      tailwindVersion: options.tailwindVersion,
+      tailwindConfig: options.tailwindConfig,
+      overwriteCssVars: options.overwriteCssVars,
+    })
+  }
+
+  // Apply CSS transform if provided.
+  if (hasCss) {
+    output = await transformCss(output, css!)
+  }
+
   await fs.writeFile(cssFilepath, output, "utf8")
   cssSpinner.succeed()
 }
@@ -532,6 +558,20 @@ function processRule(parent: Root | AtRule, selector: string, properties: any) {
           )
 
           if (!existingAtRule) {
+            // For @apply, merge with existing @apply instead of creating a duplicate.
+            if (atRuleName === "apply") {
+              const existingApply = rule.nodes?.find(
+                (node): node is AtRule =>
+                  node.type === "atrule" && node.name === "apply"
+              )
+              if (existingApply) {
+                existingApply.params = twMerge(
+                  existingApply.params,
+                  atRuleParams
+                )
+                continue
+              }
+            }
             const atRule = postcss.atRule({
               name: atRuleName,
               params: atRuleParams,
diff --git a/packages/shadcn/src/utils/updaters/update-dependencies.ts b/packages/shadcn/src/utils/updaters/update-dependencies.ts
index a73fd72fed..7b0eff9150 100644
--- a/packages/shadcn/src/utils/updaters/update-dependencies.ts
+++ b/packages/shadcn/src/utils/updaters/update-dependencies.ts
@@ -1,3 +1,4 @@
+import { SHADCN_URL } from "@/src/registry/constants"
 import { RegistryItem } from "@/src/schema"
 import { Config } from "@/src/utils/get-config"
 import { getPackageInfo } from "@/src/utils/get-package-info"
@@ -40,7 +41,7 @@ export async function updateDependencies(
     } else {
       dependenciesSpinner.stopAndPersist()
       logger.warn(
-        "\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues in npm (see https://ui.shadcn.com/react-19).\n"
+        `\nIt looks like you are using React 19. \nSome packages may fail to install due to peer dependency issues in npm (see ${SHADCN_URL}/react-19).\n`
       )
       const confirmation = await prompts([
         {
diff --git a/packages/shadcn/src/utils/updaters/update-files.ts b/packages/shadcn/src/utils/updaters/update-files.ts
index 91db826d1a..901d9666d0 100644
--- a/packages/shadcn/src/utils/updaters/update-files.ts
+++ b/packages/shadcn/src/utils/updaters/update-files.ts
@@ -12,7 +12,7 @@ import {
   parseEnvContent,
 } from "@/src/utils/env-helpers"
 import { Config } from "@/src/utils/get-config"
-import { ProjectInfo, getProjectInfo } from "@/src/utils/get-project-info"
+import { getProjectInfo, ProjectInfo } from "@/src/utils/get-project-info"
 import { highlighter } from "@/src/utils/highlighter"
 import { logger } from "@/src/utils/logger"
 import { resolveImport } from "@/src/utils/resolve-import"
@@ -117,6 +117,17 @@ export async function updateFiles(
 
     const existingFile = existsSync(filePath)
 
+    // TODO: revisit this when we implement utils transform instead of override.
+    if (
+      file.type === "registry:lib" &&
+      basename(file.path) === "utils.ts" &&
+      projectInfo?.framework.name === "laravel" &&
+      existingFile
+    ) {
+      filesSkipped.push(path.relative(config.resolvedPaths.cwd, filePath))
+      continue
+    }
+
     // Check if the path exists and is a directory - we can't write to directories.
     if (existingFile && statSync(filePath).isDirectory()) {
       throw new Error(
@@ -251,19 +262,18 @@ export async function updateFiles(
   // Let's update filesUpdated with the updated files.
   filesUpdated.push(...updatedFiles)
 
-  // If a file is in filesCreated and filesUpdated, we should remove it from filesUpdated.
-  filesUpdated = filesUpdated.filter((file) => !filesCreated.includes(file))
+  // Remove duplicates and filter out files already in filesCreated.
+  filesCreated = Array.from(new Set(filesCreated))
+  filesUpdated = Array.from(
+    new Set(filesUpdated.filter((file) => !filesCreated.includes(file)))
+  )
+  filesSkipped = Array.from(new Set(filesSkipped))
 
   const hasUpdatedFiles = filesCreated.length || filesUpdated.length
   if (!hasUpdatedFiles && !filesSkipped.length) {
     filesCreatedSpinner?.info("No files updated.")
   }
 
-  // Remove duplicates.
-  filesCreated = Array.from(new Set(filesCreated))
-  filesUpdated = Array.from(new Set(filesUpdated))
-  filesSkipped = Array.from(new Set(filesSkipped))
-
   if (filesCreated.length) {
     filesCreatedSpinner?.succeed(
       `Created ${filesCreated.length} ${
@@ -298,7 +308,7 @@ export async function updateFiles(
   if (filesSkipped.length) {
     spinner(
       `Skipped ${filesSkipped.length} ${
-        filesUpdated.length === 1 ? "file" : "files"
+        filesSkipped.length === 1 ? "file" : "files"
       }: (files might be identical, use --overwrite to overwrite)`,
       {
         silent: options.silent,
@@ -322,10 +332,6 @@ export async function updateFiles(
     }
   }
 
-  if (!options.silent) {
-    logger.break()
-  }
-
   return {
     filesCreated,
     filesUpdated,
diff --git a/packages/shadcn/src/utils/updaters/update-fonts.test.ts b/packages/shadcn/src/utils/updaters/update-fonts.test.ts
index 5f0a665aa2..98a6f59c74 100644
--- a/packages/shadcn/src/utils/updaters/update-fonts.test.ts
+++ b/packages/shadcn/src/utils/updaters/update-fonts.test.ts
@@ -1,6 +1,6 @@
-import { describe, expect, it } from "vitest"
+import { describe, expect, it, vi } from "vitest"
 
-import { transformLayoutFonts } from "./update-fonts"
+import { massageTreeForFonts, transformLayoutFonts } from "./update-fonts"
 
 const mockConfig = {
   style: "new-york",
@@ -74,6 +74,7 @@ export default function RootLayout({
       import type { Metadata } from "next"
       import "./globals.css"
       import { Inter } from "next/font/google";
+      import { cn } from "@/lib/utils";
 
       const inter = Inter({subsets:['latin'],variable:'--font-sans'});
 
@@ -87,7 +88,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en" className={inter.variable}>
+          <html lang="en" className={cn("font-sans", inter.variable)}>
             <body>{children}</body>
           </html>
         )
@@ -158,7 +159,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en" className={cn(inter.variable, jetbrainsMono.variable)}>
+          <html lang="en" className={cn("font-mono", inter.variable, jetbrainsMono.variable)}>
             <body>{children}</body>
           </html>
         )
@@ -167,6 +168,124 @@ export default function RootLayout({
     `)
   })
 
+  it("should use configured utils alias when adding cn import", async () => {
+    const configWithCustomUtilsAlias = {
+      ...mockConfig,
+      aliases: {
+        ...mockConfig.aliases,
+        utils: "~/lib/utils",
+      },
+    }
+    const input = `
+import type { Metadata } from "next"
+import "./globals.css"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+`
+    const fonts = [
+      {
+        name: "inter",
+        type: "registry:font" as const,
+        font: {
+          family: "Inter",
+          provider: "google" as const,
+          import: "Inter",
+          variable: "--font-sans",
+          subsets: ["latin"],
+        },
+      },
+      {
+        name: "jetbrains-mono",
+        type: "registry:font" as const,
+        font: {
+          family: "JetBrains Mono",
+          provider: "google" as const,
+          import: "JetBrains_Mono",
+          variable: "--font-mono",
+          subsets: ["latin"],
+        },
+      },
+    ]
+
+    const firstRun = await transformLayoutFonts(
+      input,
+      fonts,
+      configWithCustomUtilsAlias
+    )
+    const secondRun = await transformLayoutFonts(
+      firstRun,
+      fonts,
+      configWithCustomUtilsAlias
+    )
+
+    expect(firstRun).toContain(`import { cn } from "~/lib/utils";`)
+    expect(secondRun).toBe(firstRun)
+  })
+
+  it("should use monorepo utils alias when adding cn import", async () => {
+    const monorepoConfig = {
+      ...mockConfig,
+      aliases: {
+        ...mockConfig.aliases,
+        utils: "@workspace/ui/lib/utils",
+      },
+    }
+    const input = `
+import type { Metadata } from "next"
+import "./globals.css"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+`
+    const fonts = [
+      {
+        name: "inter",
+        type: "registry:font" as const,
+        font: {
+          family: "Inter",
+          provider: "google" as const,
+          import: "Inter",
+          variable: "--font-sans",
+          subsets: ["latin"],
+        },
+      },
+      {
+        name: "jetbrains-mono",
+        type: "registry:font" as const,
+        font: {
+          family: "JetBrains Mono",
+          provider: "google" as const,
+          import: "JetBrains_Mono",
+          variable: "--font-mono",
+          subsets: ["latin"],
+        },
+      },
+    ]
+
+    const result = await transformLayoutFonts(input, fonts, monorepoConfig)
+
+    expect(result).toContain(`import { cn } from "@workspace/ui/lib/utils";`)
+  })
+
   it("should preserve existing string className", async () => {
     const input = `
 import type { Metadata } from "next"
@@ -203,6 +322,7 @@ export default function RootLayout({
       "
       import type { Metadata } from "next"
       import { Inter } from "next/font/google";
+      import { cn } from "@/lib/utils";
 
       const inter = Inter({subsets:['latin'],variable:'--font-sans'});
 
@@ -213,7 +333,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en" className={inter.variable}>
+          <html lang="en" className={cn("font-sans", inter.variable)}>
             <body className="antialiased">{children}</body>
           </html>
         )
@@ -259,6 +379,7 @@ export default function RootLayout({
     expect(result).toMatchInlineSnapshot(`
       "
       import { Roboto, Inter } from "next/font/google"
+      import { cn } from "@/lib/utils";
 
       const inter = Inter({subsets:['latin'],variable:'--font-sans'})
 
@@ -268,7 +389,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en" className={inter.variable}>
+          <html lang="en" className={cn("font-sans", inter.variable)}>
             <body className={inter.variable}>{children}</body>
           </html>
         )
@@ -325,7 +446,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en" className={inter.variable}>
+          <html lang="en" className={cn("font-sans", inter.variable)}>
             <body className={cn("antialiased", inter.variable)}>{children}</body>
           </html>
         )
@@ -367,6 +488,7 @@ export default function RootLayout({
 
     expect(result).toMatchInlineSnapshot(`
       "import { Inter } from "next/font/google";
+      import { cn } from "@/lib/utils";
 
       const inter = Inter({subsets:['latin'],weight:['400','500','600','700'],variable:'--font-sans'});
 
@@ -377,7 +499,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en" className={inter.variable}>
+          <html lang="en" className={cn("font-sans", inter.variable)}>
             <body>{children}</body>
           </html>
         )
@@ -386,7 +508,7 @@ export default function RootLayout({
     `)
   })
 
-  it("should skip font entirely if already imported", async () => {
+  it("should add already-imported font to html className", async () => {
     const input = `
 import { Inter } from "next/font/google"
 
@@ -420,10 +542,11 @@ export default function RootLayout({
 
     const result = await transformLayoutFonts(input, fonts, mockConfig)
 
-    // Font is already imported, so the layout should remain unchanged.
+    // Font is already imported but not on <html>, so it should be added.
     expect(result).toMatchInlineSnapshot(`
       "
       import { Inter } from "next/font/google"
+      import { cn } from "@/lib/utils";
 
       const inter = Inter({subsets:['latin'],variable:'--font-sans'})
 
@@ -433,7 +556,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en">
+          <html lang="en" className={cn("font-sans", inter.variable)}>
             <body className={inter.variable}>{children}</body>
           </html>
         )
@@ -537,6 +660,7 @@ export default function RootLayout({
     expect(result).toMatchInlineSnapshot(`
       "
       import { Roboto, Inter } from "next/font/google"
+      import { cn } from "@/lib/utils";
 
       const inter = Inter({subsets:['latin'],variable:'--font-sans'});
 
@@ -548,7 +672,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en" className={inter.variable}>
+          <html lang="en" className={cn("font-sans", inter.variable)}>
             <body className={roboto.variable}>{children}</body>
           </html>
         )
@@ -589,6 +713,7 @@ export default function RootLayout({
 
     expect(result).toMatchInlineSnapshot(`
       "import { Inter } from "next/font/google";
+      import { cn } from "@/lib/utils";
 
       const inter = Inter({subsets:['latin'],variable:'--font-sans'});
 
@@ -599,7 +724,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en" className={inter.variable}>
+          <html lang="en" className={cn("font-sans", inter.variable)}>
             <body className={someVariable}>{children}</body>
           </html>
         )
@@ -646,6 +771,7 @@ export default function RootLayout({
       import { GeistSans } from "geist/font/sans"
       import { GeistMono } from "geist/font/mono"
       import { Inter } from "next/font/google";
+      import { cn } from "@/lib/utils";
 
       const inter = Inter({subsets:['latin'],variable:'--font-sans'});
 
@@ -656,7 +782,7 @@ export default function RootLayout({
         children: React.ReactNode
       }) {
         return (
-          <html lang="en" className={inter.variable}>
+          <html lang="en" className={cn("font-sans", inter.variable)}>
             <body className={\`\${GeistSans.variable} \${GeistMono.variable} antialiased\`}>{children}</body>
           </html>
         )
@@ -709,6 +835,185 @@ export default function RootLayout({
     expect(thirdRun).toBe(firstRun)
   })
 
+  it("should add a single serif font to empty layout", async () => {
+    const input = `
+import type { Metadata } from "next"
+import "./globals.css"
+
+export const metadata: Metadata = {
+  title: "My App",
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+`
+    const fonts = [
+      {
+        name: "font-lora",
+        type: "registry:font" as const,
+        font: {
+          family: "'Lora Variable', serif",
+          provider: "google" as const,
+          import: "Lora",
+          variable: "--font-serif",
+          subsets: ["latin"],
+        },
+      },
+    ]
+
+    const result = await transformLayoutFonts(input, fonts, mockConfig)
+
+    expect(result).toMatchInlineSnapshot(`
+      "
+      import type { Metadata } from "next"
+      import "./globals.css"
+      import { Lora } from "next/font/google";
+      import { cn } from "@/lib/utils";
+
+      const lora = Lora({subsets:['latin'],variable:'--font-serif'});
+
+      export const metadata: Metadata = {
+        title: "My App",
+      }
+
+      export default function RootLayout({
+        children,
+      }: {
+        children: React.ReactNode
+      }) {
+        return (
+          <html lang="en" className={cn("font-serif", lora.variable)}>
+            <body>{children}</body>
+          </html>
+        )
+      }
+      "
+    `)
+  })
+
+  it("should add serif and sans fonts together", async () => {
+    const input = `
+import type { Metadata } from "next"
+import "./globals.css"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+`
+    const fonts = [
+      {
+        name: "font-inter",
+        type: "registry:font" as const,
+        font: {
+          family: "'Inter Variable', sans-serif",
+          provider: "google" as const,
+          import: "Inter",
+          variable: "--font-sans",
+          subsets: ["latin"],
+        },
+      },
+      {
+        name: "font-lora",
+        type: "registry:font" as const,
+        font: {
+          family: "'Lora Variable', serif",
+          provider: "google" as const,
+          import: "Lora",
+          variable: "--font-serif",
+          subsets: ["latin"],
+        },
+      },
+    ]
+
+    const result = await transformLayoutFonts(input, fonts, mockConfig)
+
+    expect(result).toMatchInlineSnapshot(`
+      "
+      import type { Metadata } from "next"
+      import "./globals.css"
+      import { Inter, Lora } from "next/font/google";
+      import { cn } from "@/lib/utils";
+
+      const lora = Lora({subsets:['latin'],variable:'--font-serif'});
+
+      const inter = Inter({subsets:['latin'],variable:'--font-sans'});
+
+
+      export default function RootLayout({
+        children,
+      }: {
+        children: React.ReactNode
+      }) {
+        return (
+          <html lang="en" className={cn("font-serif", inter.variable, lora.variable)}>
+            <body>{children}</body>
+          </html>
+        )
+      }
+      "
+    `)
+  })
+
+  it("should replace existing font-sans with font-serif on html", async () => {
+    const input = `
+import { Inter } from "next/font/google";
+import { cn } from "@/lib/utils";
+
+const inter = Inter({subsets:['latin'],variable:'--font-sans'});
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={cn("font-sans", inter.variable)}>
+      <body>{children}</body>
+    </html>
+  )
+}
+`
+    const fonts = [
+      {
+        name: "font-playfair-display",
+        type: "registry:font" as const,
+        font: {
+          family: "'Playfair Display Variable', serif",
+          provider: "google" as const,
+          import: "Playfair_Display",
+          variable: "--font-serif",
+          subsets: ["latin"],
+        },
+      },
+    ]
+
+    const result = await transformLayoutFonts(input, fonts, mockConfig)
+
+    // font-sans should be replaced with font-serif.
+    expect(result).toContain('"font-serif"')
+    expect(result).not.toContain('"font-sans"')
+    expect(result).toContain("playfairDisplay.variable")
+    // Inter's variable should remain since we only added Playfair.
+    expect(result).toContain("inter.variable")
+  })
+
   it("should be idempotent with multiple fonts", async () => {
     const input = `
 export default function RootLayout({
@@ -757,4 +1062,343 @@ export default function RootLayout({
     // All runs should produce the same result.
     expect(secondRun).toBe(firstRun)
   })
+
+  it("should be idempotent when font is already imported and on html", async () => {
+    // Simulates a layout where the font was already added by a previous preset.
+    const input = `
+import { Merriweather } from "next/font/google";
+import { cn } from "@/lib/utils";
+
+const merriweather = Merriweather({subsets:['latin'],weight:['400','700'],variable:'--font-serif'});
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={cn("font-serif", merriweather.variable)}>
+      <body>{children}</body>
+    </html>
+  )
+}
+`
+    const fonts = [
+      {
+        name: "font-merriweather",
+        type: "registry:font" as const,
+        font: {
+          family: "'Merriweather Variable', serif",
+          provider: "google" as const,
+          import: "Merriweather",
+          variable: "--font-serif",
+          subsets: ["latin"],
+          weight: ["400", "700"],
+        },
+      },
+    ]
+
+    const firstRun = await transformLayoutFonts(input, fonts, mockConfig)
+    const secondRun = await transformLayoutFonts(firstRun, fonts, mockConfig)
+
+    // Should remain unchanged across all runs.
+    expect(firstRun).toBe(input)
+    expect(secondRun).toBe(input)
+  })
+
+  it("should be idempotent when adding font to pre-existing layout with other fonts", async () => {
+    // Layout already has Inter, and we're adding Merriweather.
+    const input = `
+import { Inter } from "next/font/google";
+import { cn } from "@/lib/utils";
+
+const inter = Inter({subsets:['latin'],variable:'--font-sans'});
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className={cn("font-sans", inter.variable)}>
+      <body>{children}</body>
+    </html>
+  )
+}
+`
+    const fonts = [
+      {
+        name: "font-inter",
+        type: "registry:font" as const,
+        font: {
+          family: "'Inter Variable', sans-serif",
+          provider: "google" as const,
+          import: "Inter",
+          variable: "--font-sans",
+          subsets: ["latin"],
+        },
+      },
+      {
+        name: "font-merriweather",
+        type: "registry:font" as const,
+        font: {
+          family: "'Merriweather Variable', serif",
+          provider: "google" as const,
+          import: "Merriweather",
+          variable: "--font-serif",
+          subsets: ["latin"],
+          weight: ["400", "700"],
+        },
+      },
+    ]
+
+    const firstRun = await transformLayoutFonts(input, fonts, mockConfig)
+    const secondRun = await transformLayoutFonts(firstRun, fonts, mockConfig)
+
+    // Second run should be identical to first.
+    expect(secondRun).toBe(firstRun)
+    // Inter should still be there, Merriweather should be added.
+    expect(firstRun).toContain("font-sans")
+    expect(firstRun).toContain("font-serif")
+    expect(firstRun).toContain("inter.variable")
+    expect(firstRun).toContain("merriweather.variable")
+  })
+
+  it("should add .variable but not utility class for custom selector font", async () => {
+    const input = `
+import type { Metadata } from "next"
+import "./globals.css"
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+`
+    const fonts = [
+      {
+        name: "font-inter",
+        type: "registry:font" as const,
+        font: {
+          family: "'Inter Variable', sans-serif",
+          provider: "google" as const,
+          import: "Inter",
+          variable: "--font-sans",
+          subsets: ["latin"],
+        },
+      },
+      {
+        name: "font-playfair-display",
+        type: "registry:font" as const,
+        font: {
+          family: "'Playfair Display Variable', serif",
+          provider: "google" as const,
+          import: "Playfair_Display",
+          variable: "--font-heading",
+          subsets: ["latin"],
+          selector: "h1, h2, h3, h4, h5, h6",
+        },
+      },
+    ]
+
+    const result = await transformLayoutFonts(input, fonts, mockConfig)
+
+    // .variable should be on <html> for both fonts.
+    expect(result).toContain("inter.variable")
+    expect(result).toContain("playfairDisplay.variable")
+    // Only font-sans utility class should be on <html>, not font-heading.
+    expect(result).toContain('"font-sans"')
+    expect(result).not.toContain('"font-heading"')
+  })
+})
+
+vi.mock("@/src/utils/get-project-info", () => ({
+  getProjectInfo: vi.fn().mockResolvedValue({
+    framework: { name: "vite" },
+    isTsx: true,
+    isSrcDir: false,
+  }),
+}))
+
+describe("massageTreeForFonts", () => {
+  it("should add font @apply to html when no existing css", async () => {
+    const tree = {
+      fonts: [
+        {
+          name: "font-inter",
+          type: "registry:font" as const,
+          font: {
+            family: "'Inter Variable', sans-serif",
+            provider: "google" as const,
+            import: "Inter",
+            variable: "--font-sans",
+            subsets: ["latin"],
+          },
+        },
+      ],
+    } as any
+
+    const result = await massageTreeForFonts(tree, {
+      resolvedPaths: { cwd: "/test" },
+    } as any)
+
+    expect(result.css!["@layer base"].html).toEqual({
+      "@apply font-sans": {},
+    })
+  })
+
+  it("should preserve existing html css rules when adding font classes", async () => {
+    const tree = {
+      fonts: [
+        {
+          name: "font-inter",
+          type: "registry:font" as const,
+          font: {
+            family: "'Inter Variable', sans-serif",
+            provider: "google" as const,
+            import: "Inter",
+            variable: "--font-sans",
+            subsets: ["latin"],
+          },
+        },
+      ],
+      cssVars: {
+        theme: {},
+      },
+      css: {
+        "@layer base": {
+          html: {
+            "@apply bg-background text-foreground": {},
+          },
+        },
+      },
+    } as any
+
+    const result = await massageTreeForFonts(tree, {
+      resolvedPaths: { cwd: "/test" },
+    } as any)
+
+    expect(result.css!["@layer base"].html).toEqual({
+      "@apply bg-background text-foreground font-sans": {},
+    })
+  })
+
+  it("should combine multiple font classes into a single @apply", async () => {
+    const tree = {
+      fonts: [
+        {
+          name: "font-inter",
+          type: "registry:font" as const,
+          font: {
+            family: "'Inter Variable', sans-serif",
+            provider: "google" as const,
+            import: "Inter",
+            variable: "--font-sans",
+            subsets: ["latin"],
+          },
+        },
+        {
+          name: "font-lora",
+          type: "registry:font" as const,
+          font: {
+            family: "'Lora Variable', serif",
+            provider: "google" as const,
+            import: "Lora",
+            variable: "--font-serif",
+            subsets: ["latin"],
+          },
+        },
+      ],
+      css: {
+        "@layer base": {
+          html: {
+            "@apply bg-background text-foreground": {},
+          },
+        },
+      },
+    } as any
+
+    const result = await massageTreeForFonts(tree, {
+      resolvedPaths: { cwd: "/test" },
+    } as any)
+
+    expect(result.css!["@layer base"].html).toEqual({
+      "@apply bg-background text-foreground font-sans font-serif": {},
+    })
+  })
+
+  it("should apply font to custom selector", async () => {
+    const tree = {
+      fonts: [
+        {
+          name: "font-playfair-display",
+          type: "registry:font" as const,
+          font: {
+            family: "'Playfair Display Variable', serif",
+            provider: "google" as const,
+            import: "Playfair_Display",
+            variable: "--font-heading",
+            subsets: ["latin"],
+            selector: "h1, h2, h3, h4, h5, h6",
+          },
+        },
+      ],
+    } as any
+
+    const result = await massageTreeForFonts(tree, {
+      resolvedPaths: { cwd: "/test" },
+    } as any)
+
+    expect(result.css!["@layer base"]["h1, h2, h3, h4, h5, h6"]).toEqual({
+      "@apply font-heading": {},
+    })
+    expect(result.css!["@layer base"].html).toBeUndefined()
+  })
+
+  it("should handle mixed selectors (default html + custom)", async () => {
+    const tree = {
+      fonts: [
+        {
+          name: "font-inter",
+          type: "registry:font" as const,
+          font: {
+            family: "'Inter Variable', sans-serif",
+            provider: "google" as const,
+            import: "Inter",
+            variable: "--font-sans",
+            subsets: ["latin"],
+          },
+        },
+        {
+          name: "font-playfair-display",
+          type: "registry:font" as const,
+          font: {
+            family: "'Playfair Display Variable', serif",
+            provider: "google" as const,
+            import: "Playfair_Display",
+            variable: "--font-heading",
+            subsets: ["latin"],
+            selector: "h1, h2, h3, h4, h5, h6",
+          },
+        },
+      ],
+    } as any
+
+    const result = await massageTreeForFonts(tree, {
+      resolvedPaths: { cwd: "/test" },
+    } as any)
+
+    expect(result.css!["@layer base"].html).toEqual({
+      "@apply font-sans": {},
+    })
+    expect(result.css!["@layer base"]["h1, h2, h3, h4, h5, h6"]).toEqual({
+      "@apply font-heading": {},
+    })
+  })
 })
diff --git a/packages/shadcn/src/utils/updaters/update-fonts.ts b/packages/shadcn/src/utils/updaters/update-fonts.ts
index 5634d00103..e29480e83a 100644
--- a/packages/shadcn/src/utils/updaters/update-fonts.ts
+++ b/packages/shadcn/src/utils/updaters/update-fonts.ts
@@ -2,8 +2,7 @@ import { existsSync, promises as fs } from "fs"
 import path from "path"
 import { RegistryFontItem, registryResolvedItemsTreeSchema } from "@/src/schema"
 import { Config } from "@/src/utils/get-config"
-import { ProjectInfo, getProjectInfo } from "@/src/utils/get-project-info"
-import { highlighter } from "@/src/utils/highlighter"
+import { getProjectInfo, ProjectInfo } from "@/src/utils/get-project-info"
 import { spinner } from "@/src/utils/spinner"
 import {
   CallExpression,
@@ -28,49 +27,65 @@ export async function massageTreeForFonts(
     return tree
   }
 
-  const [fontSans] = tree.fonts
   tree.cssVars ??= {}
   tree.cssVars.theme ??= {}
 
-  if (
+  const isNext =
     projectInfo.framework.name === "next-app" ||
     projectInfo.framework.name === "next-pages"
-  ) {
-    tree.cssVars.theme[
-      fontSans.font.variable
-    ] = `var(${fontSans.font.variable})`
-    return tree
+
+  for (const font of tree.fonts) {
+    if (isNext) {
+      // Next.js sets the CSS variable via next/font on the <html> element.
+      // The font utility class is added to <html> className in updateHtmlClassName.
+      // We update the theme CSS variable to reference itself so it resolves
+      // to the value injected by next/font on <html>.
+      tree.cssVars.theme[font.font.variable] = `var(${font.font.variable})`
+    } else {
+      // Other frameworks will use fontsource for now.
+      const fontName = font.name.replace("font-", "")
+      const fontSourceDependency = `@fontsource-variable/${fontName}`
+      tree.dependencies ??= []
+      tree.dependencies.push(fontSourceDependency)
+      tree.css ??= {}
+      tree.css[`@import "${fontSourceDependency}"`] = {}
+      tree.cssVars.theme[font.font.variable] = font.font.family
+    }
   }
 
-  // Other frameworks will use fontsource for now.
-  const fontName = fontSans.name.replace("font-", "")
-  const fontSourceDependency = `@fontsource-variable/${fontName}`
-  tree.dependencies ??= []
-  tree.dependencies.push(fontSourceDependency)
-  tree.css ??= {}
-  tree.css[`@import "${fontSourceDependency}"`] = {}
-  tree.css["@layer base"] ??= {}
-  tree.css["@layer base"].html = {
-    "@apply font-sans": {},
+  // Apply font utility classes grouped by selector.
+  if (tree.fonts.length > 0) {
+    // Group fonts by their CSS selector (default to "html").
+    const groups = new Map<string, string[]>()
+    for (const font of tree.fonts) {
+      const selector = font.font.selector ?? "html"
+      const cls = font.font.variable.replace("--", "")
+      if (!groups.has(selector)) {
+        groups.set(selector, [])
+      }
+      groups.get(selector)!.push(cls)
+    }
+
+    tree.css ??= {}
+    tree.css["@layer base"] ??= {}
+
+    for (const [selector, classes] of Array.from(groups.entries())) {
+      const fontClasses = classes.join(" ")
+      tree.css["@layer base"][selector] ??= {}
+      // Find existing @apply key and merge, or create new.
+      const existingApplyKey = Object.keys(
+        tree.css["@layer base"][selector]
+      ).find((key) => key.startsWith("@apply "))
+      if (existingApplyKey) {
+        delete tree.css["@layer base"][selector][existingApplyKey]
+        tree.css["@layer base"][selector][
+          `${existingApplyKey} ${fontClasses}`
+        ] = {}
+      } else {
+        tree.css["@layer base"][selector][`@apply ${fontClasses}`] = {}
+      }
+    }
   }
-  tree.css["@layer base"].body = {
-    "@apply font-sans bg-background text-foreground": {},
-  }
-  tree.cssVars.theme[fontSans.font.variable] = fontSans.font.family
-
-  //   tree.docs += `## Fonts
-  // The ${highlighter.info(
-  //     fontSans.title ?? ""
-  //   )} font has been added to your project.
-
-  // If you have existing font-family declarations, you may need to update them to use the new ${highlighter.info(
-  //     fontSans.font.variable
-  //   )} variable.
-
-  // @theme inline {
-  //   ${fontSans.font.variable}: ${fontSans.font.family};
-  // }
-  //   `
 
   return tree
 }
@@ -136,7 +151,7 @@ async function updateNextFonts(
   }
 }
 
-async function findLayoutFile(
+export async function findLayoutFile(
   config: Config,
   projectInfo: ProjectInfo
 ): Promise<string | null> {
@@ -162,7 +177,7 @@ async function findLayoutFile(
 export async function transformLayoutFonts(
   input: string,
   fonts: RegistryFontItem[],
-  _config: Config
+  config: Config
 ) {
   const project = new Project({
     compilerOptions: {},
@@ -175,8 +190,9 @@ export async function transformLayoutFonts(
   // Only process Google fonts for now.
   const googleFonts = fonts.filter((f) => f.font.provider === "google")
 
-  // Track which font variables we're adding.
+  // Track which font variables and utility classes we're adding.
   const fontVariableNames: string[] = []
+  const fontUtilityClasses: string[] = []
 
   // Process Google fonts.
   for (const font of googleFonts) {
@@ -197,8 +213,18 @@ export async function transformLayoutFonts(
       const hasImport = namedImports.some((imp) => imp.getName() === importName)
 
       if (hasImport) {
-        // Font is already imported - skip this font entirely.
-        // Assume the user already has it set up correctly.
+        // Font is already imported. Still track it for className update.
+        const existingVarDecl = findFontVariableDeclaration(
+          sourceFile,
+          font.font.variable
+        )
+        if (existingVarDecl) {
+          fontVariableNames.push(existingVarDecl.getName())
+          // Only add utility class to <html> if font has no custom selector.
+          if (!font.font.selector) {
+            fontUtilityClasses.push(font.font.variable.replace("--", ""))
+          }
+        }
         continue
       }
 
@@ -250,11 +276,33 @@ export async function transformLayoutFonts(
     }
 
     fontVariableNames.push(varName)
+    // Only add utility class to <html> if font has no custom selector.
+    if (!font.font.selector) {
+      fontUtilityClasses.push(font.font.variable.replace("--", ""))
+    }
   }
 
-  // Update html className to include font variables.
+  // Only keep one font-family class (font-sans, font-serif, font-mono) on <html>.
+  // The last one in the array takes priority as it's the one being added/changed.
+  const fontFamilyClasses = new Set(["font-sans", "font-serif", "font-mono"])
+  const lastFontFamilyClass = [...fontUtilityClasses]
+    .reverse()
+    .find((cls) => fontFamilyClasses.has(cls))
+  const filteredUtilityClasses = fontUtilityClasses.filter(
+    (cls) => !fontFamilyClasses.has(cls)
+  )
+  if (lastFontFamilyClass) {
+    filteredUtilityClasses.unshift(lastFontFamilyClass)
+  }
+
+  // Update html className to include font variables and utility classes.
   if (fontVariableNames.length > 0) {
-    updateHtmlClassName(sourceFile, fontVariableNames)
+    updateHtmlClassName(
+      sourceFile,
+      fontVariableNames,
+      filteredUtilityClasses,
+      config
+    )
   }
 
   return sourceFile.getFullText()
@@ -335,7 +383,9 @@ function findInsertPosition(
 
 function updateHtmlClassName(
   sourceFile: ReturnType<Project["createSourceFile"]>,
-  fontVariableNames: string[]
+  fontVariableNames: string[],
+  fontUtilityClasses: string[],
+  config: Config
 ) {
   // Find the <html> JSX element.
   const jsxElements = sourceFile.getDescendantsOfKind(
@@ -346,26 +396,21 @@ function updateHtmlClassName(
     const tagName = element.getTagNameNode().getText()
     if (tagName !== "html") continue
 
+    // Build the new expressions: utility classes as strings, then .variable expressions.
+    const newUtilityClasses = fontUtilityClasses.map((cls) => `"${cls}"`)
+    const newVarExpressions = fontVariableNames.map(
+      (name) => `${name}.variable`
+    )
+    const allNewArgs = [...newUtilityClasses, ...newVarExpressions]
+
     const classNameAttr = element.getAttribute("className")
     if (!classNameAttr) {
-      // Add className attribute with font variables.
-      const variableExpressions = fontVariableNames
-        .map((name) => `${name}.variable`)
-        .join(", ")
-
-      if (fontVariableNames.length === 1) {
-        element.addAttribute({
-          name: "className",
-          initializer: `{${variableExpressions}}`,
-        })
-      } else {
-        // Need to use cn() for multiple fonts.
-        ensureCnImport(sourceFile)
-        element.addAttribute({
-          name: "className",
-          initializer: `{cn(${variableExpressions})}`,
-        })
-      }
+      // Add className attribute with font utility classes and variables.
+      ensureCnImport(sourceFile, config)
+      element.addAttribute({
+        name: "className",
+        initializer: `{cn(${allNewArgs.join(", ")})}`,
+      })
       return
     }
 
@@ -379,17 +424,12 @@ function updateHtmlClassName(
 
     if (!initializer) return
 
-    // Build the new variable expressions.
-    const newVarExpressions = fontVariableNames.map(
-      (name) => `${name}.variable`
-    )
-
     if (initializer.getKind() === SyntaxKind.StringLiteral) {
-      // className="some-class" -> className={cn("some-class", font.variable)}
+      // className="some-class" -> className={cn("some-class", "font-serif", font.variable)}
       const currentValue = initializer.getText().slice(1, -1) // Remove quotes.
-      ensureCnImport(sourceFile)
+      ensureCnImport(sourceFile, config)
       jsxAttr.setInitializer(
-        `{cn("${currentValue}", ${newVarExpressions.join(", ")})}`
+        `{cn("${currentValue}", ${allNewArgs.join(", ")})}`
       )
     } else if (initializer.getKind() === SyntaxKind.JsxExpression) {
       // className={...} - need to analyze the expression.
@@ -401,55 +441,67 @@ function updateHtmlClassName(
 
       // Check if it's already using cn().
       if (exprText.startsWith("cn(")) {
-        // Check if cn() already has exactly our font variables.
+        // Check if cn() already has all our font variables and utility classes.
         const hasAllFontVars = newVarExpressions.every((v) =>
           exprText.includes(v)
         )
-        if (hasAllFontVars) {
-          // Already has our font variables, skip.
+        const hasAllUtilityClasses = fontUtilityClasses.every((cls) =>
+          exprText.includes(`"${cls}"`)
+        )
+        // Check there are no stale font-family classes (e.g., "font-sans" when we want "font-serif").
+        const staleFontFamilyClasses = ["font-sans", "font-serif", "font-mono"]
+          .filter((cls) => !fontUtilityClasses.includes(cls))
+          .some((cls) => exprText.includes(`"${cls}"`))
+        if (hasAllFontVars && hasAllUtilityClasses && !staleFontFamilyClasses) {
+          // Already has everything, skip.
           continue
         }
 
-        // Remove existing font variables and add new ones.
-        const cleanedExpr = removeFontVariablesFromCn(exprText)
-        const newExpr = insertFontVariablesIntoCn(
-          cleanedExpr,
-          newVarExpressions
-        )
+        // Remove existing font variables and font-family classes, then add new ones.
+        let cleanedExpr = removeFontVariablesFromCn(exprText, newVarExpressions)
+        cleanedExpr = removeFontFamilyClassesFromCn(cleanedExpr)
+        const newExpr = insertFontVariablesIntoCn(cleanedExpr, allNewArgs)
         jsxExpr.replaceWithText(`{${newExpr}}`)
       } else if (/^\w+\.variable$/.test(exprText)) {
         // Single font variable like {inter.variable}.
         // Check if it's already one of our font variables.
-        if (newVarExpressions.includes(exprText)) {
-          // Already using our font variable, skip.
+        if (
+          newVarExpressions.includes(exprText) &&
+          fontUtilityClasses.length === 0
+        ) {
           continue
         }
-        // Replace with our font variables.
-        if (newVarExpressions.length === 1) {
-          jsxExpr.replaceWithText(`{${newVarExpressions[0]}}`)
-        } else {
-          ensureCnImport(sourceFile)
-          jsxExpr.replaceWithText(`{cn(${newVarExpressions.join(", ")})}`)
-        }
+        // Replace with cn() including utility classes and font variables.
+        ensureCnImport(sourceFile, config)
+        jsxExpr.replaceWithText(`{cn(${allNewArgs.join(", ")})}`)
       } else if (exprText.startsWith("`") && exprText.endsWith("`")) {
         // Template literal - parse and convert to cn() arguments.
         const cnArgs = parseTemplateLiteralToCnArgs(exprText)
-        ensureCnImport(sourceFile)
+        ensureCnImport(sourceFile, config)
+        // Deduplicate cnArgs against allNewArgs.
+        const allNewArgsSet = new Set(allNewArgs)
+        const fontFamilyLiterals = new Set(
+          ["font-sans", "font-serif", "font-mono"].map((c) => `"${c}"`)
+        )
+        const cleanedCnArgs = cnArgs.filter(
+          (arg) => !allNewArgsSet.has(arg) && !fontFamilyLiterals.has(arg)
+        )
         jsxExpr.replaceWithText(
-          `{cn(${[...cnArgs, ...newVarExpressions].join(", ")})}`
+          `{cn(${[...cleanedCnArgs, ...allNewArgs].join(", ")})}`
         )
       } else {
         // Some other expression (variable, etc.), wrap with cn().
-        ensureCnImport(sourceFile)
-        jsxExpr.replaceWithText(
-          `{cn(${exprText}, ${newVarExpressions.join(", ")})}`
-        )
+        ensureCnImport(sourceFile, config)
+        jsxExpr.replaceWithText(`{cn(${exprText}, ${allNewArgs.join(", ")})}`)
       }
     }
   }
 }
 
-function ensureCnImport(sourceFile: ReturnType<Project["createSourceFile"]>) {
+function ensureCnImport(
+  sourceFile: ReturnType<Project["createSourceFile"]>,
+  config: Config
+) {
   const existingImport = sourceFile.getImportDeclaration((decl) => {
     const namedImports = decl.getNamedImports()
     return namedImports.some((imp) => imp.getName() === "cn")
@@ -470,7 +522,7 @@ function ensureCnImport(sourceFile: ReturnType<Project["createSourceFile"]>) {
     } else {
       // Add a new import for cn.
       sourceFile.addImportDeclaration({
-        moduleSpecifier: "@/lib/utils",
+        moduleSpecifier: config.aliases.utils,
         namedImports: ["cn"],
       })
     }
@@ -512,10 +564,30 @@ function parseTemplateLiteralToCnArgs(templateLiteral: string) {
   return [...staticArgs, ...variableArgs]
 }
 
-function removeFontVariablesFromCn(cnExpr: string) {
-  // Remove patterns like "fontName.variable" from cn() call.
-  // This is a simple regex-based approach.
-  return cnExpr.replace(/,?\s*\w+\.variable/g, "").replace(/cn\(\s*,/, "cn(")
+function removeFontVariablesFromCn(
+  cnExpr: string,
+  variablesToRemove: string[]
+) {
+  // Remove specific font variable expressions from cn() call.
+  let result = cnExpr
+  for (const varExpr of variablesToRemove) {
+    result = result
+      .replace(new RegExp(`,?\\s*${varExpr.replace(".", "\\.")}`, "g"), "")
+      .replace(/cn\(\s*,/, "cn(")
+  }
+  return result
+}
+
+function removeFontFamilyClassesFromCn(cnExpr: string) {
+  // Remove font-family class strings (font-sans, font-serif, font-mono) from cn() call.
+  // Does not remove other font classes like font-bold, font-semibold, etc.
+  let result = cnExpr
+  for (const cls of ["font-sans", "font-serif", "font-mono"]) {
+    result = result
+      .replace(new RegExp(`,?\\s*"${cls}"`, "g"), "")
+      .replace(/cn\(\s*,/, "cn(")
+  }
+  return result
 }
 
 function insertFontVariablesIntoCn(cnExpr: string, fontVars: string[]) {
diff --git a/packages/shadcn/test/fixtures/frameworks/next-monorepo/app/page.tsx b/packages/shadcn/test/fixtures/frameworks/next-monorepo/app/page.tsx
new file mode 100644
index 0000000000..6ee683e940
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-monorepo/app/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>Hello</div>
+}
diff --git a/packages/shadcn/test/fixtures/frameworks/next-monorepo/package.json b/packages/shadcn/test/fixtures/frameworks/next-monorepo/package.json
new file mode 100644
index 0000000000..0ce42044e8
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-monorepo/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "next-monorepo-web",
+  "dependencies": {
+    "next": "15.0.0"
+  }
+}
diff --git a/packages/shadcn/test/fixtures/frameworks/next-monorepo/packages/ui/src/globals.css b/packages/shadcn/test/fixtures/frameworks/next-monorepo/packages/ui/src/globals.css
new file mode 100644
index 0000000000..f1d8c73cdc
--- /dev/null
+++ b/packages/shadcn/test/fixtures/frameworks/next-monorepo/packages/ui/src/globals.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/packages/shadcn/test/utils/add-components.test.ts b/packages/shadcn/test/utils/add-components.test.ts
new file mode 100644
index 0000000000..1e73ee8a1a
--- /dev/null
+++ b/packages/shadcn/test/utils/add-components.test.ts
@@ -0,0 +1,780 @@
+import { afterEach, describe, expect, test, vi } from "vitest"
+
+import type { Config } from "../../src/utils/get-config"
+
+// Mock all external dependencies.
+vi.mock("../../src/registry/resolver", () => ({
+  resolveRegistryTree: vi.fn(),
+}))
+
+vi.mock("../../src/utils/get-config", async () => {
+  const actual = (await vi.importActual(
+    "../../src/utils/get-config"
+  )) as typeof import("../../src/utils/get-config")
+  return {
+    ...actual,
+    getWorkspaceConfig: vi.fn(),
+    findPackageRoot: vi.fn(),
+  }
+})
+
+vi.mock("../../src/utils/updaters/update-files", () => ({
+  updateFiles: vi.fn().mockResolvedValue({
+    filesCreated: [],
+    filesUpdated: [],
+    filesSkipped: [],
+  }),
+}))
+
+vi.mock("../../src/utils/updaters/update-dependencies", () => ({
+  updateDependencies: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock("../../src/utils/updaters/update-tailwind-config", () => ({
+  updateTailwindConfig: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock("../../src/utils/updaters/update-env-vars", () => ({
+  updateEnvVars: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock("../../src/utils/updaters/update-fonts", () => ({
+  updateFonts: vi.fn().mockResolvedValue(undefined),
+  massageTreeForFonts: vi.fn().mockImplementation((tree) => tree),
+}))
+
+vi.mock("../../src/utils/updaters/update-css", () => ({
+  updateCss: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock("../../src/utils/get-project-info", () => ({
+  getProjectTailwindVersionFromConfig: vi.fn().mockResolvedValue("4"),
+}))
+
+vi.mock("../../src/utils/spinner", () => ({
+  spinner: vi.fn().mockReturnValue({
+    start: vi.fn().mockReturnThis(),
+    succeed: vi.fn().mockReturnThis(),
+    fail: vi.fn().mockReturnThis(),
+    info: vi.fn().mockReturnThis(),
+  }),
+}))
+
+vi.mock("../../src/utils/logger", () => ({
+  logger: {
+    info: vi.fn(),
+    log: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  },
+}))
+
+import { addComponents } from "../../src/utils/add-components"
+import { resolveRegistryTree } from "../../src/registry/resolver"
+import {
+  findPackageRoot,
+  getWorkspaceConfig,
+} from "../../src/utils/get-config"
+import { updateFiles } from "../../src/utils/updaters/update-files"
+import { updateFonts } from "../../src/utils/updaters/update-fonts"
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
+function createMockConfig(overrides: Partial<Config> = {}): Config {
+  return {
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: "new-york",
+    rsc: true,
+    tsx: true,
+    tailwind: {
+      css: "app/globals.css",
+      baseColor: "zinc",
+      cssVariables: true,
+    },
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks",
+    },
+    resolvedPaths: {
+      cwd: "/apps/web",
+      tailwindConfig: "/apps/web/tailwind.config.ts",
+      tailwindCss: "/apps/web/app/globals.css",
+      utils: "/apps/web/lib/utils",
+      components: "/apps/web/components",
+      lib: "/apps/web/lib",
+      hooks: "/apps/web/hooks",
+      ui: "/apps/web/components/ui",
+    },
+    ...overrides,
+  } as Config
+}
+
+describe("addComponents workspace routing", () => {
+  test("should route registry:hook files to workspaceConfig.hooks", async () => {
+    const appConfig = createMockConfig()
+    const uiConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    // Hooks config resolves to the same package but is a distinct config object.
+    // getWorkspaceConfig builds one config per alias key.
+    const hooksConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiConfig,
+      hooks: hooksConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "sidebar",
+      files: [
+        {
+          path: "registry/ui/sidebar.tsx",
+          type: "registry:ui",
+          content: "export function Sidebar() {}",
+        },
+        {
+          path: "registry/hooks/use-mobile.ts",
+          type: "registry:hook",
+          content: "export function useMobile() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockResolvedValue("/packages/ui")
+
+    await addComponents(["sidebar"], appConfig, { silent: true })
+
+    // updateFiles should be called twice: once for registry:ui, once for registry:hook.
+    expect(updateFiles).toHaveBeenCalledTimes(2)
+
+    // First call: registry:ui files with the UI workspace config.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      1,
+      [
+        expect.objectContaining({
+          type: "registry:ui",
+          path: "registry/ui/sidebar.tsx",
+        }),
+      ],
+      uiConfig,
+      expect.any(Object)
+    )
+
+    // Second call: registry:hook files with the hooks workspace config.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      2,
+      [
+        expect.objectContaining({
+          type: "registry:hook",
+          path: "registry/hooks/use-mobile.ts",
+        }),
+      ],
+      hooksConfig,
+      expect.any(Object)
+    )
+  })
+
+  test("should route registry:lib files to workspaceConfig.lib", async () => {
+    const appConfig = createMockConfig()
+    const uiConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+    const libConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiConfig,
+      lib: libConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "button",
+      files: [
+        {
+          path: "registry/ui/button.tsx",
+          type: "registry:ui",
+          content: "export function Button() {}",
+        },
+        {
+          path: "registry/lib/utils.ts",
+          type: "registry:lib",
+          content: "export function cn() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockResolvedValue("/packages/ui")
+
+    await addComponents(["button"], appConfig, { silent: true })
+
+    expect(updateFiles).toHaveBeenCalledTimes(2)
+
+    // First call: registry:ui files with the UI workspace config.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      1,
+      [expect.objectContaining({ type: "registry:ui" })],
+      uiConfig,
+      expect.any(Object)
+    )
+
+    // Second call: registry:lib files with the lib workspace config.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      2,
+      [expect.objectContaining({ type: "registry:lib" })],
+      libConfig,
+      expect.any(Object)
+    )
+  })
+
+  test("should fall back to app config for unmapped types like registry:component", async () => {
+    const appConfig = createMockConfig()
+    const uiConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "login-01",
+      files: [
+        {
+          path: "registry/components/login-form.tsx",
+          type: "registry:component",
+          content: "export function LoginForm() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockResolvedValue("/apps/web")
+
+    await addComponents(["login-01"], appConfig, { silent: true })
+
+    expect(updateFiles).toHaveBeenCalledTimes(1)
+
+    // registry:component should fall back to the app config.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      1,
+      [expect.objectContaining({ type: "registry:component" })],
+      appConfig,
+      expect.any(Object)
+    )
+  })
+
+  test("should fall back to app config when workspace key is missing", async () => {
+    const appConfig = createMockConfig()
+    const uiConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    // Workspace config only has ui — no hooks or lib.
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "sidebar",
+      files: [
+        {
+          path: "registry/ui/sidebar.tsx",
+          type: "registry:ui",
+          content: "export function Sidebar() {}",
+        },
+        {
+          path: "registry/hooks/use-mobile.ts",
+          type: "registry:hook",
+          content: "export function useMobile() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockResolvedValue("/packages/ui")
+
+    await addComponents(["sidebar"], appConfig, { silent: true })
+
+    expect(updateFiles).toHaveBeenCalledTimes(2)
+
+    // registry:ui → workspaceConfig.ui.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      1,
+      [expect.objectContaining({ type: "registry:ui" })],
+      uiConfig,
+      expect.any(Object)
+    )
+
+    // registry:hook with no workspaceConfig.hooks → falls back to app config.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      2,
+      [expect.objectContaining({ type: "registry:hook" })],
+      appConfig,
+      expect.any(Object)
+    )
+  })
+
+  test("should route all three mapped types to their workspace configs", async () => {
+    const appConfig = createMockConfig()
+    const uiConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiConfig,
+      hooks: uiConfig,
+      lib: uiConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "sidebar",
+      files: [
+        {
+          path: "registry/ui/sidebar.tsx",
+          type: "registry:ui",
+          content: "export function Sidebar() {}",
+        },
+        {
+          path: "registry/hooks/use-mobile.ts",
+          type: "registry:hook",
+          content: "export function useMobile() {}",
+        },
+        {
+          path: "registry/lib/utils.ts",
+          type: "registry:lib",
+          content: "export function cn() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockResolvedValue("/packages/ui")
+
+    await addComponents(["sidebar"], appConfig, { silent: true })
+
+    // Three calls: one per type.
+    expect(updateFiles).toHaveBeenCalledTimes(3)
+
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      1,
+      [expect.objectContaining({ type: "registry:ui" })],
+      uiConfig,
+      expect.any(Object)
+    )
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      2,
+      [expect.objectContaining({ type: "registry:hook" })],
+      uiConfig,
+      expect.any(Object)
+    )
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      3,
+      [expect.objectContaining({ type: "registry:lib" })],
+      uiConfig,
+      expect.any(Object)
+    )
+  })
+
+  test("should fall back to app config for registry:file", async () => {
+    const appConfig = createMockConfig()
+    const uiConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "some-component",
+      files: [
+        {
+          path: "registry/ui/button.tsx",
+          type: "registry:ui",
+          content: "export function Button() {}",
+        },
+        {
+          path: ".env",
+          type: "registry:file",
+          target: "~/.env",
+          content: "API_KEY=xxx",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockResolvedValue("/packages/ui")
+
+    await addComponents(["some-component"], appConfig, { silent: true })
+
+    expect(updateFiles).toHaveBeenCalledTimes(2)
+
+    // registry:ui → workspace.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      1,
+      [expect.objectContaining({ type: "registry:ui" })],
+      uiConfig,
+      expect.any(Object)
+    )
+
+    // registry:file → app config.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      2,
+      [expect.objectContaining({ type: "registry:file" })],
+      appConfig,
+      expect.any(Object)
+    )
+  })
+
+  test("should default files with no type to registry:ui", async () => {
+    const appConfig = createMockConfig()
+    const uiConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "button",
+      files: [
+        {
+          path: "registry/ui/button.tsx",
+          // No type — should default to registry:ui.
+          content: "export function Button() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockResolvedValue("/packages/ui")
+
+    await addComponents(["button"], appConfig, { silent: true })
+
+    expect(updateFiles).toHaveBeenCalledTimes(1)
+
+    // Should route to workspace UI config.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      1,
+      expect.any(Array),
+      uiConfig,
+      expect.any(Object)
+    )
+  })
+
+  test("should group multiple files of the same type into one updateFiles call", async () => {
+    const appConfig = createMockConfig()
+    const uiConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "sidebar",
+      files: [
+        {
+          path: "registry/ui/sidebar.tsx",
+          type: "registry:ui",
+          content: "export function Sidebar() {}",
+        },
+        {
+          path: "registry/ui/sidebar-nav.tsx",
+          type: "registry:ui",
+          content: "export function SidebarNav() {}",
+        },
+        {
+          path: "registry/ui/sidebar-menu.tsx",
+          type: "registry:ui",
+          content: "export function SidebarMenu() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockResolvedValue("/packages/ui")
+
+    await addComponents(["sidebar"], appConfig, { silent: true })
+
+    // All three files are registry:ui — should be one call, not three.
+    expect(updateFiles).toHaveBeenCalledTimes(1)
+    expect(updateFiles).toHaveBeenCalledWith(
+      expect.arrayContaining([
+        expect.objectContaining({ path: "registry/ui/sidebar.tsx" }),
+        expect.objectContaining({ path: "registry/ui/sidebar-nav.tsx" }),
+        expect.objectContaining({ path: "registry/ui/sidebar-menu.tsx" }),
+      ]),
+      uiConfig,
+      expect.any(Object)
+    )
+  })
+
+  test("should route hooks to separate package when aliases differ", async () => {
+    const appConfig = createMockConfig({
+      aliases: {
+        components: "~foo/ui/components",
+        utils: "~foo/ui/lib/utils",
+        hooks: "~foo/hooks/src",
+        lib: "~foo/ui/lib",
+        ui: "~foo/ui/components",
+      },
+    })
+
+    const uiPackageConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    const hooksPackageConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/hooks",
+        tailwindConfig: "/packages/hooks/tailwind.config.ts",
+        tailwindCss: "/packages/hooks/src/globals.css",
+        utils: "/packages/hooks/src/lib/utils",
+        components: "/packages/hooks/src/components",
+        lib: "/packages/hooks/src/lib",
+        hooks: "/packages/hooks/src/hooks",
+        ui: "/packages/hooks/src/components/ui",
+      },
+    })
+
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiPackageConfig,
+      hooks: hooksPackageConfig,
+      lib: uiPackageConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "sidebar",
+      files: [
+        {
+          path: "registry/ui/sidebar.tsx",
+          type: "registry:ui",
+          content: "export function Sidebar() {}",
+        },
+        {
+          path: "registry/hooks/use-mobile.ts",
+          type: "registry:hook",
+          content: "export function useMobile() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockImplementation(
+      async (_cwd, resolvedPath) => {
+        if (resolvedPath.startsWith("/packages/hooks")) {
+          return "/packages/hooks"
+        }
+        return "/packages/ui"
+      }
+    )
+
+    await addComponents(["sidebar"], appConfig, { silent: true })
+
+    expect(updateFiles).toHaveBeenCalledTimes(2)
+
+    // registry:ui → UI package.
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      1,
+      [expect.objectContaining({ type: "registry:ui" })],
+      uiPackageConfig,
+      expect.any(Object)
+    )
+
+    // registry:hook → hooks package (separate from UI).
+    expect(updateFiles).toHaveBeenNthCalledWith(
+      2,
+      [expect.objectContaining({ type: "registry:hook" })],
+      hooksPackageConfig,
+      expect.any(Object)
+    )
+  })
+
+  test("should call updateFonts with app config, not workspace config", async () => {
+    const appConfig = createMockConfig()
+    const uiConfig = createMockConfig({
+      resolvedPaths: {
+        cwd: "/packages/ui",
+        tailwindConfig: "/packages/ui/tailwind.config.ts",
+        tailwindCss: "/packages/ui/src/globals.css",
+        utils: "/packages/ui/src/lib/utils",
+        components: "/packages/ui/src/components",
+        lib: "/packages/ui/src/lib",
+        hooks: "/packages/ui/src/hooks",
+        ui: "/packages/ui/src/components/ui",
+      },
+    })
+
+    vi.mocked(getWorkspaceConfig).mockResolvedValue({
+      ui: uiConfig,
+    })
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "button",
+      files: [
+        {
+          path: "registry/ui/button.tsx",
+          type: "registry:ui",
+          content: "export function Button() {}",
+        },
+      ],
+      fonts: [
+        {
+          name: "font-inter",
+          type: "registry:font",
+          title: "Inter",
+          font: {
+            provider: "google",
+            import: "Inter",
+            family: "Inter, sans-serif",
+            variable: "--font-sans",
+            weight: ["400", "500", "600", "700"],
+            subsets: ["latin"],
+          },
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    vi.mocked(findPackageRoot).mockResolvedValue("/packages/ui")
+
+    await addComponents(["button"], appConfig, { silent: true })
+
+    // updateFonts should use the app config (layout lives in the app).
+    expect(updateFonts).toHaveBeenCalledWith(
+      expect.any(Array),
+      appConfig,
+      expect.any(Object)
+    )
+
+    // Verify it was NOT called with the workspace UI config.
+    expect(updateFonts).not.toHaveBeenCalledWith(
+      expect.anything(),
+      uiConfig,
+      expect.anything()
+    )
+  })
+})
diff --git a/packages/shadcn/test/utils/dry-run.test.ts b/packages/shadcn/test/utils/dry-run.test.ts
new file mode 100644
index 0000000000..2fa693cf69
--- /dev/null
+++ b/packages/shadcn/test/utils/dry-run.test.ts
@@ -0,0 +1,1500 @@
+import { afterEach, describe, expect, test, vi } from "vitest"
+
+import type { Config } from "../../src/utils/get-config"
+
+// Mock external dependencies.
+vi.mock("../../src/registry/resolver", () => ({
+  resolveRegistryTree: vi.fn(),
+}))
+
+vi.mock("../../src/registry/api", () => ({
+  getRegistryBaseColor: vi.fn().mockResolvedValue(undefined),
+}))
+
+vi.mock("../../src/utils/get-project-info", () => ({
+  getProjectInfo: vi.fn().mockResolvedValue({
+    framework: { name: "next-app" },
+    isSrcDir: false,
+    isRSC: true,
+    isTsx: true,
+    tailwindConfigFile: null,
+    tailwindCssFile: null,
+    tailwindVersion: "v4",
+    frameworkVersion: "15.0.0",
+    aliasPrefix: "@",
+  }),
+}))
+
+vi.mock("../../src/utils/transformers", () => ({
+  transform: vi.fn().mockImplementation((opts) => opts.raw),
+}))
+
+vi.mock("../../src/utils/transformers/transform-import", () => ({
+  transformImport: vi.fn(),
+}))
+vi.mock("../../src/utils/transformers/transform-rsc", () => ({
+  transformRsc: vi.fn(),
+}))
+vi.mock("../../src/utils/transformers/transform-css-vars", () => ({
+  transformCssVars: vi.fn(),
+}))
+vi.mock("../../src/utils/transformers/transform-tw-prefix", () => ({
+  transformTwPrefixes: vi.fn(),
+}))
+vi.mock("../../src/utils/transformers/transform-icons", () => ({
+  transformIcons: vi.fn(),
+}))
+vi.mock("../../src/utils/transformers/transform-menu", () => ({
+  transformMenu: vi.fn(),
+}))
+vi.mock("../../src/utils/transformers/transform-aschild", () => ({
+  transformAsChild: vi.fn(),
+}))
+vi.mock("../../src/utils/transformers/transform-rtl", () => ({
+  transformRtl: vi.fn(),
+}))
+vi.mock("../../src/utils/transformers/transform-cleanup", () => ({
+  transformCleanup: vi.fn(),
+}))
+
+vi.mock("../../src/utils/updaters/update-css", () => ({
+  transformCss: vi
+    .fn()
+    .mockImplementation((input, _css) => `${input}\n/* css added */`),
+}))
+
+vi.mock("../../src/utils/updaters/update-css-vars", () => ({
+  transformCssVars: vi
+    .fn()
+    .mockImplementation(
+      (input, _cssVars, _config, _options) => `${input}\n/* css vars added */`
+    ),
+}))
+
+vi.mock("../../src/utils/updaters/update-fonts", () => ({
+  massageTreeForFonts: vi.fn().mockImplementation((tree) => tree),
+}))
+
+vi.mock("fs", async () => {
+  const actual = (await vi.importActual("fs")) as any
+  return {
+    ...actual,
+    existsSync: vi.fn().mockReturnValue(false),
+    promises: {
+      ...actual.promises,
+      readFile: vi.fn().mockResolvedValue(""),
+    },
+  }
+})
+
+import { dryRunComponents } from "../../src/utils/dry-run"
+import {
+  formatDryRunResult,
+  resolveFilterPath,
+} from "../../src/utils/dry-run-formatter"
+import type { DryRunResult } from "../../src/utils/dry-run"
+import { resolveRegistryTree } from "../../src/registry/resolver"
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
+function createMockConfig(overrides: Partial<Config> = {}): Config {
+  return {
+    $schema: "https://ui.shadcn.com/schema.json",
+    style: "new-york",
+    rsc: true,
+    tsx: true,
+    tailwind: {
+      css: "app/globals.css",
+      baseColor: "zinc",
+      cssVariables: true,
+    },
+    aliases: {
+      components: "@/components",
+      utils: "@/lib/utils",
+      ui: "@/components/ui",
+      lib: "@/lib",
+      hooks: "@/hooks",
+    },
+    resolvedPaths: {
+      cwd: "/apps/web",
+      tailwindConfig: "/apps/web/tailwind.config.ts",
+      tailwindCss: "/apps/web/app/globals.css",
+      utils: "/apps/web/lib/utils",
+      components: "/apps/web/components",
+      lib: "/apps/web/lib",
+      hooks: "/apps/web/hooks",
+      ui: "/apps/web/components/ui",
+    },
+    ...overrides,
+  } as Config
+}
+
+describe("dryRunComponents", () => {
+  test("should return basic component dry-run result", async () => {
+    const config = createMockConfig()
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "button",
+      files: [
+        {
+          path: "registry/ui/button.tsx",
+          type: "registry:ui",
+          content: 'export function Button() { return <button>Click</button> }',
+        },
+      ],
+      dependencies: ["class-variance-authority"],
+      devDependencies: [],
+    })
+
+    const result = await dryRunComponents(["button"], config)
+
+    expect(result.files).toHaveLength(1)
+    expect(result.files[0]).toMatchObject({
+      path: "components/ui/button.tsx",
+      action: "create",
+      type: "registry:ui",
+    })
+    expect(result.files[0].content).toBeTruthy()
+    expect(result.dependencies).toEqual(["class-variance-authority"])
+    expect(result.devDependencies).toEqual([])
+  })
+
+  test("should handle multiple files (ui + hook + lib)", async () => {
+    const config = createMockConfig()
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "sidebar",
+      files: [
+        {
+          path: "registry/ui/sidebar.tsx",
+          type: "registry:ui",
+          content: "export function Sidebar() {}",
+        },
+        {
+          path: "registry/hooks/use-mobile.ts",
+          type: "registry:hook",
+          content: "export function useMobile() {}",
+        },
+        {
+          path: "registry/lib/utils.ts",
+          type: "registry:lib",
+          content: "export function cn() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+    })
+
+    const result = await dryRunComponents(["sidebar"], config)
+
+    expect(result.files).toHaveLength(3)
+    expect(result.files[0]).toMatchObject({
+      type: "registry:ui",
+      action: "create",
+    })
+    expect(result.files[1]).toMatchObject({
+      type: "registry:hook",
+      action: "create",
+    })
+    expect(result.files[2]).toMatchObject({
+      type: "registry:lib",
+      action: "create",
+    })
+  })
+
+  test("should include CSS output when tree has cssVars and css", async () => {
+    const config = createMockConfig()
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "button",
+      files: [
+        {
+          path: "registry/ui/button.tsx",
+          type: "registry:ui",
+          content: "export function Button() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+      cssVars: {
+        light: { background: "0 0% 100%" },
+        dark: { background: "0 0% 0%" },
+      },
+      css: {
+        "@layer base": {
+          body: {
+            "@apply bg-background text-foreground": {},
+          },
+        },
+      },
+    })
+
+    const result = await dryRunComponents(["button"], config)
+
+    expect(result.css).not.toBeNull()
+    expect(result.css!.path).toBe("app/globals.css")
+    expect(result.css!.content).toContain("css vars added")
+    expect(result.css!.content).toContain("css added")
+    expect(result.css!.cssVarsCount).toBe(2)
+  })
+
+  test("should include env vars in output", async () => {
+    const config = createMockConfig()
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "some-component",
+      files: [
+        {
+          path: "registry/ui/some-component.tsx",
+          type: "registry:ui",
+          content: "export function SomeComponent() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+      envVars: {
+        API_KEY: "your-api-key",
+        SECRET: "your-secret",
+      },
+    })
+
+    const result = await dryRunComponents(["some-component"], config)
+
+    expect(result.envVars).not.toBeNull()
+    expect(result.envVars!.path).toBe(".env.local")
+    expect(result.envVars!.variables).toEqual({
+      API_KEY: "your-api-key",
+      SECRET: "your-secret",
+    })
+    expect(result.envVars!.action).toBe("create")
+  })
+
+  test("should pass through dependencies and devDependencies", async () => {
+    const config = createMockConfig()
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "chart",
+      files: [
+        {
+          path: "registry/ui/chart.tsx",
+          type: "registry:ui",
+          content: "export function Chart() {}",
+        },
+      ],
+      dependencies: ["recharts", "lucide-react"],
+      devDependencies: ["@types/recharts"],
+    })
+
+    const result = await dryRunComponents(["chart"], config)
+
+    expect(result.dependencies).toEqual(["recharts", "lucide-react"])
+    expect(result.devDependencies).toEqual(["@types/recharts"])
+  })
+
+  test("should return empty result for no components", async () => {
+    const config = createMockConfig()
+
+    const result = await dryRunComponents([], config)
+
+    expect(result.files).toEqual([])
+    expect(result.dependencies).toEqual([])
+    expect(result.devDependencies).toEqual([])
+    expect(result.css).toBeNull()
+    expect(result.envVars).toBeNull()
+    expect(result.fonts).toEqual([])
+    expect(result.docs).toBeNull()
+  })
+
+  test("should include docs when present", async () => {
+    const config = createMockConfig()
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "button",
+      files: [
+        {
+          path: "registry/ui/button.tsx",
+          type: "registry:ui",
+          content: "export function Button() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+      docs: "Read more at https://ui.shadcn.com/docs/components/button",
+    })
+
+    const result = await dryRunComponents(["button"], config)
+
+    expect(result.docs).toBe(
+      "Read more at https://ui.shadcn.com/docs/components/button"
+    )
+  })
+
+  test("should collect font metadata", async () => {
+    const config = createMockConfig()
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "button",
+      files: [
+        {
+          path: "registry/ui/button.tsx",
+          type: "registry:ui",
+          content: "export function Button() {}",
+        },
+      ],
+      dependencies: [],
+      devDependencies: [],
+      fonts: [
+        {
+          name: "font-inter",
+          type: "registry:font" as const,
+          title: "Inter",
+          font: {
+            provider: "google" as const,
+            import: "Inter",
+            family: "Inter, sans-serif",
+            variable: "--font-sans",
+            weight: ["400", "500", "600", "700"],
+            subsets: ["latin"],
+          },
+        },
+      ],
+    })
+
+    const result = await dryRunComponents(["button"], config)
+
+    expect(result.fonts).toHaveLength(1)
+    expect(result.fonts[0]).toEqual({
+      name: "Inter, sans-serif",
+      provider: "Google Fonts",
+    })
+  })
+
+  test("should deduplicate dependencies", async () => {
+    const config = createMockConfig()
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue({
+      name: "sidebar",
+      files: [
+        {
+          path: "registry/ui/sidebar.tsx",
+          type: "registry:ui",
+          content: "export function Sidebar() {}",
+        },
+      ],
+      dependencies: [
+        "@base-ui/react",
+        "lucide-react",
+        "@base-ui/react",
+        "lucide-react",
+        "@base-ui/react",
+      ],
+      devDependencies: ["@types/node", "@types/node"],
+    })
+
+    const result = await dryRunComponents(["sidebar"], config)
+
+    expect(result.dependencies).toEqual(["@base-ui/react", "lucide-react"])
+    expect(result.devDependencies).toEqual(["@types/node"])
+  })
+
+  test("should throw when registry tree resolution fails", async () => {
+    const config = createMockConfig()
+
+    vi.mocked(resolveRegistryTree).mockResolvedValue(undefined as any)
+
+    await expect(
+      dryRunComponents(["nonexistent"], config)
+    ).rejects.toThrow("Failed to fetch components from registry.")
+  })
+})
+
+describe("formatDryRunResult", () => {
+  function createResult(overrides: Partial<DryRunResult> = {}): DryRunResult {
+    return {
+      files: [],
+      dependencies: [],
+      devDependencies: [],
+      css: null,
+      envVars: null,
+      fonts: [],
+      docs: null,
+      ...overrides,
+    }
+  }
+
+  test("should format a simple component", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: "...",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"])
+
+    expect(output).toContain("shadcn add button")
+    expect(output).toContain("(dry run)")
+    expect(output).toContain("Files")
+    expect(output).toContain("(1)")
+    expect(output).toContain("components/ui/button.tsx")
+    expect(output).toContain("create")
+    expect(output).toContain("Run without --dry-run to apply.")
+    // Should not contain overwrite warnings.
+    expect(output).not.toContain("overwritten")
+  })
+
+  test("should show dependencies section when present", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: "...",
+          type: "registry:ui",
+        },
+      ],
+      dependencies: ["class-variance-authority", "@radix-ui/react-slot"],
+    })
+
+    const output = formatDryRunResult(result, ["button"])
+
+    expect(output).toContain("Dependencies")
+    expect(output).toContain("(2)")
+    expect(output).toContain("class-variance-authority")
+    expect(output).toContain("@radix-ui/react-slot")
+  })
+
+  test("should hide empty sections", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: "...",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"])
+
+    expect(output).not.toContain("Dependencies")
+    expect(output).not.toContain("Dev Dependencies")
+    expect(output).not.toContain("CSS")
+    expect(output).not.toContain("Environment Variables")
+    expect(output).not.toContain("Fonts")
+  })
+
+  test("should show overwrite warning and diff hint", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: "...",
+          type: "registry:ui",
+        },
+        {
+          path: "components/ui/table.tsx",
+          action: "overwrite",
+          content: "...",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["dashboard"])
+
+    expect(output).toContain("1 file will be overwritten")
+    expect(output).toContain("--diff")
+  })
+
+  test("should list all files without truncation", () => {
+    const files = Array.from({ length: 12 }, (_, i) => ({
+      path: `components/ui/file-${i}.tsx`,
+      action: "create" as const,
+      content: "...",
+      type: "registry:ui",
+    }))
+
+    const result = createResult({ files })
+    const output = formatDryRunResult(result, ["dashboard"])
+
+    expect(output).toContain("Files")
+    expect(output).toContain("(12)")
+    // All files should be listed.
+    expect(output).toContain("file-0.tsx")
+    expect(output).toContain("file-5.tsx")
+    expect(output).toContain("file-11.tsx")
+  })
+
+  test("should format CSS section with variable count", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: "...",
+          type: "registry:ui",
+        },
+      ],
+      css: {
+        path: "app/globals.css",
+        content: "...",
+        action: "update",
+        cssVarsCount: 12,
+      },
+    })
+
+    const output = formatDryRunResult(result, ["button"])
+
+    expect(output).toContain("CSS")
+    expect(output).toContain("12 CSS variables")
+    expect(output).toContain("globals.css")
+  })
+
+  test("should format env vars section", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/chat.tsx",
+          action: "create",
+          content: "...",
+          type: "registry:ui",
+        },
+      ],
+      envVars: {
+        path: ".env.local",
+        variables: { NEXT_PUBLIC_API_URL: "...", SECRET_KEY: "..." },
+        action: "create",
+      },
+    })
+
+    const output = formatDryRunResult(result, ["chat"])
+
+    expect(output).toContain("Environment Variables")
+    expect(output).toContain("NEXT_PUBLIC_API_URL")
+    expect(output).toContain("SECRET_KEY")
+  })
+
+  test("should format fonts section", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: "...",
+          type: "registry:ui",
+        },
+      ],
+      fonts: [{ name: "Inter", provider: "Google Fonts" }],
+    })
+
+    const output = formatDryRunResult(result, ["button"])
+
+    expect(output).toContain("Fonts")
+    expect(output).toContain("Inter")
+    expect(output).toContain("Google Fonts")
+  })
+
+  test("should show multiple overwrite warning", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/a.tsx",
+          action: "overwrite",
+          content: "...",
+          type: "registry:ui",
+        },
+        {
+          path: "components/ui/b.tsx",
+          action: "overwrite",
+          content: "...",
+          type: "registry:ui",
+        },
+        {
+          path: "components/ui/c.tsx",
+          action: "overwrite",
+          content: "...",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["thing"])
+
+    expect(output).toContain("3 files will be overwritten")
+  })
+
+  test("should list all files with mixed actions", () => {
+    const files = [
+      ...Array.from({ length: 6 }, (_, i) => ({
+        path: `components/ui/new-${i}.tsx`,
+        action: "create" as const,
+        content: "...",
+        type: "registry:ui",
+      })),
+      ...Array.from({ length: 4 }, (_, i) => ({
+        path: `components/ui/existing-${i}.tsx`,
+        action: "overwrite" as const,
+        content: "...",
+        type: "registry:ui",
+      })),
+    ]
+
+    const result = createResult({ files })
+    const output = formatDryRunResult(result, ["dashboard"])
+
+    expect(output).toContain("(10)")
+    // All files should be listed.
+    expect(output).toContain("new-0.tsx")
+    expect(output).toContain("new-5.tsx")
+    expect(output).toContain("existing-0.tsx")
+    expect(output).toContain("existing-3.tsx")
+  })
+})
+
+describe("formatDryRunResult --diff", () => {
+  function createResult(overrides: Partial<DryRunResult> = {}): DryRunResult {
+    return {
+      files: [],
+      dependencies: [],
+      devDependencies: [],
+      css: null,
+      envVars: null,
+      fonts: [],
+      docs: null,
+      ...overrides,
+    }
+  }
+
+  test("should show focused diff output with box-drawing borders", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: 'export function Button() { return <button>New</button> }',
+          existingContent:
+            'export function Button() { return <button>Old</button> }',
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], { diff: "button" })
+
+    expect(output).toContain("components/ui/button.tsx")
+    expect(output).toContain("overwrite")
+    expect(output).toContain("Old")
+    expect(output).toContain("New")
+    // Should not show summary sections.
+    expect(output).not.toContain("Files")
+    expect(output).not.toContain("Dependencies")
+  })
+
+  test("should show diff hint in dry-run summary", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: "new content",
+          existingContent: "old content",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"])
+
+    expect(output).toContain("Run with --diff")
+  })
+
+  test("should only show matched file", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: "new button",
+          existingContent: "old button",
+          type: "registry:ui",
+        },
+        {
+          path: "components/ui/card.tsx",
+          action: "overwrite",
+          content: "new card",
+          existingContent: "old card",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["dashboard"], {
+      diff: "button",
+    })
+
+    expect(output).toContain("button.tsx")
+    // Should not show card at all — focused output.
+    expect(output).not.toContain("card.tsx")
+  })
+
+  test("should show error when --diff path matches no files", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: "new",
+          existingContent: "old",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "nonexistent",
+    })
+
+    expect(output).toContain("No file matching")
+    expect(output).toContain("nonexistent")
+  })
+
+  test("should show new file content as additions", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: "export function Button() {}",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    expect(output).toContain("create")
+    expect(output).toContain("+export function Button() {}")
+  })
+
+  test("should show no changes for skipped files", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "skip",
+          content: "same content",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    expect(output).toContain("No changes.")
+  })
+
+  test("should show formatting-only message for whitespace/quote differences", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: 'import { cn } from "@/lib/utils";\nexport function Button() {}',
+          existingContent: "import { cn } from '@/lib/utils'\nexport function Button() {}",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    expect(output).toContain("Formatting-only changes")
+  })
+
+  test("should show real diff for non-formatting changes", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: 'export function Button() { return <button>New</button> }',
+          existingContent: 'export function Button() { return <button>Old</button> }',
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    expect(output).toContain("---")
+    expect(output).toContain("+++")
+    expect(output).toContain("@@")
+  })
+
+  test("should show CSS diff when path matches CSS file", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: "...",
+          type: "registry:ui",
+        },
+      ],
+      css: {
+        path: "app/globals.css",
+        content: "@theme {\n  --color-primary: red;\n}\n",
+        existingContent: "@theme {\n}\n",
+        action: "update",
+        cssVarsCount: 1,
+      },
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "globals.css",
+    })
+
+    expect(output).toContain("globals.css")
+    expect(output).toContain("update")
+    expect(output).toContain("--color-primary")
+  })
+
+  test("should detect multi-line to single-line reformatting as formatting-only", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: [
+            'const buttonVariants = cva("inline-flex", {',
+            "  variants: {",
+            '    size: {',
+            '      default: "h-8 gap-1.5 px-2.5 has-[>svg]:px-1.5",',
+            "    },",
+            "  },",
+            "})",
+          ].join("\n"),
+          existingContent: [
+            'const buttonVariants = cva("inline-flex", {',
+            "  variants: {",
+            "    size: {",
+            "      default:",
+            '        "h-8 gap-1.5 px-2.5 has-[>svg]:px-1.5",',
+            "    },",
+            "  },",
+            "})",
+          ].join("\n"),
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    // Multi-line to single-line wrapping should not show as red/green diff.
+    expect(output).not.toContain("-      default:")
+    expect(output).not.toContain('+      default: "h-8')
+  })
+
+  test("should suppress multi-line to single-line reformatting but show real change in same hunk", () => {
+    // Simulates cva variant values going from multi-line to single-line,
+    // with one actual content change (size-10 → size-9).
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: [
+            "  variants: {",
+            "    variant: {",
+            '      outline: "border-border bg-background hover:bg-muted",',
+            '      secondary: "bg-secondary text-secondary-foreground",',
+            '      ghost: "hover:bg-muted hover:text-foreground",',
+            "    },",
+            "    size: {",
+            '      default: "h-8 gap-1.5 px-2.5",',
+            '      lg: "h-9 gap-1.5 px-2.5",',
+            '      icon: "size-8",',
+            '      "icon-lg": "size-9",',
+            "    },",
+            "  },",
+          ].join("\n"),
+          existingContent: [
+            "  variants: {",
+            "    variant: {",
+            "      outline:",
+            '        "border-border bg-background hover:bg-muted",',
+            "      secondary:",
+            '        "bg-secondary text-secondary-foreground",',
+            "      ghost:",
+            '        "hover:bg-muted hover:text-foreground",',
+            "    },",
+            "    size: {",
+            "      default:",
+            '        "h-8 gap-1.5 px-2.5",',
+            "      lg:",
+            '        "h-9 gap-1.5 px-2.5",',
+            "      icon:",
+            '        "size-8",',
+            '      "icon-lg": "size-10",',
+            "    },",
+            "  },",
+          ].join("\n"),
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    // Multi-line to single-line reformatting should be suppressed.
+    expect(output).not.toContain("-      outline:")
+    expect(output).not.toContain("-      secondary:")
+    expect(output).not.toContain("-      ghost:")
+    expect(output).not.toContain("-      default:")
+    expect(output).not.toContain("-      lg:")
+    expect(output).not.toContain("-      icon:")
+    // Real change should show.
+    expect(output).toContain("size-10")
+    expect(output).toContain("size-9")
+  })
+
+  test("should detect semicolon-only differences as formatting-only", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: 'import { cn } from "@/lib/utils";\nexport function Button() {};',
+          existingContent: 'import { cn } from "@/lib/utils"\nexport function Button() {}',
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    expect(output).toContain("Formatting-only changes")
+  })
+
+  test("should skip quote-only line changes but show real changes in same group", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: [
+            '        lg: "h-9 gap-1.5 px-2.5",',
+            '        icon: "size-8",',
+            '        "icon-sm": "size-7",',
+            '        "icon-lg": "size-9",',
+          ].join("\n"),
+          existingContent: [
+            "        lg: 'h-9 gap-1.5 px-2.5',",
+            "        icon: 'size-8',",
+            "        'icon-sm': 'size-7',",
+            "        'icon-lg': 'size-10',",
+          ].join("\n"),
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    // Quote-only changes should NOT appear as red/green diff lines.
+    expect(output).not.toContain("-        lg:")
+    expect(output).not.toContain("-        icon:")
+    expect(output).not.toContain('-        \'icon-sm\'')
+    // Real change (size-10 -> size-9) SHOULD appear as a diff.
+    expect(output).toContain("size-10")
+    expect(output).toContain("size-9")
+  })
+
+  test("should show correct hunk header when formatting changes are mixed with real changes", () => {
+    // 5 lines old, 5 lines new — only line 5 has a real change.
+    // Hunk header should reflect same line count, not show line removal.
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: [
+            'import { cn } from "@/lib/utils"',
+            "",
+            'const a = "hello"',
+            'const b = "world"',
+            'const c = "new-value"',
+          ].join("\n"),
+          existingContent: [
+            "import { cn } from '@/lib/utils'",
+            "",
+            "const a = 'hello'",
+            "const b = 'world'",
+            "const c = 'old-value'",
+          ].join("\n"),
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    // Hunk header should show equal old/new line counts since no lines were added/removed.
+    expect(output).toMatch(/@@ -\d+,(\d+) \+\d+,\1 @@/)
+    // Real change should show.
+    expect(output).toContain("old-value")
+    expect(output).toContain("new-value")
+  })
+
+  test("should suppress formatting-only hunks entirely", () => {
+    // All changes are quote-only — no hunk should be emitted.
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: 'const a = "hello"\nconst b = "world"',
+          existingContent: "const a = 'hello'\nconst b = 'world'",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    expect(output).toContain("Formatting-only changes")
+    expect(output).not.toContain("@@")
+  })
+
+  test("should suppress formatting-only hunk but show real-change hunk with correct position", () => {
+    // Two hunks separated by enough context:
+    // - Hunk 1 (top): quote-only changes → suppressed.
+    // - Hunk 2 (bottom): real change → shown with correct line number.
+    const oldLines = [
+      "import { cn } from '@/lib/utils'",   // line 1: quote diff.
+      "",                                     // line 2.
+      "const a = 'hello'",                   // line 3: quote diff.
+      "",                                     // line 4.
+      "// spacer 1",                          // line 5.
+      "// spacer 2",                          // line 6.
+      "// spacer 3",                          // line 7.
+      "// spacer 4",                          // line 8.
+      "// spacer 5",                          // line 9.
+      "// spacer 6",                          // line 10.
+      "// spacer 7",                          // line 11.
+      "",                                     // line 12.
+      "const c = 'old-value'",               // line 13: real change.
+    ]
+    const newLines = [
+      'import { cn } from "@/lib/utils"',    // line 1: quote diff.
+      "",                                     // line 2.
+      'const a = "hello"',                   // line 3: quote diff.
+      "",                                     // line 4.
+      "// spacer 1",                          // line 5.
+      "// spacer 2",                          // line 6.
+      "// spacer 3",                          // line 7.
+      "// spacer 4",                          // line 8.
+      "// spacer 5",                          // line 9.
+      "// spacer 6",                          // line 10.
+      "// spacer 7",                          // line 11.
+      "",                                     // line 12.
+      'const c = "new-value"',               // line 13: real change.
+    ]
+
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: newLines.join("\n"),
+          existingContent: oldLines.join("\n"),
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    // Only one @@ header should appear (the real change hunk).
+    const hunkHeaders = output.match(/@@ .* @@/g) ?? []
+    expect(hunkHeaders).toHaveLength(1)
+    // The hunk should reference line 13 area, not line 1.
+    expect(output).toContain("+10,")
+    // Real change should show.
+    expect(output).toContain("old-value")
+    expect(output).toContain("new-value")
+    // Quote-only changes should NOT show.
+    expect(output).not.toContain("@/lib/utils")
+  })
+
+  test("should show semicolons mixed with real changes correctly", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/input.tsx",
+          action: "overwrite",
+          content: [
+            'import { cn } from "@/lib/utils";',
+            'const a = "hello";',
+            'const b = "changed";',
+          ].join("\n"),
+          existingContent: [
+            'import { cn } from "@/lib/utils"',
+            'const a = "hello"',
+            'const b = "original"',
+          ].join("\n"),
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "input",
+    })
+
+    // Semicolon-only lines should not show as diffs.
+    expect(output).not.toContain('-import { cn }')
+    expect(output).not.toContain('-const a')
+    // Real change should show.
+    expect(output).toContain("original")
+    expect(output).toContain("changed")
+  })
+
+  test("should display actual file content not normalized content", () => {
+    // The diff should show the real double-quoted new content, not the
+    // internal normalized version used for comparison.
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: 'const color = "red";\nconst size = "new-size";',
+          existingContent: "const color = 'red'\nconst size = 'old-size'",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    // Context line should use the actual new file content (double quotes + semicolon).
+    expect(output).toContain('"red"')
+    // Changed line should show actual content.
+    expect(output).toContain('"new-size"')
+  })
+
+  test("should skip whitespace-only line changes in diff", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "overwrite",
+          content: "line1\nconst x = 1\nline3",
+          existingContent: "line1\nconst x =  1\nline3",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "button",
+    })
+
+    // Whitespace-only change should be shown as context, not as red/green diff.
+    expect(output).not.toContain("-const x")
+    expect(output).not.toContain("+const x")
+  })
+
+  test("should show CSS diff with full context showing existing vars", () => {
+    const existingCss = [
+      "@theme {",
+      "  --color-background: white;",
+      "  --color-foreground: black;",
+      "}",
+    ].join("\n")
+    const newCss = [
+      "@theme {",
+      "  --color-background: white;",
+      "  --color-foreground: black;",
+      "  --color-primary: red;",
+      "}",
+    ].join("\n")
+
+    const result = createResult({
+      css: {
+        path: "app/globals.css",
+        content: newCss,
+        existingContent: existingCss,
+        action: "update",
+        cssVarsCount: 1,
+      },
+    })
+
+    const output = formatDryRunResult(result, ["alert"], {
+      diff: "globals",
+    })
+
+    // Should show existing vars as context.
+    expect(output).toContain("--color-background")
+    expect(output).toContain("--color-foreground")
+    // Should show new var as addition.
+    expect(output).toContain("--color-primary")
+  })
+
+  test("should show new CSS file as all additions", () => {
+    const result = createResult({
+      css: {
+        path: "app/globals.css",
+        content: "@theme {\n  --color-primary: red;\n}\n",
+        action: "create",
+        cssVarsCount: 1,
+      },
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      diff: "globals",
+    })
+
+    expect(output).toContain("globals.css")
+    expect(output).toContain("create")
+    expect(output).toContain("+@theme")
+  })
+
+  test("should match both file and CSS when filter is ambiguous", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/globals.tsx",
+          action: "create",
+          content: "export function Globals() {}",
+          type: "registry:ui",
+        },
+      ],
+      css: {
+        path: "app/globals.css",
+        content: "@theme { --primary: red; }",
+        action: "create",
+        cssVarsCount: 1,
+      },
+    })
+
+    const output = formatDryRunResult(result, ["thing"], {
+      diff: "globals",
+    })
+
+    // Should show both the file and the CSS.
+    expect(output).toContain("globals.tsx")
+    expect(output).toContain("globals.css")
+  })
+})
+
+describe("formatDryRunResult --view", () => {
+  function createResult(overrides: Partial<DryRunResult> = {}): DryRunResult {
+    return {
+      files: [],
+      dependencies: [],
+      devDependencies: [],
+      css: null,
+      envVars: null,
+      fonts: [],
+      docs: null,
+      ...overrides,
+    }
+  }
+
+  test("should show focused view with full content", () => {
+    const content = Array.from({ length: 20 }, (_, i) => `line ${i + 1}`).join("\n")
+
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content,
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], { view: "button" })
+
+    expect(output).toContain("button.tsx")
+    expect(output).toContain("create")
+    expect(output).toContain("20 lines")
+    expect(output).toContain("line 1")
+    expect(output).toContain("line 20")
+    // Should not show summary sections.
+    expect(output).not.toContain("Files")
+    expect(output).not.toContain("Dependencies")
+  })
+
+  test("should show all matched files with full content", () => {
+    const content = Array.from({ length: 20 }, (_, i) => `line ${i + 1}`).join("\n")
+
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content,
+          type: "registry:ui",
+        },
+        {
+          path: "components/ui/button-group.tsx",
+          action: "create",
+          content,
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["dashboard"], { view: "button" })
+
+    expect(output).toContain("button.tsx")
+    expect(output).toContain("button-group.tsx")
+    expect(output).toContain("line 1")
+    expect(output).toContain("line 20")
+  })
+
+  test("should show only matched file", () => {
+    const buttonContent = Array.from({ length: 20 }, (_, i) => `button line ${i + 1}`).join("\n")
+    const cardContent = Array.from({ length: 20 }, (_, i) => `card line ${i + 1}`).join("\n")
+
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: buttonContent,
+          type: "registry:ui",
+        },
+        {
+          path: "components/ui/card.tsx",
+          action: "create",
+          content: cardContent,
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["dashboard"], {
+      view: "button.tsx",
+    })
+
+    expect(output).toContain("button.tsx")
+    expect(output).not.toContain("card.tsx")
+    expect(output).toContain("button line 1")
+    expect(output).toContain("button line 20")
+  })
+
+  test("should show error when --view path matches no files", () => {
+    const result = createResult({
+      files: [
+        {
+          path: "components/ui/button.tsx",
+          action: "create",
+          content: "content",
+          type: "registry:ui",
+        },
+      ],
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      view: "nonexistent",
+    })
+
+    expect(output).toContain("No file matching")
+    expect(output).toContain("nonexistent")
+  })
+
+  test("should show CSS file content when path matches", () => {
+    const cssContent = "@theme {\n  --color-primary: red;\n}"
+
+    const result = createResult({
+      css: {
+        path: "app/globals.css",
+        content: cssContent,
+        action: "update",
+        cssVarsCount: 1,
+      },
+    })
+
+    const output = formatDryRunResult(result, ["button"], {
+      view: "globals",
+    })
+
+    expect(output).toContain("globals.css")
+    expect(output).toContain("update")
+    expect(output).toContain("--color-primary")
+  })
+})
+
+describe("resolveFilterPath", () => {
+  const files = [
+    { path: "components/ui/button.tsx", action: "create" as const, content: "", type: "registry:ui" },
+    { path: "components/ui/card.tsx", action: "create" as const, content: "", type: "registry:ui" },
+    { path: "hooks/use-mobile.ts", action: "create" as const, content: "", type: "registry:hook" },
+  ]
+
+  test("should match exact path", () => {
+    const result = resolveFilterPath(files, "components/ui/button.tsx")
+    expect(result).toHaveLength(1)
+    expect(result[0].path).toBe("components/ui/button.tsx")
+  })
+
+  test("should match partial path (filename)", () => {
+    const result = resolveFilterPath(files, "button")
+    expect(result).toHaveLength(1)
+    expect(result[0].path).toBe("components/ui/button.tsx")
+  })
+
+  test("should match partial path (directory segment)", () => {
+    const result = resolveFilterPath(files, "ui/card")
+    expect(result).toHaveLength(1)
+    expect(result[0].path).toBe("components/ui/card.tsx")
+  })
+
+  test("should return multiple matches for ambiguous filter", () => {
+    const result = resolveFilterPath(files, "components/ui")
+    expect(result).toHaveLength(2)
+  })
+
+  test("should return empty array when no match", () => {
+    const result = resolveFilterPath(files, "nonexistent")
+    expect(result).toHaveLength(0)
+  })
+})
diff --git a/packages/shadcn/test/utils/get-config.test.ts b/packages/shadcn/test/utils/get-config.test.ts
index 65d3eaa4ea..a8f09c54c6 100644
--- a/packages/shadcn/test/utils/get-config.test.ts
+++ b/packages/shadcn/test/utils/get-config.test.ts
@@ -3,6 +3,7 @@ import { describe, expect, test } from "vitest"
 
 import {
   createConfig,
+  getBase,
   getConfig,
   getRawConfig,
 } from "../../src/utils/get-config"
@@ -197,6 +198,22 @@ test("get config", async () => {
   })
 })
 
+describe("getBase", () => {
+  test("returns radix for radix styles", () => {
+    expect(getBase("radix-nova")).toBe("radix")
+    expect(getBase("radix-vega")).toBe("radix")
+  })
+
+  test("returns base for base styles", () => {
+    expect(getBase("base-nova")).toBe("base")
+    expect(getBase("base-vega")).toBe("base")
+  })
+
+  test("returns radix for undefined", () => {
+    expect(getBase(undefined)).toBe("radix")
+  })
+})
+
 describe("createConfig", () => {
   test("creates default config when called without arguments", () => {
     const config = createConfig()
diff --git a/packages/shadcn/test/utils/get-project-info.test.ts b/packages/shadcn/test/utils/get-project-info.test.ts
index 54d08a1062..e6d68907e2 100644
--- a/packages/shadcn/test/utils/get-project-info.test.ts
+++ b/packages/shadcn/test/utils/get-project-info.test.ts
@@ -1,12 +1,23 @@
+import { promises as fs } from "fs"
 import path from "path"
-import { describe, expect, test } from "vitest"
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest"
 
 import { FRAMEWORKS } from "../../src/utils/frameworks"
 import {
   getFrameworkVersion,
+  getProjectComponents,
   getProjectInfo,
 } from "../../src/utils/get-project-info"
 
+vi.mock("../../src/utils/get-config", () => ({
+  getConfig: vi.fn(),
+  resolveConfigPaths: vi.fn(),
+}))
+
+vi.mock("../../src/registry/api", () => ({
+  getShadcnRegistryIndex: vi.fn(),
+}))
+
 describe("get project info", async () => {
   test.each([
     {
@@ -274,3 +285,134 @@ describe("getFrameworkVersion", () => {
     )
   })
 })
+
+import { getShadcnRegistryIndex } from "../../src/registry/api"
+import { getConfig, resolveConfigPaths } from "../../src/utils/get-config"
+
+describe("getProjectComponents", () => {
+  let tmpDir: string
+
+  beforeEach(async () => {
+    tmpDir = await fs.mkdtemp(
+      path.join(process.env.TMPDIR || "/tmp", "test-")
+    )
+  })
+
+  afterEach(async () => {
+    vi.resetAllMocks()
+    await fs.rm(tmpDir, { recursive: true, force: true })
+  })
+
+  test("should return empty array when no config exists", async () => {
+    vi.mocked(getConfig).mockResolvedValue(null)
+
+    const result = await getProjectComponents(tmpDir)
+
+    expect(result).toEqual([])
+  })
+
+  test("should return empty array when ui directory does not exist", async () => {
+    vi.mocked(getConfig).mockResolvedValue({} as any)
+    vi.mocked(resolveConfigPaths).mockResolvedValue({
+      resolvedPaths: { ui: path.join(tmpDir, "ui") },
+    } as any)
+
+    const result = await getProjectComponents(tmpDir)
+
+    expect(result).toEqual([])
+  })
+
+  test("should return only components that exist in the registry", async () => {
+    const uiDir = path.join(tmpDir, "ui")
+    await fs.mkdir(uiDir, { recursive: true })
+    await fs.writeFile(path.join(uiDir, "button.tsx"), "")
+    await fs.writeFile(path.join(uiDir, "card.tsx"), "")
+    await fs.writeFile(path.join(uiDir, "my-custom-component.tsx"), "")
+
+    vi.mocked(getConfig).mockResolvedValue({} as any)
+    vi.mocked(resolveConfigPaths).mockResolvedValue({
+      resolvedPaths: { ui: uiDir },
+    } as any)
+    vi.mocked(getShadcnRegistryIndex).mockResolvedValue([
+      { name: "button" },
+      { name: "card" },
+      { name: "dialog" },
+    ] as any)
+
+    const result = await getProjectComponents(tmpDir)
+
+    expect(result).toEqual(["button", "card"])
+  })
+
+  test("should handle jsx files", async () => {
+    const uiDir = path.join(tmpDir, "ui")
+    await fs.mkdir(uiDir, { recursive: true })
+    await fs.writeFile(path.join(uiDir, "button.jsx"), "")
+
+    vi.mocked(getConfig).mockResolvedValue({} as any)
+    vi.mocked(resolveConfigPaths).mockResolvedValue({
+      resolvedPaths: { ui: uiDir },
+    } as any)
+    vi.mocked(getShadcnRegistryIndex).mockResolvedValue([
+      { name: "button" },
+    ] as any)
+
+    const result = await getProjectComponents(tmpDir)
+
+    expect(result).toEqual(["button"])
+  })
+
+  test("should ignore non-tsx/jsx files", async () => {
+    const uiDir = path.join(tmpDir, "ui")
+    await fs.mkdir(uiDir, { recursive: true })
+    await fs.writeFile(path.join(uiDir, "button.tsx"), "")
+    await fs.writeFile(path.join(uiDir, "utils.ts"), "")
+    await fs.writeFile(path.join(uiDir, "styles.css"), "")
+    await fs.writeFile(path.join(uiDir, "README.md"), "")
+
+    vi.mocked(getConfig).mockResolvedValue({} as any)
+    vi.mocked(resolveConfigPaths).mockResolvedValue({
+      resolvedPaths: { ui: uiDir },
+    } as any)
+    vi.mocked(getShadcnRegistryIndex).mockResolvedValue([
+      { name: "button" },
+    ] as any)
+
+    const result = await getProjectComponents(tmpDir)
+
+    expect(result).toEqual(["button"])
+  })
+
+  test("should return empty array when registry index returns undefined", async () => {
+    const uiDir = path.join(tmpDir, "ui")
+    await fs.mkdir(uiDir, { recursive: true })
+    await fs.writeFile(path.join(uiDir, "button.tsx"), "")
+
+    vi.mocked(getConfig).mockResolvedValue({} as any)
+    vi.mocked(resolveConfigPaths).mockResolvedValue({
+      resolvedPaths: { ui: uiDir },
+    } as any)
+    vi.mocked(getShadcnRegistryIndex).mockResolvedValue(undefined)
+
+    const result = await getProjectComponents(tmpDir)
+
+    expect(result).toEqual([])
+  })
+
+  test("should return empty array when ui directory is empty", async () => {
+    const uiDir = path.join(tmpDir, "ui")
+    await fs.mkdir(uiDir, { recursive: true })
+
+    vi.mocked(getConfig).mockResolvedValue({} as any)
+    vi.mocked(resolveConfigPaths).mockResolvedValue({
+      resolvedPaths: { ui: uiDir },
+    } as any)
+    vi.mocked(getShadcnRegistryIndex).mockResolvedValue([
+      { name: "button" },
+    ] as any)
+
+    const result = await getProjectComponents(tmpDir)
+
+    expect(result).toEqual([])
+  })
+})
diff --git a/packages/shadcn/test/utils/get-tailwind-css-file.test.ts b/packages/shadcn/test/utils/get-tailwind-css-file.test.ts
index 1369f18c03..9057387a15 100644
--- a/packages/shadcn/test/utils/get-tailwind-css-file.test.ts
+++ b/packages/shadcn/test/utils/get-tailwind-css-file.test.ts
@@ -44,4 +44,33 @@ describe("get tailwindcss file", async () => {
       )
     ).toBe(file)
   })
+
+  test("should use configCssFile when provided and file exists", async () => {
+    const cwd = path.resolve(
+      __dirname,
+      "../fixtures/frameworks/next-monorepo"
+    )
+    expect(
+      await getTailwindCssFile(cwd, "packages/ui/src/globals.css")
+    ).toBe("packages/ui/src/globals.css")
+  })
+
+  test("should fall back to glob when configCssFile does not exist", async () => {
+    const cwd = path.resolve(__dirname, "../fixtures/frameworks/next-app")
+    expect(
+      await getTailwindCssFile(cwd, "nonexistent/styles.css")
+    ).toBe("app/globals.css")
+  })
+
+  test("should return null when no css file found and no configCssFile", async () => {
+    const cwd = path.resolve(
+      __dirname,
+      "../fixtures/frameworks/next-monorepo"
+    )
+    // The CSS file is nested under packages/ which the glob finds.
+    // Without configCssFile, it should still find it via glob.
+    expect(await getTailwindCssFile(cwd)).toBe(
+      "packages/ui/src/globals.css"
+    )
+  })
 })
diff --git a/packages/shadcn/test/utils/registries.test.ts b/packages/shadcn/test/utils/registries.test.ts
new file mode 100644
index 0000000000..6b64b3588b
--- /dev/null
+++ b/packages/shadcn/test/utils/registries.test.ts
@@ -0,0 +1,123 @@
+import { afterEach, describe, expect, test, vi } from "vitest"
+
+import type { Config } from "../../src/utils/get-config"
+
+// Mock dependencies.
+vi.mock("../../src/registry/namespaces", () => ({
+  resolveRegistryNamespaces: vi.fn().mockResolvedValue(["@foo"]),
+}))
+
+vi.mock("../../src/registry/api", () => ({
+  getRegistriesIndex: vi.fn().mockResolvedValue({
+    "@foo": "https://foo.com/r/{name}.json",
+  }),
+}))
+
+vi.mock("../../src/utils/spinner", () => ({
+  spinner: vi.fn().mockReturnValue({
+    start: vi.fn().mockReturnValue({
+      succeed: vi.fn(),
+      fail: vi.fn(),
+      stop: vi.fn(),
+    }),
+  }),
+}))
+
+vi.mock("fs-extra", () => ({
+  default: {
+    writeFile: vi.fn().mockResolvedValue(undefined),
+  },
+}))
+
+import { ensureRegistriesInConfig } from "../../src/utils/registries"
+import fs from "fs-extra"
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
+const baseConfig: Config = {
+  $schema: "",
+  style: "new-york",
+  tailwind: {
+    config: "",
+    css: "",
+    baseColor: "",
+    cssVariables: true,
+    prefix: "",
+  },
+  rsc: false,
+  tsx: true,
+  aliases: {
+    components: "@/components",
+    utils: "@/lib/utils",
+    ui: "@/components/ui",
+    lib: "@/lib",
+    hooks: "@/hooks",
+  },
+  registries: {},
+  resolvedPaths: {
+    cwd: "/tmp/test-project",
+    tailwindConfig: "",
+    tailwindCss: "",
+    utils: "",
+    components: "",
+    lib: "",
+    hooks: "",
+    ui: "",
+  },
+}
+
+describe("ensureRegistriesInConfig", () => {
+  test("does not write to disk when writeFile is false", async () => {
+    const { config, newRegistries } = await ensureRegistriesInConfig(
+      ["@foo/bar"],
+      baseConfig,
+      { writeFile: false }
+    )
+
+    // Should still return the updated config with new registries.
+    expect(newRegistries).toEqual(["@foo"])
+    expect(config.registries?.["@foo"]).toBe(
+      "https://foo.com/r/{name}.json"
+    )
+
+    // Should NOT have written to disk.
+    expect(fs.writeFile).not.toHaveBeenCalled()
+  })
+
+  test("writes to disk when writeFile is true", async () => {
+    await ensureRegistriesInConfig(["@foo/bar"], baseConfig, {
+      writeFile: true,
+    })
+
+    expect(fs.writeFile).toHaveBeenCalledTimes(1)
+    expect(fs.writeFile).toHaveBeenCalledWith(
+      expect.stringContaining("components.json"),
+      expect.any(String),
+      "utf-8"
+    )
+  })
+
+  test("writes to disk by default (writeFile not specified)", async () => {
+    await ensureRegistriesInConfig(["@foo/bar"], baseConfig)
+
+    expect(fs.writeFile).toHaveBeenCalledTimes(1)
+  })
+
+  test("does not write when no new registries are found", async () => {
+    const configWithRegistry: Config = {
+      ...baseConfig,
+      registries: {
+        "@foo": "https://foo.com/r/{name}.json",
+      },
+    }
+
+    await ensureRegistriesInConfig(["@foo/bar"], configWithRegistry, {
+      writeFile: true,
+    })
+
+    // No new registries, so no write.
+    expect(fs.writeFile).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts b/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
index d2570979d6..edcf5eb156 100644
--- a/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
+++ b/packages/shadcn/test/utils/updaters/update-css-vars.test.ts
@@ -728,13 +728,13 @@ describe("transformCssVarsV4", () => {
       }
 
       @theme inline {
-          --radius-sm: calc(var(--radius) - 4px);
-          --radius-md: calc(var(--radius) - 2px);
+          --radius-sm: calc(var(--radius) * 0.6);
+          --radius-md: calc(var(--radius) * 0.8);
           --radius-lg: var(--radius);
-          --radius-xl: calc(var(--radius) + 4px);
-          --radius-2xl: calc(var(--radius) + 8px);
-          --radius-3xl: calc(var(--radius) + 12px);
-          --radius-4xl: calc(var(--radius) + 16px);
+          --radius-xl: calc(var(--radius) * 1.4);
+          --radius-2xl: calc(var(--radius) * 1.8);
+          --radius-3xl: calc(var(--radius) * 2.2);
+          --radius-4xl: calc(var(--radius) * 2.6);
       }
               "
     `)
@@ -774,9 +774,9 @@ describe("transformCssVarsV4", () => {
               --radius-md: calc(var(--radius) - 2px);
               --radius-lg: var(--radius);
               --radius-xl: calc(var(--radius) + 4px);
-              --radius-2xl: calc(var(--radius) + 8px);
-              --radius-3xl: calc(var(--radius) + 12px);
-              --radius-4xl: calc(var(--radius) + 16px);
+              --radius-2xl: calc(var(--radius) * 1.8);
+              --radius-3xl: calc(var(--radius) * 2.2);
+              --radius-4xl: calc(var(--radius) * 2.6);
             }
               "
     `)
diff --git a/packages/shadcn/test/utils/updaters/update-css.test.ts b/packages/shadcn/test/utils/updaters/update-css.test.ts
index e168f0dfeb..bd582569bc 100644
--- a/packages/shadcn/test/utils/updaters/update-css.test.ts
+++ b/packages/shadcn/test/utils/updaters/update-css.test.ts
@@ -1037,6 +1037,90 @@ describe("transformCss", () => {
     `)
   })
 
+  test("should merge @apply directives in the same rule instead of duplicating", async () => {
+    const input = `@import "tailwindcss";
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}`
+
+    const result = await transformCss(input, {
+      "@layer base": {
+        body: {
+          "@apply font-sans": {},
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @layer base {
+        body {
+          @apply bg-background text-foreground font-sans;
+        }
+      }"
+    `)
+  })
+
+  test("should resolve conflicting tailwind classes when merging @apply", async () => {
+    const input = `@import "tailwindcss";
+
+@layer base {
+  body {
+    @apply bg-background font-serif text-foreground;
+  }
+}`
+
+    const result = await transformCss(input, {
+      "@layer base": {
+        body: {
+          "@apply font-mono": {},
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @layer base {
+        body {
+          @apply bg-background text-foreground font-mono;
+        }
+      }"
+    `)
+  })
+
+  test("should not duplicate @apply classes that already exist", async () => {
+    const input = `@import "tailwindcss";
+
+@layer base {
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+}`
+
+    const result = await transformCss(input, {
+      "@layer base": {
+        body: {
+          "@apply font-sans": {},
+        },
+      },
+    })
+
+    expect(result).toMatchInlineSnapshot(`
+      "@import "tailwindcss";
+
+      @layer base {
+        body {
+          @apply bg-background text-foreground font-sans;
+        }
+      }"
+    `)
+  })
+
   test("should replace existing keyframes instead of duplicating", async () => {
     const input = `@import "tailwindcss";
 
diff --git a/packages/shadcn/tsup.config.ts b/packages/shadcn/tsup.config.ts
index 7f9dfdd548..12cb99bf2d 100644
--- a/packages/shadcn/tsup.config.ts
+++ b/packages/shadcn/tsup.config.ts
@@ -11,9 +11,10 @@ export default defineConfig({
     "src/mcp/index.ts",
     "src/utils/index.ts",
     "src/icons/index.ts",
+    "src/preset/index.ts",
   ],
   format: ["esm"],
-  sourcemap: true,
+  sourcemap: false,
   minify: true,
   target: "esnext",
   outDir: "dist",
diff --git a/packages/tests/.prettierignore b/packages/tests/.prettierignore
new file mode 100644
index 0000000000..e14fc4c9ca
--- /dev/null
+++ b/packages/tests/.prettierignore
@@ -0,0 +1 @@
+fixtures/**
diff --git a/packages/tests/fixtures/remix-app/app/globals.css b/packages/tests/fixtures/remix-app/app/globals.css
new file mode 100644
index 0000000000..f1d8c73cdc
--- /dev/null
+++ b/packages/tests/fixtures/remix-app/app/globals.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/packages/tests/fixtures/remix-app/package.json b/packages/tests/fixtures/remix-app/package.json
new file mode 100644
index 0000000000..872223bb04
--- /dev/null
+++ b/packages/tests/fixtures/remix-app/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "my-remix-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "remix vite:dev",
+    "build": "remix vite:build"
+  },
+  "dependencies": {
+    "@remix-run/node": "^2.0.0",
+    "@remix-run/react": "^2.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.527.0",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^5"
+  }
+}
diff --git a/packages/tests/fixtures/remix-app/postcss.config.mjs b/packages/tests/fixtures/remix-app/postcss.config.mjs
new file mode 100644
index 0000000000..c7bcb4b1ee
--- /dev/null
+++ b/packages/tests/fixtures/remix-app/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
diff --git a/packages/tests/fixtures/remix-app/tsconfig.json b/packages/tests/fixtures/remix-app/tsconfig.json
new file mode 100644
index 0000000000..600bea85ef
--- /dev/null
+++ b/packages/tests/fixtures/remix-app/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/packages/tests/src/tests/add.test.ts b/packages/tests/src/tests/add.test.ts
index 971a2b7b28..9904e385d9 100644
--- a/packages/tests/src/tests/add.test.ts
+++ b/packages/tests/src/tests/add.test.ts
@@ -15,7 +15,7 @@ import {
 describe("shadcn add", () => {
   it("should add item to project", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, ["add", "button"])
     expect(
       await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
@@ -24,7 +24,7 @@ describe("shadcn add", () => {
 
   it("should add multiple items to project", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, ["add", "button", "card"])
     expect(
       await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
@@ -36,7 +36,7 @@ describe("shadcn add", () => {
 
   it("should add item from url", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     const registryUrl = getRegistryUrl()
     const url = `${registryUrl}/styles/new-york-v4/login-01.json`
     await npxShadcn(fixturePath, ["add", url])
@@ -60,7 +60,7 @@ describe("shadcn add", () => {
 
   it("should add component from local file", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, [
       "add",
       "../../fixtures/registry/example-component.json",
@@ -75,7 +75,7 @@ describe("shadcn add", () => {
 
   it("should add registry:page to the correct path", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, ["add", "login-03"])
     expect(
       await fs.pathExists(path.join(fixturePath, "app/login/page.tsx"))
@@ -84,7 +84,7 @@ describe("shadcn add", () => {
 
   it("should add item with registryDependencies", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, ["add", "alert-dialog"])
     expect(
       await fs.pathExists(
@@ -98,7 +98,7 @@ describe("shadcn add", () => {
 
   it("should add item with npm dependencies", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, [
       "add",
       "../../fixtures/registry/example-style.json",
@@ -112,7 +112,7 @@ describe("shadcn add", () => {
 
   it("should install cssVars", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, [
       "add",
       "../../fixtures/registry/example-style.json",
@@ -153,7 +153,7 @@ describe("shadcn add", () => {
 
   it("should add item with target", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, [
       "add",
       "../../fixtures/registry/example-item.json",
@@ -168,7 +168,7 @@ describe("shadcn add", () => {
 
   it("should add item with target to src", async () => {
     const fixturePath = await createFixtureTestDirectory("vite-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, [
       "add",
       "../../fixtures/registry/example-item.json",
@@ -183,7 +183,7 @@ describe("shadcn add", () => {
 
   it("should add item with target to root", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, [
       "add",
       "../../fixtures/registry/example-item-to-root.json",
@@ -198,7 +198,7 @@ describe("shadcn add", () => {
 
   it("should add item with target to root when src", async () => {
     const fixturePath = await createFixtureTestDirectory("vite-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, [
       "add",
       "../../fixtures/registry/example-item-to-root.json",
@@ -213,7 +213,7 @@ describe("shadcn add", () => {
 
   it("should add item with envVars", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, [
       "add",
       "../../fixtures/registry/example-env-vars.json",
@@ -232,7 +232,7 @@ describe("shadcn add", () => {
 
   it("should add NOT update existing envVars", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
 
     await fs.writeFile(
       path.join(fixturePath, ".env.local"),
@@ -257,7 +257,7 @@ describe("shadcn add", () => {
 
   it("should use existing .env if it exists", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
 
     await fs.writeFile(
       path.join(fixturePath, ".env"),
@@ -299,49 +299,43 @@ describe("shadcn add", () => {
 
   it("should add component to custom file path", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
-    await npxShadcn(fixturePath, [
-      "add",
-      "button",
-      "--path=custom/my-button.tsx",
-    ])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
+    await npxShadcn(fixturePath, ["add", "card", "--path=custom/my-card.tsx"])
 
     expect(
-      await fs.pathExists(path.join(fixturePath, "custom/my-button.tsx"))
+      await fs.pathExists(path.join(fixturePath, "custom/my-card.tsx"))
     ).toBe(true)
     expect(
-      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+      await fs.pathExists(path.join(fixturePath, "components/ui/card.tsx"))
     ).toBe(false)
   })
 
   it("should add component to custom directory", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
-    await npxShadcn(fixturePath, ["add", "button", "--path=custom/components"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
+    await npxShadcn(fixturePath, ["add", "card", "--path=custom/components"])
 
     expect(
-      await fs.pathExists(
-        path.join(fixturePath, "custom/components/button.tsx")
-      )
+      await fs.pathExists(path.join(fixturePath, "custom/components/card.tsx"))
     ).toBe(true)
     expect(
-      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+      await fs.pathExists(path.join(fixturePath, "components/ui/card.tsx"))
     ).toBe(false)
   })
 
   it("should add multiple files to custom directory", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
-    await npxShadcn(fixturePath, ["add", "button", "card", "--path=custom/ui"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
+    await npxShadcn(fixturePath, ["add", "input", "card", "--path=custom/ui"])
 
     expect(
-      await fs.pathExists(path.join(fixturePath, "custom/ui/button.tsx"))
+      await fs.pathExists(path.join(fixturePath, "custom/ui/input.tsx"))
     ).toBe(true)
     expect(
       await fs.pathExists(path.join(fixturePath, "custom/ui/card.tsx"))
     ).toBe(true)
     expect(
-      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+      await fs.pathExists(path.join(fixturePath, "components/ui/input.tsx"))
     ).toBe(false)
     expect(
       await fs.pathExists(path.join(fixturePath, "components/ui/card.tsx"))
@@ -379,7 +373,7 @@ describe("shadcn add", () => {
 describe("shadcn registry add", () => {
   it("should add registry from index to components.json", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, ["registry", "add", "@magicui"])
 
     const componentsJson = await fs.readJson(
@@ -392,7 +386,7 @@ describe("shadcn registry add", () => {
 
   it("should add custom registry with URL", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, [
       "registry",
       "add",
@@ -409,7 +403,7 @@ describe("shadcn registry add", () => {
 
   it("should add multiple registries", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, ["registry", "add", "@magicui", "@aceternity"])
 
     const componentsJson = await fs.readJson(
@@ -421,7 +415,7 @@ describe("shadcn registry add", () => {
 
   it("should skip already configured registries", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
     await npxShadcn(fixturePath, ["registry", "add", "@magicui"])
 
     // Add again - should not error.
@@ -435,7 +429,7 @@ describe("shadcn registry add", () => {
 
   it("should error for registry not in index without URL", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
 
     const result = await npxShadcn(fixturePath, [
       "registry",
@@ -448,7 +442,7 @@ describe("shadcn registry add", () => {
 
   it("should error for invalid URL missing {name}", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
 
     const result = await npxShadcn(fixturePath, [
       "registry",
diff --git a/packages/tests/src/tests/init.test.ts b/packages/tests/src/tests/init.test.ts
index 6c2063a21b..358063700b 100644
--- a/packages/tests/src/tests/init.test.ts
+++ b/packages/tests/src/tests/init.test.ts
@@ -1,6 +1,7 @@
+import os from "os"
 import path from "path"
 import fs from "fs-extra"
-import { describe, expect, it } from "vitest"
+import { afterAll, beforeAll, describe, expect, it } from "vitest"
 
 import {
   createFixtureTestDirectory,
@@ -15,14 +16,14 @@ describe("shadcn init - next-app", () => {
     await new Promise((resolve) => setTimeout(resolve, 2000))
 
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
 
     const componentsJsonPath = path.join(fixturePath, "components.json")
     expect(await fs.pathExists(componentsJsonPath)).toBe(true)
 
     const componentsJson = await fs.readJson(componentsJsonPath)
     expect(componentsJson).toMatchObject({
-      style: "new-york",
+      style: "base-nova",
       rsc: true,
       tsx: true,
       tailwind: {
@@ -54,39 +55,19 @@ describe("shadcn init - next-app", () => {
     expect(cssContent).toContain("--foreground")
   })
 
-  it("should init with custom base color", async () => {
-    const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=zinc"])
-
-    const componentsJson = await fs.readJson(
-      path.join(fixturePath, "components.json")
-    )
-    expect(componentsJson.style).toBe("new-york")
-    expect(componentsJson.tailwind.baseColor).toBe("zinc")
-  })
-
   it("should init without CSS variables", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, [
-      "init",
-      "--base-color=stone",
-      "--no-css-variables",
-    ])
+    await npxShadcn(fixturePath, ["init", "--defaults", "--no-css-variables"])
 
     const componentsJson = await fs.readJson(
       path.join(fixturePath, "components.json")
     )
     expect(componentsJson.tailwind.cssVariables).toBe(false)
-
-    const cssPath = path.join(fixturePath, "app/globals.css")
-    const cssContent = await fs.readFile(cssPath, "utf-8")
-    expect(cssContent).not.toContain("--background")
-    expect(cssContent).not.toContain("--foreground")
   })
 
   it("should init with components", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral", "button"])
+    await npxShadcn(fixturePath, ["init", "--defaults", "button"])
 
     expect(
       await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
@@ -97,13 +78,13 @@ describe("shadcn init - next-app", () => {
 describe("shadcn init - vite-app", () => {
   it("should init with custom alias and src", async () => {
     const fixturePath = await createFixtureTestDirectory("vite-app")
-    await npxShadcn(fixturePath, ["init", "--base-color=gray", "alert-dialog"])
+    await npxShadcn(fixturePath, ["init", "--defaults", "alert-dialog"])
 
     const componentsJson = await fs.readJson(
       path.join(fixturePath, "components.json")
     )
-    expect(componentsJson.style).toBe("new-york")
-    expect(componentsJson.tailwind.baseColor).toBe("gray")
+    expect(componentsJson.style).toBe("base-nova")
+    expect(componentsJson.tailwind.baseColor).toBe("neutral")
     expect(componentsJson.aliases).toMatchObject({
       components: "#custom/components",
       utils: "#custom/lib/utils",
@@ -281,7 +262,6 @@ describe("shadcn init - custom style", async () => {
           properties: {
             "--background": "oklch(0.145 0 0)",
             "--foreground": "oklch(0.985 0 0)",
-            "--primary": "oklch(0.922 0 0)",
             "--custom-brand": "#fef3c7",
             "--foo-var": "1rem",
           },
@@ -349,7 +329,6 @@ describe("shadcn init - custom style", async () => {
           properties: {
             "--background": "oklch(0.145 0 0)",
             "--foreground": "oklch(0.985 0 0)",
-            "--primary": "oklch(0.922 0 0)",
             "--custom-brand": "#fef3c7",
             "--foo-var": "2rem",
           },
@@ -358,88 +337,6 @@ describe("shadcn init - custom style", async () => {
     ).toBe(true)
   })
 
-  it("should init with --no-base-style", async () => {
-    const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, ["init", "--no-base-style"])
-
-    // We still expect components.json to be created.
-    // With some defaults.
-    const componentsJson = await fs.readJson(
-      path.join(fixturePath, "components.json")
-    )
-    expect(componentsJson.style).toBe("new-york")
-    expect(componentsJson.tailwind.baseColor).toBe("neutral")
-
-    // No utils should be installed.
-    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
-      false
-    )
-
-    // The css file should only have tailwind imports.
-    expect(
-      await fs.readFile(path.join(fixturePath, "app/globals.css"), "utf-8")
-    ).toMatchInlineSnapshot(`
-      "@import "tailwindcss";
-      "
-    `)
-  })
-
-  it("should init with custom style and --no-base-style", async () => {
-    const fixturePath = await createFixtureTestDirectory("next-app")
-    await npxShadcn(fixturePath, [
-      "init",
-      "http://localhost:4445/r/style-extended.json",
-      "--no-base-style",
-    ])
-
-    // We still expect components.json to be created.
-    // With some defaults.
-    const componentsJson = await fs.readJson(
-      path.join(fixturePath, "components.json")
-    )
-    expect(componentsJson.style).toBe("new-york")
-    expect(componentsJson.tailwind.baseColor).toBe("neutral")
-
-    // No utils should be installed.
-    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
-      false
-    )
-
-    // But we should have the foo.ts from the custom style.
-    expect(
-      await fs.readFile(path.join(fixturePath, "lib/foo.ts"), "utf-8")
-    ).toBe("const foo = 'baz-qux'")
-
-    expect(
-      await fs.readFile(path.join(fixturePath, "app/globals.css"), "utf-8")
-    ).toMatchInlineSnapshot(`
-      "@import "tailwindcss";
-
-      @custom-variant dark (&:is(.dark *));
-
-      @theme inline {
-          --font-sans: Geist Sans, sans-serif;
-          --font-mono: Geist Mono, monospace;
-          --color-custom-brand: var(--custom-brand);
-          --color-secondary: var(--secondary);
-          --foo-var: var(--foo-var);
-          --color-primary: var(--primary);
-      }
-
-      :root {
-          --primary: #059669;
-          --foo-var: 3rem;
-          --secondary: #06b6d4;
-      }
-
-      .dark {
-          --custom-brand: #fef3c7;
-          --foo-var: 2rem;
-      }
-      "
-    `)
-  })
-
   it("should init with custom style extended none", async () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
     await npxShadcn(fixturePath, [
@@ -496,6 +393,313 @@ describe("shadcn init - custom style", async () => {
   })
 })
 
+describe("shadcn init - unsupported framework", () => {
+  it("should init with --defaults on unsupported framework", async () => {
+    const fixturePath = await createFixtureTestDirectory("remix-app")
+    await npxShadcn(fixturePath, ["init", "--defaults"])
+
+    const componentsJsonPath = path.join(fixturePath, "components.json")
+    expect(await fs.pathExists(componentsJsonPath)).toBe(true)
+
+    const componentsJson = await fs.readJson(componentsJsonPath)
+    expect(componentsJson).toMatchObject({
+      style: "base-nova",
+      tailwind: {
+        baseColor: "neutral",
+        cssVariables: true,
+      },
+    })
+
+    expect(await fs.pathExists(path.join(fixturePath, "lib/utils.ts"))).toBe(
+      true
+    )
+  })
+
+  it("should init with --defaults and components on unsupported framework", async () => {
+    const fixturePath = await createFixtureTestDirectory("remix-app")
+    await npxShadcn(fixturePath, ["init", "--defaults", "button"])
+
+    expect(
+      await fs.pathExists(path.join(fixturePath, "components/ui/button.tsx"))
+    ).toBe(true)
+
+    const cssPath = path.join(fixturePath, "app/globals.css")
+    const cssContent = await fs.readFile(cssPath, "utf-8")
+    expect(cssContent).toContain("@layer base")
+    expect(cssContent).toContain("--background")
+    expect(cssContent).toContain("--foreground")
+  })
+})
+
+describe("shadcn init - template flag", () => {
+  it("should reject invalid template", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    const result = await npxShadcn(fixturePath, ["init", "-t", "invalid"])
+
+    expect(result.exitCode).toBe(1)
+    expect(result.stdout).toContain("Invalid template")
+  })
+
+  it("should accept valid template with --defaults", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "-t", "next", "--defaults"])
+
+    const componentsJsonPath = path.join(fixturePath, "components.json")
+    expect(await fs.pathExists(componentsJsonPath)).toBe(true)
+
+    const componentsJson = await fs.readJson(componentsJsonPath)
+    expect(componentsJson.style).toBe("base-nova")
+    expect(componentsJson.tailwind.baseColor).toBe("neutral")
+  })
+})
+
+describe("shadcn init - --name flag", () => {
+  // Use os.tmpdir() to create projects outside the monorepo tree.
+  // This prevents pnpm from detecting the monorepo workspace root.
+  let testBaseDir: string
+
+  beforeAll(async () => {
+    testBaseDir = path.join(os.tmpdir(), `shadcn-name-test-${process.pid}`)
+    await fs.ensureDir(testBaseDir)
+  })
+
+  afterAll(async () => {
+    await fs.remove(testBaseDir)
+  })
+
+  it("should create a new project with the specified name", async () => {
+    const projectName = "my-named-app"
+    const emptyDir = path.join(testBaseDir, "empty-next")
+    await fs.ensureDir(emptyDir)
+
+    await npxShadcn(emptyDir, ["init", "--defaults", "--name", projectName], {
+      timeout: 120000,
+    })
+
+    const projectPath = path.join(emptyDir, projectName)
+
+    // Verify project was created with the correct name.
+    expect(await fs.pathExists(projectPath)).toBe(true)
+    expect(await fs.pathExists(path.join(projectPath, "package.json"))).toBe(
+      true
+    )
+
+    // Verify components.json was created.
+    const componentsJsonPath = path.join(projectPath, "components.json")
+    expect(await fs.pathExists(componentsJsonPath)).toBe(true)
+
+    // Verify theme-provider is included from the template.
+    expect(
+      await fs.pathExists(
+        path.join(projectPath, "components/theme-provider.tsx")
+      )
+    ).toBe(true)
+  })
+
+  it("should create a new project with --name and -t vite", async () => {
+    const projectName = "my-vite-app"
+    const emptyDir = path.join(testBaseDir, "empty-vite")
+    await fs.ensureDir(emptyDir)
+
+    await npxShadcn(
+      emptyDir,
+      ["init", "--defaults", "--name", projectName, "-t", "vite"],
+      { timeout: 120000 }
+    )
+
+    const projectPath = path.join(emptyDir, projectName)
+
+    // Verify project was created.
+    expect(await fs.pathExists(projectPath)).toBe(true)
+
+    // Verify it's a vite project with the correct name.
+    const packageJson = await fs.readJson(
+      path.join(projectPath, "package.json")
+    )
+    expect(packageJson.name).toBe(projectName)
+    expect(packageJson.dependencies).toHaveProperty("react")
+  })
+})
+
+describe("shadcn init - next-monorepo", () => {
+  // Use os.tmpdir() to create projects outside the monorepo tree.
+  // This prevents pnpm from detecting the monorepo workspace root.
+  let testBaseDir: string
+
+  beforeAll(async () => {
+    testBaseDir = path.join(os.tmpdir(), `shadcn-monorepo-test-${process.pid}`)
+    await fs.ensureDir(testBaseDir)
+  })
+
+  afterAll(async () => {
+    await fs.remove(testBaseDir)
+  })
+
+  it("should create a monorepo with preset", async () => {
+    const projectName = `test-monorepo-preset-${process.pid}`
+
+    const result = await npxShadcn(
+      testBaseDir,
+      [
+        "init",
+        "--name",
+        projectName,
+        "-t",
+        "next",
+        "--monorepo",
+        "--preset",
+        "nova",
+        "--base",
+        "radix",
+      ],
+      { timeout: 300000, debug: true }
+    )
+    expect(result.exitCode).toBe(0)
+
+    const projectPath = path.join(testBaseDir, projectName)
+
+    // Verify project structure exists.
+    expect(await fs.pathExists(projectPath)).toBe(true)
+    expect(
+      await fs.pathExists(path.join(projectPath, "packages/ui/components.json"))
+    ).toBe(true)
+    expect(
+      await fs.pathExists(path.join(projectPath, "apps/web/components.json"))
+    ).toBe(true)
+
+    // Verify packages/ui/components.json is updated with preset config.
+    const uiConfig = await fs.readJson(
+      path.join(projectPath, "packages/ui/components.json")
+    )
+    expect(uiConfig.style).toBe("radix-nova")
+    expect(uiConfig.iconLibrary).toBe("lucide")
+    expect(uiConfig.tailwind.baseColor).toBe("neutral")
+
+    // Verify apps/web/components.json is updated with preset config.
+    const webConfig = await fs.readJson(
+      path.join(projectPath, "apps/web/components.json")
+    )
+    expect(webConfig.style).toBe("radix-nova")
+    // Verify workspace aliases are preserved.
+    expect(webConfig.aliases.components).toBe("@/components")
+    expect(webConfig.aliases.utils).toBe("@workspace/ui/lib/utils")
+    expect(webConfig.aliases.ui).toBe("@workspace/ui/components")
+
+    // Verify CSS was applied to packages/ui.
+    const cssPath = path.join(projectPath, "packages/ui/src/styles/globals.css")
+    expect(await fs.pathExists(cssPath)).toBe(true)
+    const cssContent = await fs.readFile(cssPath, "utf-8")
+    expect(cssContent).toContain("@layer base")
+    expect(cssContent).toContain(":root")
+    expect(cssContent).toContain(".dark")
+    expect(cssContent).toContain("--background")
+    expect(cssContent).toContain("--foreground")
+    expect(cssContent).toContain("--primary")
+  }, 300000)
+
+  it("should create a monorepo with custom preset url", async () => {
+    const projectName = `test-monorepo-url-${process.pid}`
+
+    // Build a custom init URL with specific options.
+    const registryUrl = process.env.REGISTRY_URL || "http://localhost:4000/r"
+    const baseUrl = registryUrl.replace(/\/r\/?$/, "")
+    const initUrl = `${baseUrl}/init?base=radix&style=nova&baseColor=zinc&theme=zinc&iconLibrary=lucide&font=inter&rtl=false&menuAccent=subtle&menuColor=default&radius=default&template=next`
+
+    const result = await npxShadcn(
+      testBaseDir,
+      [
+        "init",
+        "--name",
+        projectName,
+        "-t",
+        "next",
+        "--monorepo",
+        "--preset",
+        initUrl,
+      ],
+      { timeout: 300000 }
+    )
+    expect(result.exitCode).toBe(0)
+
+    const projectPath = path.join(testBaseDir, projectName)
+    expect(await fs.pathExists(projectPath)).toBe(true)
+
+    // Verify config reflects the custom URL params.
+    const uiConfig = await fs.readJson(
+      path.join(projectPath, "packages/ui/components.json")
+    )
+    expect(uiConfig.style).toBe("radix-nova")
+    expect(uiConfig.iconLibrary).toBe("lucide")
+    expect(uiConfig.tailwind.baseColor).toBe("neutral")
+
+    const webConfig = await fs.readJson(
+      path.join(projectPath, "apps/web/components.json")
+    )
+    expect(webConfig.style).toBe("radix-nova")
+    expect(webConfig.tailwind.baseColor).toBe("neutral")
+
+    // Verify CSS has zinc color theme applied.
+    const cssPath = path.join(projectPath, "packages/ui/src/styles/globals.css")
+    const cssContent = await fs.readFile(cssPath, "utf-8")
+    expect(cssContent).toContain(":root")
+    expect(cssContent).toContain(".dark")
+    expect(cssContent).toContain("--background")
+    expect(cssContent).toContain("--foreground")
+    expect(
+      cssHasProperties(cssContent, [
+        {
+          selector: ":root",
+          properties: {
+            "--background": "oklch(1 0 0)",
+          },
+        },
+      ])
+    ).toBe(true)
+  }, 300000)
+})
+
+describe("shadcn init - rtl flags", () => {
+  it("should set rtl to true with --rtl", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--defaults", "--rtl"])
+
+    const componentsJsonPath = path.join(fixturePath, "components.json")
+    const componentsJson = await fs.readJson(componentsJsonPath)
+    expect(componentsJson.rtl).toBe(true)
+  })
+
+  it("should set rtl to false with --no-rtl", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--defaults", "--no-rtl"])
+
+    const componentsJsonPath = path.join(fixturePath, "components.json")
+    const componentsJson = await fs.readJson(componentsJsonPath)
+    expect(componentsJson.rtl).toBe(false)
+  })
+
+  it("should default rtl to false when no flag is passed", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    await npxShadcn(fixturePath, ["init", "--defaults"])
+
+    const componentsJsonPath = path.join(fixturePath, "components.json")
+    const componentsJson = await fs.readJson(componentsJsonPath)
+    expect(componentsJson.rtl).toBe(false)
+  })
+})
+
+describe("shadcn init - deprecated --src-dir", () => {
+  it("should reject --src-dir as unknown option", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+    const result = await npxShadcn(fixturePath, [
+      "init",
+      "--defaults",
+      "--src-dir",
+    ])
+
+    expect(result.exitCode).toBe(1)
+  })
+})
+
 describe("shadcn init - existing components.json", () => {
   // TODO: Revisit --force behavior. Currently it only skips backup merge,
   // but doesn't reset config values like style. Need to decide intended behavior.
@@ -503,7 +707,7 @@ describe("shadcn init - existing components.json", () => {
     const fixturePath = await createFixtureTestDirectory("next-app")
 
     // Run init with default configuration.
-    await npxShadcn(fixturePath, ["init", "--base-color=neutral"])
+    await npxShadcn(fixturePath, ["init", "--defaults"])
 
     // Override style in components.json.
     const componentsJsonPath = path.join(fixturePath, "components.json")
@@ -511,12 +715,12 @@ describe("shadcn init - existing components.json", () => {
     config.style = "custom-style"
     await fs.writeJson(componentsJsonPath, config)
 
-    // Reinit with --force and different base color.
-    await npxShadcn(fixturePath, ["init", "--force", "--base-color=zinc"])
+    // Reinit with --force.
+    await npxShadcn(fixturePath, ["init", "--force", "--defaults"])
 
     const newConfig = await fs.readJson(componentsJsonPath)
     expect(newConfig.style).toBe("new-york")
-    expect(newConfig.tailwind.baseColor).toBe("zinc")
+    expect(newConfig.tailwind.baseColor).toBe("neutral")
     expect(await fs.pathExists(componentsJsonPath + ".bak")).toBe(false)
   })
 
@@ -541,7 +745,7 @@ describe("shadcn init - existing components.json", () => {
     const componentsJsonPath = path.join(fixturePath, "components.json")
     await fs.writeJson(componentsJsonPath, existingConfig)
 
-    // Run init with an invalid component - this should fail and restore
+    // Run init with an invalid component - this should fail and restore.
     await npxShadcn(fixturePath, [
       "init",
       "invalid-component-that-does-not-exist",
@@ -552,4 +756,36 @@ describe("shadcn init - existing components.json", () => {
     expect(newConfig).toMatchObject(existingConfig)
     expect(await fs.pathExists(componentsJsonPath + ".bak")).toBe(false)
   })
+
+  it("should preserve registries in components.json when using --force", async () => {
+    const fixturePath = await createFixtureTestDirectory("next-app")
+
+    // Run init with default configuration.
+    await npxShadcn(fixturePath, ["init", "--defaults"])
+
+    // Inject a custom registries object into components.json.
+    const componentsJsonPath = path.join(fixturePath, "components.json")
+    const config = await fs.readJson(componentsJsonPath)
+    config.registries = {
+      "my-registry": { url: "https://example.com/r" },
+    }
+    await fs.writeJson(componentsJsonPath, config)
+
+    // Reinit with --force.
+    await npxShadcn(fixturePath, ["init", "--force", "--defaults"])
+
+    // components.json should exist with no .bak leftover.
+    expect(await fs.pathExists(componentsJsonPath)).toBe(true)
+    expect(await fs.pathExists(componentsJsonPath + ".bak")).toBe(false)
+
+    // The custom registry should be preserved.
+    const newConfig = await fs.readJson(componentsJsonPath)
+    expect(newConfig.registries).toMatchObject({
+      "my-registry": { url: "https://example.com/r" },
+    })
+
+    // Other config values should be from the fresh init.
+    expect(newConfig.style).toBe("base-nova")
+    expect(newConfig.tailwind.baseColor).toBe("neutral")
+  })
 })
diff --git a/packages/tests/src/tests/registries.test.ts b/packages/tests/src/tests/registries.test.ts
index 36f3d8d8d8..bdbd894ace 100644
--- a/packages/tests/src/tests/registries.test.ts
+++ b/packages/tests/src/tests/registries.test.ts
@@ -269,8 +269,11 @@ const registryTwo = await createRegistryServer(
   }
 )
 
+let originalRegistryUrl: string | undefined
+
 beforeAll(async () => {
   // This sets the shadcn registry to our mock registry.
+  originalRegistryUrl = process.env.REGISTRY_URL
   process.env.REGISTRY_URL = "http://localhost:4040/r"
   await registryShadcn.start()
   await registryOne.start()
@@ -278,6 +281,12 @@ beforeAll(async () => {
 })
 
 afterAll(async () => {
+  // Restore the original REGISTRY_URL to avoid leaking into other test files.
+  if (originalRegistryUrl === undefined) {
+    delete process.env.REGISTRY_URL
+  } else {
+    process.env.REGISTRY_URL = originalRegistryUrl
+  }
   await registryShadcn.stop()
   await registryOne.stop()
   await registryTwo.stop()
@@ -1042,8 +1051,6 @@ describe("registries", () => {
       "--yes",
     ])
 
-    expect(output.stderr).toContain("Updating CSS variables in app/globals.css")
-
     const globalCssContent = await fs.readFile(
       path.join(fixturePath, "app/globals.css"),
       "utf-8"
@@ -1204,7 +1211,12 @@ describe("registries:init", () => {
       "@one": "http://localhost:4444/r/{name}",
     })
 
-    await npxShadcn(fixturePath, ["init", "@one/style"])
+    await npxShadcn(fixturePath, [
+      "init",
+      "--force",
+      "--no-reinstall",
+      "@one/style",
+    ])
 
     const componentsJson = await fs.readJson(
       path.join(fixturePath, "components.json")
@@ -1272,7 +1284,12 @@ describe("registries:init", () => {
 
     process.env.BEARER_TOKEN = "EXAMPLE_BEARER_TOKEN"
 
-    await npxShadcn(fixturePath, ["init", "@two/style"])
+    await npxShadcn(fixturePath, [
+      "init",
+      "--force",
+      "--no-reinstall",
+      "@two/style",
+    ])
 
     const componentsJson = await fs.readJson(
       path.join(fixturePath, "components.json")
diff --git a/packages/tests/src/utils/helpers.ts b/packages/tests/src/utils/helpers.ts
index 28ba9891f9..31b0a10397 100644
--- a/packages/tests/src/utils/helpers.ts
+++ b/packages/tests/src/utils/helpers.ts
@@ -9,6 +9,7 @@ import { TEMP_DIR } from "./setup"
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 const FIXTURES_DIR = path.join(__dirname, "../../fixtures")
 const SHADCN_CLI_PATH = path.join(__dirname, "../../../shadcn/dist/index.js")
+const TEMPLATES_DIR = path.join(__dirname, "../../../../templates")
 
 export function getRegistryUrl() {
   return process.env.REGISTRY_URL || "http://localhost:4000/r"
@@ -32,6 +33,7 @@ export async function runCommand(
   options?: {
     env?: Record<string, string>
     input?: string
+    timeout?: number
   }
 ) {
   try {
@@ -45,7 +47,7 @@ export async function runCommand(
       },
       input: options?.input,
       reject: false,
-      timeout: 30000,
+      timeout: options?.timeout ?? 30000,
     })
 
     const result = await childProcess
@@ -69,14 +71,18 @@ export async function npxShadcn(
   args: string[],
   {
     debug = false,
+    timeout,
   }: {
     debug?: boolean
+    timeout?: number
   } = {}
 ) {
   const result = await runCommand(cwd, args, {
     env: {
       REGISTRY_URL: getRegistryUrl(),
+      SHADCN_TEMPLATE_DIR: TEMPLATES_DIR,
     },
+    timeout,
   })
 
   if (debug) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e470aee82..58c5528f73 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -28,17 +28,17 @@ importers:
         specifier: ^17.6.3
         version: 17.8.1
       '@ianvs/prettier-plugin-sort-imports':
-        specifier: ^3.7.2
-        version: 3.7.2(prettier@2.8.8)
+        specifier: ^4.6.1
+        version: 4.6.1(prettier@3.6.2)
       '@manypkg/cli':
         specifier: ^0.20.0
         version: 0.20.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.49.0
-        version: 8.49.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
+        version: 8.49.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
       '@typescript-eslint/parser':
         specifier: ^8.49.0
-        version: 8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
+        version: 8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
       autoprefixer:
         specifier: ^10.4.14
         version: 10.4.21(postcss@8.5.6)
@@ -53,19 +53,19 @@ importers:
         version: 7.0.3
       eslint:
         specifier: ^9.26.0
-        version: 9.26.0(jiti@1.21.7)
+        version: 9.26.0(hono@4.11.7)(jiti@1.21.7)
       eslint-config-next:
         specifier: ^15.0.0
-        version: 15.5.11(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
+        version: 15.5.11(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
       eslint-config-prettier:
         specifier: ^8.8.0
-        version: 8.10.2(eslint@9.26.0(jiti@1.21.7))
+        version: 8.10.2(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
       eslint-config-turbo:
         specifier: ^1.9.9
-        version: 1.13.4(eslint@9.26.0(jiti@1.21.7))
+        version: 1.13.4(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
       eslint-plugin-react:
         specifier: ^7.32.2
-        version: 7.37.5(eslint@9.26.0(jiti@1.21.7))
+        version: 7.37.5(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
       eslint-plugin-tailwindcss:
         specifier: 3.13.1
         version: 3.13.1(tailwindcss@3.4.19(tsx@4.20.3)(yaml@2.8.1))
@@ -73,11 +73,11 @@ importers:
         specifier: ^12.12.1
         version: 12.23.12(@emotion/is-prop-valid@1.3.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       prettier:
-        specifier: ^2.8.8
-        version: 2.8.8
+        specifier: ^3.4.2
+        version: 3.6.2
       pretty-quick:
-        specifier: ^3.1.3
-        version: 3.3.1(prettier@2.8.8)
+        specifier: ^4.0.0
+        version: 4.2.2(prettier@3.6.2)
       puppeteer:
         specifier: ^23.6.0
         version: 23.11.1(typescript@5.9.2)
@@ -168,7 +168,7 @@ importers:
         version: 8.21.3(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@vercel/analytics':
         specifier: ^1.4.1
-        version: 1.5.0(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
+        version: 1.5.0(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
       change-case:
         specifier: ^5.4.4
         version: 5.4.4
@@ -201,16 +201,16 @@ importers:
         version: 4.0.2
       fumadocs-core:
         specifier: 16.0.5
-        version: 16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        version: 16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       fumadocs-docgen:
         specifier: 2.0.0
         version: 2.0.0
       fumadocs-mdx:
         specifier: 13.0.2
-        version: 13.0.2(fumadocs-core@16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.1.12(@types/node@20.19.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.3)(yaml@2.8.1))
+        version: 13.0.2(fumadocs-core@16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.1.12(@types/node@20.19.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.3)(yaml@2.8.1))
       fumadocs-ui:
         specifier: 16.0.5
-        version: 16.0.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
+        version: 16.0.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
       input-otp:
         specifier: ^1.4.2
         version: 1.4.2(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -233,14 +233,14 @@ importers:
         specifier: ^12.12.1
         version: 12.23.12(@emotion/is-prop-valid@1.3.1)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       next:
-        specifier: 16.1.4
-        version: 16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+        specifier: 16.1.6
+        version: 16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       next-themes:
         specifier: 0.4.6
         version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       nuqs:
         specifier: ^2.7.2
-        version: 2.7.2(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
+        version: 2.7.2(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
       postcss:
         specifier: ^8.5.1
         version: 8.5.6
@@ -278,7 +278,7 @@ importers:
         specifier: ^0.0.1
         version: 0.0.1
       shadcn:
-        specifier: 3.8.5
+        specifier: 4.0.0
         version: link:../../packages/shadcn
       shiki:
         specifier: ^1.10.1
@@ -323,6 +323,12 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^8.31.0
         version: 8.39.0(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1))(typescript@5.9.2)
+      agentation:
+        specifier: ^2.2.1
+        version: 2.2.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      baseline-browser-mapping:
+        specifier: ^2.10.0
+        version: 2.10.0
       eslint:
         specifier: ^9
         version: 9.26.0(hono@4.11.7)(jiti@2.6.1)
@@ -333,8 +339,8 @@ importers:
         specifier: ^3.4.2
         version: 3.6.2
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.11
-        version: 0.6.14(@ianvs/prettier-plugin-sort-imports@4.6.1(prettier@3.6.2))(prettier@3.6.2)
+        specifier: ^0.7.2
+        version: 0.7.2(@ianvs/prettier-plugin-sort-imports@4.6.1(prettier@3.6.2))(prettier@3.6.2)
       tailwindcss:
         specifier: ^4
         version: 4.1.18
@@ -1440,15 +1446,6 @@ packages:
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
 
-  '@ianvs/prettier-plugin-sort-imports@3.7.2':
-    resolution: {integrity: sha512-bVckKToJM8XV2wTOG1VpeXrSmfAG49esVrikbxeFbY51RJdNke9AdMANJtGuACB59uo+pGlz0wBdWFrRzWyO1A==}
-    peerDependencies:
-      '@vue/compiler-sfc': '>=3.0.0'
-      prettier: 2.x
-    peerDependenciesMeta:
-      '@vue/compiler-sfc':
-        optional: true
-
   '@ianvs/prettier-plugin-sort-imports@4.6.1':
     resolution: {integrity: sha512-Q0gujs/g6tw1uOGd1bTVLGDzAwb/UwrCehhPCQevTCYDkho8+eQSOhA0zcy9AM0XnXM1ChBWsZeE4P7Nym0pyw==}
     peerDependencies:
@@ -1725,8 +1722,8 @@ packages:
   '@napi-rs/wasm-runtime@0.2.12':
     resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
 
-  '@next/env@16.1.4':
-    resolution: {integrity: sha512-gkrXnZyxPUy0Gg6SrPQPccbNVLSP3vmW8LU5dwEttEEC1RwDivk8w4O+sZIjFvPrSICXyhQDCG+y3VmjlJf+9A==}
+  '@next/env@16.1.6':
+    resolution: {integrity: sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==}
 
   '@next/eslint-plugin-next@15.5.11':
     resolution: {integrity: sha512-tS/HYQOjIoX9ZNDQitba/baS8sTvo3ekY6Vgdx5lmhN4jov082bdApIChXr94qhMZHvEciz9DZglFFnhguQp/A==}
@@ -1734,50 +1731,50 @@ packages:
   '@next/eslint-plugin-next@16.0.0':
     resolution: {integrity: sha512-IB7RzmmtrPOrpAgEBR1PIQPD0yea5lggh5cq54m51jHjjljU80Ia+czfxJYMlSDl1DPvpzb8S9TalCc0VMo9Hw==}
 
-  '@next/swc-darwin-arm64@16.1.4':
-    resolution: {integrity: sha512-T8atLKuvk13XQUdVLCv1ZzMPgLPW0+DWWbHSQXs0/3TjPrKNxTmUIhOEaoEyl3Z82k8h/gEtqyuoZGv6+Ugawg==}
+  '@next/swc-darwin-arm64@16.1.6':
+    resolution: {integrity: sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.1.4':
-    resolution: {integrity: sha512-AKC/qVjUGUQDSPI6gESTx0xOnOPQ5gttogNS3o6bA83yiaSZJek0Am5yXy82F1KcZCx3DdOwdGPZpQCluonuxg==}
+  '@next/swc-darwin-x64@16.1.6':
+    resolution: {integrity: sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@16.1.4':
-    resolution: {integrity: sha512-POQ65+pnYOkZNdngWfMEt7r53bzWiKkVNbjpmCt1Zb3V6lxJNXSsjwRuTQ8P/kguxDC8LRkqaL3vvsFrce4dMQ==}
+  '@next/swc-linux-arm64-gnu@16.1.6':
+    resolution: {integrity: sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@16.1.4':
-    resolution: {integrity: sha512-3Wm0zGYVCs6qDFAiSSDL+Z+r46EdtCv/2l+UlIdMbAq9hPJBvGu/rZOeuvCaIUjbArkmXac8HnTyQPJFzFWA0Q==}
+  '@next/swc-linux-arm64-musl@16.1.6':
+    resolution: {integrity: sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@16.1.4':
-    resolution: {integrity: sha512-lWAYAezFinaJiD5Gv8HDidtsZdT3CDaCeqoPoJjeB57OqzvMajpIhlZFce5sCAH6VuX4mdkxCRqecCJFwfm2nQ==}
+  '@next/swc-linux-x64-gnu@16.1.6':
+    resolution: {integrity: sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@16.1.4':
-    resolution: {integrity: sha512-fHaIpT7x4gA6VQbdEpYUXRGyge/YbRrkG6DXM60XiBqDM2g2NcrsQaIuj375egnGFkJow4RHacgBOEsHfGbiUw==}
+  '@next/swc-linux-x64-musl@16.1.6':
+    resolution: {integrity: sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@16.1.4':
-    resolution: {integrity: sha512-MCrXxrTSE7jPN1NyXJr39E+aNFBrQZtO154LoCz7n99FuKqJDekgxipoodLNWdQP7/DZ5tKMc/efybx1l159hw==}
+  '@next/swc-win32-arm64-msvc@16.1.6':
+    resolution: {integrity: sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.1.4':
-    resolution: {integrity: sha512-JSVlm9MDhmTXw/sO2PE/MRj+G6XOSMZB+BcZ0a7d6KwVFZVpkHcb2okyoYFBaco6LeiL53BBklRlOrDDbOeE5w==}
+  '@next/swc-win32-x64-msvc@16.1.6':
+    resolution: {integrity: sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -1878,6 +1875,10 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@pkgr/core@0.2.9':
+    resolution: {integrity: sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+
   '@puppeteer/browsers@2.6.1':
     resolution: {integrity: sha512-aBSREisdsGH890S2rQqK82qmQYU3uFpSH8wcZWHgHzl3LfzsxAKbLNiAG9mO8v1Y0UICBeClICxPJvyr0rcuxg==}
     engines: {node: '>=18'}
@@ -3438,6 +3439,17 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
+  agentation@2.2.1:
+    resolution: {integrity: sha512-yV9P1DggI7M3SRaRwLwt+xqE5lXqg5l8xtqCr8KzEkbnH8Wa6eRATU97uKnD7cC8FrsJP62Mmw0Xf5Xi5KV50Q==}
+    peerDependencies:
+      react: '>=18.0.0'
+      react-dom: '>=18.0.0'
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
     peerDependencies:
@@ -3637,13 +3649,15 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
-  baseline-browser-mapping@2.8.4:
-    resolution: {integrity: sha512-L+YvJwGAgwJBV1p6ffpSTa2KRc69EeeYGYjRVWKs0GKrK+LON0GC0gV+rKSNtALEDvMDqkvCFq9r1r94/Gjwxw==}
+  baseline-browser-mapping@2.10.0:
+    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
+    engines: {node: '>=6.0.0'}
     hasBin: true
 
   basic-ftp@5.0.5:
     resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==}
     engines: {node: '>=10.0.0'}
+    deprecated: Security vulnerability fixed in 5.2.0, please upgrade
 
   better-path-resolve@1.0.0:
     resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==}
@@ -4576,10 +4590,6 @@ packages:
     resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
     engines: {node: '>=18.0.0'}
 
-  execa@4.1.0:
-    resolution: {integrity: sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==}
-    engines: {node: '>=10'}
-
   execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -4942,6 +4952,7 @@ packages:
   git-raw-commits@4.0.0:
     resolution: {integrity: sha512-ICsMM1Wk8xSGMowkOmPrzo2Fgmfo4bMHLNX6ytHjajRJUqvHOw/TFapQ+QG75c3X/tTDDhOSRPGC52dDbNM8FQ==}
     engines: {node: '>=16'}
+    deprecated: This package is no longer maintained. For the JavaScript API, please use @conventional-changelog/git-client instead.
     hasBin: true
 
   github-slugger@2.0.0:
@@ -5100,10 +5111,6 @@ packages:
     resolution: {integrity: sha512-3gKm/gCSUipeLsRYZbbdA1BD83lBoWUkZ7G9VFrhWPAU76KwYo5KR8V28bpoPm/ygy0x5/GCbpRQdY7VLYCoIg==}
     hasBin: true
 
-  human-signals@1.1.1:
-    resolution: {integrity: sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==}
-    engines: {node: '>=8.12.0'}
-
   human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
     engines: {node: '>=10.17.0'}
@@ -5413,9 +5420,6 @@ packages:
     resolution: {integrity: sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==}
     engines: {node: 20 || >=22}
 
-  javascript-natural-sort@0.7.1:
-    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
-
   jiti@1.21.7:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
@@ -5655,14 +5659,6 @@ packages:
   lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
 
-  lodash.clone@4.5.0:
-    resolution: {integrity: sha512-GhrVeweiTD6uTmmn5hV/lzgCQhccwReIVRLHp7LT4SopOjqEZ5BbX8b5WWEtAKasjmy8hR7ZPwsYlxRCku5odg==}
-    deprecated: This package is deprecated. Use structuredClone instead.
-
-  lodash.isequal@4.5.0:
-    resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==}
-    deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead.
-
   lodash.isplainobject@4.0.6:
     resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==}
 
@@ -6060,8 +6056,8 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@16.1.4:
-    resolution: {integrity: sha512-gKSecROqisnV7Buen5BfjmXAm7Xlpx9o2ueVQRo5DxQcjC8d330dOM1xiGWc2k3Dcnz0In3VybyRPOsudwgiqQ==}
+  next@16.1.6:
+    resolution: {integrity: sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
@@ -6402,10 +6398,6 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
-  picomatch@3.0.1:
-    resolution: {integrity: sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag==}
-    engines: {node: '>=10'}
-
   picomatch@4.0.3:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
@@ -6500,9 +6492,9 @@ packages:
     resolution: {integrity: sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==}
     engines: {node: '>=4'}
 
-  prettier-plugin-tailwindcss@0.6.14:
-    resolution: {integrity: sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==}
-    engines: {node: '>=14.21.3'}
+  prettier-plugin-tailwindcss@0.7.2:
+    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
+    engines: {node: '>=20.19'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
       '@prettier/plugin-hermes': '*'
@@ -6514,14 +6506,12 @@ packages:
       prettier: ^3.0
       prettier-plugin-astro: '*'
       prettier-plugin-css-order: '*'
-      prettier-plugin-import-sort: '*'
       prettier-plugin-jsdoc: '*'
       prettier-plugin-marko: '*'
       prettier-plugin-multiline-arrays: '*'
       prettier-plugin-organize-attributes: '*'
       prettier-plugin-organize-imports: '*'
       prettier-plugin-sort-imports: '*'
-      prettier-plugin-style-order: '*'
       prettier-plugin-svelte: '*'
     peerDependenciesMeta:
       '@ianvs/prettier-plugin-sort-imports':
@@ -6542,8 +6532,6 @@ packages:
         optional: true
       prettier-plugin-css-order:
         optional: true
-      prettier-plugin-import-sort:
-        optional: true
       prettier-plugin-jsdoc:
         optional: true
       prettier-plugin-marko:
@@ -6556,8 +6544,6 @@ packages:
         optional: true
       prettier-plugin-sort-imports:
         optional: true
-      prettier-plugin-style-order:
-        optional: true
       prettier-plugin-svelte:
         optional: true
 
@@ -6575,12 +6561,12 @@ packages:
     resolution: {integrity: sha512-4yf0QO/sllf/1zbZWYnvWw3NxCQwLXKzIj0G849LSufP15BXKM0rbD2Z3wVnkMfjdn/CB0Dpp444gYAACdsplg==}
     engines: {node: '>=18'}
 
-  pretty-quick@3.3.1:
-    resolution: {integrity: sha512-3b36UXfYQ+IXXqex6mCca89jC8u0mYLqFAN5eTQKoXO6oCQYcIVYZEB/5AlBHI7JPYygReM2Vv6Vom/Gln7fBg==}
-    engines: {node: '>=10.13'}
+  pretty-quick@4.2.2:
+    resolution: {integrity: sha512-uAh96tBW1SsD34VhhDmWuEmqbpfYc/B3j++5MC/6b3Cb8Ow7NJsvKFhg0eoGu2xXX+o9RkahkTK6sUdd8E7g5w==}
+    engines: {node: '>=14'}
     hasBin: true
     peerDependencies:
-      prettier: ^2.0.0
+      prettier: ^3.0.0
 
   progress@2.0.3:
     resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
@@ -7997,8 +7983,8 @@ snapshots:
 
   '@ampproject/remapping@2.3.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
 
   '@antfu/ni@25.0.0':
     dependencies:
@@ -8039,8 +8025,8 @@ snapshots:
     dependencies:
       '@babel/parser': 7.28.0
       '@babel/types': 7.28.2
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
   '@babel/helper-annotate-as-pure@7.27.3':
@@ -8802,16 +8788,16 @@ snapshots:
   '@esbuild/win32-x64@0.25.8':
     optional: true
 
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))':
+    dependencies:
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
+      eslint-visitor-keys: 3.4.3
+
   '@eslint-community/eslint-utils@4.9.1(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1))':
     dependencies:
       eslint: 9.26.0(hono@4.11.7)(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.9.1(eslint@9.26.0(jiti@1.21.7))':
-    dependencies:
-      eslint: 9.26.0(jiti@1.21.7)
-      eslint-visitor-keys: 3.4.3
-
   '@eslint-community/regexpp@4.12.1': {}
 
   '@eslint-community/regexpp@4.12.2': {}
@@ -8907,20 +8893,6 @@ snapshots:
 
   '@humanwhocodes/retry@0.4.3': {}
 
-  '@ianvs/prettier-plugin-sort-imports@3.7.2(prettier@2.8.8)':
-    dependencies:
-      '@babel/core': 7.28.0
-      '@babel/generator': 7.28.0
-      '@babel/parser': 7.28.0
-      '@babel/traverse': 7.28.0
-      '@babel/types': 7.28.2
-      javascript-natural-sort: 0.7.1
-      lodash.clone: 4.5.0
-      lodash.isequal: 4.5.0
-      prettier: 2.8.8
-    transitivePeerDependencies:
-      - supports-color
-
   '@ianvs/prettier-plugin-sort-imports@4.6.1(prettier@3.6.2)':
     dependencies:
       '@babel/generator': 7.28.0
@@ -9238,7 +9210,7 @@ snapshots:
       '@tybys/wasm-util': 0.10.0
     optional: true
 
-  '@next/env@16.1.4': {}
+  '@next/env@16.1.6': {}
 
   '@next/eslint-plugin-next@15.5.11':
     dependencies:
@@ -9248,28 +9220,28 @@ snapshots:
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@16.1.4':
+  '@next/swc-darwin-arm64@16.1.6':
     optional: true
 
-  '@next/swc-darwin-x64@16.1.4':
+  '@next/swc-darwin-x64@16.1.6':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.1.4':
+  '@next/swc-linux-arm64-gnu@16.1.6':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.1.4':
+  '@next/swc-linux-arm64-musl@16.1.6':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.1.4':
+  '@next/swc-linux-x64-gnu@16.1.6':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.1.4':
+  '@next/swc-linux-x64-musl@16.1.6':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.1.4':
+  '@next/swc-win32-arm64-msvc@16.1.6':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.1.4':
+  '@next/swc-win32-x64-msvc@16.1.6':
     optional: true
 
   '@noble/ciphers@1.3.0': {}
@@ -9340,6 +9312,8 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@pkgr/core@0.2.9': {}
+
   '@puppeteer/browsers@2.6.1':
     dependencies:
       debug: 4.4.3
@@ -10599,15 +10573,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)':
+  '@typescript-eslint/eslint-plugin@8.49.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
       '@typescript-eslint/scope-manager': 8.49.0
-      '@typescript-eslint/type-utils': 8.49.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.49.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/type-utils': 8.49.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.49.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
       '@typescript-eslint/visitor-keys': 8.49.0
-      eslint: 9.26.0(jiti@1.21.7)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
       ignore: 7.0.5
       natural-compare: 1.4.0
       ts-api-utils: 2.1.0(typescript@5.9.2)
@@ -10639,14 +10613,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)':
+  '@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
       '@typescript-eslint/types': 8.54.0
       '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.2)
       '@typescript-eslint/visitor-keys': 8.54.0
       debug: 4.4.3
-      eslint: 9.26.0(jiti@1.21.7)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
@@ -10735,13 +10709,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/type-utils@8.49.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)':
+  '@typescript-eslint/type-utils@8.49.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)':
     dependencies:
       '@typescript-eslint/types': 8.49.0
       '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.49.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.49.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
       debug: 4.4.3
-      eslint: 9.26.0(jiti@1.21.7)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
       ts-api-utils: 2.1.0(typescript@5.9.2)
       typescript: 5.9.2
     transitivePeerDependencies:
@@ -10828,13 +10802,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.49.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)':
+  '@typescript-eslint/utils@8.49.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.26.0(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
       '@typescript-eslint/scope-manager': 8.49.0
       '@typescript-eslint/types': 8.49.0
       '@typescript-eslint/typescript-estree': 8.49.0(typescript@5.9.2)
-      eslint: 9.26.0(jiti@1.21.7)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
       typescript: 5.9.2
     transitivePeerDependencies:
       - supports-color
@@ -10920,9 +10894,9 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@vercel/analytics@1.5.0(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)':
+  '@vercel/analytics@1.5.0(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)':
     optionalDependencies:
-      next: 16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
 
   '@vitest/expect@2.1.9':
@@ -10984,6 +10958,11 @@ snapshots:
 
   agent-base@7.1.4: {}
 
+  agentation@2.2.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    optionalDependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   ajv-formats@3.0.1(ajv@8.17.1):
     optionalDependencies:
       ajv: 8.17.1
@@ -11193,7 +11172,7 @@ snapshots:
 
   base64-js@1.5.1: {}
 
-  baseline-browser-mapping@2.8.4: {}
+  baseline-browser-mapping@2.10.0: {}
 
   basic-ftp@5.0.5: {}
 
@@ -11234,7 +11213,7 @@ snapshots:
 
   browserslist@4.26.2:
     dependencies:
-      baseline-browser-mapping: 2.8.4
+      baseline-browser-mapping: 2.10.0
       caniuse-lite: 1.0.30001759
       electron-to-chromium: 1.5.218
       node-releases: 2.0.21
@@ -12001,19 +11980,19 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-next@15.5.11(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2):
+  eslint-config-next@15.5.11(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2):
     dependencies:
       '@next/eslint-plugin-next': 15.5.11
       '@rushstack/eslint-patch': 1.12.0
-      '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2))(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
-      eslint: 9.26.0(jiti@1.21.7)
+      '@typescript-eslint/eslint-plugin': 8.49.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(jiti@1.21.7))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(jiti@1.21.7))
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.26.0(jiti@1.21.7))
-      eslint-plugin-react: 7.37.5(eslint@9.26.0(jiti@1.21.7))
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.26.0(jiti@1.21.7))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
+      eslint-plugin-react: 7.37.5(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
+      eslint-plugin-react-hooks: 5.2.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
     optionalDependencies:
       typescript: 5.9.2
     transitivePeerDependencies:
@@ -12041,14 +12020,14 @@ snapshots:
       - eslint-plugin-import-x
       - supports-color
 
-  eslint-config-prettier@8.10.2(eslint@9.26.0(jiti@1.21.7)):
+  eslint-config-prettier@8.10.2(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)):
     dependencies:
-      eslint: 9.26.0(jiti@1.21.7)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
 
-  eslint-config-turbo@1.13.4(eslint@9.26.0(jiti@1.21.7)):
+  eslint-config-turbo@1.13.4(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)):
     dependencies:
-      eslint: 9.26.0(jiti@1.21.7)
-      eslint-plugin-turbo: 1.13.4(eslint@9.26.0(jiti@1.21.7))
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
+      eslint-plugin-turbo: 1.13.4(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
 
   eslint-import-resolver-node@0.3.9:
     dependencies:
@@ -12058,6 +12037,21 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)):
+    dependencies:
+      '@nolyfill/is-core-module': 1.0.39
+      debug: 4.4.3
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
+      get-tsconfig: 4.10.1
+      is-bun-module: 2.0.0
+      stable-hash: 0.0.5
+      tinyglobby: 0.2.15
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
@@ -12073,21 +12067,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(jiti@1.21.7)):
-    dependencies:
-      '@nolyfill/is-core-module': 1.0.39
-      debug: 4.4.3
-      eslint: 9.26.0(jiti@1.21.7)
-      get-tsconfig: 4.10.1
-      is-bun-module: 2.0.0
-      stable-hash: 0.0.5
-      tinyglobby: 0.2.15
-      unrs-resolver: 1.11.1
-    optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(jiti@1.21.7))
-    transitivePeerDependencies:
-      - supports-color
-
   eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)))(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
@@ -12099,14 +12078,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(jiti@1.21.7)))(eslint@9.26.0(jiti@1.21.7)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)))(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
-      '@typescript-eslint/parser': 8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
-      eslint: 9.26.0(jiti@1.21.7)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(jiti@1.21.7))
+      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
     transitivePeerDependencies:
       - supports-color
 
@@ -12139,7 +12118,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(jiti@1.21.7)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-typescript@3.10.1)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -12148,9 +12127,9 @@ snapshots:
       array.prototype.flatmap: 1.3.3
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 9.26.0(jiti@1.21.7)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(jiti@1.21.7)))(eslint@9.26.0(jiti@1.21.7))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)))(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -12162,12 +12141,31 @@ snapshots:
       string.prototype.trimend: 1.0.9
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.54.0(eslint@9.26.0(jiti@1.21.7))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))(typescript@5.9.2)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
       - supports-color
 
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)):
+    dependencies:
+      aria-query: 5.3.2
+      array-includes: 3.1.9
+      array.prototype.flatmap: 1.3.3
+      ast-types-flow: 0.0.8
+      axe-core: 4.10.3
+      axobject-query: 4.1.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      language-tags: 1.0.9
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      safe-regex-test: 1.1.0
+      string.prototype.includes: 2.0.1
+
   eslint-plugin-jsx-a11y@6.10.2(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)):
     dependencies:
       aria-query: 5.3.2
@@ -12187,28 +12185,9 @@ snapshots:
       safe-regex-test: 1.1.0
       string.prototype.includes: 2.0.1
 
-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.26.0(jiti@1.21.7)):
+  eslint-plugin-react-hooks@5.2.0(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)):
     dependencies:
-      aria-query: 5.3.2
-      array-includes: 3.1.9
-      array.prototype.flatmap: 1.3.3
-      ast-types-flow: 0.0.8
-      axe-core: 4.10.3
-      axobject-query: 4.1.0
-      damerau-levenshtein: 1.0.8
-      emoji-regex: 9.2.2
-      eslint: 9.26.0(jiti@1.21.7)
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      language-tags: 1.0.9
-      minimatch: 3.1.2
-      object.fromentries: 2.0.8
-      safe-regex-test: 1.1.0
-      string.prototype.includes: 2.0.1
-
-  eslint-plugin-react-hooks@5.2.0(eslint@9.26.0(jiti@1.21.7)):
-    dependencies:
-      eslint: 9.26.0(jiti@1.21.7)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
 
   eslint-plugin-react-hooks@7.0.1(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)):
     dependencies:
@@ -12221,6 +12200,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-plugin-react@7.37.5(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)):
+    dependencies:
+      array-includes: 3.1.9
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.3
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.2.1
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.9
+      object.fromentries: 2.0.8
+      object.values: 1.2.1
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.12
+      string.prototype.repeat: 1.0.0
+
   eslint-plugin-react@7.37.5(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1)):
     dependencies:
       array-includes: 3.1.9
@@ -12243,38 +12244,16 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-react@7.37.5(eslint@9.26.0(jiti@1.21.7)):
-    dependencies:
-      array-includes: 3.1.9
-      array.prototype.findlast: 1.2.5
-      array.prototype.flatmap: 1.3.3
-      array.prototype.tosorted: 1.1.4
-      doctrine: 2.1.0
-      es-iterator-helpers: 1.2.1
-      eslint: 9.26.0(jiti@1.21.7)
-      estraverse: 5.3.0
-      hasown: 2.0.2
-      jsx-ast-utils: 3.3.5
-      minimatch: 3.1.2
-      object.entries: 1.1.9
-      object.fromentries: 2.0.8
-      object.values: 1.2.1
-      prop-types: 15.8.1
-      resolve: 2.0.0-next.5
-      semver: 6.3.1
-      string.prototype.matchall: 4.0.12
-      string.prototype.repeat: 1.0.0
-
   eslint-plugin-tailwindcss@3.13.1(tailwindcss@3.4.19(tsx@4.20.3)(yaml@2.8.1)):
     dependencies:
       fast-glob: 3.3.3
       postcss: 8.5.6
       tailwindcss: 3.4.19(tsx@4.20.3)(yaml@2.8.1)
 
-  eslint-plugin-turbo@1.13.4(eslint@9.26.0(jiti@1.21.7)):
+  eslint-plugin-turbo@1.13.4(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7)):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.26.0(jiti@1.21.7)
+      eslint: 9.26.0(hono@4.11.7)(jiti@1.21.7)
 
   eslint-scope@8.4.0:
     dependencies:
@@ -12285,6 +12264,52 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
+  eslint@9.26.0(hono@4.11.7)(jiti@1.21.7):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.26.0(hono@4.11.7)(jiti@1.21.7))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.20.1
+      '@eslint/config-helpers': 0.2.3
+      '@eslint/core': 0.13.0
+      '@eslint/eslintrc': 3.3.3
+      '@eslint/js': 9.26.0
+      '@eslint/plugin-kit': 0.2.8
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@modelcontextprotocol/sdk': 1.25.3(hono@4.11.7)(zod@3.25.76)
+      '@types/estree': 1.0.8
+      '@types/json-schema': 7.0.15
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+      zod: 3.25.76
+    optionalDependencies:
+      jiti: 1.21.7
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - hono
+      - supports-color
+
   eslint@9.26.0(hono@4.11.7)(jiti@2.6.1):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.26.0(hono@4.11.7)(jiti@2.6.1))
@@ -12331,51 +12356,6 @@ snapshots:
       - hono
       - supports-color
 
-  eslint@9.26.0(jiti@1.21.7):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.26.0(jiti@1.21.7))
-      '@eslint-community/regexpp': 4.12.2
-      '@eslint/config-array': 0.20.1
-      '@eslint/config-helpers': 0.2.3
-      '@eslint/core': 0.13.0
-      '@eslint/eslintrc': 3.3.3
-      '@eslint/js': 9.26.0
-      '@eslint/plugin-kit': 0.2.8
-      '@humanfs/node': 0.16.7
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@modelcontextprotocol/sdk': 1.26.0(zod@3.25.76)
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.6
-      debug: 4.4.3
-      escape-string-regexp: 4.0.0
-      eslint-scope: 8.4.0
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      esquery: 1.7.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.2
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.4
-      zod: 3.25.76
-    optionalDependencies:
-      jiti: 1.21.7
-    transitivePeerDependencies:
-      - '@cfworker/json-schema'
-      - supports-color
-
   espree@10.4.0:
     dependencies:
       acorn: 8.15.0
@@ -12457,18 +12437,6 @@ snapshots:
     dependencies:
       eventsource-parser: 3.0.6
 
-  execa@4.1.0:
-    dependencies:
-      cross-spawn: 7.0.6
-      get-stream: 5.2.0
-      human-signals: 1.1.1
-      is-stream: 2.0.1
-      merge-stream: 2.0.0
-      npm-run-path: 4.0.1
-      onetime: 5.1.2
-      signal-exit: 3.0.7
-      strip-final-newline: 2.0.0
-
   execa@5.1.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -12741,7 +12709,7 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
-  fumadocs-core@16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  fumadocs-core@16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
       '@formatjs/intl-localematcher': 0.6.2
       '@orama/orama': 3.1.16
@@ -12763,7 +12731,7 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.2
       lucide-react: 0.474.0(react@19.2.3)
-      next: 16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
@@ -12778,14 +12746,14 @@ snapshots:
       unist-util-visit: 5.0.0
       zod: 3.25.76
 
-  fumadocs-mdx@13.0.2(fumadocs-core@16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.1.12(@types/node@20.19.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.3)(yaml@2.8.1)):
+  fumadocs-mdx@13.0.2(fumadocs-core@16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(vite@7.1.12(@types/node@20.19.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.3)(yaml@2.8.1)):
     dependencies:
       '@mdx-js/mdx': 3.1.1
       '@standard-schema/spec': 1.1.0
       chokidar: 4.0.3
       esbuild: 0.25.11
       estree-util-value-to-estree: 3.5.0
-      fumadocs-core: 16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      fumadocs-core: 16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       js-yaml: 4.1.1
       lru-cache: 11.2.4
       mdast-util-to-markdown: 2.1.2
@@ -12799,13 +12767,13 @@ snapshots:
       unist-util-visit: 5.0.0
       zod: 4.3.6
     optionalDependencies:
-      next: 16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       react: 19.2.3
       vite: 7.1.12(@types/node@20.19.10)(jiti@2.6.1)(lightningcss@1.30.2)(tsx@4.20.3)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-ui@16.0.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18):
+  fumadocs-ui@16.0.5(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18):
     dependencies:
       '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
@@ -12818,7 +12786,7 @@ snapshots:
       '@radix-ui/react-slot': 1.2.3(@types/react@19.2.2)(react@19.2.3)
       '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       class-variance-authority: 0.7.1
-      fumadocs-core: 16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      fumadocs-core: 16.0.5(@types/react@19.2.2)(lucide-react@0.474.0(react@19.2.3))(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       lodash.merge: 4.6.2
       next-themes: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       postcss-selector-parser: 7.1.0
@@ -12829,7 +12797,7 @@ snapshots:
       tailwind-merge: 3.3.1
     optionalDependencies:
       '@types/react': 19.2.2
-      next: 16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       tailwindcss: 4.1.18
     transitivePeerDependencies:
       - '@mixedbread/sdk'
@@ -13159,8 +13127,6 @@ snapshots:
 
   human-id@4.1.1: {}
 
-  human-signals@1.1.1: {}
-
   human-signals@2.1.0: {}
 
   human-signals@4.3.1: {}
@@ -13423,8 +13389,6 @@ snapshots:
     dependencies:
       '@isaacs/cliui': 8.0.2
 
-  javascript-natural-sort@0.7.1: {}
-
   jiti@1.21.7: {}
 
   jiti@2.6.1: {}
@@ -13611,10 +13575,6 @@ snapshots:
 
   lodash.camelcase@4.3.0: {}
 
-  lodash.clone@4.5.0: {}
-
-  lodash.isequal@4.5.0: {}
-
   lodash.isplainobject@4.0.6: {}
 
   lodash.kebabcase@4.1.1: {}
@@ -14241,25 +14201,25 @@ snapshots:
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
 
-  next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@next/env': 16.1.4
+      '@next/env': 16.1.6
       '@swc/helpers': 0.5.15
-      baseline-browser-mapping: 2.8.4
+      baseline-browser-mapping: 2.10.0
       caniuse-lite: 1.0.30001759
       postcss: 8.4.31
       react: 19.2.3
       react-dom: 19.2.3(react@19.2.3)
       styled-jsx: 5.1.6(@babel/core@7.28.0)(react@19.2.3)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.1.4
-      '@next/swc-darwin-x64': 16.1.4
-      '@next/swc-linux-arm64-gnu': 16.1.4
-      '@next/swc-linux-arm64-musl': 16.1.4
-      '@next/swc-linux-x64-gnu': 16.1.4
-      '@next/swc-linux-x64-musl': 16.1.4
-      '@next/swc-win32-arm64-msvc': 16.1.4
-      '@next/swc-win32-x64-msvc': 16.1.4
+      '@next/swc-darwin-arm64': 16.1.6
+      '@next/swc-darwin-x64': 16.1.6
+      '@next/swc-linux-arm64-gnu': 16.1.6
+      '@next/swc-linux-arm64-musl': 16.1.6
+      '@next/swc-linux-x64-gnu': 16.1.6
+      '@next/swc-linux-x64-musl': 16.1.6
+      '@next/swc-win32-arm64-msvc': 16.1.6
+      '@next/swc-win32-x64-msvc': 16.1.6
       '@opentelemetry/api': 1.9.0
       sharp: 0.34.5
     transitivePeerDependencies:
@@ -14301,12 +14261,12 @@ snapshots:
 
   npm-to-yarn@3.0.1: {}
 
-  nuqs@2.7.2(next@16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3):
+  nuqs@2.7.2(next@16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3):
     dependencies:
       '@standard-schema/spec': 1.0.0
       react: 19.2.3
     optionalDependencies:
-      next: 16.1.4(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      next: 16.1.6(@babel/core@7.28.0)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
 
   object-assign@4.1.1: {}
 
@@ -14585,8 +14545,6 @@ snapshots:
 
   picomatch@2.3.1: {}
 
-  picomatch@3.0.1: {}
-
   picomatch@4.0.3: {}
 
   pify@2.3.0: {}
@@ -14670,7 +14628,7 @@ snapshots:
 
   prepend-http@2.0.0: {}
 
-  prettier-plugin-tailwindcss@0.6.14(@ianvs/prettier-plugin-sort-imports@4.6.1(prettier@3.6.2))(prettier@3.6.2):
+  prettier-plugin-tailwindcss@0.7.2(@ianvs/prettier-plugin-sort-imports@4.6.1(prettier@3.6.2))(prettier@3.6.2):
     dependencies:
       prettier: 3.6.2
     optionalDependencies:
@@ -14684,15 +14642,15 @@ snapshots:
     dependencies:
       parse-ms: 4.0.0
 
-  pretty-quick@3.3.1(prettier@2.8.8):
+  pretty-quick@4.2.2(prettier@3.6.2):
     dependencies:
-      execa: 4.1.0
-      find-up: 4.1.0
-      ignore: 5.3.2
+      '@pkgr/core': 0.2.9
+      ignore: 7.0.5
       mri: 1.2.0
       picocolors: 1.1.1
-      picomatch: 3.0.1
-      prettier: 2.8.8
+      picomatch: 4.0.3
+      prettier: 3.6.2
+      tinyexec: 0.3.2
       tslib: 2.8.1
 
   progress@2.0.3: {}
diff --git a/prettier.config.cjs b/prettier.config.cjs
index 69e23de8f2..4ba73bdd01 100644
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -5,6 +5,7 @@ module.exports = {
   singleQuote: false,
   tabWidth: 2,
   trailingComma: "es5",
+  printWidth: 80,
   importOrder: [
     "^(react/(.*)$)|^(react$)",
     "^(next/(.*)$)|^(next$)",
@@ -26,11 +27,11 @@ module.exports = {
     "",
     "^[./]",
   ],
-  importOrderSeparation: false,
-  importOrderSortSpecifiers: true,
-  importOrderBuiltinModulesToTop: true,
   importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-  importOrderMergeDuplicateImports: true,
-  importOrderCombineTypeAndValueImports: true,
-  plugins: ["@ianvs/prettier-plugin-sort-imports"],
+  plugins: [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss",
+  ],
+  tailwindStylesheet: "./apps/v4/styles/globals.css",
+  tailwindFunctions: ["cn", "cva"],
 }
diff --git a/skills/shadcn/SKILL.md b/skills/shadcn/SKILL.md
new file mode 100644
index 0000000000..022142ad53
--- /dev/null
+++ b/skills/shadcn/SKILL.md
@@ -0,0 +1,240 @@
+---
+name: shadcn
+description: Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
+user-invocable: false
+---
+
+# shadcn/ui
+
+A framework for building ui, components and design systems. Components are added as source code to the user's project via the CLI.
+
+> **IMPORTANT:** Run all CLI commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest` — based on the project's `packageManager`. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
+
+## Current Project Context
+
+```json
+!`npx shadcn@latest info --json 2>/dev/null || echo '{"error": "No shadcn project found. Run shadcn init first."}'`
+```
+
+The JSON above contains the project config and installed components. Use `npx shadcn@latest docs <component>` to get documentation and example URLs for any component.
+
+## Principles
+
+1. **Use existing components first.** Use `npx shadcn@latest search` to check registries before writing custom UI. Check community registries too.
+2. **Compose, don't reinvent.** Settings page = Tabs + Card + form controls. Dashboard = Sidebar + Card + Chart + Table.
+3. **Use built-in variants before custom styles.** `variant="outline"`, `size="sm"`, etc.
+4. **Use semantic colors.** `bg-primary`, `text-muted-foreground` — never raw values like `bg-blue-500`.
+
+## Critical Rules
+
+These rules are **always enforced**. Each links to a file with Incorrect/Correct code pairs.
+
+### Styling & Tailwind → [styling.md](./rules/styling.md)
+
+- **`className` for layout, not styling.** Never override component colors or typography.
+- **No `space-x-*` or `space-y-*`.** Use `flex` with `gap-*`. For vertical stacks, `flex flex-col gap-*`.
+- **Use `size-*` when width and height are equal.** `size-10` not `w-10 h-10`.
+- **Use `truncate` shorthand.** Not `overflow-hidden text-ellipsis whitespace-nowrap`.
+- **No manual `dark:` color overrides.** Use semantic tokens (`bg-background`, `text-muted-foreground`).
+- **Use `cn()` for conditional classes.** Don't write manual template literal ternaries.
+- **No manual `z-index` on overlay components.** Dialog, Sheet, Popover, etc. handle their own stacking.
+
+### Forms & Inputs → [forms.md](./rules/forms.md)
+
+- **Forms use `FieldGroup` + `Field`.** Never use raw `div` with `space-y-*` or `grid gap-*` for form layout.
+- **`InputGroup` uses `InputGroupInput`/`InputGroupTextarea`.** Never raw `Input`/`Textarea` inside `InputGroup`.
+- **Buttons inside inputs use `InputGroup` + `InputGroupAddon`.**
+- **Option sets (2–7 choices) use `ToggleGroup`.** Don't loop `Button` with manual active state.
+- **`FieldSet` + `FieldLegend` for grouping related checkboxes/radios.** Don't use a `div` with a heading.
+- **Field validation uses `data-invalid` + `aria-invalid`.** `data-invalid` on `Field`, `aria-invalid` on the control. For disabled: `data-disabled` on `Field`, `disabled` on the control.
+
+### Component Structure → [composition.md](./rules/composition.md)
+
+- **Items always inside their Group.** `SelectItem` → `SelectGroup`. `DropdownMenuItem` → `DropdownMenuGroup`. `CommandItem` → `CommandGroup`.
+- **Use `asChild` (radix) or `render` (base) for custom triggers.** Check `base` field from `npx shadcn@latest info`. → [base-vs-radix.md](./rules/base-vs-radix.md)
+- **Dialog, Sheet, and Drawer always need a Title.** `DialogTitle`, `SheetTitle`, `DrawerTitle` required for accessibility. Use `className="sr-only"` if visually hidden.
+- **Use full Card composition.** `CardHeader`/`CardTitle`/`CardDescription`/`CardContent`/`CardFooter`. Don't dump everything in `CardContent`.
+- **Button has no `isPending`/`isLoading`.** Compose with `Spinner` + `data-icon` + `disabled`.
+- **`TabsTrigger` must be inside `TabsList`.** Never render triggers directly in `Tabs`.
+- **`Avatar` always needs `AvatarFallback`.** For when the image fails to load.
+
+### Use Components, Not Custom Markup → [composition.md](./rules/composition.md)
+
+- **Use existing components before custom markup.** Check if a component exists before writing a styled `div`.
+- **Callouts use `Alert`.** Don't build custom styled divs.
+- **Empty states use `Empty`.** Don't build custom empty state markup.
+- **Toast via `sonner`.** Use `toast()` from `sonner`.
+- **Use `Separator`** instead of `<hr>` or `<div className="border-t">`.
+- **Use `Skeleton`** for loading placeholders. No custom `animate-pulse` divs.
+- **Use `Badge`** instead of custom styled spans.
+
+### Icons → [icons.md](./rules/icons.md)
+
+- **Icons in `Button` use `data-icon`.** `data-icon="inline-start"` or `data-icon="inline-end"` on the icon.
+- **No sizing classes on icons inside components.** Components handle icon sizing via CSS. No `size-4` or `w-4 h-4`.
+- **Pass icons as objects, not string keys.** `icon={CheckIcon}`, not a string lookup.
+
+### CLI
+
+- **Never decode or fetch preset codes manually.** Pass them directly to `npx shadcn@latest init --preset <code>`.
+
+## Key Patterns
+
+These are the most common patterns that differentiate correct shadcn/ui code. For edge cases, see the linked rule files above.
+
+```tsx
+// Form layout: FieldGroup + Field, not div + Label.
+<FieldGroup>
+  <Field>
+    <FieldLabel htmlFor="email">Email</FieldLabel>
+    <Input id="email" />
+  </Field>
+</FieldGroup>
+
+// Validation: data-invalid on Field, aria-invalid on the control.
+<Field data-invalid>
+  <FieldLabel>Email</FieldLabel>
+  <Input aria-invalid />
+  <FieldDescription>Invalid email.</FieldDescription>
+</Field>
+
+// Icons in buttons: data-icon, no sizing classes.
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+
+// Spacing: gap-*, not space-y-*.
+<div className="flex flex-col gap-4">  // correct
+<div className="space-y-4">           // wrong
+
+// Equal dimensions: size-*, not w-* h-*.
+<Avatar className="size-10">   // correct
+<Avatar className="w-10 h-10"> // wrong
+
+// Status colors: Badge variants or semantic tokens, not raw colors.
+<Badge variant="secondary">+20.1%</Badge>    // correct
+<span className="text-emerald-600">+20.1%</span> // wrong
+```
+
+## Component Selection
+
+| Need                       | Use                                                                                                 |
+| -------------------------- | --------------------------------------------------------------------------------------------------- |
+| Button/action              | `Button` with appropriate variant                                                                   |
+| Form inputs                | `Input`, `Select`, `Combobox`, `Switch`, `Checkbox`, `RadioGroup`, `Textarea`, `InputOTP`, `Slider` |
+| Toggle between 2–5 options | `ToggleGroup` + `ToggleGroupItem`                                                                   |
+| Data display               | `Table`, `Card`, `Badge`, `Avatar`                                                                  |
+| Navigation                 | `Sidebar`, `NavigationMenu`, `Breadcrumb`, `Tabs`, `Pagination`                                     |
+| Overlays                   | `Dialog` (modal), `Sheet` (side panel), `Drawer` (bottom sheet), `AlertDialog` (confirmation)       |
+| Feedback                   | `sonner` (toast), `Alert`, `Progress`, `Skeleton`, `Spinner`                                        |
+| Command palette            | `Command` inside `Dialog`                                                                           |
+| Charts                     | `Chart` (wraps Recharts)                                                                            |
+| Layout                     | `Card`, `Separator`, `Resizable`, `ScrollArea`, `Accordion`, `Collapsible`                          |
+| Empty states               | `Empty`                                                                                             |
+| Menus                      | `DropdownMenu`, `ContextMenu`, `Menubar`                                                            |
+| Tooltips/info              | `Tooltip`, `HoverCard`, `Popover`                                                                   |
+
+## Key Fields
+
+The injected project context contains these key fields:
+
+- **`aliases`** → use the actual alias prefix for imports (e.g. `@/`, `~/`), never hardcode.
+- **`isRSC`** → when `true`, components using `useState`, `useEffect`, event handlers, or browser APIs need `"use client"` at the top of the file. Always reference this field when advising on the directive.
+- **`tailwindVersion`** → `"v4"` uses `@theme inline` blocks; `"v3"` uses `tailwind.config.js`.
+- **`tailwindCssFile`** → the global CSS file where custom CSS variables are defined. Always edit this file, never create a new one.
+- **`style`** → component visual treatment (e.g. `nova`, `vega`).
+- **`base`** → primitive library (`radix` or `base`). Affects component APIs and available props.
+- **`iconLibrary`** → determines icon imports. Use `lucide-react` for `lucide`, `@tabler/icons-react` for `tabler`, etc. Never assume `lucide-react`.
+- **`resolvedPaths`** → exact file-system destinations for components, utils, hooks, etc.
+- **`framework`** → routing and file conventions (e.g. Next.js App Router vs Vite SPA).
+- **`packageManager`** → use this for any non-shadcn dependency installs (e.g. `pnpm add date-fns` vs `npm install date-fns`).
+
+See [cli.md — `info` command](./cli.md) for the full field reference.
+
+## Component Docs, Examples, and Usage
+
+Run `npx shadcn@latest docs <component>` to get the URLs for a component's documentation, examples, and API reference. Fetch these URLs to get the actual content.
+
+```bash
+npx shadcn@latest docs button dialog select
+```
+
+**When creating, fixing, debugging, or using a component, always run `npx shadcn@latest docs` and fetch the URLs first.** This ensures you're working with the correct API and usage patterns rather than guessing.
+
+## Workflow
+
+1. **Get project context** — already injected above. Run `npx shadcn@latest info` again if you need to refresh.
+2. **Check installed components first** — before running `add`, always check the `components` list from project context or list the `resolvedPaths.ui` directory. Don't import components that haven't been added, and don't re-add ones already installed.
+3. **Find components** — `npx shadcn@latest search`.
+4. **Get docs and examples** — run `npx shadcn@latest docs <component>` to get URLs, then fetch them. Use `npx shadcn@latest view` to browse registry items you haven't installed. To preview changes to installed components, use `npx shadcn@latest add --diff`.
+5. **Install or update** — `npx shadcn@latest add`. When updating existing components, use `--dry-run` and `--diff` to preview changes first (see [Updating Components](#updating-components) below).
+6. **Fix imports in third-party components** — After adding components from community registries (e.g. `@bundui`, `@magicui`), check the added non-UI files for hardcoded import paths like `@/components/ui/...`. These won't match the project's actual aliases. Use `npx shadcn@latest info` to get the correct `ui` alias (e.g. `@workspace/ui/components`) and rewrite the imports accordingly. The CLI rewrites imports for its own UI files, but third-party registry components may use default paths that don't match the project.
+7. **Review added components** — After adding a component or block from any registry, **always read the added files and verify they are correct**. Check for missing sub-components (e.g. `SelectItem` without `SelectGroup`), missing imports, incorrect composition, or violations of the [Critical Rules](#critical-rules). Also replace any icon imports with the project's `iconLibrary` from the project context (e.g. if the registry item uses `lucide-react` but the project uses `hugeicons`, swap the imports and icon names accordingly). Fix all issues before moving on.
+8. **Registry must be explicit** — When the user asks to add a block or component, **do not guess the registry**. If no registry is specified (e.g. user says "add a login block" without specifying `@shadcn`, `@tailark`, etc.), ask which registry to use. Never default to a registry on behalf of the user.
+9. **Switching presets** — Ask the user first: **reinstall**, **merge**, or **skip**?
+   - **Reinstall**: `npx shadcn@latest init --preset <code> --force --reinstall`. Overwrites all components.
+   - **Merge**: `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to list installed components, then for each installed component use `--dry-run` and `--diff` to [smart merge](#updating-components) it individually.
+   - **Skip**: `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS, leaves components as-is.
+
+## Updating Components
+
+When the user asks to update a component from upstream while keeping their local changes, use `--dry-run` and `--diff` to intelligently merge. **NEVER fetch raw files from GitHub manually — always use the CLI.**
+
+1. Run `npx shadcn@latest add <component> --dry-run` to see all files that would be affected.
+2. For each file, run `npx shadcn@latest add <component> --diff <file>` to see what changed upstream vs local.
+3. Decide per file based on the diff:
+   - No local changes → safe to overwrite.
+   - Has local changes → read the local file, analyze the diff, and apply upstream updates while preserving local modifications.
+   - User says "just update everything" → use `--overwrite`, but confirm first.
+4. **Never use `--overwrite` without the user's explicit approval.**
+
+## Quick Reference
+
+```bash
+# Create a new project.
+npx shadcn@latest init --name my-app --preset base-nova
+npx shadcn@latest init --name my-app --preset a2r6bw --template vite
+
+# Create a monorepo project.
+npx shadcn@latest init --name my-app --preset base-nova --monorepo
+npx shadcn@latest init --name my-app --preset base-nova --template next --monorepo
+
+# Initialize existing project.
+npx shadcn@latest init --preset base-nova
+npx shadcn@latest init --defaults  # shortcut: --template=next --preset=base-nova
+
+# Add components.
+npx shadcn@latest add button card dialog
+npx shadcn@latest add @magicui/shimmer-button
+npx shadcn@latest add --all
+
+# Preview changes before adding/updating.
+npx shadcn@latest add button --dry-run
+npx shadcn@latest add button --diff button.tsx
+npx shadcn@latest add @acme/form --view button.tsx
+
+# Search registries.
+npx shadcn@latest search @shadcn -q "sidebar"
+npx shadcn@latest search @tailark -q "stats"
+
+# Get component docs and example URLs.
+npx shadcn@latest docs button dialog select
+
+# View registry item details (for items not yet installed).
+npx shadcn@latest view @shadcn/button
+```
+
+**Named presets:** `base-nova`, `radix-nova`
+**Templates:** `next`, `vite`, `start`, `react-router`, `astro` (all support `--monorepo`) and `laravel` (not supported for monorepo)
+**Preset codes:** Base62 strings starting with `a` (e.g. `a2r6bw`), from [ui.shadcn.com](https://ui.shadcn.com).
+
+## Detailed References
+
+- [rules/forms.md](./rules/forms.md) — FieldGroup, Field, InputGroup, ToggleGroup, FieldSet, validation states
+- [rules/composition.md](./rules/composition.md) — Groups, overlays, Card, Tabs, Avatar, Alert, Empty, Toast, Separator, Skeleton, Badge, Button loading
+- [rules/icons.md](./rules/icons.md) — data-icon, icon sizing, passing icons as objects
+- [rules/styling.md](./rules/styling.md) — Semantic colors, variants, className, spacing, size, truncate, dark mode, cn(), z-index
+- [rules/base-vs-radix.md](./rules/base-vs-radix.md) — asChild vs render, Select, ToggleGroup, Slider, Accordion
+- [cli.md](./cli.md) — Commands, flags, presets, templates
+- [customization.md](./customization.md) — Theming, CSS variables, extending components
diff --git a/skills/shadcn/agents/openai.yml b/skills/shadcn/agents/openai.yml
new file mode 100644
index 0000000000..ab636da86b
--- /dev/null
+++ b/skills/shadcn/agents/openai.yml
@@ -0,0 +1,5 @@
+interface:
+  display_name: "shadcn/ui"
+  short_description: "Manages shadcn/ui components — adding, searching, fixing, debugging, styling, and composing UI."
+  icon_small: "./assets/shadcn-small.png"
+  icon_large: "./assets/shadcn.png"
diff --git a/skills/shadcn/assets/shadcn-small.png b/skills/shadcn/assets/shadcn-small.png
new file mode 100644
index 0000000000..547154b97f
Binary files /dev/null and b/skills/shadcn/assets/shadcn-small.png differ
diff --git a/skills/shadcn/assets/shadcn.png b/skills/shadcn/assets/shadcn.png
new file mode 100644
index 0000000000..b7b6814acc
Binary files /dev/null and b/skills/shadcn/assets/shadcn.png differ
diff --git a/skills/shadcn/cli.md b/skills/shadcn/cli.md
new file mode 100644
index 0000000000..32124036dd
--- /dev/null
+++ b/skills/shadcn/cli.md
@@ -0,0 +1,255 @@
+# shadcn CLI Reference
+
+Configuration is read from `components.json`.
+
+> **IMPORTANT:** Always run commands using the project's package runner: `npx shadcn@latest`, `pnpm dlx shadcn@latest`, or `bunx --bun shadcn@latest`. Check `packageManager` from project context to choose the right one. Examples below use `npx shadcn@latest` but substitute the correct runner for the project.
+
+> **IMPORTANT:** Only use the flags documented below. Do not invent or guess flags — if a flag isn't listed here, it doesn't exist. The CLI auto-detects the package manager from the project's lockfile; there is no `--package-manager` flag.
+
+## Contents
+
+- Commands: init, add (dry-run, smart merge), search, view, docs, info, build
+- Templates: next, vite, start, react-router, astro
+- Presets: named, code, URL formats and fields
+- Switching presets
+
+---
+
+## Commands
+
+### `init` — Initialize or create a project
+
+```bash
+npx shadcn@latest init [components...] [options]
+```
+
+Initializes shadcn/ui in an existing project or creates a new project (when `--name` is provided). Optionally installs components in the same step.
+
+| Flag                    | Short | Description                                               | Default |
+| ----------------------- | ----- | --------------------------------------------------------- | ------- |
+| `--template <template>` | `-t`  | Template (next, start, vite, next-monorepo, react-router) | —       |
+| `--preset [name]`       | `-p`  | Preset configuration (named, code, or URL)                | —       |
+| `--yes`                 | `-y`  | Skip confirmation prompt                                  | `true`  |
+| `--defaults`            | `-d`  | Use defaults (`--template=next --preset=base-nova`)       | `false` |
+| `--force`               | `-f`  | Force overwrite existing configuration                    | `false` |
+| `--cwd <cwd>`           | `-c`  | Working directory                                         | current |
+| `--name <name>`         | `-n`  | Name for new project                                      | —       |
+| `--silent`              | `-s`  | Mute output                                               | `false` |
+| `--rtl`                 |       | Enable RTL support                                        | —       |
+| `--reinstall`           |       | Re-install existing UI components                         | `false` |
+| `--monorepo`            |       | Scaffold a monorepo project                               | —       |
+| `--no-monorepo`         |       | Skip the monorepo prompt                                  | —       |
+
+`npx shadcn@latest create` is an alias for `npx shadcn@latest init`.
+
+### `add` — Add components
+
+> **IMPORTANT:** To compare local components against upstream or to preview changes, ALWAYS use `npx shadcn@latest add <component> --dry-run`, `--diff`, or `--view`. NEVER fetch raw files from GitHub or other sources manually. The CLI handles registry resolution, file paths, and CSS diffing automatically.
+
+```bash
+npx shadcn@latest add [components...] [options]
+```
+
+Accepts component names, registry-prefixed names (`@magicui/shimmer-button`), URLs, or local paths.
+
+| Flag            | Short | Description                                                                                                          | Default |
+| --------------- | ----- | -------------------------------------------------------------------------------------------------------------------- | ------- |
+| `--yes`         | `-y`  | Skip confirmation prompt                                                                                             | `false` |
+| `--overwrite`   | `-o`  | Overwrite existing files                                                                                             | `false` |
+| `--cwd <cwd>`   | `-c`  | Working directory                                                                                                    | current |
+| `--all`         | `-a`  | Add all available components                                                                                         | `false` |
+| `--path <path>` | `-p`  | Target path for the component                                                                                        | —       |
+| `--silent`      | `-s`  | Mute output                                                                                                          | `false` |
+| `--dry-run`     |       | Preview all changes without writing files                                                                            | `false` |
+| `--diff [path]` |       | Show diffs. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`)         | —       |
+| `--view [path]` |       | Show file contents. Without a path, shows the first 5 files. With a path, shows that file only (implies `--dry-run`) | —       |
+
+#### Dry-Run Mode
+
+Use `--dry-run` to preview what `add` would do without writing any files. `--diff` and `--view` both imply `--dry-run`.
+
+```bash
+# Preview all changes.
+npx shadcn@latest add button --dry-run
+
+# Show diffs for all files (top 5).
+npx shadcn@latest add button --diff
+
+# Show the diff for a specific file.
+npx shadcn@latest add button --diff button.tsx
+
+# Show contents for all files (top 5).
+npx shadcn@latest add button --view
+
+# Show the full content of a specific file.
+npx shadcn@latest add button --view button.tsx
+
+# Works with URLs too.
+npx shadcn@latest add https://api.npoint.io/abc123 --dry-run
+
+# CSS diffs.
+npx shadcn@latest add button --diff globals.css
+```
+
+**When to use dry-run:**
+
+- When the user asks "what files will this add?" or "what will this change?" — use `--dry-run`.
+- Before overwriting existing components — use `--diff` to preview the changes first.
+- When the user wants to inspect component source code without installing — use `--view`.
+- When checking what CSS changes would be made to `globals.css` — use `--diff globals.css`.
+- When the user asks to review or audit third-party registry code before installing — use `--view` to inspect the source.
+
+> **`npx shadcn@latest add --dry-run` vs `npx shadcn@latest view`:** Prefer `npx shadcn@latest add --dry-run/--diff/--view` over `npx shadcn@latest view` when the user wants to preview changes to their project. `npx shadcn@latest view` only shows raw registry metadata. `npx shadcn@latest add --dry-run` shows exactly what would happen in the user's project: resolved file paths, diffs against existing files, and CSS updates. Use `npx shadcn@latest view` only when the user wants to browse registry info without a project context.
+
+#### Smart Merge from Upstream
+
+See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full workflow.
+
+### `search` — Search registries
+
+```bash
+npx shadcn@latest search <registries...> [options]
+```
+
+Fuzzy search across registries. Also aliased as `npx shadcn@latest list`. Without `-q`, lists all items.
+
+| Flag                | Short | Description            | Default |
+| ------------------- | ----- | ---------------------- | ------- |
+| `--query <query>`   | `-q`  | Search query           | —       |
+| `--limit <number>`  | `-l`  | Max items per registry | `100`   |
+| `--offset <number>` | `-o`  | Items to skip          | `0`     |
+| `--cwd <cwd>`       | `-c`  | Working directory      | current |
+
+### `view` — View item details
+
+```bash
+npx shadcn@latest view <items...> [options]
+```
+
+Displays item info including file contents. Example: `npx shadcn@latest view @shadcn/button`.
+
+### `docs` — Get component documentation URLs
+
+```bash
+npx shadcn@latest docs <components...> [options]
+```
+
+Outputs resolved URLs for component documentation, examples, and API references. Accepts one or more component names. Fetch the URLs to get the actual content.
+
+Example output for `npx shadcn@latest docs input button`:
+
+```
+base  radix
+
+input
+  docs      https://ui.shadcn.com/docs/components/radix/input
+  examples  https://raw.githubusercontent.com/.../examples/input-example.tsx
+
+button
+  docs      https://ui.shadcn.com/docs/components/radix/button
+  examples  https://raw.githubusercontent.com/.../examples/button-example.tsx
+```
+
+Some components include an `api` link to the underlying library (e.g. `cmdk` for the command component).
+
+### `diff` — Check for updates
+
+Do not use this command. Use `npx shadcn@latest add --diff` instead.
+
+### `info` — Project information
+
+```bash
+npx shadcn@latest info [options]
+```
+
+Displays project info and `components.json` configuration. Run this first to discover the project's framework, aliases, Tailwind version, and resolved paths.
+
+| Flag          | Short | Description       | Default |
+| ------------- | ----- | ----------------- | ------- |
+| `--cwd <cwd>` | `-c`  | Working directory | current |
+
+**Project Info fields:**
+
+| Field                | Type      | Meaning                                                            |
+| -------------------- | --------- | ------------------------------------------------------------------ |
+| `framework`          | `string`  | Detected framework (`next`, `vite`, `react-router`, `start`, etc.) |
+| `frameworkVersion`   | `string`  | Framework version (e.g. `15.2.4`)                                  |
+| `isSrcDir`           | `boolean` | Whether the project uses a `src/` directory                        |
+| `isRSC`              | `boolean` | Whether React Server Components are enabled                        |
+| `isTsx`              | `boolean` | Whether the project uses TypeScript                                |
+| `tailwindVersion`    | `string`  | `"v3"` or `"v4"`                                                   |
+| `tailwindConfigFile` | `string`  | Path to the Tailwind config file                                   |
+| `tailwindCssFile`    | `string`  | Path to the global CSS file                                        |
+| `aliasPrefix`        | `string`  | Import alias prefix (e.g. `@`, `~`, `@/`)                          |
+| `packageManager`     | `string`  | Detected package manager (`npm`, `pnpm`, `yarn`, `bun`)            |
+
+**Components.json fields:**
+
+| Field                | Type      | Meaning                                                                                    |
+| -------------------- | --------- | ------------------------------------------------------------------------------------------ |
+| `base`               | `string`  | Primitive library (`radix` or `base`) — determines component APIs and available props      |
+| `style`              | `string`  | Visual style (e.g. `nova`, `vega`)                                                         |
+| `rsc`                | `boolean` | RSC flag from config                                                                       |
+| `tsx`                | `boolean` | TypeScript flag                                                                            |
+| `tailwind.config`    | `string`  | Tailwind config path                                                                       |
+| `tailwind.css`       | `string`  | Global CSS path — this is where custom CSS variables go                                    |
+| `iconLibrary`        | `string`  | Icon library — determines icon import package (e.g. `lucide-react`, `@tabler/icons-react`) |
+| `aliases.components` | `string`  | Component import alias (e.g. `@/components`)                                               |
+| `aliases.utils`      | `string`  | Utils import alias (e.g. `@/lib/utils`)                                                    |
+| `aliases.ui`         | `string`  | UI component alias (e.g. `@/components/ui`)                                                |
+| `aliases.lib`        | `string`  | Lib alias (e.g. `@/lib`)                                                                   |
+| `aliases.hooks`      | `string`  | Hooks alias (e.g. `@/hooks`)                                                               |
+| `resolvedPaths`      | `object`  | Absolute file-system paths for each alias                                                  |
+| `registries`         | `object`  | Configured custom registries                                                               |
+
+**Links fields:**
+
+The `info` output includes a **Links** section with templated URLs for component docs, source, and examples. For resolved URLs, use `npx shadcn@latest docs <component>` instead.
+
+### `build` — Build a custom registry
+
+```bash
+npx shadcn@latest build [registry] [options]
+```
+
+Builds `registry.json` into individual JSON files for distribution. Default input: `./registry.json`, default output: `./public/r`.
+
+| Flag              | Short | Description       | Default      |
+| ----------------- | ----- | ----------------- | ------------ |
+| `--output <path>` | `-o`  | Output directory  | `./public/r` |
+| `--cwd <cwd>`     | `-c`  | Working directory | current      |
+
+---
+
+## Templates
+
+| Value          | Framework      | Monorepo support |
+| -------------- | -------------- | ---------------- |
+| `next`         | Next.js        | Yes              |
+| `vite`         | Vite           | Yes              |
+| `start`        | TanStack Start | Yes              |
+| `react-router` | React Router   | Yes              |
+| `astro`        | Astro          | Yes              |
+| `laravel`      | Laravel        | No               |
+
+All templates support monorepo scaffolding via the `--monorepo` flag. When passed, the CLI uses a monorepo-specific template directory (e.g. `next-monorepo`, `vite-monorepo`). When neither `--monorepo` nor `--no-monorepo` is passed, the CLI prompts interactively. Laravel does not support monorepo scaffolding.
+
+---
+
+## Presets
+
+Three ways to specify a preset via `--preset`:
+
+1. **Named:** `--preset base-nova` or `--preset radix-nova`
+2. **Code:** `--preset a2r6bw` (base62 string, starts with lowercase `a`)
+3. **URL:** `--preset "https://ui.shadcn.com/init?base=radix&style=nova&..."`
+
+> **IMPORTANT:** Never try to decode, fetch, or resolve preset codes manually. Preset codes are opaque — pass them directly to `npx shadcn@latest init --preset <code>` and let the CLI handle resolution.
+
+## Switching Presets
+
+Ask the user first: **reinstall**, **merge**, or **skip** existing components?
+
+- **Re-install** → `npx shadcn@latest init --preset <code> --force --reinstall`. Overwrites all component files with the new preset styles. Use when the user hasn't customized components.
+- **Merge** → `npx shadcn@latest init --preset <code> --force --no-reinstall`, then run `npx shadcn@latest info` to get the list of installed components and use the [smart merge workflow](./SKILL.md#updating-components) to update them one by one, preserving local changes. Use when the user has customized components.
+- **Skip** → `npx shadcn@latest init --preset <code> --force --no-reinstall`. Only updates config and CSS variables, leaves existing components as-is.
diff --git a/skills/shadcn/customization.md b/skills/shadcn/customization.md
new file mode 100644
index 0000000000..6e686ab0bb
--- /dev/null
+++ b/skills/shadcn/customization.md
@@ -0,0 +1,202 @@
+# Customization & Theming
+
+Components reference semantic CSS variable tokens. Change the variables to change every component.
+
+## Contents
+
+- How it works (CSS variables → Tailwind utilities → components)
+- Color variables and OKLCH format
+- Dark mode setup
+- Changing the theme (presets, CSS variables)
+- Adding custom colors (Tailwind v3 and v4)
+- Border radius
+- Customizing components (variants, className, wrappers)
+- Checking for updates
+
+---
+
+## How It Works
+
+1. CSS variables defined in `:root` (light) and `.dark` (dark mode).
+2. Tailwind maps them to utilities: `bg-primary`, `text-muted-foreground`, etc.
+3. Components use these utilities — changing a variable changes all components that reference it.
+
+---
+
+## Color Variables
+
+Every color follows the `name` / `name-foreground` convention. The base variable is for backgrounds, `-foreground` is for text/icons on that background.
+
+| Variable                                     | Purpose                          |
+| -------------------------------------------- | -------------------------------- |
+| `--background` / `--foreground`              | Page background and default text |
+| `--card` / `--card-foreground`               | Card surfaces                    |
+| `--primary` / `--primary-foreground`         | Primary buttons and actions      |
+| `--secondary` / `--secondary-foreground`     | Secondary actions                |
+| `--muted` / `--muted-foreground`             | Muted/disabled states            |
+| `--accent` / `--accent-foreground`           | Hover and accent states          |
+| `--destructive` / `--destructive-foreground` | Error and destructive actions    |
+| `--border`                                   | Default border color             |
+| `--input`                                    | Form input borders               |
+| `--ring`                                     | Focus ring color                 |
+| `--chart-1` through `--chart-5`              | Chart/data visualization         |
+| `--sidebar-*`                                | Sidebar-specific colors          |
+| `--surface` / `--surface-foreground`         | Secondary surface                |
+
+Colors use OKLCH: `--primary: oklch(0.205 0 0)` where values are lightness (0–1), chroma (0 = gray), and hue (0–360).
+
+---
+
+## Dark Mode
+
+Class-based toggle via `.dark` on the root element. In Next.js, use `next-themes`:
+
+```tsx
+import { ThemeProvider } from "next-themes"
+
+<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+  {children}
+</ThemeProvider>
+```
+
+---
+
+## Changing the Theme
+
+```bash
+# Apply a preset code from ui.shadcn.com.
+npx shadcn@latest init --preset a2r6bw --force
+
+# Switch to a named preset.
+npx shadcn@latest init --preset radix-nova --force
+npx shadcn@latest init --reinstall  # update existing components to match
+
+# Use a custom theme URL.
+npx shadcn@latest init --preset "https://ui.shadcn.com/init?base=radix&style=nova&theme=blue&..." --force
+```
+
+Or edit CSS variables directly in `globals.css`.
+
+---
+
+## Adding Custom Colors
+
+Add variables to the file at `tailwindCssFile` from `npx shadcn@latest info` (typically `globals.css`). Never create a new CSS file for this.
+
+```css
+/* 1. Define in the global CSS file. */
+:root {
+  --warning: oklch(0.84 0.16 84);
+  --warning-foreground: oklch(0.28 0.07 46);
+}
+.dark {
+  --warning: oklch(0.41 0.11 46);
+  --warning-foreground: oklch(0.99 0.02 95);
+}
+```
+
+```css
+/* 2a. Register with Tailwind v4 (@theme inline). */
+@theme inline {
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+}
+```
+
+When `tailwindVersion` is `"v3"` (check via `npx shadcn@latest info`), register in `tailwind.config.js` instead:
+
+```js
+// 2b. Register with Tailwind v3 (tailwind.config.js).
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        warning: "oklch(var(--warning) / <alpha-value>)",
+        "warning-foreground":
+          "oklch(var(--warning-foreground) / <alpha-value>)",
+      },
+    },
+  },
+}
+```
+
+```tsx
+// 3. Use in components.
+<div className="bg-warning text-warning-foreground">Warning</div>
+```
+
+---
+
+## Border Radius
+
+`--radius` controls border radius globally. Components derive values from it (`rounded-lg` = `var(--radius)`, `rounded-md` = `calc(var(--radius) - 2px)`).
+
+---
+
+## Customizing Components
+
+See also: [rules/styling.md](./rules/styling.md) for Incorrect/Correct examples.
+
+Prefer these approaches in order:
+
+### 1. Built-in variants
+
+```tsx
+<Button variant="outline" size="sm">Click</Button>
+```
+
+### 2. Tailwind classes via `className`
+
+```tsx
+<Card className="max-w-md mx-auto">...</Card>
+```
+
+### 3. Add a new variant
+
+Edit the component source to add a variant via `cva`:
+
+```tsx
+// components/ui/button.tsx
+warning: "bg-warning text-warning-foreground hover:bg-warning/90",
+```
+
+### 4. Wrapper components
+
+Compose shadcn/ui primitives into higher-level components:
+
+```tsx
+export function ConfirmDialog({ title, description, onConfirm, children }) {
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={onConfirm}>Confirm</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
+```
+
+---
+
+## Checking for Updates
+
+```bash
+npx shadcn@latest add button --diff
+```
+
+To preview exactly what would change before updating, use `--dry-run` and `--diff`:
+
+```bash
+npx shadcn@latest add button --dry-run        # see all affected files
+npx shadcn@latest add button --diff button.tsx # see the diff for a specific file
+```
+
+See [Updating Components in SKILL.md](./SKILL.md#updating-components) for the full smart merge workflow.
diff --git a/skills/shadcn/evals/evals.json b/skills/shadcn/evals/evals.json
new file mode 100644
index 0000000000..0df77e4b9b
--- /dev/null
+++ b/skills/shadcn/evals/evals.json
@@ -0,0 +1,47 @@
+{
+  "skill_name": "shadcn",
+  "evals": [
+    {
+      "id": 1,
+      "prompt": "I'm building a Next.js app with shadcn/ui (base-nova preset, lucide icons). Create a settings form component with fields for: full name, email address, and notification preferences (email, SMS, push notifications as toggle options). Add validation states for required fields.",
+      "expected_output": "A React component using FieldGroup, Field, ToggleGroup, data-invalid/aria-invalid validation, gap-* spacing, and semantic colors.",
+      "files": [],
+      "expectations": [
+        "Uses FieldGroup and Field components for form layout instead of raw div with space-y",
+        "Uses Switch for independent on/off notification toggles (not looping Button with manual active state)",
+        "Uses data-invalid on Field and aria-invalid on the input control for validation states",
+        "Uses gap-* (e.g. gap-4, gap-6) instead of space-y-* or space-x-* for spacing",
+        "Uses semantic color tokens (e.g. bg-background, text-muted-foreground, text-destructive) instead of raw colors like bg-red-500",
+        "No manual dark: color overrides"
+      ]
+    },
+    {
+      "id": 2,
+      "prompt": "Create a dialog component for editing a user profile. It should have the user's avatar at the top, input fields for name and bio, and Save/Cancel buttons with appropriate icons. Using shadcn/ui with radix-nova preset and tabler icons.",
+      "expected_output": "A React component with DialogTitle, Avatar+AvatarFallback, data-icon on icon buttons, no icon sizing classes, tabler icon imports.",
+      "files": [],
+      "expectations": [
+        "Includes DialogTitle for accessibility (visible or with sr-only class)",
+        "Avatar component includes AvatarFallback",
+        "Icons on buttons use the data-icon attribute (data-icon=\"inline-start\" or data-icon=\"inline-end\")",
+        "No sizing classes on icons inside components (no size-4, w-4, h-4, etc.)",
+        "Uses tabler icons (@tabler/icons-react) instead of lucide-react",
+        "Uses asChild for custom triggers (radix preset)"
+      ]
+    },
+    {
+      "id": 3,
+      "prompt": "Create a dashboard component that shows 4 stat cards in a grid. Each card has a title, large number, percentage change badge, and a loading skeleton state. Using shadcn/ui with base-nova preset and lucide icons.",
+      "expected_output": "A React component with full Card composition, Skeleton for loading, Badge for changes, semantic colors, gap-* spacing.",
+      "files": [],
+      "expectations": [
+        "Uses full Card composition with CardHeader, CardTitle, CardContent (not dumping everything into CardContent)",
+        "Uses Skeleton component for loading placeholders instead of custom animate-pulse divs",
+        "Uses Badge component for percentage change instead of custom styled spans",
+        "Uses semantic color tokens instead of raw color values like bg-green-500 or text-red-600",
+        "Uses gap-* instead of space-y-* or space-x-* for spacing",
+        "Uses size-* when width and height are equal instead of separate w-* h-*"
+      ]
+    }
+  ]
+}
diff --git a/skills/shadcn/mcp.md b/skills/shadcn/mcp.md
new file mode 100644
index 0000000000..15b50e91ec
--- /dev/null
+++ b/skills/shadcn/mcp.md
@@ -0,0 +1,94 @@
+# shadcn MCP Server
+
+The CLI includes an MCP server that lets AI assistants search, browse, view, and install components from registries.
+
+---
+
+## Setup
+
+```bash
+shadcn mcp        # start the MCP server (stdio)
+shadcn mcp init   # write config for your editor
+```
+
+Editor config files:
+
+| Editor | Config file |
+|--------|------------|
+| Claude Code | `.mcp.json` |
+| Cursor | `.cursor/mcp.json` |
+| VS Code | `.vscode/mcp.json` |
+| OpenCode | `opencode.json` |
+| Codex | `~/.codex/config.toml` (manual) |
+
+---
+
+## Tools
+
+> **Tip:** MCP tools handle registry operations (search, view, install). For project configuration (aliases, framework, Tailwind version), use `npx shadcn@latest info` — there is no MCP equivalent.
+
+### `shadcn:get_project_registries`
+
+Returns registry names from `components.json`. Errors if no `components.json` exists.
+
+**Input:** none
+
+### `shadcn:list_items_in_registries`
+
+Lists all items from one or more registries.
+
+**Input:** `registries` (string[]), `limit` (number, optional), `offset` (number, optional)
+
+### `shadcn:search_items_in_registries`
+
+Fuzzy search across registries.
+
+**Input:** `registries` (string[]), `query` (string), `limit` (number, optional), `offset` (number, optional)
+
+### `shadcn:view_items_in_registries`
+
+View item details including full file contents.
+
+**Input:** `items` (string[]) — e.g. `["@shadcn/button", "@shadcn/card"]`
+
+### `shadcn:get_item_examples_from_registries`
+
+Find usage examples and demos with source code.
+
+**Input:** `registries` (string[]), `query` (string) — e.g. `"accordion-demo"`, `"button example"`
+
+### `shadcn:get_add_command_for_items`
+
+Returns the CLI install command.
+
+**Input:** `items` (string[]) — e.g. `["@shadcn/button"]`
+
+### `shadcn:get_audit_checklist`
+
+Returns a checklist for verifying components (imports, deps, lint, TypeScript).
+
+**Input:** none
+
+---
+
+## Configuring Registries
+
+Registries are set in `components.json`. The `@shadcn` registry is always built-in.
+
+```json
+{
+  "registries": {
+    "@acme": "https://acme.com/r/{name}.json",
+    "@private": {
+      "url": "https://private.com/r/{name}.json",
+      "headers": { "Authorization": "Bearer ${MY_TOKEN}" }
+    }
+  }
+}
+```
+
+- Names must start with `@`.
+- URLs must contain `{name}`.
+- `${VAR}` references are resolved from environment variables.
+
+Community registry index: `https://ui.shadcn.com/r/registries.json`
diff --git a/skills/shadcn/rules/base-vs-radix.md b/skills/shadcn/rules/base-vs-radix.md
new file mode 100644
index 0000000000..c1ed7d111a
--- /dev/null
+++ b/skills/shadcn/rules/base-vs-radix.md
@@ -0,0 +1,306 @@
+# Base vs Radix
+
+API differences between `base` and `radix`. Check the `base` field from `npx shadcn@latest info`.
+
+## Contents
+
+- Composition: asChild vs render
+- Button / trigger as non-button element
+- Select (items prop, placeholder, positioning, multiple, object values)
+- ToggleGroup (type vs multiple)
+- Slider (scalar vs array)
+- Accordion (type and defaultValue)
+
+---
+
+## Composition: asChild (radix) vs render (base)
+
+Radix uses `asChild` to replace the default element. Base uses `render`. Don't wrap triggers in extra elements.
+
+**Incorrect:**
+
+```tsx
+<DialogTrigger>
+  <div>
+    <Button>Open</Button>
+  </div>
+</DialogTrigger>
+```
+
+**Correct (radix):**
+
+```tsx
+<DialogTrigger asChild>
+  <Button>Open</Button>
+</DialogTrigger>
+```
+
+**Correct (base):**
+
+```tsx
+<DialogTrigger render={<Button />}>Open</DialogTrigger>
+```
+
+This applies to all trigger and close components: `DialogTrigger`, `SheetTrigger`, `AlertDialogTrigger`, `DropdownMenuTrigger`, `PopoverTrigger`, `TooltipTrigger`, `CollapsibleTrigger`, `DialogClose`, `SheetClose`, `NavigationMenuLink`, `BreadcrumbLink`, `SidebarMenuButton`, `Badge`, `Item`.
+
+---
+
+## Button / trigger as non-button element (base only)
+
+When `render` changes an element to a non-button (`<a>`, `<span>`), add `nativeButton={false}`.
+
+**Incorrect (base):** missing `nativeButton={false}`.
+
+```tsx
+<Button render={<a href="/docs" />}>Read the docs</Button>
+```
+
+**Correct (base):**
+
+```tsx
+<Button render={<a href="/docs" />} nativeButton={false}>
+  Read the docs
+</Button>
+```
+
+**Correct (radix):**
+
+```tsx
+<Button asChild>
+  <a href="/docs">Read the docs</a>
+</Button>
+```
+
+Same for triggers whose `render` is not a `Button`:
+
+```tsx
+// base.
+<PopoverTrigger render={<InputGroupAddon />} nativeButton={false}>
+  Pick date
+</PopoverTrigger>
+```
+
+---
+
+## Select
+
+**items prop (base only).** Base requires an `items` prop on the root. Radix uses inline JSX only.
+
+**Incorrect (base):**
+
+```tsx
+<Select>
+  <SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>
+</Select>
+```
+
+**Correct (base):**
+
+```tsx
+const items = [
+  { label: "Select a fruit", value: null },
+  { label: "Apple", value: "apple" },
+  { label: "Banana", value: "banana" },
+]
+
+<Select items={items}>
+  <SelectTrigger>
+    <SelectValue />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      {items.map((item) => (
+        <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
+      ))}
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+**Correct (radix):**
+
+```tsx
+<Select>
+  <SelectTrigger>
+    <SelectValue placeholder="Select a fruit" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectItem value="apple">Apple</SelectItem>
+      <SelectItem value="banana">Banana</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>
+```
+
+**Placeholder.** Base uses a `{ value: null }` item in the items array. Radix uses `<SelectValue placeholder="...">`.
+
+**Content positioning.** Base uses `alignItemWithTrigger`. Radix uses `position`.
+
+```tsx
+// base.
+<SelectContent alignItemWithTrigger={false} side="bottom">
+
+// radix.
+<SelectContent position="popper">
+```
+
+---
+
+## Select — multiple selection and object values (base only)
+
+Base supports `multiple`, render-function children on `SelectValue`, and object values with `itemToStringValue`. Radix is single-select with string values only.
+
+**Correct (base — multiple selection):**
+
+```tsx
+<Select items={items} multiple defaultValue={[]}>
+  <SelectTrigger>
+    <SelectValue>
+      {(value: string[]) => value.length === 0 ? "Select fruits" : `${value.length} selected`}
+    </SelectValue>
+  </SelectTrigger>
+  ...
+</Select>
+```
+
+**Correct (base — object values):**
+
+```tsx
+<Select defaultValue={plans[0]} itemToStringValue={(plan) => plan.name}>
+  <SelectTrigger>
+    <SelectValue>{(value) => value.name}</SelectValue>
+  </SelectTrigger>
+  ...
+</Select>
+```
+
+---
+
+## ToggleGroup
+
+Base uses a `multiple` boolean prop. Radix uses `type="single"` or `type="multiple"`.
+
+**Incorrect (base):**
+
+```tsx
+<ToggleGroup type="single" defaultValue="daily">
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+</ToggleGroup>
+```
+
+**Correct (base):**
+
+```tsx
+// Single (no prop needed), defaultValue is always an array.
+<ToggleGroup defaultValue={["daily"]} spacing={2}>
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
+</ToggleGroup>
+
+// Multi-selection.
+<ToggleGroup multiple>
+  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+</ToggleGroup>
+```
+
+**Correct (radix):**
+
+```tsx
+// Single, defaultValue is a string.
+<ToggleGroup type="single" defaultValue="daily" spacing={2}>
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
+</ToggleGroup>
+
+// Multi-selection.
+<ToggleGroup type="multiple">
+  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
+  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
+</ToggleGroup>
+```
+
+**Controlled single value:**
+
+```tsx
+// base — wrap/unwrap arrays.
+const [value, setValue] = React.useState("normal")
+<ToggleGroup value={[value]} onValueChange={(v) => setValue(v[0])}>
+
+// radix — plain string.
+const [value, setValue] = React.useState("normal")
+<ToggleGroup type="single" value={value} onValueChange={setValue}>
+```
+
+---
+
+## Slider
+
+Base accepts a plain number for a single thumb. Radix always requires an array.
+
+**Incorrect (base):**
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} />
+```
+
+**Correct (base):**
+
+```tsx
+<Slider defaultValue={50} max={100} step={1} />
+```
+
+**Correct (radix):**
+
+```tsx
+<Slider defaultValue={[50]} max={100} step={1} />
+```
+
+Both use arrays for range sliders. Controlled `onValueChange` in base may need a cast:
+
+```tsx
+// base.
+const [value, setValue] = React.useState([0.3, 0.7])
+<Slider value={value} onValueChange={(v) => setValue(v as number[])} />
+
+// radix.
+const [value, setValue] = React.useState([0.3, 0.7])
+<Slider value={value} onValueChange={setValue} />
+```
+
+---
+
+## Accordion
+
+Radix requires `type="single"` or `type="multiple"` and supports `collapsible`. `defaultValue` is a string. Base uses no `type` prop, uses `multiple` boolean, and `defaultValue` is always an array.
+
+**Incorrect (base):**
+
+```tsx
+<Accordion type="single" collapsible defaultValue="item-1">
+  <AccordionItem value="item-1">...</AccordionItem>
+</Accordion>
+```
+
+**Correct (base):**
+
+```tsx
+<Accordion defaultValue={["item-1"]}>
+  <AccordionItem value="item-1">...</AccordionItem>
+</Accordion>
+
+// Multi-select.
+<Accordion multiple defaultValue={["item-1", "item-2"]}>
+  <AccordionItem value="item-1">...</AccordionItem>
+  <AccordionItem value="item-2">...</AccordionItem>
+</Accordion>
+```
+
+**Correct (radix):**
+
+```tsx
+<Accordion type="single" collapsible defaultValue="item-1">
+  <AccordionItem value="item-1">...</AccordionItem>
+</Accordion>
+```
diff --git a/skills/shadcn/rules/composition.md b/skills/shadcn/rules/composition.md
new file mode 100644
index 0000000000..0e105837cb
--- /dev/null
+++ b/skills/shadcn/rules/composition.md
@@ -0,0 +1,195 @@
+# Component Composition
+
+## Contents
+
+- Items always inside their Group component
+- Callouts use Alert
+- Empty states use Empty component
+- Toast notifications use sonner
+- Choosing between overlay components
+- Dialog, Sheet, and Drawer always need a Title
+- Card structure
+- Button has no isPending or isLoading prop
+- TabsTrigger must be inside TabsList
+- Avatar always needs AvatarFallback
+- Use Separator instead of raw hr or border divs
+- Use Skeleton for loading placeholders
+- Use Badge instead of custom styled spans
+
+---
+
+## Items always inside their Group component
+
+Never render items directly inside the content container.
+
+**Incorrect:**
+
+```tsx
+<SelectContent>
+  <SelectItem value="apple">Apple</SelectItem>
+  <SelectItem value="banana">Banana</SelectItem>
+</SelectContent>
+```
+
+**Correct:**
+
+```tsx
+<SelectContent>
+  <SelectGroup>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+  </SelectGroup>
+</SelectContent>
+```
+
+This applies to all group-based components:
+
+| Item | Group |
+|------|-------|
+| `SelectItem`, `SelectLabel` | `SelectGroup` |
+| `DropdownMenuItem`, `DropdownMenuLabel`, `DropdownMenuSub` | `DropdownMenuGroup` |
+| `MenubarItem` | `MenubarGroup` |
+| `ContextMenuItem` | `ContextMenuGroup` |
+| `CommandItem` | `CommandGroup` |
+
+---
+
+## Callouts use Alert
+
+```tsx
+<Alert>
+  <AlertTitle>Warning</AlertTitle>
+  <AlertDescription>Something needs attention.</AlertDescription>
+</Alert>
+```
+
+---
+
+## Empty states use Empty component
+
+```tsx
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon"><FolderIcon /></EmptyMedia>
+    <EmptyTitle>No projects yet</EmptyTitle>
+    <EmptyDescription>Get started by creating a new project.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>Create Project</Button>
+  </EmptyContent>
+</Empty>
+```
+
+---
+
+## Toast notifications use sonner
+
+```tsx
+import { toast } from "sonner"
+
+toast.success("Changes saved.")
+toast.error("Something went wrong.")
+toast("File deleted.", {
+  action: { label: "Undo", onClick: () => undoDelete() },
+})
+```
+
+---
+
+## Choosing between overlay components
+
+| Use case | Component |
+|----------|-----------|
+| Focused task that requires input | `Dialog` |
+| Destructive action confirmation | `AlertDialog` |
+| Side panel with details or filters | `Sheet` |
+| Mobile-first bottom panel | `Drawer` |
+| Quick info on hover | `HoverCard` |
+| Small contextual content on click | `Popover` |
+
+---
+
+## Dialog, Sheet, and Drawer always need a Title
+
+`DialogTitle`, `SheetTitle`, `DrawerTitle` are required for accessibility. Use `className="sr-only"` if visually hidden.
+
+```tsx
+<DialogContent>
+  <DialogHeader>
+    <DialogTitle>Edit Profile</DialogTitle>
+    <DialogDescription>Update your profile.</DialogDescription>
+  </DialogHeader>
+  ...
+</DialogContent>
+```
+
+---
+
+## Card structure
+
+Use full composition — don't dump everything into `CardContent`:
+
+```tsx
+<Card>
+  <CardHeader>
+    <CardTitle>Team Members</CardTitle>
+    <CardDescription>Manage your team.</CardDescription>
+  </CardHeader>
+  <CardContent>...</CardContent>
+  <CardFooter>
+    <Button>Invite</Button>
+  </CardFooter>
+</Card>
+```
+
+---
+
+## Button has no isPending or isLoading prop
+
+Compose with `Spinner` + `data-icon` + `disabled`:
+
+```tsx
+<Button disabled>
+  <Spinner data-icon="inline-start" />
+  Saving...
+</Button>
+```
+
+---
+
+## TabsTrigger must be inside TabsList
+
+Never render `TabsTrigger` directly inside `Tabs` — always wrap in `TabsList`:
+
+```tsx
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">...</TabsContent>
+</Tabs>
+```
+
+---
+
+## Avatar always needs AvatarFallback
+
+Always include `AvatarFallback` for when the image fails to load:
+
+```tsx
+<Avatar>
+  <AvatarImage src="/avatar.png" alt="User" />
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>
+```
+
+---
+
+## Use existing components instead of custom markup
+
+| Instead of | Use |
+|---|---|
+| `<hr>` or `<div className="border-t">` | `<Separator />` |
+| `<div className="animate-pulse">` with styled divs | `<Skeleton className="h-4 w-3/4" />` |
+| `<span className="rounded-full bg-green-100 ...">` | `<Badge variant="secondary">` |
diff --git a/skills/shadcn/rules/forms.md b/skills/shadcn/rules/forms.md
new file mode 100644
index 0000000000..f451e2f7bc
--- /dev/null
+++ b/skills/shadcn/rules/forms.md
@@ -0,0 +1,192 @@
+# Forms & Inputs
+
+## Contents
+
+- Forms use FieldGroup + Field
+- InputGroup requires InputGroupInput/InputGroupTextarea
+- Buttons inside inputs use InputGroup + InputGroupAddon
+- Option sets (2–7 choices) use ToggleGroup
+- FieldSet + FieldLegend for grouping related fields
+- Field validation and disabled states
+
+---
+
+## Forms use FieldGroup + Field
+
+Always use `FieldGroup` + `Field` — never raw `div` with `space-y-*`:
+
+```tsx
+<FieldGroup>
+  <Field>
+    <FieldLabel htmlFor="email">Email</FieldLabel>
+    <Input id="email" type="email" />
+  </Field>
+  <Field>
+    <FieldLabel htmlFor="password">Password</FieldLabel>
+    <Input id="password" type="password" />
+  </Field>
+</FieldGroup>
+```
+
+Use `Field orientation="horizontal"` for settings pages. Use `FieldLabel className="sr-only"` for visually hidden labels.
+
+**Choosing form controls:**
+
+- Simple text input → `Input`
+- Dropdown with predefined options → `Select`
+- Searchable dropdown → `Combobox`
+- Native HTML select (no JS) → `native-select`
+- Boolean toggle → `Switch` (for settings) or `Checkbox` (for forms)
+- Single choice from few options → `RadioGroup`
+- Toggle between 2–5 options → `ToggleGroup` + `ToggleGroupItem`
+- OTP/verification code → `InputOTP`
+- Multi-line text → `Textarea`
+
+---
+
+## InputGroup requires InputGroupInput/InputGroupTextarea
+
+Never use raw `Input` or `Textarea` inside an `InputGroup`.
+
+**Incorrect:**
+
+```tsx
+<InputGroup>
+  <Input placeholder="Search..." />
+</InputGroup>
+```
+
+**Correct:**
+
+```tsx
+import { InputGroup, InputGroupInput } from "@/components/ui/input-group"
+
+<InputGroup>
+  <InputGroupInput placeholder="Search..." />
+</InputGroup>
+```
+
+---
+
+## Buttons inside inputs use InputGroup + InputGroupAddon
+
+Never place a `Button` directly inside or adjacent to an `Input` with custom positioning.
+
+**Incorrect:**
+
+```tsx
+<div className="relative">
+  <Input placeholder="Search..." className="pr-10" />
+  <Button className="absolute right-0 top-0" size="icon">
+    <SearchIcon />
+  </Button>
+</div>
+```
+
+**Correct:**
+
+```tsx
+import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group"
+
+<InputGroup>
+  <InputGroupInput placeholder="Search..." />
+  <InputGroupAddon>
+    <Button size="icon">
+      <SearchIcon data-icon="inline-start" />
+    </Button>
+  </InputGroupAddon>
+</InputGroup>
+```
+
+---
+
+## Option sets (2–7 choices) use ToggleGroup
+
+Don't manually loop `Button` components with active state.
+
+**Incorrect:**
+
+```tsx
+const [selected, setSelected] = useState("daily")
+
+<div className="flex gap-2">
+  {["daily", "weekly", "monthly"].map((option) => (
+    <Button
+      key={option}
+      variant={selected === option ? "default" : "outline"}
+      onClick={() => setSelected(option)}
+    >
+      {option}
+    </Button>
+  ))}
+</div>
+```
+
+**Correct:**
+
+```tsx
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+
+<ToggleGroup spacing={2}>
+  <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
+  <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
+  <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
+</ToggleGroup>
+```
+
+Combine with `Field` for labelled toggle groups:
+
+```tsx
+<Field orientation="horizontal">
+  <FieldTitle id="theme-label">Theme</FieldTitle>
+  <ToggleGroup aria-labelledby="theme-label" spacing={2}>
+    <ToggleGroupItem value="light">Light</ToggleGroupItem>
+    <ToggleGroupItem value="dark">Dark</ToggleGroupItem>
+    <ToggleGroupItem value="system">System</ToggleGroupItem>
+  </ToggleGroup>
+</Field>
+```
+
+> **Note:** `defaultValue` and `type`/`multiple` props differ between base and radix. See [base-vs-radix.md](./base-vs-radix.md#togglegroup).
+
+---
+
+## FieldSet + FieldLegend for grouping related fields
+
+Use `FieldSet` + `FieldLegend` for related checkboxes, radios, or switches — not `div` with a heading:
+
+```tsx
+<FieldSet>
+  <FieldLegend variant="label">Preferences</FieldLegend>
+  <FieldDescription>Select all that apply.</FieldDescription>
+  <FieldGroup className="gap-3">
+    <Field orientation="horizontal">
+      <Checkbox id="dark" />
+      <FieldLabel htmlFor="dark" className="font-normal">Dark mode</FieldLabel>
+    </Field>
+  </FieldGroup>
+</FieldSet>
+```
+
+---
+
+## Field validation and disabled states
+
+Both attributes are needed — `data-invalid`/`data-disabled` styles the field (label, description), while `aria-invalid`/`disabled` styles the control.
+
+```tsx
+// Invalid.
+<Field data-invalid>
+  <FieldLabel htmlFor="email">Email</FieldLabel>
+  <Input id="email" aria-invalid />
+  <FieldDescription>Invalid email address.</FieldDescription>
+</Field>
+
+// Disabled.
+<Field data-disabled>
+  <FieldLabel htmlFor="email">Email</FieldLabel>
+  <Input id="email" disabled />
+</Field>
+```
+
+Works for all controls: `Input`, `Textarea`, `Select`, `Checkbox`, `RadioGroupItem`, `Switch`, `Slider`, `NativeSelect`, `InputOTP`.
diff --git a/skills/shadcn/rules/icons.md b/skills/shadcn/rules/icons.md
new file mode 100644
index 0000000000..bba8102f01
--- /dev/null
+++ b/skills/shadcn/rules/icons.md
@@ -0,0 +1,101 @@
+# Icons
+
+**Always use the project's configured `iconLibrary` for imports.** Check the `iconLibrary` field from project context: `lucide` → `lucide-react`, `tabler` → `@tabler/icons-react`, etc. Never assume `lucide-react`.
+
+---
+
+## Icons in Button use data-icon attribute
+
+Add `data-icon="inline-start"` (prefix) or `data-icon="inline-end"` (suffix) to the icon. No sizing classes on the icon.
+
+**Incorrect:**
+
+```tsx
+<Button>
+  <SearchIcon className="mr-2 size-4" />
+  Search
+</Button>
+```
+
+**Correct:**
+
+```tsx
+<Button>
+  <SearchIcon data-icon="inline-start"/>
+  Search
+</Button>
+
+<Button>
+  Next
+  <ArrowRightIcon data-icon="inline-end"/>
+</Button>
+```
+
+---
+
+## No sizing classes on icons inside components
+
+Components handle icon sizing via CSS. Don't add `size-4`, `w-4 h-4`, or other sizing classes to icons inside `Button`, `DropdownMenuItem`, `Alert`, `Sidebar*`, or other shadcn components. Unless the user explicitly asks for custom icon sizes.
+
+**Incorrect:**
+
+```tsx
+<Button>
+  <SearchIcon className="size-4" data-icon="inline-start" />
+  Search
+</Button>
+
+<DropdownMenuItem>
+  <SettingsIcon className="mr-2 size-4" />
+  Settings
+</DropdownMenuItem>
+```
+
+**Correct:**
+
+```tsx
+<Button>
+  <SearchIcon data-icon="inline-start" />
+  Search
+</Button>
+
+<DropdownMenuItem>
+  <SettingsIcon />
+  Settings
+</DropdownMenuItem>
+```
+
+---
+
+## Pass icons as component objects, not string keys
+
+Use `icon={CheckIcon}`, not a string key to a lookup map.
+
+**Incorrect:**
+
+```tsx
+const iconMap = {
+  check: CheckIcon,
+  alert: AlertIcon,
+}
+
+function StatusBadge({ icon }: { icon: string }) {
+  const Icon = iconMap[icon]
+  return <Icon />
+}
+
+<StatusBadge icon="check" />
+```
+
+**Correct:**
+
+```tsx
+// Import from the project's configured iconLibrary (e.g. lucide-react, @tabler/icons-react).
+import { CheckIcon } from "lucide-react"
+
+function StatusBadge({ icon: Icon }: { icon: React.ComponentType }) {
+  return <Icon />
+}
+
+<StatusBadge icon={CheckIcon} />
+```
diff --git a/skills/shadcn/rules/styling.md b/skills/shadcn/rules/styling.md
new file mode 100644
index 0000000000..38d473212b
--- /dev/null
+++ b/skills/shadcn/rules/styling.md
@@ -0,0 +1,162 @@
+# Styling & Customization
+
+See [customization.md](../customization.md) for theming, CSS variables, and adding custom colors.
+
+## Contents
+
+- Semantic colors
+- Built-in variants first
+- className for layout only
+- No space-x-* / space-y-*
+- Prefer size-* over w-* h-* when equal
+- Prefer truncate shorthand
+- No manual dark: color overrides
+- Use cn() for conditional classes
+- No manual z-index on overlay components
+
+---
+
+## Semantic colors
+
+**Incorrect:**
+
+```tsx
+<div className="bg-blue-500 text-white">
+  <p className="text-gray-600">Secondary text</p>
+</div>
+```
+
+**Correct:**
+
+```tsx
+<div className="bg-primary text-primary-foreground">
+  <p className="text-muted-foreground">Secondary text</p>
+</div>
+```
+
+---
+
+## No raw color values for status/state indicators
+
+For positive, negative, or status indicators, use Badge variants, semantic tokens like `text-destructive`, or define custom CSS variables — don't reach for raw Tailwind colors.
+
+**Incorrect:**
+
+```tsx
+<span className="text-emerald-600">+20.1%</span>
+<span className="text-green-500">Active</span>
+<span className="text-red-600">-3.2%</span>
+```
+
+**Correct:**
+
+```tsx
+<Badge variant="secondary">+20.1%</Badge>
+<Badge>Active</Badge>
+<span className="text-destructive">-3.2%</span>
+```
+
+If you need a success/positive color that doesn't exist as a semantic token, use a Badge variant or ask the user about adding a custom CSS variable to the theme (see [customization.md](../customization.md)).
+
+---
+
+## Built-in variants first
+
+**Incorrect:**
+
+```tsx
+<Button className="border border-input bg-transparent hover:bg-accent">
+  Click me
+</Button>
+```
+
+**Correct:**
+
+```tsx
+<Button variant="outline">Click me</Button>
+```
+
+---
+
+## className for layout only
+
+Use `className` for layout (e.g. `max-w-md`, `mx-auto`, `mt-4`), **not** for overriding component colors or typography. To change colors, use semantic tokens, built-in variants, or CSS variables.
+
+**Incorrect:**
+
+```tsx
+<Card className="bg-blue-100 text-blue-900 font-bold">
+  <CardContent>Dashboard</CardContent>
+</Card>
+```
+
+**Correct:**
+
+```tsx
+<Card className="max-w-md mx-auto">
+  <CardContent>Dashboard</CardContent>
+</Card>
+```
+
+To customize a component's appearance, prefer these approaches in order:
+1. **Built-in variants** — `variant="outline"`, `variant="destructive"`, etc.
+2. **Semantic color tokens** — `bg-primary`, `text-muted-foreground`.
+3. **CSS variables** — define custom colors in the global CSS file (see [customization.md](../customization.md)).
+
+---
+
+## No space-x-* / space-y-*
+
+Use `gap-*` instead. `space-y-4` → `flex flex-col gap-4`. `space-x-2` → `flex gap-2`.
+
+```tsx
+<div className="flex flex-col gap-4">
+  <Input />
+  <Input />
+  <Button>Submit</Button>
+</div>
+```
+
+---
+
+## Prefer size-* over w-* h-* when equal
+
+`size-10` not `w-10 h-10`. Applies to icons, avatars, skeletons, etc.
+
+---
+
+## Prefer truncate shorthand
+
+`truncate` not `overflow-hidden text-ellipsis whitespace-nowrap`.
+
+---
+
+## No manual dark: color overrides
+
+Use semantic tokens — they handle light/dark via CSS variables. `bg-background text-foreground` not `bg-white dark:bg-gray-950`.
+
+---
+
+## Use cn() for conditional classes
+
+Use the `cn()` utility from the project for conditional or merged class names. Don't write manual ternaries in className strings.
+
+**Incorrect:**
+
+```tsx
+<div className={`flex items-center ${isActive ? "bg-primary text-primary-foreground" : "bg-muted"}`}>
+```
+
+**Correct:**
+
+```tsx
+import { cn } from "@/lib/utils"
+
+<div className={cn("flex items-center", isActive ? "bg-primary text-primary-foreground" : "bg-muted")}>
+```
+
+---
+
+## No manual z-index on overlay components
+
+`Dialog`, `Sheet`, `Drawer`, `AlertDialog`, `DropdownMenu`, `Popover`, `Tooltip`, `HoverCard` handle their own stacking. Never add `z-50` or `z-[999]`.
diff --git a/templates/astro-app/.gitignore b/templates/astro-app/.gitignore
new file mode 100644
index 0000000000..f52a46e5dc
--- /dev/null
+++ b/templates/astro-app/.gitignore
@@ -0,0 +1,23 @@
+# build output
+dist/
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
diff --git a/templates/astro-app/.prettierignore b/templates/astro-app/.prettierignore
new file mode 100644
index 0000000000..35bc32e4af
--- /dev/null
+++ b/templates/astro-app/.prettierignore
@@ -0,0 +1,6 @@
+node_modules/
+coverage/
+.pnpm-store/
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
diff --git a/templates/astro-app/.prettierrc b/templates/astro-app/.prettierrc
new file mode 100644
index 0000000000..0b9ca38b50
--- /dev/null
+++ b/templates/astro-app/.prettierrc
@@ -0,0 +1,19 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "src/styles/global.css",
+  "tailwindFunctions": ["cn", "cva"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}
diff --git a/templates/astro-app/README.md b/templates/astro-app/README.md
new file mode 100644
index 0000000000..e17b0f0122
--- /dev/null
+++ b/templates/astro-app/README.md
@@ -0,0 +1,36 @@
+# Astro + React + TypeScript + shadcn/ui
+
+This is a template for a new Astro project with React, TypeScript, and shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command:
+
+```bash
+npx shadcn@latest add button
+```
+
+This will place the ui components in the `src/components` directory.
+
+## Using components
+
+To use the components in your app, import them in an `.astro` file:
+
+```astro
+---
+import { Button } from "@/components/ui/button"
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Astro App</title>
+  </head>
+  <body>
+    <div class="grid h-screen place-items-center content-center">
+      <Button>Button</Button>
+    </div>
+  </body>
+</html>
+```
diff --git a/templates/astro-app/astro.config.mjs b/templates/astro-app/astro.config.mjs
new file mode 100644
index 0000000000..00bde21728
--- /dev/null
+++ b/templates/astro-app/astro.config.mjs
@@ -0,0 +1,13 @@
+// @ts-check
+
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "astro/config"
+import react from "@astrojs/react"
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()],
+  },
+  integrations: [react()],
+})
diff --git a/templates/astro-app/eslint.config.js b/templates/astro-app/eslint.config.js
new file mode 100644
index 0000000000..2d58690525
--- /dev/null
+++ b/templates/astro-app/eslint.config.js
@@ -0,0 +1,23 @@
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+import { defineConfig, globalIgnores } from "eslint/config"
+
+export default defineConfig([
+  globalIgnores(["dist", ".astro"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/templates/astro-app/package.json b/templates/astro-app/package.json
new file mode 100644
index 0000000000..7bce68808a
--- /dev/null
+++ b/templates/astro-app/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "astro-app",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "lint": "eslint .",
+    "format": "prettier --write \"**/*.{ts,tsx,astro}\"",
+    "typecheck": "astro check"
+  },
+  "dependencies": {
+    "@astrojs/react": "^4.4.2",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "astro": "^5.17.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4"
+  }
+}
diff --git a/templates/astro-app/public/favicon.svg b/templates/astro-app/public/favicon.svg
new file mode 100644
index 0000000000..6f7f1ea714
--- /dev/null
+++ b/templates/astro-app/public/favicon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
+  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a1 1 0 0 0 .67-.55L18 14l4.41 8.76a1 1 0 0 0 .67.55l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
+</svg>
diff --git a/templates/astro-app/src/layouts/main.astro b/templates/astro-app/src/layouts/main.astro
new file mode 100644
index 0000000000..69b80d2a09
--- /dev/null
+++ b/templates/astro-app/src/layouts/main.astro
@@ -0,0 +1,15 @@
+---
+import "@/styles/global.css"
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Astro App</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/templates/astro-app/src/pages/index.astro b/templates/astro-app/src/pages/index.astro
new file mode 100644
index 0000000000..ad15f2523e
--- /dev/null
+++ b/templates/astro-app/src/pages/index.astro
@@ -0,0 +1,17 @@
+---
+import Layout from "@/layouts/main.astro"
+import { Button } from "@/components/ui/button"
+---
+
+<Layout>
+  <div class="flex min-h-svh p-6">
+    <div class="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+      <div>
+        <h1 class="font-medium">Project ready!</h1>
+        <p>You may now add components and start building.</p>
+        <p>We've already added the button component for you.</p>
+        <Button client:load className="mt-2">Button</Button>
+      </div>
+    </div>
+  </div>
+</Layout>
diff --git a/templates/astro-app/src/styles/global.css b/templates/astro-app/src/styles/global.css
new file mode 100644
index 0000000000..f1d8c73cdc
--- /dev/null
+++ b/templates/astro-app/src/styles/global.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/templates/astro-app/tsconfig.json b/templates/astro-app/tsconfig.json
new file mode 100644
index 0000000000..c94dcf53b4
--- /dev/null
+++ b/templates/astro-app/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
diff --git a/templates/astro-monorepo/.gitignore b/templates/astro-monorepo/.gitignore
new file mode 100644
index 0000000000..df22b3d81d
--- /dev/null
+++ b/templates/astro-monorepo/.gitignore
@@ -0,0 +1,33 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+dist
+
+# Astro
+.astro
+
+# Debug
+npm-debug.log*
+
+# Misc
+.DS_Store
+*.pem
diff --git a/templates/astro-monorepo/.npmrc b/templates/astro-monorepo/.npmrc
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/templates/astro-monorepo/.npmrc
@@ -0,0 +1 @@
+
diff --git a/templates/astro-monorepo/.prettierignore b/templates/astro-monorepo/.prettierignore
new file mode 100644
index 0000000000..6b8b7077c3
--- /dev/null
+++ b/templates/astro-monorepo/.prettierignore
@@ -0,0 +1,6 @@
+dist/
+node_modules/
+.turbo/
+coverage/
+pnpm-lock.yaml
+.pnpm-store/
diff --git a/templates/astro-monorepo/.prettierrc b/templates/astro-monorepo/.prettierrc
new file mode 100644
index 0000000000..5f9a623251
--- /dev/null
+++ b/templates/astro-monorepo/.prettierrc
@@ -0,0 +1,19 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "packages/ui/src/styles/globals.css",
+  "tailwindFunctions": ["cn", "cva"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    }
+  ]
+}
diff --git a/templates/astro-monorepo/README.md b/templates/astro-monorepo/README.md
new file mode 100644
index 0000000000..8cf2961609
--- /dev/null
+++ b/templates/astro-monorepo/README.md
@@ -0,0 +1,39 @@
+# Astro + React + TypeScript + shadcn/ui (Monorepo)
+
+This is a monorepo template for Astro with React, TypeScript, and shadcn/ui.
+
+## Structure
+
+- `apps/web` - Astro application
+- `packages/ui` - Shared UI components (shadcn/ui)
+
+## Adding components
+
+To add components, run the following command from the root:
+
+```bash
+npx shadcn@latest add button -c apps/web
+```
+
+## Using components
+
+To use the components in your app, import them in an `.astro` file:
+
+```astro
+---
+import { Button } from "@workspace/ui/components/button"
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Astro App</title>
+  </head>
+  <body>
+    <div class="grid h-screen place-items-center content-center">
+      <Button>Button</Button>
+    </div>
+  </body>
+</html>
+```
diff --git a/templates/astro-monorepo/apps/web/astro.config.mjs b/templates/astro-monorepo/apps/web/astro.config.mjs
new file mode 100644
index 0000000000..00bde21728
--- /dev/null
+++ b/templates/astro-monorepo/apps/web/astro.config.mjs
@@ -0,0 +1,13 @@
+// @ts-check
+
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "astro/config"
+import react from "@astrojs/react"
+
+// https://astro.build/config
+export default defineConfig({
+  vite: {
+    plugins: [tailwindcss()],
+  },
+  integrations: [react()],
+})
diff --git a/templates/astro-monorepo/apps/web/components.json b/templates/astro-monorepo/apps/web/components.json
new file mode 100644
index 0000000000..963cc37627
--- /dev/null
+++ b/templates/astro-monorepo/apps/web/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}
diff --git a/templates/astro-monorepo/apps/web/eslint.config.js b/templates/astro-monorepo/apps/web/eslint.config.js
new file mode 100644
index 0000000000..2d58690525
--- /dev/null
+++ b/templates/astro-monorepo/apps/web/eslint.config.js
@@ -0,0 +1,23 @@
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+import { defineConfig, globalIgnores } from "eslint/config"
+
+export default defineConfig([
+  globalIgnores(["dist", ".astro"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/templates/astro-monorepo/apps/web/package.json b/templates/astro-monorepo/apps/web/package.json
new file mode 100644
index 0000000000..8a60a7dfc1
--- /dev/null
+++ b/templates/astro-monorepo/apps/web/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx,astro}\"",
+    "typecheck": "astro check"
+  },
+  "dependencies": {
+    "@astrojs/react": "^4.4.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@workspace/ui": "workspace:*",
+    "astro": "^5.17.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^25.1.0",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^17.2.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0"
+  }
+}
diff --git a/templates/astro-monorepo/apps/web/public/favicon.svg b/templates/astro-monorepo/apps/web/public/favicon.svg
new file mode 100644
index 0000000000..6f7f1ea714
--- /dev/null
+++ b/templates/astro-monorepo/apps/web/public/favicon.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 36 36">
+  <path fill="#000" d="M22.25 4h-8.5a1 1 0 0 0-.96.73l-5.54 19.4a.5.5 0 0 0 .62.62l5.05-1.44a1 1 0 0 0 .67-.55L18 14l4.41 8.76a1 1 0 0 0 .67.55l5.05 1.44a.5.5 0 0 0 .62-.62l-5.54-19.4a1 1 0 0 0-.96-.73Z"/>
+</svg>
diff --git a/templates/monorepo-next/apps/web/components/.gitkeep b/templates/astro-monorepo/apps/web/src/components/.gitkeep
similarity index 100%
rename from templates/monorepo-next/apps/web/components/.gitkeep
rename to templates/astro-monorepo/apps/web/src/components/.gitkeep
diff --git a/templates/astro-monorepo/apps/web/src/layouts/main.astro b/templates/astro-monorepo/apps/web/src/layouts/main.astro
new file mode 100644
index 0000000000..f8d346643d
--- /dev/null
+++ b/templates/astro-monorepo/apps/web/src/layouts/main.astro
@@ -0,0 +1,15 @@
+---
+import "@workspace/ui/globals.css"
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Astro App</title>
+  </head>
+  <body>
+    <slot />
+  </body>
+</html>
diff --git a/templates/monorepo-next/apps/web/hooks/.gitkeep b/templates/astro-monorepo/apps/web/src/lib/.gitkeep
similarity index 100%
rename from templates/monorepo-next/apps/web/hooks/.gitkeep
rename to templates/astro-monorepo/apps/web/src/lib/.gitkeep
diff --git a/templates/astro-monorepo/apps/web/src/pages/index.astro b/templates/astro-monorepo/apps/web/src/pages/index.astro
new file mode 100644
index 0000000000..25e624863c
--- /dev/null
+++ b/templates/astro-monorepo/apps/web/src/pages/index.astro
@@ -0,0 +1,25 @@
+---
+import "@workspace/ui/globals.css"
+import { Button } from "@workspace/ui/components/button"
+---
+
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>Astro App</title>
+  </head>
+  <body>
+    <div class="flex min-h-svh p-6">
+      <div class="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 class="font-medium">Project ready!</h1>
+          <p>You may now add components and start building.</p>
+          <p>We've already added the button component for you.</p>
+          <Button client:load className="mt-2">Button</Button>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/templates/astro-monorepo/apps/web/tsconfig.json b/templates/astro-monorepo/apps/web/tsconfig.json
new file mode 100644
index 0000000000..0dd4da6841
--- /dev/null
+++ b/templates/astro-monorepo/apps/web/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"]
+    }
+  }
+}
diff --git a/templates/astro-monorepo/package.json b/templates/astro-monorepo/package.json
new file mode 100644
index 0000000000..4772b9b07f
--- /dev/null
+++ b/templates/astro-monorepo/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "astro-monorepo",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "format": "turbo format",
+    "typecheck": "turbo typecheck"
+  },
+  "devDependencies": {
+    "prettier": "^3.8.1",
+    "prettier-plugin-astro": "^0.14.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "turbo": "^2.8.8",
+    "typescript": "5.9.3"
+  },
+  "packageManager": "pnpm@9.0.6",
+  "engines": {
+    "node": ">=20"
+  }
+}
diff --git a/templates/astro-monorepo/packages/ui/components.json b/templates/astro-monorepo/packages/ui/components.json
new file mode 100644
index 0000000000..e2686f3797
--- /dev/null
+++ b/templates/astro-monorepo/packages/ui/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  }
+}
diff --git a/templates/astro-monorepo/packages/ui/eslint.config.js b/templates/astro-monorepo/packages/ui/eslint.config.js
new file mode 100644
index 0000000000..702f89bf8b
--- /dev/null
+++ b/templates/astro-monorepo/packages/ui/eslint.config.js
@@ -0,0 +1,23 @@
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import tseslint from "typescript-eslint"
+import { defineConfig, globalIgnores } from "eslint/config"
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/templates/astro-monorepo/packages/ui/package.json b/templates/astro-monorepo/packages/ui/package.json
new file mode 100644
index 0000000000..ab26802149
--- /dev/null
+++ b/templates/astro-monorepo/packages/ui/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@workspace/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@turbo/gen": "^2.8.1",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@eslint/js": "^9.39.2",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^17.2.0",
+    "typescript-eslint": "^8.54.0",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}
diff --git a/templates/monorepo-next/apps/web/lib/.gitkeep b/templates/astro-monorepo/packages/ui/src/components/.gitkeep
similarity index 100%
rename from templates/monorepo-next/apps/web/lib/.gitkeep
rename to templates/astro-monorepo/packages/ui/src/components/.gitkeep
diff --git a/templates/monorepo-next/packages/ui/src/components/.gitkeep b/templates/astro-monorepo/packages/ui/src/hooks/.gitkeep
similarity index 100%
rename from templates/monorepo-next/packages/ui/src/components/.gitkeep
rename to templates/astro-monorepo/packages/ui/src/hooks/.gitkeep
diff --git a/templates/monorepo-next/packages/ui/src/hooks/.gitkeep b/templates/astro-monorepo/packages/ui/src/lib/.gitkeep
similarity index 100%
rename from templates/monorepo-next/packages/ui/src/hooks/.gitkeep
rename to templates/astro-monorepo/packages/ui/src/lib/.gitkeep
diff --git a/templates/astro-monorepo/packages/ui/src/styles/globals.css b/templates/astro-monorepo/packages/ui/src/styles/globals.css
new file mode 100644
index 0000000000..f00da9a136
--- /dev/null
+++ b/templates/astro-monorepo/packages/ui/src/styles/globals.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@source "../../../apps/**/*.{ts,tsx,astro}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
diff --git a/templates/astro-monorepo/packages/ui/tsconfig.json b/templates/astro-monorepo/packages/ui/tsconfig.json
new file mode 100644
index 0000000000..db4b78de10
--- /dev/null
+++ b/templates/astro-monorepo/packages/ui/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@workspace/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/astro-monorepo/packages/ui/tsconfig.lint.json b/templates/astro-monorepo/packages/ui/tsconfig.lint.json
new file mode 100644
index 0000000000..08a184e477
--- /dev/null
+++ b/templates/astro-monorepo/packages/ui/tsconfig.lint.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/monorepo-next/pnpm-workspace.yaml b/templates/astro-monorepo/pnpm-workspace.yaml
similarity index 100%
rename from templates/monorepo-next/pnpm-workspace.yaml
rename to templates/astro-monorepo/pnpm-workspace.yaml
diff --git a/templates/astro-monorepo/tsconfig.json b/templates/astro-monorepo/tsconfig.json
new file mode 100644
index 0000000000..63b9f0ef83
--- /dev/null
+++ b/templates/astro-monorepo/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
diff --git a/templates/astro-monorepo/turbo.json b/templates/astro-monorepo/turbo.json
new file mode 100644
index 0000000000..5caa8348d3
--- /dev/null
+++ b/templates/astro-monorepo/turbo.json
@@ -0,0 +1,15 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": ["dist/**"]
+    },
+    "lint": { "dependsOn": ["^lint"] },
+    "format": { "dependsOn": ["^format"] },
+    "typecheck": { "dependsOn": ["^typecheck"] },
+    "dev": { "cache": false, "persistent": true }
+  }
+}
diff --git a/templates/monorepo-next/.eslintrc.js b/templates/monorepo-next/.eslintrc.js
deleted file mode 100644
index 781274d013..0000000000
--- a/templates/monorepo-next/.eslintrc.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// This configuration only applies to the package manager root.
-/** @type {import("eslint").Linter.Config} */
-module.exports = {
-  ignorePatterns: ["apps/**", "packages/**"],
-  extends: ["@workspace/eslint-config/library.js"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-  },
-}
diff --git a/templates/monorepo-next/.vscode/settings.json b/templates/monorepo-next/.vscode/settings.json
deleted file mode 100644
index 61683dde1e..0000000000
--- a/templates/monorepo-next/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "tailwindCSS.experimental.configFile": "packages/ui/src/styles/globals.css"
-}
diff --git a/templates/monorepo-next/apps/web/app/page.tsx b/templates/monorepo-next/apps/web/app/page.tsx
deleted file mode 100644
index 4194fc0f7f..0000000000
--- a/templates/monorepo-next/apps/web/app/page.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Button } from "@workspace/ui/components/button"
-
-export default function Page() {
-  return (
-    <div className="flex items-center justify-center min-h-svh">
-      <div className="flex flex-col items-center justify-center gap-4">
-        <h1 className="text-2xl font-bold">Hello World</h1>
-        <div className="flex gap-2">
-          <Button>Button</Button>
-          <Button variant="outline">Outline</Button>
-        </div>
-      </div>
-    </div>
-  )
-}
diff --git a/templates/monorepo-next/apps/web/components/providers.tsx b/templates/monorepo-next/apps/web/components/providers.tsx
deleted file mode 100644
index 25e8677d80..0000000000
--- a/templates/monorepo-next/apps/web/components/providers.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { ThemeProvider as NextThemesProvider } from "next-themes"
-
-export function Providers({ children }: { children: React.ReactNode }) {
-  return (
-    <NextThemesProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-      enableColorScheme
-    >
-      {children}
-    </NextThemesProvider>
-  )
-}
diff --git a/templates/monorepo-next/packages/ui/src/components/button.tsx b/templates/monorepo-next/packages/ui/src/components/button.tsx
deleted file mode 100644
index 58396e6da9..0000000000
--- a/templates/monorepo-next/packages/ui/src/components/button.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "@workspace/ui/lib/utils"
-
-const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-        ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
-        destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-        icon: "size-8",
-        "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
-        "icon-lg": "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot.Root : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      data-variant={variant}
-      data-size={size}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }
diff --git a/templates/monorepo-next/packages/ui/src/styles/globals.css b/templates/monorepo-next/packages/ui/src/styles/globals.css
deleted file mode 100644
index a5c6ce38a7..0000000000
--- a/templates/monorepo-next/packages/ui/src/styles/globals.css
+++ /dev/null
@@ -1,127 +0,0 @@
-@import "tailwindcss";
-@source "../../../apps/**/*.{ts,tsx}";
-@source "../../../components/**/*.{ts,tsx}";
-@source "../**/*.{ts,tsx}";
-
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-:root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-}
-
-.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
diff --git a/templates/next-app/.gitignore b/templates/next-app/.gitignore
new file mode 100644
index 0000000000..e6ce5a4c74
--- /dev/null
+++ b/templates/next-app/.gitignore
@@ -0,0 +1,36 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/templates/next-app/.prettierignore b/templates/next-app/.prettierignore
new file mode 100644
index 0000000000..461b008410
--- /dev/null
+++ b/templates/next-app/.prettierignore
@@ -0,0 +1,7 @@
+dist/
+node_modules/
+.next/
+.turbo/
+coverage/
+pnpm-lock.yaml
+.pnpm-store/
\ No newline at end of file
diff --git a/templates/next-app/.prettierrc b/templates/next-app/.prettierrc
new file mode 100644
index 0000000000..a8a2054a15
--- /dev/null
+++ b/templates/next-app/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "app/globals.css",
+  "tailwindFunctions": ["cn", "cva"]
+}
diff --git a/templates/next-app/README.md b/templates/next-app/README.md
new file mode 100644
index 0000000000..1e66186dfe
--- /dev/null
+++ b/templates/next-app/README.md
@@ -0,0 +1,21 @@
+# Next.js template
+
+This is a Next.js template with shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command:
+
+```bash
+npx shadcn@latest add button
+```
+
+This will place the ui components in the `components` directory.
+
+## Using components
+
+To use the components in your app, import them as follows:
+
+```tsx
+import { Button } from "@/components/ui/button";
+```
diff --git a/templates/monorepo-next/apps/web/app/favicon.ico b/templates/next-app/app/favicon.ico
similarity index 100%
rename from templates/monorepo-next/apps/web/app/favicon.ico
rename to templates/next-app/app/favicon.ico
diff --git a/templates/next-app/app/globals.css b/templates/next-app/app/globals.css
new file mode 100644
index 0000000000..f1d8c73cdc
--- /dev/null
+++ b/templates/next-app/app/globals.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/templates/next-app/app/layout.tsx b/templates/next-app/app/layout.tsx
new file mode 100644
index 0000000000..a45812c258
--- /dev/null
+++ b/templates/next-app/app/layout.tsx
@@ -0,0 +1,32 @@
+import { Geist, Geist_Mono } from "next/font/google"
+
+import "./globals.css"
+import { ThemeProvider } from "@/components/theme-provider"
+
+const fontSans = Geist({
+  subsets: ["latin"],
+  variable: "--font-sans",
+})
+
+const fontMono = Geist_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+})
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased`}
+    >
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/templates/next-app/app/page.tsx b/templates/next-app/app/page.tsx
new file mode 100644
index 0000000000..98ff035b02
--- /dev/null
+++ b/templates/next-app/app/page.tsx
@@ -0,0 +1,19 @@
+import { Button } from "@/components/ui/button"
+
+export default function Page() {
+  return (
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="font-medium">Project ready!</h1>
+          <p>You may now add components and start building.</p>
+          <p>We&apos;ve already added the button component for you.</p>
+          <Button className="mt-2">Button</Button>
+        </div>
+        <div className="font-mono text-xs text-muted-foreground">
+          (Press <kbd>d</kbd> to toggle dark mode)
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/templates/monorepo-next/.npmrc b/templates/next-app/components/.gitkeep
similarity index 100%
rename from templates/monorepo-next/.npmrc
rename to templates/next-app/components/.gitkeep
diff --git a/templates/next-app/components/theme-provider.tsx b/templates/next-app/components/theme-provider.tsx
new file mode 100644
index 0000000000..3d44f48151
--- /dev/null
+++ b/templates/next-app/components/theme-provider.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+
+function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      {...props}
+    >
+      <ThemeHotkey />
+      {children}
+    </NextThemesProvider>
+  )
+}
+
+function isTypingTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  return (
+    target.isContentEditable ||
+    target.tagName === "INPUT" ||
+    target.tagName === "TEXTAREA" ||
+    target.tagName === "SELECT"
+  )
+}
+
+function ThemeHotkey() {
+  const { resolvedTheme, setTheme } = useTheme()
+
+  React.useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.defaultPrevented || event.repeat) {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return
+      }
+
+      if (event.key.toLowerCase() !== "d") {
+        return
+      }
+
+      if (isTypingTarget(event.target)) {
+        return
+      }
+
+      setTheme(resolvedTheme === "dark" ? "light" : "dark")
+    }
+
+    window.addEventListener("keydown", onKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown)
+    }
+  }, [resolvedTheme, setTheme])
+
+  return null
+}
+
+export { ThemeProvider }
diff --git a/templates/next-app/eslint.config.mjs b/templates/next-app/eslint.config.mjs
new file mode 100644
index 0000000000..05e726d1b4
--- /dev/null
+++ b/templates/next-app/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
diff --git a/templates/next-app/hooks/.gitkeep b/templates/next-app/hooks/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/next-app/lib/.gitkeep b/templates/next-app/lib/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/next-app/next.config.mjs b/templates/next-app/next.config.mjs
new file mode 100644
index 0000000000..1d6147825a
--- /dev/null
+++ b/templates/next-app/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+export default nextConfig
diff --git a/templates/next-app/package.json b/templates/next-app/package.json
new file mode 100644
index 0000000000..0f9127bfc0
--- /dev/null
+++ b/templates/next-app/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "next-app",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "16.1.6",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "16.1.6",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "postcss": "^8",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/templates/next-app/postcss.config.mjs b/templates/next-app/postcss.config.mjs
new file mode 100644
index 0000000000..f6c75ff968
--- /dev/null
+++ b/templates/next-app/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
+
+export default config
diff --git a/templates/next-app/public/.gitkeep b/templates/next-app/public/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/next-app/tsconfig.json b/templates/next-app/tsconfig.json
new file mode 100644
index 0000000000..dc2b03b63b
--- /dev/null
+++ b/templates/next-app/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": ["node_modules"]
+}
diff --git a/templates/next-monorepo/.eslintrc.js b/templates/next-monorepo/.eslintrc.js
new file mode 100644
index 0000000000..e49b18befe
--- /dev/null
+++ b/templates/next-monorepo/.eslintrc.js
@@ -0,0 +1,13 @@
+// Root-level ESLint config for a Turborepo workspace.
+// App/package lint rules live in each workspace's eslint.config.js.
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  ignorePatterns: [
+    "**/node_modules/**",
+    "**/.next/**",
+    "**/dist/**",
+    "**/.turbo/**",
+    "**/coverage/**",
+  ],
+}
diff --git a/templates/monorepo-next/.gitignore b/templates/next-monorepo/.gitignore
similarity index 100%
rename from templates/monorepo-next/.gitignore
rename to templates/next-monorepo/.gitignore
diff --git a/templates/next-monorepo/.npmrc b/templates/next-monorepo/.npmrc
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/next-monorepo/.prettierignore b/templates/next-monorepo/.prettierignore
new file mode 100644
index 0000000000..461b008410
--- /dev/null
+++ b/templates/next-monorepo/.prettierignore
@@ -0,0 +1,7 @@
+dist/
+node_modules/
+.next/
+.turbo/
+coverage/
+pnpm-lock.yaml
+.pnpm-store/
\ No newline at end of file
diff --git a/templates/next-monorepo/.prettierrc b/templates/next-monorepo/.prettierrc
new file mode 100644
index 0000000000..40ce0679f4
--- /dev/null
+++ b/templates/next-monorepo/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "packages/ui/src/styles/globals.css",
+  "tailwindFunctions": ["cn", "cva"]
+}
diff --git a/templates/monorepo-next/README.md b/templates/next-monorepo/README.md
similarity index 57%
rename from templates/monorepo-next/README.md
rename to templates/next-monorepo/README.md
index 226e3c4172..d5ea73bd85 100644
--- a/templates/monorepo-next/README.md
+++ b/templates/next-monorepo/README.md
@@ -1,12 +1,6 @@
 # shadcn/ui monorepo template
 
-This template is for creating a monorepo with shadcn/ui.
-
-## Usage
-
-```bash
-pnpm dlx shadcn@latest init
-```
+This is a Next.js monorepo template with shadcn/ui.
 
 ## Adding components
 
@@ -18,14 +12,10 @@ pnpm dlx shadcn@latest add button -c apps/web
 
 This will place the ui components in the `packages/ui/src/components` directory.
 
-## Tailwind
-
-Your `tailwind.config.ts` and `globals.css` are already set up to use the components from the `ui` package.
-
 ## Using components
 
 To use the components in your app, import them from the `ui` package.
 
 ```tsx
-import { Button } from "@workspace/ui/components/button"
+import { Button } from "@workspace/ui/components/button";
 ```
diff --git a/templates/next-monorepo/apps/web/app/favicon.ico b/templates/next-monorepo/apps/web/app/favicon.ico
new file mode 100644
index 0000000000..718d6fea48
Binary files /dev/null and b/templates/next-monorepo/apps/web/app/favicon.ico differ
diff --git a/templates/monorepo-next/apps/web/app/layout.tsx b/templates/next-monorepo/apps/web/app/layout.tsx
similarity index 59%
rename from templates/monorepo-next/apps/web/app/layout.tsx
rename to templates/next-monorepo/apps/web/app/layout.tsx
index 7a807d4e00..c992686805 100644
--- a/templates/monorepo-next/apps/web/app/layout.tsx
+++ b/templates/next-monorepo/apps/web/app/layout.tsx
@@ -1,7 +1,7 @@
 import { Geist, Geist_Mono } from "next/font/google"
 
 import "@workspace/ui/globals.css"
-import { Providers } from "@/components/providers"
+import { ThemeProvider } from "@/components/theme-provider"
 
 const fontSans = Geist({
   subsets: ["latin"],
@@ -19,11 +19,13 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased `}
-      >
-        <Providers>{children}</Providers>
+    <html
+      lang="en"
+      suppressHydrationWarning
+      className={`${fontSans.variable} ${fontMono.variable} font-sans antialiased`}
+    >
+      <body>
+        <ThemeProvider>{children}</ThemeProvider>
       </body>
     </html>
   )
diff --git a/templates/next-monorepo/apps/web/app/page.tsx b/templates/next-monorepo/apps/web/app/page.tsx
new file mode 100644
index 0000000000..88765bf926
--- /dev/null
+++ b/templates/next-monorepo/apps/web/app/page.tsx
@@ -0,0 +1,19 @@
+import { Button } from "@workspace/ui/components/button"
+
+export default function Page() {
+  return (
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="font-medium">Project ready!</h1>
+          <p>You may now add components and start building.</p>
+          <p>We&apos;ve already added the button component for you.</p>
+          <Button className="mt-2">Button</Button>
+        </div>
+        <div className="text-muted-foreground font-mono text-xs">
+          (Press <kbd>d</kbd> to toggle dark mode)
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/templates/monorepo-next/apps/web/components.json b/templates/next-monorepo/apps/web/components.json
similarity index 100%
rename from templates/monorepo-next/apps/web/components.json
rename to templates/next-monorepo/apps/web/components.json
diff --git a/templates/next-monorepo/apps/web/components/.gitkeep b/templates/next-monorepo/apps/web/components/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/next-monorepo/apps/web/components/theme-provider.tsx b/templates/next-monorepo/apps/web/components/theme-provider.tsx
new file mode 100644
index 0000000000..3d44f48151
--- /dev/null
+++ b/templates/next-monorepo/apps/web/components/theme-provider.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+
+function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      {...props}
+    >
+      <ThemeHotkey />
+      {children}
+    </NextThemesProvider>
+  )
+}
+
+function isTypingTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  return (
+    target.isContentEditable ||
+    target.tagName === "INPUT" ||
+    target.tagName === "TEXTAREA" ||
+    target.tagName === "SELECT"
+  )
+}
+
+function ThemeHotkey() {
+  const { resolvedTheme, setTheme } = useTheme()
+
+  React.useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.defaultPrevented || event.repeat) {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return
+      }
+
+      if (event.key.toLowerCase() !== "d") {
+        return
+      }
+
+      if (isTypingTarget(event.target)) {
+        return
+      }
+
+      setTheme(resolvedTheme === "dark" ? "light" : "dark")
+    }
+
+    window.addEventListener("keydown", onKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown)
+    }
+  }, [resolvedTheme, setTheme])
+
+  return null
+}
+
+export { ThemeProvider }
diff --git a/templates/monorepo-next/apps/web/eslint.config.js b/templates/next-monorepo/apps/web/eslint.config.js
similarity index 100%
rename from templates/monorepo-next/apps/web/eslint.config.js
rename to templates/next-monorepo/apps/web/eslint.config.js
diff --git a/templates/next-monorepo/apps/web/hooks/.gitkeep b/templates/next-monorepo/apps/web/hooks/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/next-monorepo/apps/web/lib/.gitkeep b/templates/next-monorepo/apps/web/lib/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/monorepo-next/apps/web/next-env.d.ts b/templates/next-monorepo/apps/web/next-env.d.ts
similarity index 84%
rename from templates/monorepo-next/apps/web/next-env.d.ts
rename to templates/next-monorepo/apps/web/next-env.d.ts
index 9edff1c7ca..7506fe6afb 100644
--- a/templates/monorepo-next/apps/web/next-env.d.ts
+++ b/templates/next-monorepo/apps/web/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts"
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/templates/monorepo-next/apps/web/next.config.mjs b/templates/next-monorepo/apps/web/next.config.mjs
similarity index 100%
rename from templates/monorepo-next/apps/web/next.config.mjs
rename to templates/next-monorepo/apps/web/next.config.mjs
diff --git a/templates/monorepo-next/apps/web/package.json b/templates/next-monorepo/apps/web/package.json
similarity index 88%
rename from templates/monorepo-next/apps/web/package.json
rename to templates/next-monorepo/apps/web/package.json
index 464f60283e..34141a5eae 100644
--- a/templates/monorepo-next/apps/web/package.json
+++ b/templates/next-monorepo/apps/web/package.json
@@ -7,13 +7,12 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
-    "lint:fix": "next lint --fix",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@workspace/ui": "workspace:*",
-    "lucide-react": "^0.563.0",
     "next": "16.1.6",
     "next-themes": "^0.4.6",
     "react": "^19.2.4",
diff --git a/templates/monorepo-next/apps/web/postcss.config.mjs b/templates/next-monorepo/apps/web/postcss.config.mjs
similarity index 100%
rename from templates/monorepo-next/apps/web/postcss.config.mjs
rename to templates/next-monorepo/apps/web/postcss.config.mjs
diff --git a/templates/monorepo-next/apps/web/tsconfig.json b/templates/next-monorepo/apps/web/tsconfig.json
similarity index 100%
rename from templates/monorepo-next/apps/web/tsconfig.json
rename to templates/next-monorepo/apps/web/tsconfig.json
diff --git a/templates/monorepo-next/package.json b/templates/next-monorepo/package.json
similarity index 64%
rename from templates/monorepo-next/package.json
rename to templates/next-monorepo/package.json
index 066343d892..03929240da 100644
--- a/templates/monorepo-next/package.json
+++ b/templates/next-monorepo/package.json
@@ -1,21 +1,23 @@
 {
-  "name": "shadcn-ui-monorepo",
+  "name": "next-monorepo",
   "version": "0.0.1",
   "private": true,
   "scripts": {
     "build": "turbo build",
     "dev": "turbo dev",
     "lint": "turbo lint",
-    "format": "prettier --write \"**/*.{ts,tsx,md}\""
+    "format": "turbo format",
+    "typecheck": "turbo typecheck"
   },
   "devDependencies": {
     "@workspace/eslint-config": "workspace:*",
     "@workspace/typescript-config": "workspace:*",
     "prettier": "^3.8.1",
-    "turbo": "^2.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "turbo": "^2.8.8",
     "typescript": "5.9.3"
   },
-  "packageManager": "pnpm@10.4.1",
+  "packageManager": "pnpm@9.0.6",
   "engines": {
     "node": ">=20"
   }
diff --git a/templates/monorepo-next/packages/eslint-config/README.md b/templates/next-monorepo/packages/eslint-config/README.md
similarity index 100%
rename from templates/monorepo-next/packages/eslint-config/README.md
rename to templates/next-monorepo/packages/eslint-config/README.md
diff --git a/templates/monorepo-next/packages/eslint-config/base.js b/templates/next-monorepo/packages/eslint-config/base.js
similarity index 89%
rename from templates/monorepo-next/packages/eslint-config/base.js
rename to templates/next-monorepo/packages/eslint-config/base.js
index b0f1eaea93..8708a1b61d 100644
--- a/templates/monorepo-next/packages/eslint-config/base.js
+++ b/templates/next-monorepo/packages/eslint-config/base.js
@@ -27,6 +27,6 @@ export const config = [
     },
   },
   {
-    ignores: ["dist/**"],
+    ignores: ["dist/**", ".next/**", "**/.turbo/**", "**/coverage/**"],
   },
 ]
diff --git a/templates/monorepo-next/packages/eslint-config/next.js b/templates/next-monorepo/packages/eslint-config/next.js
similarity index 100%
rename from templates/monorepo-next/packages/eslint-config/next.js
rename to templates/next-monorepo/packages/eslint-config/next.js
diff --git a/templates/monorepo-next/packages/eslint-config/package.json b/templates/next-monorepo/packages/eslint-config/package.json
similarity index 100%
rename from templates/monorepo-next/packages/eslint-config/package.json
rename to templates/next-monorepo/packages/eslint-config/package.json
diff --git a/templates/monorepo-next/packages/eslint-config/react-internal.js b/templates/next-monorepo/packages/eslint-config/react-internal.js
similarity index 100%
rename from templates/monorepo-next/packages/eslint-config/react-internal.js
rename to templates/next-monorepo/packages/eslint-config/react-internal.js
diff --git a/templates/monorepo-next/packages/typescript-config/README.md b/templates/next-monorepo/packages/typescript-config/README.md
similarity index 100%
rename from templates/monorepo-next/packages/typescript-config/README.md
rename to templates/next-monorepo/packages/typescript-config/README.md
diff --git a/templates/monorepo-next/packages/typescript-config/base.json b/templates/next-monorepo/packages/typescript-config/base.json
similarity index 100%
rename from templates/monorepo-next/packages/typescript-config/base.json
rename to templates/next-monorepo/packages/typescript-config/base.json
diff --git a/templates/monorepo-next/packages/typescript-config/nextjs.json b/templates/next-monorepo/packages/typescript-config/nextjs.json
similarity index 100%
rename from templates/monorepo-next/packages/typescript-config/nextjs.json
rename to templates/next-monorepo/packages/typescript-config/nextjs.json
diff --git a/templates/monorepo-next/packages/typescript-config/package.json b/templates/next-monorepo/packages/typescript-config/package.json
similarity index 100%
rename from templates/monorepo-next/packages/typescript-config/package.json
rename to templates/next-monorepo/packages/typescript-config/package.json
diff --git a/templates/monorepo-next/packages/typescript-config/react-library.json b/templates/next-monorepo/packages/typescript-config/react-library.json
similarity index 100%
rename from templates/monorepo-next/packages/typescript-config/react-library.json
rename to templates/next-monorepo/packages/typescript-config/react-library.json
diff --git a/templates/monorepo-next/packages/ui/components.json b/templates/next-monorepo/packages/ui/components.json
similarity index 100%
rename from templates/monorepo-next/packages/ui/components.json
rename to templates/next-monorepo/packages/ui/components.json
diff --git a/templates/monorepo-next/packages/ui/eslint.config.js b/templates/next-monorepo/packages/ui/eslint.config.js
similarity index 100%
rename from templates/monorepo-next/packages/ui/eslint.config.js
rename to templates/next-monorepo/packages/ui/eslint.config.js
diff --git a/templates/monorepo-next/packages/ui/package.json b/templates/next-monorepo/packages/ui/package.json
similarity index 78%
rename from templates/monorepo-next/packages/ui/package.json
rename to templates/next-monorepo/packages/ui/package.json
index 49186cf283..a08f37e4af 100644
--- a/templates/monorepo-next/packages/ui/package.json
+++ b/templates/next-monorepo/packages/ui/package.json
@@ -4,18 +4,14 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "lint": "eslint . --max-warnings 0"
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
     "next-themes": "^0.4.6",
-    "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0",
-    "tw-animate-css": "^1.4.0",
     "zod": "^3.25.76"
   },
   "devDependencies": {
diff --git a/templates/monorepo-next/packages/ui/postcss.config.mjs b/templates/next-monorepo/packages/ui/postcss.config.mjs
similarity index 100%
rename from templates/monorepo-next/packages/ui/postcss.config.mjs
rename to templates/next-monorepo/packages/ui/postcss.config.mjs
diff --git a/templates/next-monorepo/packages/ui/src/components/.gitkeep b/templates/next-monorepo/packages/ui/src/components/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/next-monorepo/packages/ui/src/hooks/.gitkeep b/templates/next-monorepo/packages/ui/src/hooks/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/next-monorepo/packages/ui/src/lib/.gitkeep b/templates/next-monorepo/packages/ui/src/lib/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/next-monorepo/packages/ui/src/styles/globals.css b/templates/next-monorepo/packages/ui/src/styles/globals.css
new file mode 100644
index 0000000000..e0c4ce5156
--- /dev/null
+++ b/templates/next-monorepo/packages/ui/src/styles/globals.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
diff --git a/templates/monorepo-next/packages/ui/tsconfig.json b/templates/next-monorepo/packages/ui/tsconfig.json
similarity index 100%
rename from templates/monorepo-next/packages/ui/tsconfig.json
rename to templates/next-monorepo/packages/ui/tsconfig.json
diff --git a/templates/monorepo-next/packages/ui/tsconfig.lint.json b/templates/next-monorepo/packages/ui/tsconfig.lint.json
similarity index 100%
rename from templates/monorepo-next/packages/ui/tsconfig.lint.json
rename to templates/next-monorepo/packages/ui/tsconfig.lint.json
diff --git a/templates/monorepo-next/pnpm-lock.yaml b/templates/next-monorepo/pnpm-lock.yaml
similarity index 72%
rename from templates/monorepo-next/pnpm-lock.yaml
rename to templates/next-monorepo/pnpm-lock.yaml
index 04c9aea4ff..70758c1fb1 100644
--- a/templates/monorepo-next/pnpm-lock.yaml
+++ b/templates/next-monorepo/pnpm-lock.yaml
@@ -15,48 +15,45 @@ importers:
         specifier: workspace:*
         version: link:packages/typescript-config
       prettier:
-        specifier: ^3.7.4
-        version: 3.7.4
+        specifier: ^3.8.1
+        version: 3.8.1
       turbo:
-        specifier: ^2.6.3
-        version: 2.6.3
+        specifier: ^2.8.1
+        version: 2.8.7
       typescript:
-        specifier: 5.7.3
-        version: 5.7.3
+        specifier: 5.9.3
+        version: 5.9.3
 
   apps/web:
     dependencies:
       '@workspace/ui':
         specifier: workspace:*
         version: link:../../packages/ui
-      lucide-react:
-        specifier: ^0.475.0
-        version: 0.475.0(react@19.2.1)
       next:
-        specifier: 16.0.10
-        version: 16.0.10(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        specifier: 16.1.6
+        version: 16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-themes:
         specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1)
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react:
-        specifier: ^19.2.1
-        version: 19.2.1
+        specifier: ^19.2.4
+        version: 19.2.4
       react-dom:
-        specifier: ^19.2.1
-        version: 19.2.1(react@19.2.1)
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
     devDependencies:
       '@tailwindcss/postcss':
-        specifier: ^4.1.17
-        version: 4.1.17
+        specifier: ^4.1.18
+        version: 4.1.18
       '@types/node':
-        specifier: ^20.19.25
-        version: 20.19.25
+        specifier: ^25.1.0
+        version: 25.2.3
       '@types/react':
-        specifier: ^19.2.7
-        version: 19.2.7
+        specifier: ^19.2.10
+        version: 19.2.14
       '@types/react-dom':
         specifier: ^19.2.3
-        version: 19.2.3(@types/react@19.2.7)
+        version: 19.2.3(@types/react@19.2.14)
       '@workspace/eslint-config':
         specifier: workspace:^
         version: link:../../packages/eslint-config
@@ -64,8 +61,8 @@ importers:
         specifier: workspace:*
         version: link:../../packages/typescript-config
       eslint:
-        specifier: ^9.39.1
-        version: 9.39.1(jiti@2.6.1)
+        specifier: ^9.39.2
+        version: 9.39.2(jiti@2.6.1)
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -73,95 +70,77 @@ importers:
   packages/eslint-config:
     devDependencies:
       '@eslint/js':
-        specifier: ^9.39.1
-        version: 9.39.1
+        specifier: ^9.39.2
+        version: 9.39.2
       '@next/eslint-plugin-next':
-        specifier: ^15.4.5
-        version: 15.4.5
+        specifier: ^16.1.6
+        version: 16.1.6
       '@typescript-eslint/eslint-plugin':
-        specifier: ^8.39.0
-        version: 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
+        specifier: ^8.54.0
+        version: 8.55.0(@typescript-eslint/parser@8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser':
-        specifier: ^8.39.0
-        version: 8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
+        specifier: ^8.54.0
+        version: 8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       eslint:
-        specifier: ^9.32.0
-        version: 9.32.0(jiti@2.6.1)
+        specifier: ^9.39.2
+        version: 9.39.2(jiti@2.6.1)
       eslint-config-prettier:
-        specifier: ^9.1.2
-        version: 9.1.2(eslint@9.32.0(jiti@2.6.1))
+        specifier: ^10.1.8
+        version: 10.1.8(eslint@9.39.2(jiti@2.6.1))
       eslint-plugin-only-warn:
         specifier: ^1.1.0
         version: 1.1.0
       eslint-plugin-react:
         specifier: ^7.37.5
-        version: 7.37.5(eslint@9.32.0(jiti@2.6.1))
+        version: 7.37.5(eslint@9.39.2(jiti@2.6.1))
       eslint-plugin-react-hooks:
-        specifier: ^5.2.0
-        version: 5.2.0(eslint@9.32.0(jiti@2.6.1))
+        specifier: ^7.0.1
+        version: 7.0.1(eslint@9.39.2(jiti@2.6.1))
       eslint-plugin-turbo:
-        specifier: ^2.5.5
-        version: 2.5.5(eslint@9.32.0(jiti@2.6.1))(turbo@2.6.3)
+        specifier: ^2.8.1
+        version: 2.8.7(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.7)
       globals:
-        specifier: ^15.15.0
-        version: 15.15.0
+        specifier: ^17.2.0
+        version: 17.3.0
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: ^5.9.3
+        version: 5.9.3
       typescript-eslint:
-        specifier: ^8.39.0
-        version: 8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
+        specifier: ^8.54.0
+        version: 8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
   packages/typescript-config: {}
 
   packages/ui:
     dependencies:
-      '@radix-ui/react-slot':
-        specifier: ^1.2.3
-        version: 1.2.3(@types/react@19.1.9)(react@19.1.1)
-      class-variance-authority:
-        specifier: ^0.7.1
-        version: 0.7.1
-      clsx:
-        specifier: ^2.1.1
-        version: 2.1.1
-      lucide-react:
-        specifier: ^0.475.0
-        version: 0.475.0(react@19.1.1)
       next-themes:
         specifier: ^0.4.6
-        version: 0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       react:
-        specifier: ^19.1.1
-        version: 19.1.1
+        specifier: ^19.2.4
+        version: 19.2.4
       react-dom:
-        specifier: ^19.1.1
-        version: 19.1.1(react@19.1.1)
-      tailwind-merge:
-        specifier: ^3.3.1
-        version: 3.3.1
-      tw-animate-css:
-        specifier: ^1.3.6
-        version: 1.3.6
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
       zod:
         specifier: ^3.25.76
         version: 3.25.76
     devDependencies:
       '@tailwindcss/postcss':
-        specifier: ^4.1.11
-        version: 4.1.11
+        specifier: ^4.1.18
+        version: 4.1.18
       '@turbo/gen':
-        specifier: ^2.5.5
-        version: 2.5.5(@types/node@20.19.9)(typescript@5.9.2)
+        specifier: ^2.8.1
+        version: 2.8.7(@types/node@25.2.3)
       '@types/node':
-        specifier: ^20.19.9
-        version: 20.19.9
+        specifier: ^25.1.0
+        version: 25.2.3
       '@types/react':
-        specifier: ^19.1.9
-        version: 19.1.9
+        specifier: ^19.2.10
+        version: 19.2.14
       '@types/react-dom':
-        specifier: ^19.1.7
-        version: 19.1.7(@types/react@19.1.9)
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
       '@workspace/eslint-config':
         specifier: workspace:*
         version: link:../eslint-config
@@ -169,14 +148,14 @@ importers:
         specifier: workspace:*
         version: link:../typescript-config
       eslint:
-        specifier: ^9.32.0
-        version: 9.39.1(jiti@2.6.1)
+        specifier: ^9.39.2
+        version: 9.39.2(jiti@2.6.1)
       tailwindcss:
-        specifier: ^4.1.11
-        version: 4.1.11
+        specifier: ^4.1.18
+        version: 4.1.18
       typescript:
-        specifier: ^5.9.2
-        version: 5.9.2
+        specifier: ^5.9.3
+        version: 5.9.3
 
 packages:
 
@@ -184,26 +163,235 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.6':
+    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
     engines: {node: '>=6.0.0'}
+    hasBin: true
 
   '@babel/runtime-corejs3@7.28.2':
     resolution: {integrity: sha512-FVFaVs2/dZgD3Y9ZD+AKNKjyGKzwu0C54laAXWUXgLcVXcCX6YZ6GhK2cp7FogSN2OA0Fu+QT8dP3FUdo9ShSQ==}
     engines: {node: '>=6.9.0'}
 
-  '@cspotcode/source-map-support@0.8.1':
-    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
-    engines: {node: '>=12'}
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
 
   '@emnapi/runtime@1.7.1':
     resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
 
-  '@eslint-community/eslint-utils@4.7.0':
-    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+  '@esbuild/aix-ppc64@0.27.3':
+    resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.3':
+    resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.3':
+    resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.3':
+    resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.3':
+    resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.3':
+    resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.3':
+    resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.3':
+    resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.3':
+    resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.3':
+    resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.3':
+    resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.3':
+    resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.3':
+    resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.3':
+    resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.3':
+    resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.3':
+    resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.3':
+    resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.3':
+    resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.3':
+    resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.3':
+    resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.3':
+    resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.3':
+    resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
 
   '@eslint-community/eslint-utils@4.9.0':
     resolution: {integrity: sha512-ayVFHdtZ+hsq1t2Dy24wCmGXGe4q9Gu3smhLYALJrr473ZH27MsnSL+LKUlimp4BWJqMDMLmPpx/Q9R3OAlL4g==}
@@ -211,66 +399,40 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.12.1':
-    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
-    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
   '@eslint-community/regexpp@4.12.2':
     resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
-  '@eslint/config-array@0.21.0':
-    resolution: {integrity: sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/config-array@0.21.1':
     resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/config-helpers@0.3.0':
-    resolution: {integrity: sha512-ViuymvFmcJi04qdZeDc2whTHryouGcDlaxPqarTD0ZE10ISpxGUVZGZDx4w01upyIynL3iu6IXH2bS1NhclQMw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/config-helpers@0.4.2':
     resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/core@0.15.1':
-    resolution: {integrity: sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/core@0.17.0':
     resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/eslintrc@3.3.1':
-    resolution: {integrity: sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/eslintrc@3.3.3':
     resolution: {integrity: sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/js@9.32.0':
-    resolution: {integrity: sha512-BBpRFZK3eX6uMLKz8WxFOBIFFcGFJ/g8XuwjTHCqHROSIsopI+ddn/d5Cfh36+7+e5edVS8dbSHnBNhrLEX0zg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/js@9.39.1':
-    resolution: {integrity: sha512-S26Stp4zCy88tH94QbBv3XCuzRQiZ9yXofEILmglYTh/Ug/a9/umqvgFtYBAo3Lp0nsI/5/qH1CCrbdK3AP1Tw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
-  '@eslint/object-schema@2.1.6':
-    resolution: {integrity: sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==}
+  '@eslint/js@9.39.2':
+    resolution: {integrity: sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/object-schema@2.1.7':
     resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/plugin-kit@0.3.4':
-    resolution: {integrity: sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   '@eslint/plugin-kit@0.4.1':
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -279,10 +441,6 @@ packages:
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
 
-  '@humanfs/node@0.16.6':
-    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
-    engines: {node: '>=18.18.0'}
-
   '@humanfs/node@0.16.7':
     resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
     engines: {node: '>=18.18.0'}
@@ -291,10 +449,6 @@ packages:
     resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
     engines: {node: '>=12.22'}
 
-  '@humanwhocodes/retry@0.3.1':
-    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
-    engines: {node: '>=18.18'}
-
   '@humanwhocodes/retry@0.4.3':
     resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
     engines: {node: '>=18.18'}
@@ -436,12 +590,139 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@isaacs/fs-minipass@4.0.1':
-    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
-    engines: {node: '>=18.0.0'}
+  '@inquirer/ansi@1.0.2':
+    resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
+    engines: {node: '>=18'}
 
-  '@jridgewell/gen-mapping@0.3.12':
-    resolution: {integrity: sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==}
+  '@inquirer/checkbox@4.3.2':
+    resolution: {integrity: sha512-VXukHf0RR1doGe6Sm4F0Em7SWYLTHSsbGfJdS9Ja2bX5/D5uwVOEjr07cncLROdBvmnvCATYEWlHqYmXv2IlQA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/confirm@5.1.21':
+    resolution: {integrity: sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@10.3.2':
+    resolution: {integrity: sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/editor@4.2.23':
+    resolution: {integrity: sha512-aLSROkEwirotxZ1pBaP8tugXRFCxW94gwrQLxXfrZsKkfjOYC1aRvAZuhpJOb5cu4IBTJdsCigUlf2iCOu4ZDQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/expand@4.0.23':
+    resolution: {integrity: sha512-nRzdOyFYnpeYTTR2qFwEVmIWypzdAx/sIkCMeTNTcflFOovfqUk+HcFhQQVBftAh9gmGrpFj6QcGEqrDMDOiew==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@1.0.15':
+    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
+    engines: {node: '>=18'}
+
+  '@inquirer/input@4.3.1':
+    resolution: {integrity: sha512-kN0pAM4yPrLjJ1XJBjDxyfDduXOuQHrBB8aLDMueuwUGn+vNpF7Gq7TvyVxx8u4SHlFFj4trmj+a2cbpG4Jn1g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/number@3.0.23':
+    resolution: {integrity: sha512-5Smv0OK7K0KUzUfYUXDXQc9jrf8OHo4ktlEayFlelCjwMXz0299Y8OrI+lj7i4gCBY15UObk76q0QtxjzFcFcg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/password@4.0.23':
+    resolution: {integrity: sha512-zREJHjhT5vJBMZX/IUbyI9zVtVfOLiTO66MrF/3GFZYZ7T4YILW5MSkEYHceSii/KtRk+4i3RE7E1CUXA2jHcA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/prompts@7.10.1':
+    resolution: {integrity: sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/rawlist@4.1.11':
+    resolution: {integrity: sha512-+LLQB8XGr3I5LZN/GuAHo+GpDJegQwuPARLChlMICNdwW7OwV2izlCSCxN6cqpL0sMXmbKbFcItJgdQq5EBXTw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/search@3.2.2':
+    resolution: {integrity: sha512-p2bvRfENXCZdWF/U2BXvnSI9h+tuA8iNqtUKb9UWbmLYCRQxd8WkvwWvYn+3NgYaNwdUkHytJMGG4MMLucI1kA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/select@4.4.2':
+    resolution: {integrity: sha512-l4xMuJo55MAe+N7Qr4rX90vypFwCajSakx59qe/tMaC1aEHWLyw68wF4o0A4SLAY4E0nd+Vt+EyskeDIqu1M6w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/type@3.0.10':
+    resolution: {integrity: sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
 
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -453,71 +734,62 @@ packages:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/sourcemap-codec@1.5.4':
-    resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
-
   '@jridgewell/sourcemap-codec@1.5.5':
     resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
 
-  '@jridgewell/trace-mapping@0.3.29':
-    resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
-
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
-  '@jridgewell/trace-mapping@0.3.9':
-    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
+  '@next/env@16.1.6':
+    resolution: {integrity: sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==}
 
-  '@next/env@16.0.10':
-    resolution: {integrity: sha512-8tuaQkyDVgeONQ1MeT9Mkk8pQmZapMKFh5B+OrFUlG3rVmYTXcXlBetBgTurKXGaIZvkoqRT9JL5K3phXcgang==}
+  '@next/eslint-plugin-next@16.1.6':
+    resolution: {integrity: sha512-/Qq3PTagA6+nYVfryAtQ7/9FEr/6YVyvOtl6rZnGsbReGLf0jZU6gkpr1FuChAQpvV46a78p4cmHOVP8mbfSMQ==}
 
-  '@next/eslint-plugin-next@15.4.5':
-    resolution: {integrity: sha512-YhbrlbEt0m4jJnXHMY/cCUDBAWgd5SaTa5mJjzOt82QwflAFfW/h3+COp2TfVSzhmscIZ5sg2WXt3MLziqCSCw==}
-
-  '@next/swc-darwin-arm64@16.0.10':
-    resolution: {integrity: sha512-4XgdKtdVsaflErz+B5XeG0T5PeXKDdruDf3CRpnhN+8UebNa5N2H58+3GDgpn/9GBurrQ1uWW768FfscwYkJRg==}
+  '@next/swc-darwin-arm64@16.1.6':
+    resolution: {integrity: sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@next/swc-darwin-x64@16.0.10':
-    resolution: {integrity: sha512-spbEObMvRKkQ3CkYVOME+ocPDFo5UqHb8EMTS78/0mQ+O1nqE8toHJVioZo4TvebATxgA8XMTHHrScPrn68OGw==}
+  '@next/swc-darwin-x64@16.1.6':
+    resolution: {integrity: sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@next/swc-linux-arm64-gnu@16.0.10':
-    resolution: {integrity: sha512-uQtWE3X0iGB8apTIskOMi2w/MKONrPOUCi5yLO+v3O8Mb5c7K4Q5KD1jvTpTF5gJKa3VH/ijKjKUq9O9UhwOYw==}
+  '@next/swc-linux-arm64-gnu@16.1.6':
+    resolution: {integrity: sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-arm64-musl@16.0.10':
-    resolution: {integrity: sha512-llA+hiDTrYvyWI21Z0L1GiXwjQaanPVQQwru5peOgtooeJ8qx3tlqRV2P7uH2pKQaUfHxI/WVarvI5oYgGxaTw==}
+  '@next/swc-linux-arm64-musl@16.1.6':
+    resolution: {integrity: sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@next/swc-linux-x64-gnu@16.0.10':
-    resolution: {integrity: sha512-AK2q5H0+a9nsXbeZ3FZdMtbtu9jxW4R/NgzZ6+lrTm3d6Zb7jYrWcgjcpM1k8uuqlSy4xIyPR2YiuUr+wXsavA==}
+  '@next/swc-linux-x64-gnu@16.1.6':
+    resolution: {integrity: sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-linux-x64-musl@16.0.10':
-    resolution: {integrity: sha512-1TDG9PDKivNw5550S111gsO4RGennLVl9cipPhtkXIFVwo31YZ73nEbLjNC8qG3SgTz/QZyYyaFYMeY4BKZR/g==}
+  '@next/swc-linux-x64-musl@16.1.6':
+    resolution: {integrity: sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@next/swc-win32-arm64-msvc@16.0.10':
-    resolution: {integrity: sha512-aEZIS4Hh32xdJQbHz121pyuVZniSNoqDVx1yIr2hy+ZwJGipeqnMZBJHyMxv2tiuAXGx6/xpTcQJ6btIiBjgmg==}
+  '@next/swc-win32-arm64-msvc@16.1.6':
+    resolution: {integrity: sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@next/swc-win32-x64-msvc@16.0.10':
-    resolution: {integrity: sha512-E+njfCoFLb01RAFEnGZn6ERoOqhK1Gl3Lfz1Kjnj0Ulfu7oJbuMyvBKNj/bw8XZnenHDASlygTjZICQW+rYW1Q==}
+  '@next/swc-win32-x64-msvc@16.1.6':
+    resolution: {integrity: sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -534,143 +806,68 @@ packages:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
     engines: {node: '>= 8'}
 
-  '@radix-ui/react-compose-refs@1.1.2':
-    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
-  '@radix-ui/react-slot@1.2.3':
-    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
-    peerDependencies:
-      '@types/react': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
-  '@tailwindcss/node@4.1.11':
-    resolution: {integrity: sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==}
+  '@tailwindcss/node@4.1.18':
+    resolution: {integrity: sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==}
 
-  '@tailwindcss/node@4.1.17':
-    resolution: {integrity: sha512-csIkHIgLb3JisEFQ0vxr2Y57GUNYh447C8xzwj89U/8fdW8LhProdxvnVH6U8M2Y73QKiTIH+LWbK3V2BBZsAg==}
-
-  '@tailwindcss/oxide-android-arm64@4.1.11':
-    resolution: {integrity: sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==}
+  '@tailwindcss/oxide-android-arm64@4.1.18':
+    resolution: {integrity: sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-android-arm64@4.1.17':
-    resolution: {integrity: sha512-BMqpkJHgOZ5z78qqiGE6ZIRExyaHyuxjgrJ6eBO5+hfrfGkuya0lYfw8fRHG77gdTjWkNWEEm+qeG2cDMxArLQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [android]
-
-  '@tailwindcss/oxide-darwin-arm64@4.1.11':
-    resolution: {integrity: sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==}
+  '@tailwindcss/oxide-darwin-arm64@4.1.18':
+    resolution: {integrity: sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.17':
-    resolution: {integrity: sha512-EquyumkQweUBNk1zGEU/wfZo2qkp/nQKRZM8bUYO0J+Lums5+wl2CcG1f9BgAjn/u9pJzdYddHWBiFXJTcxmOg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-darwin-x64@4.1.11':
-    resolution: {integrity: sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==}
+  '@tailwindcss/oxide-darwin-x64@4.1.18':
+    resolution: {integrity: sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.17':
-    resolution: {integrity: sha512-gdhEPLzke2Pog8s12oADwYu0IAw04Y2tlmgVzIN0+046ytcgx8uZmCzEg4VcQh+AHKiS7xaL8kGo/QTiNEGRog==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@tailwindcss/oxide-freebsd-x64@4.1.11':
-    resolution: {integrity: sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==}
+  '@tailwindcss/oxide-freebsd-x64@4.1.18':
+    resolution: {integrity: sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.17':
-    resolution: {integrity: sha512-hxGS81KskMxML9DXsaXT1H0DyA+ZBIbyG/sSAjWNe2EDl7TkPOBI42GBV3u38itzGUOmFfCzk1iAjDXds8Oh0g==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [freebsd]
-
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
-    resolution: {integrity: sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
+    resolution: {integrity: sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
-    resolution: {integrity: sha512-k7jWk5E3ldAdw0cNglhjSgv501u7yrMf8oeZ0cElhxU6Y2o7f8yqelOp3fhf7evjIS6ujTI3U8pKUXV2I4iXHQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
-    resolution: {integrity: sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
+    resolution: {integrity: sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
-    resolution: {integrity: sha512-HVDOm/mxK6+TbARwdW17WrgDYEGzmoYayrCgmLEw7FxTPLcp/glBisuyWkFz/jb7ZfiAXAXUACfyItn+nTgsdQ==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
+    resolution: {integrity: sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
-    resolution: {integrity: sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
-    resolution: {integrity: sha512-HvZLfGr42i5anKtIeQzxdkw/wPqIbpeZqe7vd3V9vI3RQxe3xU1fLjss0TjyhxWcBaipk7NYwSrwTwK1hJARMg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
-    resolution: {integrity: sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
+    resolution: {integrity: sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
-    resolution: {integrity: sha512-M3XZuORCGB7VPOEDH+nzpJ21XPvK5PyjlkSFkFziNHGLc5d6g3di2McAAblmaSUNl8IOmzYwLx9NsE7bplNkwQ==}
+  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
+    resolution: {integrity: sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
-    resolution: {integrity: sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
-    resolution: {integrity: sha512-k7f+pf9eXLEey4pBlw+8dgfJHY4PZ5qOUFDyNf7SI6lHjQ9Zt7+NcscjpwdCEbYi6FI5c2KDTDWyf2iHcCSyyQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
-    resolution: {integrity: sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==}
+  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
+    resolution: {integrity: sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
     bundledDependencies:
@@ -681,77 +878,34 @@ packages:
       - '@emnapi/wasi-threads'
       - tslib
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
-    resolution: {integrity: sha512-cEytGqSSoy7zK4JRWiTCx43FsKP/zGr0CsuMawhH67ONlH+T79VteQeJQRO/X7L0juEUA8ZyuYikcRBf0vsxhg==}
-    engines: {node: '>=14.0.0'}
-    cpu: [wasm32]
-    bundledDependencies:
-      - '@napi-rs/wasm-runtime'
-      - '@emnapi/core'
-      - '@emnapi/runtime'
-      - '@tybys/wasm-util'
-      - '@emnapi/wasi-threads'
-      - tslib
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
-    resolution: {integrity: sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==}
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
+    resolution: {integrity: sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
-    resolution: {integrity: sha512-JU5AHr7gKbZlOGvMdb4722/0aYbU+tN6lv1kONx0JK2cGsh7g148zVWLM0IKR3NeKLv+L90chBVYcJ8uJWbC9A==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
-    resolution: {integrity: sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
+    resolution: {integrity: sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
-    resolution: {integrity: sha512-SKWM4waLuqx0IH+FMDUw6R66Hu4OuTALFgnleKbqhgGU30DY20NORZMZUKgLRjQXNN2TLzKvh48QXTig4h4bGw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@tailwindcss/oxide@4.1.11':
-    resolution: {integrity: sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==}
+  '@tailwindcss/oxide@4.1.18':
+    resolution: {integrity: sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==}
     engines: {node: '>= 10'}
 
-  '@tailwindcss/oxide@4.1.17':
-    resolution: {integrity: sha512-F0F7d01fmkQhsTjXezGBLdrl1KresJTcI3DB8EkScCldyKp3Msz4hub4uyYaVnk88BAS1g5DQjjF6F5qczheLA==}
-    engines: {node: '>= 10'}
-
-  '@tailwindcss/postcss@4.1.11':
-    resolution: {integrity: sha512-q/EAIIpF6WpLhKEuQSEVMZNMIY8KhWoAemZ9eylNAih9jxMGAYPPWBn3I9QL/2jZ+e7OEz/tZkX5HwbBR4HohA==}
-
-  '@tailwindcss/postcss@4.1.17':
-    resolution: {integrity: sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==}
+  '@tailwindcss/postcss@4.1.18':
+    resolution: {integrity: sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==}
 
   '@tootallnate/quickjs-emscripten@0.23.0':
     resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
 
-  '@tsconfig/node10@1.0.11':
-    resolution: {integrity: sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==}
-
-  '@tsconfig/node12@1.0.11':
-    resolution: {integrity: sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==}
-
-  '@tsconfig/node14@1.0.3':
-    resolution: {integrity: sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==}
-
-  '@tsconfig/node16@1.0.4':
-    resolution: {integrity: sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==}
-
-  '@turbo/gen@2.5.5':
-    resolution: {integrity: sha512-8zay4rVILdeTRLBR3rVVRLmLpvQrektMPXjwK9aze86nVwcLYxrCBYghRs88SOxk2r1qlwgg/e8UNzdkGB2UdA==}
+  '@turbo/gen@2.8.7':
+    resolution: {integrity: sha512-3393Qo7Hi1Y0Qr+7JEQ+KflhoqFCzqj8jK1EnSZDsZG0lV3XL2Ajpt5T3iGsxZ/Ss2ujqXCC4EPbw8+AuZ3c6w==}
     hasBin: true
 
-  '@turbo/workspaces@2.5.5':
-    resolution: {integrity: sha512-Gye68+szmOp96xMvmondTRQYcYvevDqUP9JuN9jC6kqzFel7U1pJ/hoPvyD3WGQNxyKsdF+wJ5fvNaYXkzr6tQ==}
+  '@turbo/workspaces@2.8.7':
+    resolution: {integrity: sha512-So0Qza8n1oTBhiVhoedsvdLcI3e+ZvetR2f8t/2Px1DXL9FeWv5ITVVEh+tBVebZwJwmfTT7cuOdy2xOihhkmA==}
     hasBin: true
 
   '@types/estree@1.0.8':
@@ -770,27 +924,16 @@ packages:
     resolution: {integrity: sha512-zmPitbQ8+6zNutpwgcQuLcsEpn/Cj54Kbn7L5pX0Os5kdWplB7xPgEh/g+SWOB/qmows2gpuCaPyduq8ZZRnxA==}
     deprecated: This is a stub types definition. minimatch provides its own type definitions, so you do not need this installed.
 
-  '@types/node@20.19.25':
-    resolution: {integrity: sha512-ZsJzA5thDQMSQO788d7IocwwQbI8B5OPzmqNvpf3NY/+MHDAS759Wo0gd2WQeXYt5AAAQjzcrTVC6SKCuYgoCQ==}
-
-  '@types/node@20.19.9':
-    resolution: {integrity: sha512-cuVNgarYWZqxRJDQHEB58GEONhOK79QVR/qYx4S7kcUObQvUwvFnYxJuuHUKm2aieN9X3yZB4LZsuYNU1Qphsw==}
-
-  '@types/react-dom@19.1.7':
-    resolution: {integrity: sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==}
-    peerDependencies:
-      '@types/react': ^19.0.0
+  '@types/node@25.2.3':
+    resolution: {integrity: sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ==}
 
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
       '@types/react': ^19.2.0
 
-  '@types/react@19.1.9':
-    resolution: {integrity: sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==}
-
-  '@types/react@19.2.7':
-    resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
 
   '@types/through@0.0.33':
     resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
@@ -798,63 +941,63 @@ packages:
   '@types/tinycolor2@1.4.6':
     resolution: {integrity: sha512-iEN8J0BoMnsWBqjVbWH/c0G0Hh7O21lpR2/+PrvAVgWdzL7eexIFm4JN/Wn10PTcmNdtS6U67r499mlWMXOxNw==}
 
-  '@typescript-eslint/eslint-plugin@8.39.0':
-    resolution: {integrity: sha512-bhEz6OZeUR+O/6yx9Jk6ohX6H9JSFTaiY0v9/PuKT3oGK0rn0jNplLmyFUGV+a9gfYnVNwGDwS/UkLIuXNb2Rw==}
+  '@typescript-eslint/eslint-plugin@8.55.0':
+    resolution: {integrity: sha512-1y/MVSz0NglV1ijHC8OT49mPJ4qhPYjiK08YUQVbIOyu+5k862LKUHFkpKHWu//zmr7hDR2rhwUm6gnCGNmGBQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.39.0
+      '@typescript-eslint/parser': ^8.55.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.39.0':
-    resolution: {integrity: sha512-g3WpVQHngx0aLXn6kfIYCZxM6rRJlWzEkVpqEFLT3SgEDsp9cpCbxxgwnE504q4H+ruSDh/VGS6nqZIDynP+vg==}
+  '@typescript-eslint/parser@8.55.0':
+    resolution: {integrity: sha512-4z2nCSBfVIMnbuu8uinj+f0o4qOeggYJLbjpPHka3KH1om7e+H9yLKTYgksTaHcGco+NClhhY2vyO3HsMH1RGw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.39.0':
-    resolution: {integrity: sha512-CTzJqaSq30V/Z2Og9jogzZt8lJRR5TKlAdXmWgdu4hgcC9Kww5flQ+xFvMxIBWVNdxJO7OifgdOK4PokMIWPew==}
+  '@typescript-eslint/project-service@8.55.0':
+    resolution: {integrity: sha512-zRcVVPFUYWa3kNnjaZGXSu3xkKV1zXy8M4nO/pElzQhFweb7PPtluDLQtKArEOGmjXoRjnUZ29NjOiF0eCDkcQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.39.0':
-    resolution: {integrity: sha512-8QOzff9UKxOh6npZQ/4FQu4mjdOCGSdO3p44ww0hk8Vu+IGbg0tB/H1LcTARRDzGCC8pDGbh2rissBuuoPgH8A==}
+  '@typescript-eslint/scope-manager@8.55.0':
+    resolution: {integrity: sha512-fVu5Omrd3jeqeQLiB9f1YsuK/iHFOwb04bCtY4BSCLgjNbOD33ZdV6KyEqplHr+IlpgT0QTZ/iJ+wT7hvTx49Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.39.0':
-    resolution: {integrity: sha512-Fd3/QjmFV2sKmvv3Mrj8r6N8CryYiCS8Wdb/6/rgOXAWGcFuc+VkQuG28uk/4kVNVZBQuuDHEDUpo/pQ32zsIQ==}
+  '@typescript-eslint/tsconfig-utils@8.55.0':
+    resolution: {integrity: sha512-1R9cXqY7RQd7WuqSN47PK9EDpgFUK3VqdmbYrvWJZYDd0cavROGn+74ktWBlmJ13NXUQKlZ/iAEQHI/V0kKe0Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.39.0':
-    resolution: {integrity: sha512-6B3z0c1DXVT2vYA9+z9axjtc09rqKUPRmijD5m9iv8iQpHBRYRMBcgxSiKTZKm6FwWw1/cI4v6em35OsKCiN5Q==}
+  '@typescript-eslint/type-utils@8.55.0':
+    resolution: {integrity: sha512-x1iH2unH4qAt6I37I2CGlsNs+B9WGxurP2uyZLRz6UJoZWDBx9cJL1xVN/FiOmHEONEg6RIufdvyT0TEYIgC5g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.39.0':
-    resolution: {integrity: sha512-ArDdaOllnCj3yn/lzKn9s0pBQYmmyme/v1HbGIGB0GB/knFI3fWMHloC+oYTJW46tVbYnGKTMDK4ah1sC2v0Kg==}
+  '@typescript-eslint/types@8.55.0':
+    resolution: {integrity: sha512-ujT0Je8GI5BJWi+/mMoR0wxwVEQaxM+pi30xuMiJETlX80OPovb2p9E8ss87gnSVtYXtJoU9U1Cowcr6w2FE0w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.39.0':
-    resolution: {integrity: sha512-ndWdiflRMvfIgQRpckQQLiB5qAKQ7w++V4LlCHwp62eym1HLB/kw7D9f2e8ytONls/jt89TEasgvb+VwnRprsw==}
+  '@typescript-eslint/typescript-estree@8.55.0':
+    resolution: {integrity: sha512-EwrH67bSWdx/3aRQhCoxDaHM+CrZjotc2UCCpEDVqfCE+7OjKAGWNY2HsCSTEVvWH2clYQK8pdeLp42EVs+xQw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.39.0':
-    resolution: {integrity: sha512-4GVSvNA0Vx1Ktwvf4sFE+exxJ3QGUorQG1/A5mRfRNZtkBT2xrA/BCO2H0eALx/PnvCS6/vmYwRdDA41EoffkQ==}
+  '@typescript-eslint/utils@8.55.0':
+    resolution: {integrity: sha512-BqZEsnPGdYpgyEIkDC1BadNY8oMwckftxBT+C8W0g1iKPdeqKZBtTfnvcq0nf60u7MkjFO8RBvpRGZBPw4L2ow==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.39.0':
-    resolution: {integrity: sha512-ldgiJ+VAhQCfIjeOgu8Kj5nSxds0ktPOSO9p4+0VDH2R2pLvQraaM5Oen2d7NxzMCm+Sn/vJT+mv2H5u6b/3fA==}
+  '@typescript-eslint/visitor-keys@8.55.0':
+    resolution: {integrity: sha512-AxNRwEie8Nn4eFS1FzDMJWIISMGoXMb037sgCBJ3UR6o0fQTzr2tqN9WT+DkWJPhIdQCfV7T6D387566VtnCJA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   acorn-jsx@5.3.2:
@@ -862,10 +1005,6 @@ packages:
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-walk@8.3.4:
-    resolution: {integrity: sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==}
-    engines: {node: '>=0.4.0'}
-
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
@@ -898,9 +1037,6 @@ packages:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
     engines: {node: '>=8'}
 
-  arg@4.1.3:
-    resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
@@ -951,16 +1087,14 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  base64-js@1.5.1:
-    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
+  baseline-browser-mapping@2.9.19:
+    resolution: {integrity: sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==}
+    hasBin: true
 
   basic-ftp@5.0.5:
     resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==}
     engines: {node: '>=10.0.0'}
 
-  bl@4.1.0:
-    resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
-
   brace-expansion@1.1.12:
     resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
 
@@ -971,8 +1105,13 @@ packages:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
 
-  buffer@5.7.1:
-    resolution: {integrity: sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==}
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  builtins@5.1.0:
+    resolution: {integrity: sha512-SW9lzGTLvWTP1AY8xeAMZimqDrIaSdLQUcVr9DMef51niJ022Ri87SwRRKYm4A6iHfkPaiVUu/Duw2Wc4J7kKg==}
 
   call-bind-apply-helpers@1.0.2:
     resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
@@ -1014,12 +1153,8 @@ packages:
   chardet@0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
 
-  chownr@3.0.0:
-    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
-    engines: {node: '>=18'}
-
-  class-variance-authority@0.7.1:
-    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+  chardet@2.1.1:
+    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
 
   clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
@@ -1037,6 +1172,10 @@ packages:
     resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
     engines: {node: '>= 10'}
 
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
@@ -1044,10 +1183,6 @@ packages:
     resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==}
     engines: {node: '>=0.8'}
 
-  clsx@2.1.1:
-    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
-    engines: {node: '>=6'}
-
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -1061,8 +1196,8 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
-  commander@10.0.1:
-    resolution: {integrity: sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==}
+  commander@10.0.0:
+    resolution: {integrity: sha512-zS5PnTI22FIRM6ylNW8G4Ap0IEOyk62fhLSD0+uHRT9McRCLGpkVNvao4bjimpK/GShynyQkFFxHhwMcETmduA==}
     engines: {node: '>=14'}
 
   concat-map@0.0.1:
@@ -1071,19 +1206,16 @@ packages:
   constant-case@2.0.0:
     resolution: {integrity: sha512-eS0N9WwmjTqrOmR3o83F5vW8Z+9R1HnVz3xmzT2PMFug9ly+Au/fxRWlEBSb6LcZwspSsEn9Xs1uw9YgzAg1EQ==}
 
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
   core-js-pure@3.45.0:
     resolution: {integrity: sha512-OtwjqcDpY2X/eIIg1ol/n0y/X8A9foliaNt1dSK0gV3J2/zw+89FcNG3mPK+N8YWts4ZFUPxnrAzsxs/lf8yDA==}
 
-  create-require@1.1.1:
-    resolution: {integrity: sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==}
-
   cross-spawn@7.0.6:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
-
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -1103,15 +1235,6 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
-  debug@4.4.1:
-    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -1147,18 +1270,10 @@ packages:
     resolution: {integrity: sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==}
     engines: {node: '>=8'}
 
-  detect-libc@2.0.4:
-    resolution: {integrity: sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==}
-    engines: {node: '>=8'}
-
   detect-libc@2.1.2:
     resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
     engines: {node: '>=8'}
 
-  diff@4.0.2:
-    resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
-    engines: {node: '>=0.3.1'}
-
   dir-glob@3.0.1:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
@@ -1178,13 +1293,12 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  electron-to-chromium@1.5.286:
+    resolution: {integrity: sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  enhanced-resolve@5.18.2:
-    resolution: {integrity: sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==}
-    engines: {node: '>=10.13.0'}
-
   enhanced-resolve@5.18.3:
     resolution: {integrity: sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==}
     engines: {node: '>=10.13.0'}
@@ -1221,6 +1335,15 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  esbuild@0.27.3:
+    resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
   escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
@@ -1234,8 +1357,8 @@ packages:
     engines: {node: '>=6.0'}
     hasBin: true
 
-  eslint-config-prettier@9.1.2:
-    resolution: {integrity: sha512-iI1f+D2ViGn+uvv5HuHVUamg8ll4tN+JRHGc6IJi4TP9Kl976C57fzPXgseXNs8v0iA8aSJpHsTWjDb9QJamGQ==}
+  eslint-config-prettier@10.1.8:
+    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
@@ -1244,9 +1367,9 @@ packages:
     resolution: {integrity: sha512-2tktqUAT+Q3hCAU0iSf4xAN1k9zOpjK5WO8104mB0rT/dGhOa09582HN5HlbxNbPRZ0THV7nLGvzugcNOSjzfA==}
     engines: {node: '>=6'}
 
-  eslint-plugin-react-hooks@5.2.0:
-    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
-    engines: {node: '>=10'}
+  eslint-plugin-react-hooks@7.0.1:
+    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
+    engines: {node: '>=18'}
     peerDependencies:
       eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
 
@@ -1256,8 +1379,8 @@ packages:
     peerDependencies:
       eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7
 
-  eslint-plugin-turbo@2.5.5:
-    resolution: {integrity: sha512-IlN65X6W7rgK88u5xl1xC+7FIGKA7eyaca0yxZQ9CBNV6keAaqtjZQLw8ZfXdv7T+MzTLYkYOeOHAv8yCRUx4Q==}
+  eslint-plugin-turbo@2.8.7:
+    resolution: {integrity: sha512-NzYLXQ4o7JOwdEpULd8+hU+9XwOyqZIsT87xHwfYyDUGssz2ra1oSVnK2aGP1j5RB+er4f832Eytn/6k1JDyGA==}
     peerDependencies:
       eslint: '>6.6.0'
       turbo: '>2.0.0'
@@ -1274,18 +1397,8 @@ packages:
     resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint@9.32.0:
-    resolution: {integrity: sha512-LSehfdpgMeWcTZkWZVIJl+tkZ2nuSkyyB9C27MZqFWXuph7DvaowgcTvKqxvpLW1JZIk8PN7hFY3Rj9LQ7m7lg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-    hasBin: true
-    peerDependencies:
-      jiti: '*'
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-
-  eslint@9.39.1:
-    resolution: {integrity: sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==}
+  eslint@9.39.2:
+    resolution: {integrity: sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     hasBin: true
     peerDependencies:
@@ -1330,6 +1443,10 @@ packages:
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
+  fast-glob@3.2.12:
+    resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
+    engines: {node: '>=8.6.0'}
+
   fast-glob@3.3.1:
     resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
     engines: {node: '>=8.6.0'}
@@ -1347,6 +1464,15 @@ packages:
   fastq@1.19.1:
     resolution: {integrity: sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==}
 
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
   figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -1381,6 +1507,11 @@ packages:
   fs.realpath@1.0.0:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
@@ -1391,6 +1522,10 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
   get-intrinsic@1.3.0:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
@@ -1407,6 +1542,9 @@ packages:
     resolution: {integrity: sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==}
     engines: {node: '>= 0.4'}
 
+  get-tsconfig@4.13.6:
+    resolution: {integrity: sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==}
+
   get-uri@6.0.5:
     resolution: {integrity: sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==}
     engines: {node: '>= 14'}
@@ -1421,14 +1559,14 @@ packages:
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
-    deprecated: Glob versions prior to v9 are no longer supported
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
 
-  globals@15.15.0:
-    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+  globals@17.3.0:
+    resolution: {integrity: sha512-yMqGUQVVCkD4tqjOJf3TnrvaaHDMYp4VlUSObbkIiuCPe/ofdMBFIAcBbCSRFWOnos6qRiTVStDwqPLUclaxIw==}
     engines: {node: '>=18'}
 
   globalthis@1.0.4:
@@ -1446,13 +1584,10 @@ packages:
   graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  gradient-string@2.0.2:
-    resolution: {integrity: sha512-rEDCuqUQ4tbD78TpzsMtt5OIf0cBCSDWSJtUDaF6JsAh+k0v9r++NzxNEG87oDZx9ZwGhD8DaezR2L/yrw0Jdw==}
+  gradient-string@2.0.1:
+    resolution: {integrity: sha512-+xDOYR2fMa4QHGysTgyQsl8g16mcAKqvvsKI014qYP2XVf1SWUPlD8KhdBJPUM8AVwDUB+ls0NFkqRzAB5URkA==}
     engines: {node: '>=10'}
 
-  graphemer@1.4.0:
-    resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
-
   handlebars@4.7.8:
     resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
     engines: {node: '>=0.4.7'}
@@ -1492,6 +1627,12 @@ packages:
   header-case@1.0.1:
     resolution: {integrity: sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==}
 
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -1508,8 +1649,9 @@ packages:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
 
-  ieee754@1.2.1:
-    resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
 
   ignore@5.3.2:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
@@ -1545,10 +1687,6 @@ packages:
     resolution: {integrity: sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==}
     engines: {node: '>=8.0.0'}
 
-  inquirer@8.2.6:
-    resolution: {integrity: sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==}
-    engines: {node: '>=12.0.0'}
-
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
@@ -1668,10 +1806,6 @@ packages:
     resolution: {integrity: sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==}
     engines: {node: '>= 0.4'}
 
-  is-unicode-supported@0.1.0:
-    resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
-    engines: {node: '>=10'}
-
   is-upper-case@1.1.2:
     resolution: {integrity: sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==}
 
@@ -1701,10 +1835,6 @@ packages:
     resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
     engines: {node: '>= 0.4'}
 
-  jiti@2.5.1:
-    resolution: {integrity: sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==}
-    hasBin: true
-
   jiti@2.6.1:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
@@ -1712,10 +1842,6 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
-  js-yaml@4.1.0:
-    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
-    hasBin: true
-
   js-yaml@4.1.1:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
@@ -1723,6 +1849,11 @@ packages:
   jsbn@1.1.0:
     resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}
 
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   json-buffer@3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
 
@@ -1732,6 +1863,11 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
   jsonfile@6.1.0:
     resolution: {integrity: sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==}
 
@@ -1752,130 +1888,66 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  lightningcss-darwin-arm64@1.30.1:
-    resolution: {integrity: sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-
   lightningcss-darwin-arm64@1.30.2:
     resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
-  lightningcss-darwin-x64@1.30.1:
-    resolution: {integrity: sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [darwin]
-
   lightningcss-darwin-x64@1.30.2:
     resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
-  lightningcss-freebsd-x64@1.30.1:
-    resolution: {integrity: sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [freebsd]
-
   lightningcss-freebsd-x64@1.30.2:
     resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
-  lightningcss-linux-arm-gnueabihf@1.30.1:
-    resolution: {integrity: sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm]
-    os: [linux]
-
   lightningcss-linux-arm-gnueabihf@1.30.2:
     resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
-  lightningcss-linux-arm64-gnu@1.30.1:
-    resolution: {integrity: sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
   lightningcss-linux-arm64-gnu@1.30.2:
     resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-arm64-musl@1.30.1:
-    resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
-
   lightningcss-linux-arm64-musl@1.30.2:
     resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
-  lightningcss-linux-x64-gnu@1.30.1:
-    resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
-
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
-  lightningcss-linux-x64-musl@1.30.1:
-    resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [linux]
-
   lightningcss-linux-x64-musl@1.30.2:
     resolution: {integrity: sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
-  lightningcss-win32-arm64-msvc@1.30.1:
-    resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [win32]
-
   lightningcss-win32-arm64-msvc@1.30.2:
     resolution: {integrity: sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
-  lightningcss-win32-x64-msvc@1.30.1:
-    resolution: {integrity: sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [win32]
-
   lightningcss-win32-x64-msvc@1.30.2:
     resolution: {integrity: sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
-  lightningcss@1.30.1:
-    resolution: {integrity: sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==}
-    engines: {node: '>= 12.0.0'}
-
   lightningcss@1.30.2:
     resolution: {integrity: sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==}
     engines: {node: '>= 12.0.0'}
@@ -1898,10 +1970,6 @@ packages:
     resolution: {integrity: sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==}
     engines: {node: '>=8'}
 
-  log-symbols@4.1.0:
-    resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
-    engines: {node: '>=10'}
-
   loose-envify@1.4.0:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
@@ -1912,24 +1980,16 @@ packages:
   lower-case@1.1.4:
     resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
 
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
   lru-cache@7.18.3:
     resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
     engines: {node: '>=12'}
 
-  lucide-react@0.475.0:
-    resolution: {integrity: sha512-NJzvVu1HwFVeZ+Gwq2q00KygM1aBhy/ZrhY9FsAgJtpB+E4R7uxRk9M2iKvHa6/vNxZydIB59htha4c2vvwvVg==}
-    peerDependencies:
-      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
-
-  magic-string@0.30.17:
-    resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
-
   magic-string@0.30.21:
     resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
 
-  make-error@1.3.6:
-    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}
-
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -1952,6 +2012,10 @@ packages:
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
+  minimatch@9.0.0:
+    resolution: {integrity: sha512-0jJj8AvgKqWN05mrwuqi8QYKx1WmYSUoKSxu5Qhs9prezTz10sxAHGNZe9J9cqIJzta8DWsleh2KaVaLl6Ru2w==}
+    engines: {node: '>=16 || 14 >=14.17'}
+
   minimatch@9.0.5:
     resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -1959,29 +2023,20 @@ packages:
   minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  minizlib@3.0.2:
-    resolution: {integrity: sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==}
-    engines: {node: '>= 18'}
-
   mkdirp@0.5.6:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
     hasBin: true
 
-  mkdirp@3.0.1:
-    resolution: {integrity: sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
   mute-stream@0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
 
+  mute-stream@2.0.0:
+    resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -2003,8 +2058,8 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next@16.0.10:
-    resolution: {integrity: sha512-RtWh5PUgI+vxlV3HdR+IfWA1UUHu0+Ram/JBO4vWB54cVPentCD0e+lxyAYEsDTqGGMg7qpjhKh6dc6aW7W/sA==}
+  next@16.1.6:
+    resolution: {integrity: sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==}
     engines: {node: '>=20.9.0'}
     hasBin: true
     peerDependencies:
@@ -2031,6 +2086,9 @@ packages:
     resolution: {integrity: sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==}
     engines: {node: '>=8.9.4'}
 
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
   npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -2078,10 +2136,6 @@ packages:
     resolution: {integrity: sha512-sjYP8QyVWBpBZWD6Vr1M/KwknSw6kJOz41tvGMlwWeClHBtYKTbHMki1PsLZnxKpXMPbTKv9b3pjQu3REib96A==}
     engines: {node: '>=8'}
 
-  ora@5.4.1:
-    resolution: {integrity: sha512-5b6Y85tPxZZ7QytO+BQzysW31HJku27cRIlkbAXaNx+BdcVi+LlRFmVXzeF6a7JCwJpyw5c4b+YSVImQIrBpuQ==}
-    engines: {node: '>=10'}
-
   os-tmpdir@1.0.2:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
     engines: {node: '>=0.10.0'}
@@ -2152,6 +2206,10 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
   possible-typed-array-names@1.1.0:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
@@ -2168,8 +2226,8 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier@3.7.4:
-    resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
     engines: {node: '>=14'}
     hasBin: true
 
@@ -2194,31 +2252,18 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
-  react-dom@19.1.1:
-    resolution: {integrity: sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==}
+  react-dom@19.2.4:
+    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
     peerDependencies:
-      react: ^19.1.1
-
-  react-dom@19.2.1:
-    resolution: {integrity: sha512-ibrK8llX2a4eOskq1mXKu/TGZj9qzomO+sNfO98M6d9zIPOEhlBkMkBUBLd1vgS0gQsLDBzA+8jJBVXDnfHmJg==}
-    peerDependencies:
-      react: ^19.2.1
+      react: ^19.2.4
 
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
-  react@19.1.1:
-    resolution: {integrity: sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==}
+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
     engines: {node: '>=0.10.0'}
 
-  react@19.2.1:
-    resolution: {integrity: sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==}
-    engines: {node: '>=0.10.0'}
-
-  readable-stream@3.6.2:
-    resolution: {integrity: sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==}
-    engines: {node: '>= 6'}
-
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -2238,6 +2283,9 @@ packages:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
 
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
   resolve@1.22.10:
     resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
     engines: {node: '>= 0.4'}
@@ -2271,9 +2319,6 @@ packages:
     resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
     engines: {npm: '>=2.0.0'}
 
-  rxjs@7.8.2:
-    resolution: {integrity: sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==}
-
   safe-array-concat@1.1.3:
     resolution: {integrity: sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==}
     engines: {node: '>=0.4'}
@@ -2292,9 +2337,6 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
-  scheduler@0.26.0:
-    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
-
   scheduler@0.27.0:
     resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
@@ -2307,11 +2349,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   semver@7.7.3:
     resolution: {integrity: sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==}
     engines: {node: '>=10'}
@@ -2363,6 +2400,10 @@ packages:
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
   slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -2420,9 +2461,6 @@ packages:
     resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==}
     engines: {node: '>= 0.4'}
 
-  string_decoder@1.3.0:
-    resolution: {integrity: sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==}
-
   strip-ansi@6.0.1:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
@@ -2467,33 +2505,23 @@ packages:
   swap-case@1.1.2:
     resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
 
-  tailwind-merge@3.3.1:
-    resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==}
-
-  tailwindcss@4.1.11:
-    resolution: {integrity: sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==}
-
-  tailwindcss@4.1.17:
-    resolution: {integrity: sha512-j9Ee2YjuQqYT9bbRTfTZht9W/ytp5H+jJpZKiYdP/bpnXARAuELt9ofP0lPnmHjbga7SNQIxdTAXCmtKVYjN+Q==}
-
-  tapable@2.2.2:
-    resolution: {integrity: sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==}
-    engines: {node: '>=6'}
+  tailwindcss@4.1.18:
+    resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
 
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
-  tar@7.4.3:
-    resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
-    engines: {node: '>=18'}
-
   through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
   tinycolor2@1.6.0:
     resolution: {integrity: sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==}
 
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
   tinygradient@1.1.5:
     resolution: {integrity: sha512-8nIfc2vgQ4TeLnk2lFj4tRLvvJwEfQuabdsmvDdQPT0xlk9TaNtpGd6nNRxXoK6vQhN6RSzj+Cnp5tTQmpxmbw==}
 
@@ -2508,68 +2536,56 @@ packages:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
 
-  ts-api-utils@2.1.0:
-    resolution: {integrity: sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==}
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
     engines: {node: '>=18.12'}
     peerDependencies:
       typescript: '>=4.8.4'
 
-  ts-node@10.9.2:
-    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
-    hasBin: true
-    peerDependencies:
-      '@swc/core': '>=1.2.50'
-      '@swc/wasm': '>=1.2.50'
-      '@types/node': '*'
-      typescript: '>=2.7'
-    peerDependenciesMeta:
-      '@swc/core':
-        optional: true
-      '@swc/wasm':
-        optional: true
-
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
-  turbo-darwin-64@2.6.3:
-    resolution: {integrity: sha512-BlJJDc1CQ7SK5Y5qnl7AzpkvKSnpkfPmnA+HeU/sgny3oHZckPV2776ebO2M33CYDSor7+8HQwaodY++IINhYg==}
-    cpu: [x64]
-    os: [darwin]
-
-  turbo-darwin-arm64@2.6.3:
-    resolution: {integrity: sha512-MwVt7rBKiOK7zdYerenfCRTypefw4kZCue35IJga9CH1+S50+KTiCkT6LBqo0hHeoH2iKuI0ldTF2a0aB72z3w==}
-    cpu: [arm64]
-    os: [darwin]
-
-  turbo-linux-64@2.6.3:
-    resolution: {integrity: sha512-cqpcw+dXxbnPtNnzeeSyWprjmuFVpHJqKcs7Jym5oXlu/ZcovEASUIUZVN3OGEM6Y/OTyyw0z09tOHNt5yBAVg==}
-    cpu: [x64]
-    os: [linux]
-
-  turbo-linux-arm64@2.6.3:
-    resolution: {integrity: sha512-MterpZQmjXyr4uM7zOgFSFL3oRdNKeflY7nsjxJb2TklsYqiu3Z9pQ4zRVFFH8n0mLGna7MbQMZuKoWqqHb45w==}
-    cpu: [arm64]
-    os: [linux]
-
-  turbo-windows-64@2.6.3:
-    resolution: {integrity: sha512-biDU70v9dLwnBdLf+daoDlNJVvqOOP8YEjqNipBHzgclbQlXbsi6Gqqelp5er81Qo3BiRgmTNx79oaZQTPb07Q==}
-    cpu: [x64]
-    os: [win32]
-
-  turbo-windows-arm64@2.6.3:
-    resolution: {integrity: sha512-dDHVKpSeukah3VsI/xMEKeTnV9V9cjlpFSUs4bmsUiLu3Yv2ENlgVEZv65wxbeE0bh0jjpmElDT+P1KaCxArQQ==}
-    cpu: [arm64]
-    os: [win32]
-
-  turbo@2.6.3:
-    resolution: {integrity: sha512-bf6YKUv11l5Xfcmg76PyWoy/e2vbkkxFNBGJSnfdSXQC33ZiUfutYh6IXidc5MhsnrFkWfdNNLyaRk+kHMLlwA==}
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
     hasBin: true
 
-  tw-animate-css@1.3.6:
-    resolution: {integrity: sha512-9dy0R9UsYEGmgf26L8UcHiLmSFTHa9+D7+dAt/G/sF5dCnPePZbfgDYinc7/UzAM7g/baVrmS6m9yEpU46d+LA==}
+  turbo-darwin-64@2.8.7:
+    resolution: {integrity: sha512-Xr4TO/oDDwoozbDtBvunb66g//WK8uHRygl72vUthuwzmiw48pil4IuoG/QbMHd9RE8aBnVmzC0WZEWk/WWt3A==}
+    cpu: [x64]
+    os: [darwin]
+
+  turbo-darwin-arm64@2.8.7:
+    resolution: {integrity: sha512-p8Xbmb9kZEY/NoshQUcFmQdO80s2PCGoLYj5DbpxjZr3diknipXxzOK7pcmT7l2gNHaMCpFVWLkiFY9nO3EU5w==}
+    cpu: [arm64]
+    os: [darwin]
+
+  turbo-linux-64@2.8.7:
+    resolution: {integrity: sha512-nwfEPAH3m5y/nJeYly3j1YJNYU2EG5+2ysZUxvBNM+VBV2LjQaLxB9CsEIpIOKuWKCjnFHKIADTSDPZ3D12J5Q==}
+    cpu: [x64]
+    os: [linux]
+
+  turbo-linux-arm64@2.8.7:
+    resolution: {integrity: sha512-mgA/M6xiJzyxtXV70TtWGDPh+I6acOKmeQGtOzbFQZYEf794pu5jax26bCk5skAp1gqZu3vacPr6jhYHoHU9IQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  turbo-windows-64@2.8.7:
+    resolution: {integrity: sha512-sHTYMaXuCcyHnGUQgfUUt7S8407TWoP14zc/4N2tsM0wZNK6V9h4H2t5jQPtqKEb6Fg8313kygdDgEwuM4vsHg==}
+    cpu: [x64]
+    os: [win32]
+
+  turbo-windows-arm64@2.8.7:
+    resolution: {integrity: sha512-WyGiOI2Zp3AhuzVagzQN+T+iq0fWx0oGxDfAWT3ZiLEd4U0cDUkwUZDKVGb3rKqPjDL6lWnuxKKu73ge5xtovQ==}
+    cpu: [arm64]
+    os: [win32]
+
+  turbo@2.8.7:
+    resolution: {integrity: sha512-RBLh5caMAu1kFdTK1jgH2gH/z+jFsvX5rGbhgJ9nlIAWXSvxlzwId05uDlBA1+pBd3wO/UaKYzaQZQBXDd7kcA==}
+    hasBin: true
 
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
@@ -2595,23 +2611,13 @@ packages:
     resolution: {integrity: sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==}
     engines: {node: '>= 0.4'}
 
-  typescript-eslint@8.39.0:
-    resolution: {integrity: sha512-lH8FvtdtzcHJCkMOKnN73LIn6SLTpoojgJqDAxPm1jCR14eWSGPX8ul/gggBdPMk/d5+u9V854vTYQ8T5jF/1Q==}
+  typescript-eslint@8.55.0:
+    resolution: {integrity: sha512-HE4wj+r5lmDVS9gdaN0/+iqNvPZwGfnJ5lZuz7s5vLlg9ODw0bIiiETaios9LvFI1U94/VBXGm3CB2Y5cNFMpw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  typescript@5.7.3:
-    resolution: {integrity: sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
-  typescript@5.9.2:
-    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
-    engines: {node: '>=14.17'}
-    hasBin: true
-
   typescript@5.9.3:
     resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
@@ -2626,13 +2632,19 @@ packages:
     resolution: {integrity: sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==}
     engines: {node: '>= 0.4'}
 
-  undici-types@6.21.0:
-    resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
+  undici-types@7.16.0:
+    resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
   universalify@2.0.1:
     resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
     engines: {node: '>= 10.0.0'}
 
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
   update-check@1.5.4:
     resolution: {integrity: sha512-5YHsflzHP4t1G+8WGPlvKbJEbAJGCgw+Em+dGR1KmBUbr1J36SJBqlHLjR7oob7sco5hWHGQVcr9B2poIVDDTQ==}
 
@@ -2645,14 +2657,8 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  util-deprecate@1.0.2:
-    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-
-  v8-compile-cache-lib@3.0.1:
-    resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
-
-  validate-npm-package-name@5.0.1:
-    resolution: {integrity: sha512-OljLrQ9SQdOUqTaQxqL5dEfZWrXExyyWsozYlAWFawPVNuD83igl7uJD2RTkNMbniIYgt8l81eCJGIdQF7avLQ==}
+  validate-npm-package-name@5.0.0:
+    resolution: {integrity: sha512-YuKoXDAhBYxY7SfOKxHBDoSyENFeW5VvIIQp2TGQuit8gpK6MnWaQelBKxso72DoxTZfZdcP3W90LqpSkgPzLQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
   wcwidth@1.0.1:
@@ -2693,18 +2699,23 @@ packages:
   wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 
-  yallist@5.0.0:
-    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
-    engines: {node: '>=18'}
-
-  yn@3.1.1:
-    resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
-    engines: {node: '>=6'}
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  yoctocolors-cjs@2.1.3:
+    resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
+    engines: {node: '>=18'}
+
+  zod-validation-error@4.0.2:
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
@@ -2712,46 +2723,205 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
-  '@ampproject/remapping@2.3.0':
+  '@babel/code-frame@7.29.0':
     dependencies:
-      '@jridgewell/gen-mapping': 0.3.12
-      '@jridgewell/trace-mapping': 0.3.29
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.0': {}
+
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.28.6
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.6':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
 
   '@babel/runtime-corejs3@7.28.2':
     dependencies:
       core-js-pure: 3.45.0
 
-  '@cspotcode/source-map-support@0.8.1':
+  '@babel/template@7.28.6':
     dependencies:
-      '@jridgewell/trace-mapping': 0.3.9
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
 
   '@emnapi/runtime@1.7.1':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.32.0(jiti@2.6.1))':
+  '@esbuild/aix-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm@0.27.3':
+    optional: true
+
+  '@esbuild/android-x64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.3':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.3':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
-      eslint: 9.32.0(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.9.0(eslint@9.39.1(jiti@2.6.1))':
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
-      eslint: 9.39.1(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.12.1': {}
-
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/config-array@0.21.0':
-    dependencies:
-      '@eslint/object-schema': 2.1.6
-      debug: 4.4.1
-      minimatch: 3.1.2
-    transitivePeerDependencies:
-      - supports-color
-
   '@eslint/config-array@0.21.1':
     dependencies:
       '@eslint/object-schema': 2.1.7
@@ -2760,34 +2930,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.3.0': {}
-
   '@eslint/config-helpers@0.4.2':
     dependencies:
       '@eslint/core': 0.17.0
 
-  '@eslint/core@0.15.1':
-    dependencies:
-      '@types/json-schema': 7.0.15
-
   '@eslint/core@0.17.0':
     dependencies:
       '@types/json-schema': 7.0.15
 
-  '@eslint/eslintrc@3.3.1':
-    dependencies:
-      ajv: 6.12.6
-      debug: 4.4.1
-      espree: 10.4.0
-      globals: 14.0.0
-      ignore: 5.3.2
-      import-fresh: 3.3.1
-      js-yaml: 4.1.0
-      minimatch: 3.1.2
-      strip-json-comments: 3.1.1
-    transitivePeerDependencies:
-      - supports-color
-
   '@eslint/eslintrc@3.3.3':
     dependencies:
       ajv: 6.12.6
@@ -2802,19 +2952,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/js@9.32.0': {}
-
-  '@eslint/js@9.39.1': {}
-
-  '@eslint/object-schema@2.1.6': {}
+  '@eslint/js@9.39.2': {}
 
   '@eslint/object-schema@2.1.7': {}
 
-  '@eslint/plugin-kit@0.3.4':
-    dependencies:
-      '@eslint/core': 0.15.1
-      levn: 0.4.1
-
   '@eslint/plugin-kit@0.4.1':
     dependencies:
       '@eslint/core': 0.17.0
@@ -2822,11 +2963,6 @@ snapshots:
 
   '@humanfs/core@0.19.1': {}
 
-  '@humanfs/node@0.16.6':
-    dependencies:
-      '@humanfs/core': 0.19.1
-      '@humanwhocodes/retry': 0.3.1
-
   '@humanfs/node@0.16.7':
     dependencies:
       '@humanfs/core': 0.19.1
@@ -2834,8 +2970,6 @@ snapshots:
 
   '@humanwhocodes/module-importer@1.0.1': {}
 
-  '@humanwhocodes/retry@0.3.1': {}
-
   '@humanwhocodes/retry@0.4.3': {}
 
   '@img/colour@1.0.0':
@@ -2935,14 +3069,130 @@ snapshots:
   '@img/sharp-win32-x64@0.34.5':
     optional: true
 
-  '@isaacs/fs-minipass@4.0.1':
-    dependencies:
-      minipass: 7.1.2
+  '@inquirer/ansi@1.0.2': {}
 
-  '@jridgewell/gen-mapping@0.3.12':
+  '@inquirer/checkbox@4.3.2(@types/node@25.2.3)':
     dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.4
-      '@jridgewell/trace-mapping': 0.3.29
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/confirm@5.1.21(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/core@10.3.2(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+      cli-width: 4.1.0
+      mute-stream: 2.0.0
+      signal-exit: 4.1.0
+      wrap-ansi: 6.2.0
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/editor@4.2.23(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/external-editor': 1.0.3(@types/node@25.2.3)
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/expand@4.0.23(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/external-editor@1.0.3(@types/node@25.2.3)':
+    dependencies:
+      chardet: 2.1.1
+      iconv-lite: 0.7.2
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/figures@1.0.15': {}
+
+  '@inquirer/input@4.3.1(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/number@3.0.23(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/password@4.0.23(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/prompts@7.10.1(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/checkbox': 4.3.2(@types/node@25.2.3)
+      '@inquirer/confirm': 5.1.21(@types/node@25.2.3)
+      '@inquirer/editor': 4.2.23(@types/node@25.2.3)
+      '@inquirer/expand': 4.0.23(@types/node@25.2.3)
+      '@inquirer/input': 4.3.1(@types/node@25.2.3)
+      '@inquirer/number': 3.0.23(@types/node@25.2.3)
+      '@inquirer/password': 4.0.23(@types/node@25.2.3)
+      '@inquirer/rawlist': 4.1.11(@types/node@25.2.3)
+      '@inquirer/search': 3.2.2(@types/node@25.2.3)
+      '@inquirer/select': 4.4.2(@types/node@25.2.3)
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/rawlist@4.1.11(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/search@3.2.2(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/select@4.4.2(@types/node@25.2.3)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.2.3)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.2.3)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.2.3
+
+  '@inquirer/type@3.0.10(@types/node@25.2.3)':
+    optionalDependencies:
+      '@types/node': 25.2.3
 
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
@@ -2956,53 +3206,41 @@ snapshots:
 
   '@jridgewell/resolve-uri@3.1.2': {}
 
-  '@jridgewell/sourcemap-codec@1.5.4': {}
-
   '@jridgewell/sourcemap-codec@1.5.5': {}
 
-  '@jridgewell/trace-mapping@0.3.29':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.4
-
   '@jridgewell/trace-mapping@0.3.31':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@jridgewell/trace-mapping@0.3.9':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.4
+  '@next/env@16.1.6': {}
 
-  '@next/env@16.0.10': {}
-
-  '@next/eslint-plugin-next@15.4.5':
+  '@next/eslint-plugin-next@16.1.6':
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/swc-darwin-arm64@16.0.10':
+  '@next/swc-darwin-arm64@16.1.6':
     optional: true
 
-  '@next/swc-darwin-x64@16.0.10':
+  '@next/swc-darwin-x64@16.1.6':
     optional: true
 
-  '@next/swc-linux-arm64-gnu@16.0.10':
+  '@next/swc-linux-arm64-gnu@16.1.6':
     optional: true
 
-  '@next/swc-linux-arm64-musl@16.0.10':
+  '@next/swc-linux-arm64-musl@16.1.6':
     optional: true
 
-  '@next/swc-linux-x64-gnu@16.0.10':
+  '@next/swc-linux-x64-gnu@16.1.6':
     optional: true
 
-  '@next/swc-linux-x64-musl@16.0.10':
+  '@next/swc-linux-x64-musl@16.1.6':
     optional: true
 
-  '@next/swc-win32-arm64-msvc@16.0.10':
+  '@next/swc-win32-arm64-msvc@16.1.6':
     optional: true
 
-  '@next/swc-win32-x64-msvc@16.0.10':
+  '@next/swc-win32-x64-msvc@16.1.6':
     optional: true
 
   '@nodelib/fs.scandir@2.1.5':
@@ -3017,34 +3255,11 @@ snapshots:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.19.1
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.1.9)(react@19.1.1)':
-    dependencies:
-      react: 19.1.1
-    optionalDependencies:
-      '@types/react': 19.1.9
-
-  '@radix-ui/react-slot@1.2.3(@types/react@19.1.9)(react@19.1.1)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.9)(react@19.1.1)
-      react: 19.1.1
-    optionalDependencies:
-      '@types/react': 19.1.9
-
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1
 
-  '@tailwindcss/node@4.1.11':
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      enhanced-resolve: 5.18.2
-      jiti: 2.5.1
-      lightningcss: 1.30.1
-      magic-string: 0.30.17
-      source-map-js: 1.2.1
-      tailwindcss: 4.1.11
-
-  '@tailwindcss/node@4.1.17':
+  '@tailwindcss/node@4.1.18':
     dependencies:
       '@jridgewell/remapping': 2.3.5
       enhanced-resolve: 5.18.3
@@ -3052,179 +3267,108 @@ snapshots:
       lightningcss: 1.30.2
       magic-string: 0.30.21
       source-map-js: 1.2.1
-      tailwindcss: 4.1.17
+      tailwindcss: 4.1.18
 
-  '@tailwindcss/oxide-android-arm64@4.1.11':
+  '@tailwindcss/oxide-android-arm64@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-android-arm64@4.1.17':
+  '@tailwindcss/oxide-darwin-arm64@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.11':
+  '@tailwindcss/oxide-darwin-x64@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.17':
+  '@tailwindcss/oxide-freebsd-x64@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.11':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.17':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.11':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.17':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.11':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.17':
+  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.11':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.17':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.11':
-    optional: true
-
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.17':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.11':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.17':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-musl@4.1.11':
-    optional: true
-
-  '@tailwindcss/oxide-linux-x64-musl@4.1.17':
-    optional: true
-
-  '@tailwindcss/oxide-wasm32-wasi@4.1.11':
-    optional: true
-
-  '@tailwindcss/oxide-wasm32-wasi@4.1.17':
-    optional: true
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.11':
-    optional: true
-
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.17':
-    optional: true
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.11':
-    optional: true
-
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.17':
-    optional: true
-
-  '@tailwindcss/oxide@4.1.11':
-    dependencies:
-      detect-libc: 2.0.4
-      tar: 7.4.3
+  '@tailwindcss/oxide@4.1.18':
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.11
-      '@tailwindcss/oxide-darwin-arm64': 4.1.11
-      '@tailwindcss/oxide-darwin-x64': 4.1.11
-      '@tailwindcss/oxide-freebsd-x64': 4.1.11
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.11
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.11
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.11
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.11
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.11
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.11
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.11
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.11
+      '@tailwindcss/oxide-android-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-x64': 4.1.18
+      '@tailwindcss/oxide-freebsd-x64': 4.1.18
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
 
-  '@tailwindcss/oxide@4.1.17':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.17
-      '@tailwindcss/oxide-darwin-arm64': 4.1.17
-      '@tailwindcss/oxide-darwin-x64': 4.1.17
-      '@tailwindcss/oxide-freebsd-x64': 4.1.17
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.17
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.17
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.17
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.17
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.17
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.17
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.17
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.17
-
-  '@tailwindcss/postcss@4.1.11':
+  '@tailwindcss/postcss@4.1.18':
     dependencies:
       '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.1.11
-      '@tailwindcss/oxide': 4.1.11
+      '@tailwindcss/node': 4.1.18
+      '@tailwindcss/oxide': 4.1.18
       postcss: 8.5.6
-      tailwindcss: 4.1.11
-
-  '@tailwindcss/postcss@4.1.17':
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      '@tailwindcss/node': 4.1.17
-      '@tailwindcss/oxide': 4.1.17
-      postcss: 8.5.6
-      tailwindcss: 4.1.17
+      tailwindcss: 4.1.18
 
   '@tootallnate/quickjs-emscripten@0.23.0': {}
 
-  '@tsconfig/node10@1.0.11': {}
-
-  '@tsconfig/node12@1.0.11': {}
-
-  '@tsconfig/node14@1.0.3': {}
-
-  '@tsconfig/node16@1.0.4': {}
-
-  '@turbo/gen@2.5.5(@types/node@20.19.9)(typescript@5.9.2)':
+  '@turbo/gen@2.8.7(@types/node@25.2.3)':
     dependencies:
-      '@turbo/workspaces': 2.5.5
-      commander: 10.0.1
+      '@inquirer/prompts': 7.10.1(@types/node@25.2.3)
+      '@turbo/workspaces': 2.8.7(@types/node@25.2.3)
+      commander: 10.0.0
       fs-extra: 10.1.0
-      inquirer: 8.2.6
-      minimatch: 9.0.5
+      minimatch: 9.0.0
       node-plop: 0.26.3
       picocolors: 1.0.1
       proxy-agent: 6.5.0
-      ts-node: 10.9.2(@types/node@20.19.9)(typescript@5.9.2)
+      tsx: 4.21.0
       update-check: 1.5.4
-      validate-npm-package-name: 5.0.1
+      validate-npm-package-name: 5.0.0
     transitivePeerDependencies:
-      - '@swc/core'
-      - '@swc/wasm'
       - '@types/node'
       - supports-color
-      - typescript
 
-  '@turbo/workspaces@2.5.5':
+  '@turbo/workspaces@2.8.7(@types/node@25.2.3)':
     dependencies:
-      commander: 10.0.1
+      '@inquirer/prompts': 7.10.1(@types/node@25.2.3)
+      commander: 10.0.0
       execa: 5.1.1
-      fast-glob: 3.3.3
+      fast-glob: 3.2.12
       fs-extra: 10.1.0
-      gradient-string: 2.0.2
-      inquirer: 8.2.6
-      js-yaml: 4.1.0
+      gradient-string: 2.0.1
+      js-yaml: 4.1.1
       ora: 4.1.1
       picocolors: 1.0.1
       semver: 7.6.2
       update-check: 1.5.4
+    transitivePeerDependencies:
+      - '@types/node'
 
   '@types/estree@1.0.8': {}
 
   '@types/glob@7.2.0':
     dependencies:
       '@types/minimatch': 6.0.0
-      '@types/node': 20.19.9
+      '@types/node': 25.2.3
 
   '@types/inquirer@6.5.0':
     dependencies:
@@ -3237,137 +3381,119 @@ snapshots:
     dependencies:
       minimatch: 9.0.5
 
-  '@types/node@20.19.25':
+  '@types/node@25.2.3':
     dependencies:
-      undici-types: 6.21.0
+      undici-types: 7.16.0
 
-  '@types/node@20.19.9':
+  '@types/react-dom@19.2.3(@types/react@19.2.14)':
     dependencies:
-      undici-types: 6.21.0
+      '@types/react': 19.2.14
 
-  '@types/react-dom@19.1.7(@types/react@19.1.9)':
-    dependencies:
-      '@types/react': 19.1.9
-
-  '@types/react-dom@19.2.3(@types/react@19.2.7)':
-    dependencies:
-      '@types/react': 19.2.7
-
-  '@types/react@19.1.9':
-    dependencies:
-      csstype: 3.1.3
-
-  '@types/react@19.2.7':
+  '@types/react@19.2.14':
     dependencies:
       csstype: 3.2.3
 
   '@types/through@0.0.33':
     dependencies:
-      '@types/node': 20.19.9
+      '@types/node': 25.2.3
 
   '@types/tinycolor2@1.4.6': {}
 
-  '@typescript-eslint/eslint-plugin@8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)':
+  '@typescript-eslint/eslint-plugin@8.55.0(@typescript-eslint/parser@8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
-      '@typescript-eslint/scope-manager': 8.39.0
-      '@typescript-eslint/type-utils': 8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.39.0
-      eslint: 9.32.0(jiti@2.6.1)
-      graphemer: 1.4.0
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.55.0
+      '@typescript-eslint/type-utils': 8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.55.0
+      eslint: 9.39.2(jiti@2.6.1)
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)':
+  '@typescript-eslint/parser@8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.39.0
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/visitor-keys': 8.39.0
-      debug: 4.4.1
-      eslint: 9.32.0(jiti@2.6.1)
-      typescript: 5.9.2
+      '@typescript-eslint/scope-manager': 8.55.0
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/typescript-estree': 8.55.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.55.0
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@2.6.1)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.39.0(typescript@5.9.2)':
+  '@typescript-eslint/project-service@8.55.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.39.0
-      debug: 4.4.1
-      typescript: 5.9.2
+      '@typescript-eslint/tsconfig-utils': 8.55.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.55.0
+      debug: 4.4.3
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.39.0':
+  '@typescript-eslint/scope-manager@8.55.0':
     dependencies:
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/visitor-keys': 8.39.0
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/visitor-keys': 8.55.0
 
-  '@typescript-eslint/tsconfig-utils@8.39.0(typescript@5.9.2)':
+  '@typescript-eslint/tsconfig-utils@8.55.0(typescript@5.9.3)':
     dependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)':
+  '@typescript-eslint/type-utils@8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
-      debug: 4.4.1
-      eslint: 9.32.0(jiti@2.6.1)
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/typescript-estree': 8.55.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@2.6.1)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.39.0': {}
+  '@typescript-eslint/types@8.55.0': {}
 
-  '@typescript-eslint/typescript-estree@8.39.0(typescript@5.9.2)':
+  '@typescript-eslint/typescript-estree@8.55.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/tsconfig-utils': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/visitor-keys': 8.39.0
-      debug: 4.4.1
-      fast-glob: 3.3.3
-      is-glob: 4.0.3
+      '@typescript-eslint/project-service': 8.55.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.55.0(typescript@5.9.3)
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/visitor-keys': 8.55.0
+      debug: 4.4.3
       minimatch: 9.0.5
-      semver: 7.7.2
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)':
+  '@typescript-eslint/utils@8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
-      '@typescript-eslint/scope-manager': 8.39.0
-      '@typescript-eslint/types': 8.39.0
-      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
-      eslint: 9.32.0(jiti@2.6.1)
-      typescript: 5.9.2
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.55.0
+      '@typescript-eslint/types': 8.55.0
+      '@typescript-eslint/typescript-estree': 8.55.0(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.39.0':
+  '@typescript-eslint/visitor-keys@8.55.0':
     dependencies:
-      '@typescript-eslint/types': 8.39.0
+      '@typescript-eslint/types': 8.55.0
       eslint-visitor-keys: 4.2.1
 
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
       acorn: 8.15.0
 
-  acorn-walk@8.3.4:
-    dependencies:
-      acorn: 8.15.0
-
   acorn@8.15.0: {}
 
   agent-base@7.1.4: {}
@@ -3398,8 +3524,6 @@ snapshots:
     dependencies:
       color-convert: 2.0.1
 
-  arg@4.1.3: {}
-
   argparse@2.0.1: {}
 
   array-buffer-byte-length@1.0.2:
@@ -3473,16 +3597,10 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
-  base64-js@1.5.1: {}
+  baseline-browser-mapping@2.9.19: {}
 
   basic-ftp@5.0.5: {}
 
-  bl@4.1.0:
-    dependencies:
-      buffer: 5.7.1
-      inherits: 2.0.4
-      readable-stream: 3.6.2
-
   brace-expansion@1.1.12:
     dependencies:
       balanced-match: 1.0.2
@@ -3496,10 +3614,17 @@ snapshots:
     dependencies:
       fill-range: 7.1.1
 
-  buffer@5.7.1:
+  browserslist@4.28.1:
     dependencies:
-      base64-js: 1.5.1
-      ieee754: 1.2.1
+      baseline-browser-mapping: 2.9.19
+      caniuse-lite: 1.0.30001760
+      electron-to-chromium: 1.5.286
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  builtins@5.1.0:
+    dependencies:
+      semver: 7.7.3
 
   call-bind-apply-helpers@1.0.2:
     dependencies:
@@ -3566,11 +3691,7 @@ snapshots:
 
   chardet@0.7.0: {}
 
-  chownr@3.0.0: {}
-
-  class-variance-authority@0.7.1:
-    dependencies:
-      clsx: 2.1.1
+  chardet@2.1.1: {}
 
   clean-stack@2.2.0: {}
 
@@ -3582,12 +3703,12 @@ snapshots:
 
   cli-width@3.0.0: {}
 
+  cli-width@4.1.0: {}
+
   client-only@0.0.1: {}
 
   clone@1.0.4: {}
 
-  clsx@2.1.1: {}
-
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -3600,7 +3721,7 @@ snapshots:
 
   color-name@1.1.4: {}
 
-  commander@10.0.1: {}
+  commander@10.0.0: {}
 
   concat-map@0.0.1: {}
 
@@ -3609,9 +3730,9 @@ snapshots:
       snake-case: 2.1.0
       upper-case: 1.1.3
 
-  core-js-pure@3.45.0: {}
+  convert-source-map@2.0.0: {}
 
-  create-require@1.1.1: {}
+  core-js-pure@3.45.0: {}
 
   cross-spawn@7.0.6:
     dependencies:
@@ -3619,8 +3740,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  csstype@3.1.3: {}
-
   csstype@3.2.3: {}
 
   data-uri-to-buffer@6.0.2: {}
@@ -3643,10 +3762,6 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
-  debug@4.4.1:
-    dependencies:
-      ms: 2.1.3
-
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
@@ -3688,12 +3803,8 @@ snapshots:
       rimraf: 3.0.2
       slash: 3.0.0
 
-  detect-libc@2.0.4: {}
-
   detect-libc@2.1.2: {}
 
-  diff@4.0.2: {}
-
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
@@ -3714,12 +3825,9 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
-  emoji-regex@8.0.0: {}
+  electron-to-chromium@1.5.286: {}
 
-  enhanced-resolve@5.18.2:
-    dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.2.2
+  emoji-regex@8.0.0: {}
 
   enhanced-resolve@5.18.3:
     dependencies:
@@ -3827,6 +3935,37 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  esbuild@0.27.3:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.3
+      '@esbuild/android-arm': 0.27.3
+      '@esbuild/android-arm64': 0.27.3
+      '@esbuild/android-x64': 0.27.3
+      '@esbuild/darwin-arm64': 0.27.3
+      '@esbuild/darwin-x64': 0.27.3
+      '@esbuild/freebsd-arm64': 0.27.3
+      '@esbuild/freebsd-x64': 0.27.3
+      '@esbuild/linux-arm': 0.27.3
+      '@esbuild/linux-arm64': 0.27.3
+      '@esbuild/linux-ia32': 0.27.3
+      '@esbuild/linux-loong64': 0.27.3
+      '@esbuild/linux-mips64el': 0.27.3
+      '@esbuild/linux-ppc64': 0.27.3
+      '@esbuild/linux-riscv64': 0.27.3
+      '@esbuild/linux-s390x': 0.27.3
+      '@esbuild/linux-x64': 0.27.3
+      '@esbuild/netbsd-arm64': 0.27.3
+      '@esbuild/netbsd-x64': 0.27.3
+      '@esbuild/openbsd-arm64': 0.27.3
+      '@esbuild/openbsd-x64': 0.27.3
+      '@esbuild/openharmony-arm64': 0.27.3
+      '@esbuild/sunos-x64': 0.27.3
+      '@esbuild/win32-arm64': 0.27.3
+      '@esbuild/win32-ia32': 0.27.3
+      '@esbuild/win32-x64': 0.27.3
+
+  escalade@3.2.0: {}
+
   escape-string-regexp@1.0.5: {}
 
   escape-string-regexp@4.0.0: {}
@@ -3839,17 +3978,24 @@ snapshots:
     optionalDependencies:
       source-map: 0.6.1
 
-  eslint-config-prettier@9.1.2(eslint@9.32.0(jiti@2.6.1)):
+  eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
-      eslint: 9.32.0(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)
 
   eslint-plugin-only-warn@1.1.0: {}
 
-  eslint-plugin-react-hooks@5.2.0(eslint@9.32.0(jiti@2.6.1)):
+  eslint-plugin-react-hooks@7.0.1(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
-      eslint: 9.32.0(jiti@2.6.1)
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      eslint: 9.39.2(jiti@2.6.1)
+      hermes-parser: 0.25.1
+      zod: 3.25.76
+      zod-validation-error: 4.0.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - supports-color
 
-  eslint-plugin-react@7.37.5(eslint@9.32.0(jiti@2.6.1)):
+  eslint-plugin-react@7.37.5(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       array-includes: 3.1.9
       array.prototype.findlast: 1.2.5
@@ -3857,7 +4003,7 @@ snapshots:
       array.prototype.tosorted: 1.1.4
       doctrine: 2.1.0
       es-iterator-helpers: 1.2.1
-      eslint: 9.32.0(jiti@2.6.1)
+      eslint: 9.39.2(jiti@2.6.1)
       estraverse: 5.3.0
       hasown: 2.0.2
       jsx-ast-utils: 3.3.5
@@ -3871,11 +4017,11 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-turbo@2.5.5(eslint@9.32.0(jiti@2.6.1))(turbo@2.6.3):
+  eslint-plugin-turbo@2.8.7(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.7):
     dependencies:
       dotenv: 16.0.3
-      eslint: 9.32.0(jiti@2.6.1)
-      turbo: 2.6.3
+      eslint: 9.39.2(jiti@2.6.1)
+      turbo: 2.8.7
 
   eslint-scope@8.4.0:
     dependencies:
@@ -3886,57 +4032,15 @@ snapshots:
 
   eslint-visitor-keys@4.2.1: {}
 
-  eslint@9.32.0(jiti@2.6.1):
+  eslint@9.39.2(jiti@2.6.1):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.32.0(jiti@2.6.1))
-      '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.21.0
-      '@eslint/config-helpers': 0.3.0
-      '@eslint/core': 0.15.1
-      '@eslint/eslintrc': 3.3.1
-      '@eslint/js': 9.32.0
-      '@eslint/plugin-kit': 0.3.4
-      '@humanfs/node': 0.16.6
-      '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@types/estree': 1.0.8
-      '@types/json-schema': 7.0.15
-      ajv: 6.12.6
-      chalk: 4.1.2
-      cross-spawn: 7.0.6
-      debug: 4.4.1
-      escape-string-regexp: 4.0.0
-      eslint-scope: 8.4.0
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
-      esquery: 1.6.0
-      esutils: 2.0.3
-      fast-deep-equal: 3.1.3
-      file-entry-cache: 8.0.0
-      find-up: 5.0.0
-      glob-parent: 6.0.2
-      ignore: 5.3.2
-      imurmurhash: 0.1.4
-      is-glob: 4.0.3
-      json-stable-stringify-without-jsonify: 1.0.1
-      lodash.merge: 4.6.2
-      minimatch: 3.1.2
-      natural-compare: 1.4.0
-      optionator: 0.9.4
-    optionalDependencies:
-      jiti: 2.6.1
-    transitivePeerDependencies:
-      - supports-color
-
-  eslint@9.39.1(jiti@2.6.1):
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.1(jiti@2.6.1))
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.39.2(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.2
       '@eslint/config-array': 0.21.1
       '@eslint/config-helpers': 0.4.2
       '@eslint/core': 0.17.0
       '@eslint/eslintrc': 3.3.3
-      '@eslint/js': 9.39.1
+      '@eslint/js': 9.39.2
       '@eslint/plugin-kit': 0.4.1
       '@humanfs/node': 0.16.7
       '@humanwhocodes/module-importer': 1.0.1
@@ -4009,6 +4113,14 @@ snapshots:
 
   fast-deep-equal@3.1.3: {}
 
+  fast-glob@3.2.12:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
   fast-glob@3.3.1:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -4033,6 +4145,10 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
   figures@3.2.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -4069,6 +4185,9 @@ snapshots:
 
   fs.realpath@1.0.0: {}
 
+  fsevents@2.3.3:
+    optional: true
+
   function-bind@1.1.2: {}
 
   function.prototype.name@1.1.8:
@@ -4082,6 +4201,8 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  gensync@1.0.0-beta.2: {}
+
   get-intrinsic@1.3.0:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -4108,11 +4229,15 @@ snapshots:
       es-errors: 1.3.0
       get-intrinsic: 1.3.0
 
+  get-tsconfig@4.13.6:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   get-uri@6.0.5:
     dependencies:
       basic-ftp: 5.0.5
       data-uri-to-buffer: 6.0.2
-      debug: 4.4.1
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -4135,7 +4260,7 @@ snapshots:
 
   globals@14.0.0: {}
 
-  globals@15.15.0: {}
+  globals@17.3.0: {}
 
   globalthis@1.0.4:
     dependencies:
@@ -4157,13 +4282,11 @@ snapshots:
 
   graceful-fs@4.2.11: {}
 
-  gradient-string@2.0.2:
+  gradient-string@2.0.1:
     dependencies:
       chalk: 4.1.2
       tinygradient: 1.1.5
 
-  graphemer@1.4.0: {}
-
   handlebars@4.7.8:
     dependencies:
       minimist: 1.2.8
@@ -4202,17 +4325,23 @@ snapshots:
       no-case: 2.3.2
       upper-case: 1.1.3
 
+  hermes-estree@0.25.1: {}
+
+  hermes-parser@0.25.1:
+    dependencies:
+      hermes-estree: 0.25.1
+
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.1
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
   https-proxy-agent@7.0.6:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.1
+      debug: 4.4.3
     transitivePeerDependencies:
       - supports-color
 
@@ -4222,7 +4351,9 @@ snapshots:
     dependencies:
       safer-buffer: 2.1.2
 
-  ieee754@1.2.1: {}
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
 
   ignore@5.3.2: {}
 
@@ -4262,24 +4393,6 @@ snapshots:
       strip-ansi: 6.0.1
       through: 2.3.8
 
-  inquirer@8.2.6:
-    dependencies:
-      ansi-escapes: 4.3.2
-      chalk: 4.1.2
-      cli-cursor: 3.1.0
-      cli-width: 3.0.0
-      external-editor: 3.1.0
-      figures: 3.2.0
-      lodash: 4.17.21
-      mute-stream: 0.0.8
-      ora: 5.4.1
-      run-async: 2.4.1
-      rxjs: 7.8.2
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      through: 2.3.8
-      wrap-ansi: 6.2.0
-
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
@@ -4401,8 +4514,6 @@ snapshots:
     dependencies:
       which-typed-array: 1.1.19
 
-  is-unicode-supported@0.1.0: {}
-
   is-upper-case@1.1.2:
     dependencies:
       upper-case: 1.1.3
@@ -4433,28 +4544,26 @@ snapshots:
       has-symbols: 1.1.0
       set-function-name: 2.0.2
 
-  jiti@2.5.1: {}
-
   jiti@2.6.1: {}
 
   js-tokens@4.0.0: {}
 
-  js-yaml@4.1.0:
-    dependencies:
-      argparse: 2.0.1
-
   js-yaml@4.1.1:
     dependencies:
       argparse: 2.0.1
 
   jsbn@1.1.0: {}
 
+  jsesc@3.1.0: {}
+
   json-buffer@3.0.1: {}
 
   json-schema-traverse@0.4.1: {}
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json5@2.2.3: {}
+
   jsonfile@6.1.0:
     dependencies:
       universalify: 2.0.1
@@ -4480,81 +4589,36 @@ snapshots:
   lightningcss-android-arm64@1.30.2:
     optional: true
 
-  lightningcss-darwin-arm64@1.30.1:
-    optional: true
-
   lightningcss-darwin-arm64@1.30.2:
     optional: true
 
-  lightningcss-darwin-x64@1.30.1:
-    optional: true
-
   lightningcss-darwin-x64@1.30.2:
     optional: true
 
-  lightningcss-freebsd-x64@1.30.1:
-    optional: true
-
   lightningcss-freebsd-x64@1.30.2:
     optional: true
 
-  lightningcss-linux-arm-gnueabihf@1.30.1:
-    optional: true
-
   lightningcss-linux-arm-gnueabihf@1.30.2:
     optional: true
 
-  lightningcss-linux-arm64-gnu@1.30.1:
-    optional: true
-
   lightningcss-linux-arm64-gnu@1.30.2:
     optional: true
 
-  lightningcss-linux-arm64-musl@1.30.1:
-    optional: true
-
   lightningcss-linux-arm64-musl@1.30.2:
     optional: true
 
-  lightningcss-linux-x64-gnu@1.30.1:
-    optional: true
-
   lightningcss-linux-x64-gnu@1.30.2:
     optional: true
 
-  lightningcss-linux-x64-musl@1.30.1:
-    optional: true
-
   lightningcss-linux-x64-musl@1.30.2:
     optional: true
 
-  lightningcss-win32-arm64-msvc@1.30.1:
-    optional: true
-
   lightningcss-win32-arm64-msvc@1.30.2:
     optional: true
 
-  lightningcss-win32-x64-msvc@1.30.1:
-    optional: true
-
   lightningcss-win32-x64-msvc@1.30.2:
     optional: true
 
-  lightningcss@1.30.1:
-    dependencies:
-      detect-libc: 2.1.2
-    optionalDependencies:
-      lightningcss-darwin-arm64: 1.30.1
-      lightningcss-darwin-x64: 1.30.1
-      lightningcss-freebsd-x64: 1.30.1
-      lightningcss-linux-arm-gnueabihf: 1.30.1
-      lightningcss-linux-arm64-gnu: 1.30.1
-      lightningcss-linux-arm64-musl: 1.30.1
-      lightningcss-linux-x64-gnu: 1.30.1
-      lightningcss-linux-x64-musl: 1.30.1
-      lightningcss-win32-arm64-msvc: 1.30.1
-      lightningcss-win32-x64-msvc: 1.30.1
-
   lightningcss@1.30.2:
     dependencies:
       detect-libc: 2.1.2
@@ -4585,11 +4649,6 @@ snapshots:
     dependencies:
       chalk: 2.4.2
 
-  log-symbols@4.1.0:
-    dependencies:
-      chalk: 4.1.2
-      is-unicode-supported: 0.1.0
-
   loose-envify@1.4.0:
     dependencies:
       js-tokens: 4.0.0
@@ -4600,26 +4659,16 @@ snapshots:
 
   lower-case@1.1.4: {}
 
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
   lru-cache@7.18.3: {}
 
-  lucide-react@0.475.0(react@19.1.1):
-    dependencies:
-      react: 19.1.1
-
-  lucide-react@0.475.0(react@19.2.1):
-    dependencies:
-      react: 19.2.1
-
-  magic-string@0.30.17:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.4
-
   magic-string@0.30.21:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  make-error@1.3.6: {}
-
   math-intrinsics@1.1.0: {}
 
   merge-stream@2.0.0: {}
@@ -4637,28 +4686,26 @@ snapshots:
     dependencies:
       brace-expansion: 1.1.12
 
+  minimatch@9.0.0:
+    dependencies:
+      brace-expansion: 2.0.2
+
   minimatch@9.0.5:
     dependencies:
       brace-expansion: 2.0.2
 
   minimist@1.2.8: {}
 
-  minipass@7.1.2: {}
-
-  minizlib@3.0.2:
-    dependencies:
-      minipass: 7.1.2
-
   mkdirp@0.5.6:
     dependencies:
       minimist: 1.2.8
 
-  mkdirp@3.0.1: {}
-
   ms@2.1.3: {}
 
   mute-stream@0.0.8: {}
 
+  mute-stream@2.0.0: {}
+
   nanoid@3.3.11: {}
 
   natural-compare@1.4.0: {}
@@ -4667,34 +4714,30 @@ snapshots:
 
   netmask@2.0.2: {}
 
-  next-themes@0.4.6(react-dom@19.1.1(react@19.1.1))(react@19.1.1):
+  next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
-      react: 19.1.1
-      react-dom: 19.1.1(react@19.1.1)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
 
-  next-themes@0.4.6(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
+  next@16.1.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
     dependencies:
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-
-  next@16.0.10(react-dom@19.2.1(react@19.2.1))(react@19.2.1):
-    dependencies:
-      '@next/env': 16.0.10
+      '@next/env': 16.1.6
       '@swc/helpers': 0.5.15
+      baseline-browser-mapping: 2.9.19
       caniuse-lite: 1.0.30001760
       postcss: 8.4.31
-      react: 19.2.1
-      react-dom: 19.2.1(react@19.2.1)
-      styled-jsx: 5.1.6(react@19.2.1)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      styled-jsx: 5.1.6(react@19.2.4)
     optionalDependencies:
-      '@next/swc-darwin-arm64': 16.0.10
-      '@next/swc-darwin-x64': 16.0.10
-      '@next/swc-linux-arm64-gnu': 16.0.10
-      '@next/swc-linux-arm64-musl': 16.0.10
-      '@next/swc-linux-x64-gnu': 16.0.10
-      '@next/swc-linux-x64-musl': 16.0.10
-      '@next/swc-win32-arm64-msvc': 16.0.10
-      '@next/swc-win32-x64-msvc': 16.0.10
+      '@next/swc-darwin-arm64': 16.1.6
+      '@next/swc-darwin-x64': 16.1.6
+      '@next/swc-linux-arm64-gnu': 16.1.6
+      '@next/swc-linux-arm64-musl': 16.1.6
+      '@next/swc-linux-x64-gnu': 16.1.6
+      '@next/swc-linux-x64-musl': 16.1.6
+      '@next/swc-win32-arm64-msvc': 16.1.6
+      '@next/swc-win32-x64-msvc': 16.1.6
       sharp: 0.34.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -4718,6 +4761,8 @@ snapshots:
       mkdirp: 0.5.6
       resolve: 1.22.10
 
+  node-releases@2.0.27: {}
+
   npm-run-path@4.0.1:
     dependencies:
       path-key: 3.1.1
@@ -4786,18 +4831,6 @@ snapshots:
       strip-ansi: 6.0.1
       wcwidth: 1.0.1
 
-  ora@5.4.1:
-    dependencies:
-      bl: 4.1.0
-      chalk: 4.1.2
-      cli-cursor: 3.1.0
-      cli-spinners: 2.9.2
-      is-interactive: 1.0.0
-      is-unicode-supported: 0.1.0
-      log-symbols: 4.1.0
-      strip-ansi: 6.0.1
-      wcwidth: 1.0.1
-
   os-tmpdir@1.0.2: {}
 
   own-keys@1.0.1:
@@ -4822,7 +4855,7 @@ snapshots:
     dependencies:
       '@tootallnate/quickjs-emscripten': 0.23.0
       agent-base: 7.1.4
-      debug: 4.4.1
+      debug: 4.4.3
       get-uri: 6.0.5
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
@@ -4869,6 +4902,8 @@ snapshots:
 
   picomatch@2.3.1: {}
 
+  picomatch@4.0.3: {}
+
   possible-typed-array-names@1.1.0: {}
 
   postcss@8.4.31:
@@ -4885,7 +4920,7 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier@3.7.4: {}
+  prettier@3.8.1: {}
 
   prop-types@15.8.1:
     dependencies:
@@ -4896,7 +4931,7 @@ snapshots:
   proxy-agent@6.5.0:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.1
+      debug: 4.4.3
       http-proxy-agent: 7.0.2
       https-proxy-agent: 7.0.6
       lru-cache: 7.18.3
@@ -4919,27 +4954,14 @@ snapshots:
       minimist: 1.2.8
       strip-json-comments: 2.0.1
 
-  react-dom@19.1.1(react@19.1.1):
+  react-dom@19.2.4(react@19.2.4):
     dependencies:
-      react: 19.1.1
-      scheduler: 0.26.0
-
-  react-dom@19.2.1(react@19.2.1):
-    dependencies:
-      react: 19.2.1
+      react: 19.2.4
       scheduler: 0.27.0
 
   react-is@16.13.1: {}
 
-  react@19.1.1: {}
-
-  react@19.2.1: {}
-
-  readable-stream@3.6.2:
-    dependencies:
-      inherits: 2.0.4
-      string_decoder: 1.3.0
-      util-deprecate: 1.0.2
+  react@19.2.4: {}
 
   reflect.getprototypeof@1.0.10:
     dependencies:
@@ -4972,6 +4994,8 @@ snapshots:
 
   resolve-from@4.0.0: {}
 
+  resolve-pkg-maps@1.0.0: {}
+
   resolve@1.22.10:
     dependencies:
       is-core-module: 2.16.1
@@ -5005,10 +5029,6 @@ snapshots:
     dependencies:
       tslib: 1.14.1
 
-  rxjs@7.8.2:
-    dependencies:
-      tslib: 2.8.1
-
   safe-array-concat@1.1.3:
     dependencies:
       call-bind: 1.0.8
@@ -5032,18 +5052,13 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  scheduler@0.26.0: {}
-
   scheduler@0.27.0: {}
 
   semver@6.3.1: {}
 
   semver@7.6.2: {}
 
-  semver@7.7.2: {}
-
-  semver@7.7.3:
-    optional: true
+  semver@7.7.3: {}
 
   sentence-case@2.1.1:
     dependencies:
@@ -5140,6 +5155,8 @@ snapshots:
 
   signal-exit@3.0.7: {}
 
+  signal-exit@4.1.0: {}
+
   slash@3.0.0: {}
 
   smart-buffer@4.2.0: {}
@@ -5151,7 +5168,7 @@ snapshots:
   socks-proxy-agent@8.0.5:
     dependencies:
       agent-base: 7.1.4
-      debug: 4.4.1
+      debug: 4.4.3
       socks: 2.8.6
     transitivePeerDependencies:
       - supports-color
@@ -5222,10 +5239,6 @@ snapshots:
       define-properties: 1.2.1
       es-object-atoms: 1.1.1
 
-  string_decoder@1.3.0:
-    dependencies:
-      safe-buffer: 5.2.1
-
   strip-ansi@6.0.1:
     dependencies:
       ansi-regex: 5.0.1
@@ -5236,10 +5249,10 @@ snapshots:
 
   strip-json-comments@3.1.1: {}
 
-  styled-jsx@5.1.6(react@19.2.1):
+  styled-jsx@5.1.6(react@19.2.4):
     dependencies:
       client-only: 0.0.1
-      react: 19.2.1
+      react: 19.2.4
 
   supports-color@5.5.0:
     dependencies:
@@ -5256,29 +5269,19 @@ snapshots:
       lower-case: 1.1.4
       upper-case: 1.1.3
 
-  tailwind-merge@3.3.1: {}
-
-  tailwindcss@4.1.11: {}
-
-  tailwindcss@4.1.17: {}
-
-  tapable@2.2.2: {}
+  tailwindcss@4.1.18: {}
 
   tapable@2.3.0: {}
 
-  tar@7.4.3:
-    dependencies:
-      '@isaacs/fs-minipass': 4.0.1
-      chownr: 3.0.0
-      minipass: 7.1.2
-      minizlib: 3.0.2
-      mkdirp: 3.0.1
-      yallist: 5.0.0
-
   through@2.3.8: {}
 
   tinycolor2@1.6.0: {}
 
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
   tinygradient@1.1.5:
     dependencies:
       '@types/tinycolor2': 1.4.6
@@ -5297,60 +5300,47 @@ snapshots:
     dependencies:
       is-number: 7.0.0
 
-  ts-api-utils@2.1.0(typescript@5.9.2):
+  ts-api-utils@2.4.0(typescript@5.9.3):
     dependencies:
-      typescript: 5.9.2
-
-  ts-node@10.9.2(@types/node@20.19.9)(typescript@5.9.2):
-    dependencies:
-      '@cspotcode/source-map-support': 0.8.1
-      '@tsconfig/node10': 1.0.11
-      '@tsconfig/node12': 1.0.11
-      '@tsconfig/node14': 1.0.3
-      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.19.9
-      acorn: 8.15.0
-      acorn-walk: 8.3.4
-      arg: 4.1.3
-      create-require: 1.1.1
-      diff: 4.0.2
-      make-error: 1.3.6
-      typescript: 5.9.2
-      v8-compile-cache-lib: 3.0.1
-      yn: 3.1.1
+      typescript: 5.9.3
 
   tslib@1.14.1: {}
 
   tslib@2.8.1: {}
 
-  turbo-darwin-64@2.6.3:
-    optional: true
-
-  turbo-darwin-arm64@2.6.3:
-    optional: true
-
-  turbo-linux-64@2.6.3:
-    optional: true
-
-  turbo-linux-arm64@2.6.3:
-    optional: true
-
-  turbo-windows-64@2.6.3:
-    optional: true
-
-  turbo-windows-arm64@2.6.3:
-    optional: true
-
-  turbo@2.6.3:
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.3
+      get-tsconfig: 4.13.6
     optionalDependencies:
-      turbo-darwin-64: 2.6.3
-      turbo-darwin-arm64: 2.6.3
-      turbo-linux-64: 2.6.3
-      turbo-linux-arm64: 2.6.3
-      turbo-windows-64: 2.6.3
-      turbo-windows-arm64: 2.6.3
+      fsevents: 2.3.3
 
-  tw-animate-css@1.3.6: {}
+  turbo-darwin-64@2.8.7:
+    optional: true
+
+  turbo-darwin-arm64@2.8.7:
+    optional: true
+
+  turbo-linux-64@2.8.7:
+    optional: true
+
+  turbo-linux-arm64@2.8.7:
+    optional: true
+
+  turbo-windows-64@2.8.7:
+    optional: true
+
+  turbo-windows-arm64@2.8.7:
+    optional: true
+
+  turbo@2.8.7:
+    optionalDependencies:
+      turbo-darwin-64: 2.8.7
+      turbo-darwin-arm64: 2.8.7
+      turbo-linux-64: 2.8.7
+      turbo-linux-arm64: 2.8.7
+      turbo-windows-64: 2.8.7
+      turbo-windows-arm64: 2.8.7
 
   type-check@0.4.0:
     dependencies:
@@ -5391,21 +5381,17 @@ snapshots:
       possible-typed-array-names: 1.1.0
       reflect.getprototypeof: 1.0.10
 
-  typescript-eslint@8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2):
+  typescript-eslint@8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.39.0(@typescript-eslint/parser@8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2))(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
-      '@typescript-eslint/typescript-estree': 8.39.0(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.39.0(eslint@9.32.0(jiti@2.6.1))(typescript@5.9.2)
-      eslint: 9.32.0(jiti@2.6.1)
-      typescript: 5.9.2
+      '@typescript-eslint/eslint-plugin': 8.55.0(@typescript-eslint/parser@8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.55.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.55.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  typescript@5.7.3: {}
-
-  typescript@5.9.2: {}
-
   typescript@5.9.3: {}
 
   uglify-js@3.19.3:
@@ -5418,10 +5404,16 @@ snapshots:
       has-symbols: 1.1.0
       which-boxed-primitive: 1.1.1
 
-  undici-types@6.21.0: {}
+  undici-types@7.16.0: {}
 
   universalify@2.0.1: {}
 
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
   update-check@1.5.4:
     dependencies:
       registry-auth-token: 3.3.2
@@ -5437,11 +5429,9 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  util-deprecate@1.0.2: {}
-
-  v8-compile-cache-lib@3.0.1: {}
-
-  validate-npm-package-name@5.0.1: {}
+  validate-npm-package-name@5.0.0:
+    dependencies:
+      builtins: 5.1.0
 
   wcwidth@1.0.1:
     dependencies:
@@ -5504,10 +5494,14 @@ snapshots:
 
   wrappy@1.0.2: {}
 
-  yallist@5.0.0: {}
-
-  yn@3.1.1: {}
+  yallist@3.1.1: {}
 
   yocto-queue@0.1.0: {}
 
+  yoctocolors-cjs@2.1.3: {}
+
+  zod-validation-error@4.0.2(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
   zod@3.25.76: {}
diff --git a/templates/next-monorepo/pnpm-workspace.yaml b/templates/next-monorepo/pnpm-workspace.yaml
new file mode 100644
index 0000000000..3ff5faaaf5
--- /dev/null
+++ b/templates/next-monorepo/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"
diff --git a/templates/monorepo-next/tsconfig.json b/templates/next-monorepo/tsconfig.json
similarity index 100%
rename from templates/monorepo-next/tsconfig.json
rename to templates/next-monorepo/tsconfig.json
diff --git a/templates/monorepo-next/turbo.json b/templates/next-monorepo/turbo.json
similarity index 76%
rename from templates/monorepo-next/turbo.json
rename to templates/next-monorepo/turbo.json
index d6a7fe0554..dd730d98d6 100644
--- a/templates/monorepo-next/turbo.json
+++ b/templates/next-monorepo/turbo.json
@@ -10,8 +10,11 @@
     "lint": {
       "dependsOn": ["^lint"]
     },
-    "check-types": {
-      "dependsOn": ["^check-types"]
+    "format": {
+      "dependsOn": ["^format"]
+    },
+    "typecheck": {
+      "dependsOn": ["^typecheck"]
     },
     "dev": {
       "cache": false,
diff --git a/templates/react-router-app/.dockerignore b/templates/react-router-app/.dockerignore
new file mode 100644
index 0000000000..9b8d514712
--- /dev/null
+++ b/templates/react-router-app/.dockerignore
@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md
\ No newline at end of file
diff --git a/templates/react-router-app/.gitignore b/templates/react-router-app/.gitignore
new file mode 100644
index 0000000000..039ee62d21
--- /dev/null
+++ b/templates/react-router-app/.gitignore
@@ -0,0 +1,7 @@
+.DS_Store
+.env
+/node_modules/
+
+# React Router
+/.react-router/
+/build/
diff --git a/templates/react-router-app/.prettierignore b/templates/react-router-app/.prettierignore
new file mode 100644
index 0000000000..0b4a1db4da
--- /dev/null
+++ b/templates/react-router-app/.prettierignore
@@ -0,0 +1,7 @@
+node_modules/
+coverage/
+.pnpm-store/
+pnpm-lock.yaml
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/templates/react-router-app/.prettierrc b/templates/react-router-app/.prettierrc
new file mode 100644
index 0000000000..e76c16d8a2
--- /dev/null
+++ b/templates/react-router-app/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "app/app.css",
+  "tailwindFunctions": ["cn", "cva"]
+}
diff --git a/templates/react-router-app/Dockerfile b/templates/react-router-app/Dockerfile
new file mode 100644
index 0000000000..207bf937e3
--- /dev/null
+++ b/templates/react-router-app/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]
\ No newline at end of file
diff --git a/templates/react-router-app/README.md b/templates/react-router-app/README.md
new file mode 100644
index 0000000000..10256680fb
--- /dev/null
+++ b/templates/react-router-app/README.md
@@ -0,0 +1,21 @@
+# React Router + shadcn/ui
+
+This is a template for a new React Router project with React, TypeScript, and shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command:
+
+```bash
+npx shadcn@latest add button
+```
+
+This will place the ui components in the `components` directory.
+
+## Using components
+
+To use the components in your app, import them as follows:
+
+```tsx
+import { Button } from "@/components/ui/button";
+```
diff --git a/templates/react-router-app/app/app.css b/templates/react-router-app/app/app.css
new file mode 100644
index 0000000000..f1d8c73cdc
--- /dev/null
+++ b/templates/react-router-app/app/app.css
@@ -0,0 +1 @@
+@import "tailwindcss";
diff --git a/templates/react-router-app/app/root.tsx b/templates/react-router-app/app/root.tsx
new file mode 100644
index 0000000000..43f7bfe738
--- /dev/null
+++ b/templates/react-router-app/app/root.tsx
@@ -0,0 +1,62 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  isRouteErrorResponse,
+} from "react-router"
+
+import type { Route } from "./+types/root"
+import "./app.css"
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+export default function App() {
+  return <Outlet />
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!"
+  let details = "An unexpected error occurred."
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error"
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <main className="container mx-auto p-4 pt-16">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full overflow-x-auto p-4">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  )
+}
diff --git a/templates/react-router-app/app/routes.ts b/templates/react-router-app/app/routes.ts
new file mode 100644
index 0000000000..b5829b0d7f
--- /dev/null
+++ b/templates/react-router-app/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes"
+
+export default [index("routes/home.tsx")] satisfies RouteConfig
diff --git a/templates/react-router-app/app/routes/home.tsx b/templates/react-router-app/app/routes/home.tsx
new file mode 100644
index 0000000000..938c95e082
--- /dev/null
+++ b/templates/react-router-app/app/routes/home.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@/components/ui/button"
+
+export default function Home() {
+  return (
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="font-medium">Project ready!</h1>
+          <p>You may now add components and start building.</p>
+          <p>We&apos;ve already added the button component for you.</p>
+          <Button className="mt-2">Button</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/templates/react-router-app/package.json b/templates/react-router-app/package.json
new file mode 100644
index 0000000000..a5ec9c779c
--- /dev/null
+++ b/templates/react-router-app/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "rr-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "react-router build",
+    "dev": "react-router dev",
+    "start": "react-router-serve ./build/server/index.js",
+    "typecheck": "react-router typegen && tsc",
+    "format": "prettier --write \"**/*.{ts,tsx}\""
+  },
+  "dependencies": {
+    "@react-router/node": "7.12.0",
+    "@react-router/serve": "7.12.0",
+    "isbot": "^5.1.31",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router": "7.12.0"
+  },
+  "devDependencies": {
+    "@react-router/dev": "7.12.0",
+    "@tailwindcss/vite": "^4.1.13",
+    "@types/node": "^22",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "tailwindcss": "^4.1.13",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.7",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
diff --git a/templates/react-router-app/public/favicon.ico b/templates/react-router-app/public/favicon.ico
new file mode 100644
index 0000000000..5dbdfcddcb
Binary files /dev/null and b/templates/react-router-app/public/favicon.ico differ
diff --git a/templates/react-router-app/react-router.config.ts b/templates/react-router-app/react-router.config.ts
new file mode 100644
index 0000000000..ade263370b
--- /dev/null
+++ b/templates/react-router-app/react-router.config.ts
@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config"
+
+export default {
+  // Config options...
+  // Server-side render by default, to enable SPA mode set this to `false`
+  ssr: true,
+} satisfies Config
diff --git a/templates/react-router-app/tsconfig.json b/templates/react-router-app/tsconfig.json
new file mode 100644
index 0000000000..dc391a45f7
--- /dev/null
+++ b/templates/react-router-app/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
diff --git a/templates/react-router-app/vite.config.ts b/templates/react-router-app/vite.config.ts
new file mode 100644
index 0000000000..7f62744caf
--- /dev/null
+++ b/templates/react-router-app/vite.config.ts
@@ -0,0 +1,8 @@
+import { reactRouter } from "@react-router/dev/vite"
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+})
diff --git a/templates/react-router-monorepo/.gitignore b/templates/react-router-monorepo/.gitignore
new file mode 100644
index 0000000000..31ac366f06
--- /dev/null
+++ b/templates/react-router-monorepo/.gitignore
@@ -0,0 +1,34 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+build
+dist
+
+# React Router
+.react-router/
+
+# Debug
+npm-debug.log*
+
+# Misc
+.DS_Store
+*.pem
diff --git a/templates/react-router-monorepo/.npmrc b/templates/react-router-monorepo/.npmrc
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/react-router-monorepo/.prettierignore b/templates/react-router-monorepo/.prettierignore
new file mode 100644
index 0000000000..18517a2b48
--- /dev/null
+++ b/templates/react-router-monorepo/.prettierignore
@@ -0,0 +1,8 @@
+dist/
+build/
+node_modules/
+.turbo/
+.react-router/
+coverage/
+pnpm-lock.yaml
+.pnpm-store/
\ No newline at end of file
diff --git a/templates/react-router-monorepo/.prettierrc b/templates/react-router-monorepo/.prettierrc
new file mode 100644
index 0000000000..40ce0679f4
--- /dev/null
+++ b/templates/react-router-monorepo/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "packages/ui/src/styles/globals.css",
+  "tailwindFunctions": ["cn", "cva"]
+}
diff --git a/templates/react-router-monorepo/README.md b/templates/react-router-monorepo/README.md
new file mode 100644
index 0000000000..8cbbd83f87
--- /dev/null
+++ b/templates/react-router-monorepo/README.md
@@ -0,0 +1,21 @@
+# shadcn/ui monorepo template
+
+This is a React Router monorepo template with shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command at the root of your `web` app:
+
+```bash
+pnpm dlx shadcn@latest add button -c apps/web
+```
+
+This will place the ui components in the `packages/ui/src/components` directory.
+
+## Using components
+
+To use the components in your app, import them from the `ui` package.
+
+```tsx
+import { Button } from "@workspace/ui/components/button";
+```
diff --git a/templates/react-router-monorepo/apps/web/.dockerignore b/templates/react-router-monorepo/apps/web/.dockerignore
new file mode 100644
index 0000000000..54f78fa7b6
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/.dockerignore
@@ -0,0 +1,4 @@
+.react-router
+build
+node_modules
+README.md
diff --git a/templates/react-router-monorepo/apps/web/Dockerfile b/templates/react-router-monorepo/apps/web/Dockerfile
new file mode 100644
index 0000000000..163c672fd5
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:20-alpine AS development-dependencies-env
+COPY . /app
+WORKDIR /app
+RUN npm ci
+
+FROM node:20-alpine AS production-dependencies-env
+COPY ./package.json package-lock.json /app/
+WORKDIR /app
+RUN npm ci --omit=dev
+
+FROM node:20-alpine AS build-env
+COPY . /app/
+COPY --from=development-dependencies-env /app/node_modules /app/node_modules
+WORKDIR /app
+RUN npm run build
+
+FROM node:20-alpine
+COPY ./package.json package-lock.json /app/
+COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+COPY --from=build-env /app/build /app/build
+WORKDIR /app
+CMD ["npm", "run", "start"]
diff --git a/templates/react-router-monorepo/apps/web/app/root.tsx b/templates/react-router-monorepo/apps/web/app/root.tsx
new file mode 100644
index 0000000000..ca753ce337
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/app/root.tsx
@@ -0,0 +1,62 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  isRouteErrorResponse,
+} from "react-router"
+
+import type { Route } from "./+types/root"
+import "@workspace/ui/globals.css"
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
+export default function App() {
+  return <Outlet />
+}
+
+export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
+  let message = "Oops!"
+  let details = "An unexpected error occurred."
+  let stack: string | undefined
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error"
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details
+  } else if (import.meta.env.DEV && error && error instanceof Error) {
+    details = error.message
+    stack = error.stack
+  }
+
+  return (
+    <main className="container mx-auto p-4 pt-16">
+      <h1>{message}</h1>
+      <p>{details}</p>
+      {stack && (
+        <pre className="w-full overflow-x-auto p-4">
+          <code>{stack}</code>
+        </pre>
+      )}
+    </main>
+  )
+}
diff --git a/templates/react-router-monorepo/apps/web/app/routes.ts b/templates/react-router-monorepo/apps/web/app/routes.ts
new file mode 100644
index 0000000000..b5829b0d7f
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/app/routes.ts
@@ -0,0 +1,3 @@
+import { type RouteConfig, index } from "@react-router/dev/routes"
+
+export default [index("routes/home.tsx")] satisfies RouteConfig
diff --git a/templates/react-router-monorepo/apps/web/app/routes/home.tsx b/templates/react-router-monorepo/apps/web/app/routes/home.tsx
new file mode 100644
index 0000000000..c93be941da
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/app/routes/home.tsx
@@ -0,0 +1,16 @@
+import { Button } from "@workspace/ui/components/button"
+
+export default function Home() {
+  return (
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="font-medium">Project ready!</h1>
+          <p>You may now add components and start building.</p>
+          <p>We&apos;ve already added the button component for you.</p>
+          <Button className="mt-2">Button</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/templates/react-router-monorepo/apps/web/components.json b/templates/react-router-monorepo/apps/web/components.json
new file mode 100644
index 0000000000..873bb9a11f
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/components.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "remixicon",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  },
+  "rtl": false,
+  "menuColor": "inverted",
+  "menuAccent": "subtle"
+}
diff --git a/templates/react-router-monorepo/apps/web/components/.gitkeep b/templates/react-router-monorepo/apps/web/components/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/react-router-monorepo/apps/web/hooks/.gitkeep b/templates/react-router-monorepo/apps/web/hooks/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/react-router-monorepo/apps/web/lib/.gitkeep b/templates/react-router-monorepo/apps/web/lib/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/react-router-monorepo/apps/web/package.json b/templates/react-router-monorepo/apps/web/package.json
new file mode 100644
index 0000000000..3e47d77af9
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "react-router dev",
+    "build": "react-router build",
+    "start": "react-router-serve ./build/server/index.js",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "react-router typegen && tsc"
+  },
+  "dependencies": {
+    "@react-router/node": "7.12.0",
+    "@react-router/serve": "7.12.0",
+    "@remixicon/react": "^4.9.0",
+    "@workspace/ui": "workspace:*",
+    "isbot": "^5.1.31",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router": "7.12.0"
+  },
+  "devDependencies": {
+    "@react-router/dev": "7.12.0",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4",
+    "vite-tsconfig-paths": "^5.1.4"
+  }
+}
diff --git a/templates/react-router-monorepo/apps/web/react-router.config.ts b/templates/react-router-monorepo/apps/web/react-router.config.ts
new file mode 100644
index 0000000000..ade263370b
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/react-router.config.ts
@@ -0,0 +1,7 @@
+import type { Config } from "@react-router/dev/config"
+
+export default {
+  // Config options...
+  // Server-side render by default, to enable SPA mode set this to `false`
+  ssr: true,
+} satisfies Config
diff --git a/templates/react-router-monorepo/apps/web/tsconfig.json b/templates/react-router-monorepo/apps/web/tsconfig.json
new file mode 100644
index 0000000000..b4672f5956
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "include": [
+    "**/*",
+    "**/.server/**/*",
+    "**/.client/**/*",
+    ".react-router/types/**/*"
+  ],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["node", "vite/client"],
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "rootDirs": [".", "./.react-router/types"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./app/*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"]
+    },
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
diff --git a/templates/react-router-monorepo/apps/web/vite.config.ts b/templates/react-router-monorepo/apps/web/vite.config.ts
new file mode 100644
index 0000000000..7f62744caf
--- /dev/null
+++ b/templates/react-router-monorepo/apps/web/vite.config.ts
@@ -0,0 +1,8 @@
+import { reactRouter } from "@react-router/dev/vite"
+import tailwindcss from "@tailwindcss/vite"
+import { defineConfig } from "vite"
+import tsconfigPaths from "vite-tsconfig-paths"
+
+export default defineConfig({
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+})
diff --git a/templates/react-router-monorepo/package.json b/templates/react-router-monorepo/package.json
new file mode 100644
index 0000000000..c080fb55c5
--- /dev/null
+++ b/templates/react-router-monorepo/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "react-router-monorepo",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "format": "turbo format",
+    "typecheck": "turbo typecheck"
+  },
+  "devDependencies": {
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "turbo": "^2.8.8",
+    "typescript": "5.9.3"
+  },
+  "packageManager": "pnpm@9.0.6",
+  "engines": {
+    "node": ">=20"
+  }
+}
diff --git a/templates/react-router-monorepo/packages/ui/components.json b/templates/react-router-monorepo/packages/ui/components.json
new file mode 100644
index 0000000000..00ef71e8ff
--- /dev/null
+++ b/templates/react-router-monorepo/packages/ui/components.json
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "remixicon",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  },
+  "rtl": false,
+  "menuColor": "inverted",
+  "menuAccent": "subtle"
+}
diff --git a/templates/react-router-monorepo/packages/ui/package.json b/templates/react-router-monorepo/packages/ui/package.json
new file mode 100644
index 0000000000..74615f9466
--- /dev/null
+++ b/templates/react-router-monorepo/packages/ui/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@workspace/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@fontsource-variable/outfit": "^5.2.8",
+    "@remixicon/react": "^4.9.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "shadcn": "^3.8.5",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@turbo/gen": "^2.8.1",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}
diff --git a/templates/react-router-monorepo/packages/ui/src/components/.gitkeep b/templates/react-router-monorepo/packages/ui/src/components/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/react-router-monorepo/packages/ui/src/hooks/.gitkeep b/templates/react-router-monorepo/packages/ui/src/hooks/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/react-router-monorepo/packages/ui/src/lib/.gitkeep b/templates/react-router-monorepo/packages/ui/src/lib/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/monorepo-next/packages/ui/src/lib/utils.ts b/templates/react-router-monorepo/packages/ui/src/lib/utils.ts
similarity index 100%
rename from templates/monorepo-next/packages/ui/src/lib/utils.ts
rename to templates/react-router-monorepo/packages/ui/src/lib/utils.ts
diff --git a/templates/react-router-monorepo/packages/ui/src/styles/globals.css b/templates/react-router-monorepo/packages/ui/src/styles/globals.css
new file mode 100644
index 0000000000..ccee4f9019
--- /dev/null
+++ b/templates/react-router-monorepo/packages/ui/src/styles/globals.css
@@ -0,0 +1,129 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/outfit";
+
+@custom-variant dark (&:is(.dark *));
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.141 0.005 285.823);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.141 0.005 285.823);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.141 0.005 285.823);
+    --primary: oklch(0.648 0.2 131.684);
+    --primary-foreground: oklch(0.986 0.031 120.757);
+    --secondary: oklch(0.967 0.001 286.375);
+    --secondary-foreground: oklch(0.21 0.006 285.885);
+    --muted: oklch(0.967 0.001 286.375);
+    --muted-foreground: oklch(0.552 0.016 285.938);
+    --accent: oklch(0.967 0.001 286.375);
+    --accent-foreground: oklch(0.21 0.006 285.885);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.92 0.004 286.32);
+    --input: oklch(0.92 0.004 286.32);
+    --ring: oklch(0.705 0.015 286.067);
+    --chart-1: oklch(0.871 0.15 154.449);
+    --chart-2: oklch(0.723 0.219 149.579);
+    --chart-3: oklch(0.627 0.194 149.214);
+    --chart-4: oklch(0.527 0.154 150.069);
+    --chart-5: oklch(0.448 0.119 151.328);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.141 0.005 285.823);
+    --sidebar-primary: oklch(0.648 0.2 131.684);
+    --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+    --sidebar-accent: oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+    --sidebar-border: oklch(0.92 0.004 286.32);
+    --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.21 0.006 285.885);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.648 0.2 131.684);
+    --primary-foreground: oklch(0.986 0.031 120.757);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.552 0.016 285.938);
+    --chart-1: oklch(0.871 0.15 154.449);
+    --chart-2: oklch(0.723 0.219 149.579);
+    --chart-3: oklch(0.627 0.194 149.214);
+    --chart-4: oklch(0.527 0.154 150.069);
+    --chart-5: oklch(0.448 0.119 151.328);
+    --sidebar: oklch(0.21 0.006 285.885);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.768 0.233 130.85);
+    --sidebar-primary-foreground: oklch(0.986 0.031 120.757);
+    --sidebar-accent: oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@theme inline {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
+    --color-chart-1: var(--chart-1);
+    --color-chart-2: var(--chart-2);
+    --color-chart-3: var(--chart-3);
+    --color-chart-4: var(--chart-4);
+    --color-chart-5: var(--chart-5);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+    --color-sidebar: var(--sidebar);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --font-sans: 'Outfit', sans-serif;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+}
\ No newline at end of file
diff --git a/templates/react-router-monorepo/packages/ui/tsconfig.json b/templates/react-router-monorepo/packages/ui/tsconfig.json
new file mode 100644
index 0000000000..db4b78de10
--- /dev/null
+++ b/templates/react-router-monorepo/packages/ui/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@workspace/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/react-router-monorepo/packages/ui/tsconfig.lint.json b/templates/react-router-monorepo/packages/ui/tsconfig.lint.json
new file mode 100644
index 0000000000..08a184e477
--- /dev/null
+++ b/templates/react-router-monorepo/packages/ui/tsconfig.lint.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/react-router-monorepo/pnpm-lock.yaml b/templates/react-router-monorepo/pnpm-lock.yaml
new file mode 100644
index 0000000000..2a959634e5
--- /dev/null
+++ b/templates/react-router-monorepo/pnpm-lock.yaml
@@ -0,0 +1,7256 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      prettier:
+        specifier: ^3.8.1
+        version: 3.8.1
+      prettier-plugin-tailwindcss:
+        specifier: ^0.7.2
+        version: 0.7.2(prettier@3.8.1)
+      turbo:
+        specifier: ^2.8.8
+        version: 2.8.11
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+
+  apps/web:
+    dependencies:
+      '@react-router/node':
+        specifier: 7.12.0
+        version: 7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      '@react-router/serve':
+        specifier: 7.12.0
+        version: 7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      '@remixicon/react':
+        specifier: ^4.9.0
+        version: 4.9.0(react@19.2.4)
+      '@workspace/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      isbot:
+        specifier: ^5.1.31
+        version: 5.1.35
+      react:
+        specifier: ^19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
+      react-router:
+        specifier: 7.12.0
+        version: 7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+    devDependencies:
+      '@react-router/dev':
+        specifier: 7.12.0
+        version: 7.12.0(@react-router/serve@7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3))(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))
+      '@tailwindcss/vite':
+        specifier: ^4.1.18
+        version: 4.2.1(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))
+      '@types/node':
+        specifier: ^25.1.0
+        version: 25.3.0
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      tailwindcss:
+        specifier: ^4.1.18
+        version: 4.2.1
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.2.4
+        version: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)
+      vite-tsconfig-paths:
+        specifier: ^5.1.4
+        version: 5.1.4(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))
+
+  packages/ui:
+    dependencies:
+      '@fontsource-variable/outfit':
+        specifier: ^5.2.8
+        version: 5.2.8
+      '@remixicon/react':
+        specifier: ^4.9.0
+        version: 4.9.0(react@19.2.4)
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      radix-ui:
+        specifier: ^1.4.3
+        version: 1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react:
+        specifier: ^19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
+      shadcn:
+        specifier: ^3.8.5
+        version: 3.8.5(@types/node@25.3.0)(typescript@5.9.3)
+      tailwind-merge:
+        specifier: ^3.5.0
+        version: 3.5.0
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
+      zod:
+        specifier: ^3.25.76
+        version: 3.25.76
+    devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.18
+        version: 4.2.1(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))
+      '@turbo/gen':
+        specifier: ^2.8.1
+        version: 2.8.11(@types/node@25.3.0)
+      '@types/node':
+        specifier: ^25.1.0
+        version: 25.3.0
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      tailwindcss:
+        specifier: ^4.1.18
+        version: 4.2.1
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+packages:
+
+  '@antfu/ni@25.0.0':
+    resolution: {integrity: sha512-9q/yCljni37pkMr4sPrI3G4jqdIk074+iukc5aFJl7kmDCCsiJrbZ6zKxnES1Gwg+i9RcDZwvktl23puGslmvA==}
+    hasBin: true
+
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-create-class-features-plugin@7.28.6':
+    resolution: {integrity: sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-replace-supers@7.28.6':
+    resolution: {integrity: sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    resolution: {integrity: sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.6':
+    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-jsx@7.28.6':
+    resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.28.6':
+    resolution: {integrity: sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-modules-commonjs@7.28.6':
+    resolution: {integrity: sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-typescript@7.28.6':
+    resolution: {integrity: sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/preset-typescript@7.28.5':
+    resolution: {integrity: sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime-corejs3@7.29.0':
+    resolution: {integrity: sha512-TgUkdp71C9pIbBcHudc+gXZnihEDOjUAmXO1VO4HHGES7QLZcShR0stfKIxLSNIYx2fqhmJChOjm/wkF8wv4gA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
+  '@dotenvx/dotenvx@1.52.0':
+    resolution: {integrity: sha512-CaQcc8JvtzQhUSm9877b6V4Tb7HCotkcyud9X2YwdqtQKwgljkMRwU96fVYKnzN3V0Hj74oP7Es+vZ0mS+Aa1w==}
+    hasBin: true
+
+  '@ecies/ciphers@0.2.5':
+    resolution: {integrity: sha512-GalEZH4JgOMHYYcYmVqnFirFsjZHeoGMDt9IxEnM9F7GRUUyUksJ7Ou53L83WHJq3RWKD3AcBpo0iQh0oMpf8A==}
+    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+    peerDependencies:
+      '@noble/ciphers': ^1.0.0
+
+  '@esbuild/aix-ppc64@0.27.3':
+    resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.3':
+    resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.3':
+    resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.3':
+    resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.3':
+    resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.3':
+    resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.3':
+    resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.3':
+    resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.3':
+    resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.3':
+    resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.3':
+    resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.3':
+    resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.3':
+    resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.3':
+    resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.3':
+    resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.3':
+    resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.3':
+    resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.3':
+    resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.3':
+    resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.3':
+    resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.3':
+    resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.3':
+    resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@floating-ui/core@1.7.4':
+    resolution: {integrity: sha512-C3HlIdsBxszvm5McXlB8PeOEWfBhcGBTZGkGlWc2U0KFY5IwG5OQEuQ8rq52DZmcHDlPLd+YFBK+cZcytwIFWg==}
+
+  '@floating-ui/dom@1.7.5':
+    resolution: {integrity: sha512-N0bD2kIPInNHUHehXhMke1rBGs1dwqvC9O9KYMyyjK7iXt7GAhnro7UlcuYcGdS/yYOlq0MAVgrow8IbWJwyqg==}
+
+  '@floating-ui/react-dom@2.1.7':
+    resolution: {integrity: sha512-0tLRojf/1Go2JgEVm+3Frg9A3IW8bJgKgdO0BN5RkF//ufuz2joZM63Npau2ff3J6lUVYgDSNzNkR+aH3IVfjg==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
+  '@fontsource-variable/outfit@5.2.8':
+    resolution: {integrity: sha512-4oUDCZx/Tcz6HZP423w/niqEH31Gks5IsqHV2ZZz1qKHaVIZdj2f0/S1IK2n8jl6Xo0o3N+3RjNHlV9R73ozQA==}
+
+  '@hono/node-server@1.19.9':
+    resolution: {integrity: sha512-vHL6w3ecZsky+8P5MD+eFfaGTyCeOHUIFYMGpQGbrBTSmNNoxv0if69rEZ5giu36weC5saFuznL411gRX7bJDw==}
+    engines: {node: '>=18.14.1'}
+    peerDependencies:
+      hono: ^4
+
+  '@inquirer/ansi@1.0.2':
+    resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
+    engines: {node: '>=18'}
+
+  '@inquirer/checkbox@4.3.2':
+    resolution: {integrity: sha512-VXukHf0RR1doGe6Sm4F0Em7SWYLTHSsbGfJdS9Ja2bX5/D5uwVOEjr07cncLROdBvmnvCATYEWlHqYmXv2IlQA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/confirm@5.1.21':
+    resolution: {integrity: sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@10.3.2':
+    resolution: {integrity: sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/editor@4.2.23':
+    resolution: {integrity: sha512-aLSROkEwirotxZ1pBaP8tugXRFCxW94gwrQLxXfrZsKkfjOYC1aRvAZuhpJOb5cu4IBTJdsCigUlf2iCOu4ZDQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/expand@4.0.23':
+    resolution: {integrity: sha512-nRzdOyFYnpeYTTR2qFwEVmIWypzdAx/sIkCMeTNTcflFOovfqUk+HcFhQQVBftAh9gmGrpFj6QcGEqrDMDOiew==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@1.0.15':
+    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
+    engines: {node: '>=18'}
+
+  '@inquirer/input@4.3.1':
+    resolution: {integrity: sha512-kN0pAM4yPrLjJ1XJBjDxyfDduXOuQHrBB8aLDMueuwUGn+vNpF7Gq7TvyVxx8u4SHlFFj4trmj+a2cbpG4Jn1g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/number@3.0.23':
+    resolution: {integrity: sha512-5Smv0OK7K0KUzUfYUXDXQc9jrf8OHo4ktlEayFlelCjwMXz0299Y8OrI+lj7i4gCBY15UObk76q0QtxjzFcFcg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/password@4.0.23':
+    resolution: {integrity: sha512-zREJHjhT5vJBMZX/IUbyI9zVtVfOLiTO66MrF/3GFZYZ7T4YILW5MSkEYHceSii/KtRk+4i3RE7E1CUXA2jHcA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/prompts@7.10.1':
+    resolution: {integrity: sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/rawlist@4.1.11':
+    resolution: {integrity: sha512-+LLQB8XGr3I5LZN/GuAHo+GpDJegQwuPARLChlMICNdwW7OwV2izlCSCxN6cqpL0sMXmbKbFcItJgdQq5EBXTw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/search@3.2.2':
+    resolution: {integrity: sha512-p2bvRfENXCZdWF/U2BXvnSI9h+tuA8iNqtUKb9UWbmLYCRQxd8WkvwWvYn+3NgYaNwdUkHytJMGG4MMLucI1kA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/select@4.4.2':
+    resolution: {integrity: sha512-l4xMuJo55MAe+N7Qr4rX90vypFwCajSakx59qe/tMaC1aEHWLyw68wF4o0A4SLAY4E0nd+Vt+EyskeDIqu1M6w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/type@3.0.10':
+    resolution: {integrity: sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@mjackson/node-fetch-server@0.2.0':
+    resolution: {integrity: sha512-EMlH1e30yzmTpGLQjlFmaDAjyOeZhng1/XCd7DExR8PNAnG/G1tyruZxEoUe11ClnwGhGrtsdnyyUx1frSzjng==}
+
+  '@modelcontextprotocol/sdk@1.27.1':
+    resolution: {integrity: sha512-sr6GbP+4edBwFndLbM60gf07z0FQ79gaExpnsjMGePXqFcSSb7t6iscpjk9DhFhwd+mTEQrzNafGP8/iGGFYaA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@cfworker/json-schema': ^4.1.1
+      zod: ^3.25 || ^4.0
+    peerDependenciesMeta:
+      '@cfworker/json-schema':
+        optional: true
+
+  '@mswjs/interceptors@0.41.3':
+    resolution: {integrity: sha512-cXu86tF4VQVfwz8W1SPbhoRyHJkti6mjH/XJIxp40jhO4j2k1m4KYrEykxqWPkFF3vrK4rgQppBh//AwyGSXPA==}
+    engines: {node: '>=18'}
+
+  '@noble/ciphers@1.3.0':
+    resolution: {integrity: sha512-2I0gnIVPtfnMw9ee9h1dJG7tp81+8Ob3OJb3Mv37rx5L40/b0i7djjCVvGOVqc9AEIQyvyu1i6ypKdFw8R8gQw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/curves@1.9.7':
+    resolution: {integrity: sha512-gbKGcRUYIjA3/zCCNaWDciTMFI0dCkvou3TL8Zmy5Nc7sJ47a0jtOeZoTaMxkuqRo9cRhjOdZJXegxYE5FN/xw==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@noble/hashes@1.8.0':
+    resolution: {integrity: sha512-jCs9ldd7NwzpgXDIf6P3+NrHh9/sD6CQdxHyjQI+h/6rDNo88ypBxxz45UDuZHz9r3tNz7N/VInSVoVdtXEI4A==}
+    engines: {node: ^14.21.3 || >=16}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@open-draft/deferred-promise@2.2.0':
+    resolution: {integrity: sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==}
+
+  '@open-draft/logger@0.3.0':
+    resolution: {integrity: sha512-X2g45fzhxH238HKO4xbSr7+wBS8Fvw6ixhTDuvLd5mqh6bJJCFAPwU9mPDxbcrRtfxv4u5IHCEH77BmxvXmmxQ==}
+
+  '@open-draft/until@2.1.0':
+    resolution: {integrity: sha512-U69T3ItWHvLwGg5eJ0n3I62nWuE6ilHlmz7zM0npLBRvPRd7e6NYmg54vvRtP5mZG7kZqZCFVdsTWo7BPtBujg==}
+
+  '@radix-ui/number@1.1.1':
+    resolution: {integrity: sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g==}
+
+  '@radix-ui/primitive@1.1.3':
+    resolution: {integrity: sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==}
+
+  '@radix-ui/react-accessible-icon@1.1.7':
+    resolution: {integrity: sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-accordion@1.2.12':
+    resolution: {integrity: sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-alert-dialog@1.1.15':
+    resolution: {integrity: sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-arrow@1.1.7':
+    resolution: {integrity: sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-aspect-ratio@1.1.7':
+    resolution: {integrity: sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-avatar@1.1.10':
+    resolution: {integrity: sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-checkbox@1.3.3':
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collapsible@1.1.12':
+    resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-compose-refs@1.1.2':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context-menu@2.2.16':
+    resolution: {integrity: sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-context@1.1.2':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.15':
+    resolution: {integrity: sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-direction@1.1.1':
+    resolution: {integrity: sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.11':
+    resolution: {integrity: sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dropdown-menu@2.1.16':
+    resolution: {integrity: sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.3':
+    resolution: {integrity: sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.7':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-form@0.1.8':
+    resolution: {integrity: sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-hover-card@1.1.15':
+    resolution: {integrity: sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.1':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-label@2.1.7':
+    resolution: {integrity: sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menu@2.1.16':
+    resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-menubar@1.1.16':
+    resolution: {integrity: sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-navigation-menu@1.2.14':
+    resolution: {integrity: sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-one-time-password-field@0.1.8':
+    resolution: {integrity: sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-password-toggle-field@0.1.3':
+    resolution: {integrity: sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popover@1.1.15':
+    resolution: {integrity: sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-popper@1.2.8':
+    resolution: {integrity: sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.9':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.5':
+    resolution: {integrity: sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-progress@1.1.7':
+    resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-radio-group@1.3.8':
+    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-roving-focus@1.1.11':
+    resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-scroll-area@1.2.10':
+    resolution: {integrity: sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.7':
+    resolution: {integrity: sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slider@1.3.6':
+    resolution: {integrity: sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-switch@1.2.6':
+    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tabs@1.1.13':
+    resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toast@1.2.15':
+    resolution: {integrity: sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle-group@1.1.11':
+    resolution: {integrity: sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toggle@1.1.10':
+    resolution: {integrity: sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-toolbar@1.1.11':
+    resolution: {integrity: sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-tooltip@1.2.8':
+    resolution: {integrity: sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.1':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.2':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.2':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-escape-keydown@1.1.1':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-is-hydrated@0.1.0':
+    resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.1':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-previous@1.1.1':
+    resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-rect@1.1.1':
+    resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-size@1.1.1':
+    resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-visually-hidden@1.2.3':
+    resolution: {integrity: sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/rect@1.1.1':
+    resolution: {integrity: sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==}
+
+  '@react-router/dev@7.12.0':
+    resolution: {integrity: sha512-5GpwXgq4pnOVeG7l6ADkCHA1rthJus1q/A3NRYJAIypclUQDYAzg1/fDNjvaKuTSrq+Nr3u6aj2v+oC+47MX6g==}
+    engines: {node: '>=20.0.0'}
+    hasBin: true
+    peerDependencies:
+      '@react-router/serve': ^7.12.0
+      '@vitejs/plugin-rsc': ~0.5.7
+      react-router: ^7.12.0
+      react-server-dom-webpack: ^19.2.3
+      typescript: ^5.1.0
+      vite: ^5.1.0 || ^6.0.0 || ^7.0.0
+      wrangler: ^3.28.2 || ^4.0.0
+    peerDependenciesMeta:
+      '@react-router/serve':
+        optional: true
+      '@vitejs/plugin-rsc':
+        optional: true
+      react-server-dom-webpack:
+        optional: true
+      typescript:
+        optional: true
+      wrangler:
+        optional: true
+
+  '@react-router/express@7.12.0':
+    resolution: {integrity: sha512-uAK+zF93M6XauGeXLh/UBh+3HrwiA/9lUS+eChjQ0a5FzjLpsc6ciUqF5oHh3lwWzLU7u7tj4qoeucUn6SInTw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      express: ^4.17.1 || ^5
+      react-router: 7.12.0
+      typescript: ^5.1.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@react-router/node@7.12.0':
+    resolution: {integrity: sha512-o/t10Cse4LK8kFefqJ8JjC6Ng6YuKD2I87S2AiJs17YAYtXU5W731ZqB73AWyCDd2G14R0dSuqXiASRNK/xLjg==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react-router: 7.12.0
+      typescript: ^5.1.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@react-router/serve@7.12.0':
+    resolution: {integrity: sha512-j1ltgU7s3wAwOosZ5oxgHSsmVyK706gY/yIs8qVmC239wQ3zr3eqaXk3TVVLMeRy+eDgPNmgc6oNJv2o328VgA==}
+    engines: {node: '>=20.0.0'}
+    hasBin: true
+    peerDependencies:
+      react-router: 7.12.0
+
+  '@remix-run/node-fetch-server@0.9.0':
+    resolution: {integrity: sha512-SoLMv7dbH+njWzXnOY6fI08dFMI5+/dQ+vY3n8RnnbdG7MdJEgiP28Xj/xWlnRnED/aB6SFw56Zop+LbmaaKqA==}
+
+  '@remixicon/react@4.9.0':
+    resolution: {integrity: sha512-5/jLDD4DtKxH2B4QVXTobvV1C2uL8ab9D5yAYNtFt+w80O0Ys1xFOrspqROL3fjrZi+7ElFUWE37hBfaAl6U+Q==}
+    peerDependencies:
+      react: '>=18.2.0'
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    resolution: {integrity: sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    resolution: {integrity: sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    resolution: {integrity: sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    resolution: {integrity: sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    resolution: {integrity: sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    resolution: {integrity: sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    resolution: {integrity: sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    resolution: {integrity: sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    resolution: {integrity: sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@sec-ant/readable-stream@0.4.1':
+    resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
+
+  '@sindresorhus/merge-streams@4.0.0':
+    resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
+    engines: {node: '>=18'}
+
+  '@tailwindcss/node@4.2.1':
+    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.1':
+    resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.1':
+    resolution: {integrity: sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
+  '@ts-morph/common@0.27.0':
+    resolution: {integrity: sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ==}
+
+  '@turbo/gen-darwin-64@2.8.11':
+    resolution: {integrity: sha512-xrx2diQfiZOQ//BTDDjBfT8GG5gKUQ15QlvHFn/9kSyZSBZUkgDeuCbk12K15/kZfjfa6e0Il0guVCKld2pzhg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@turbo/gen-darwin-arm64@2.8.11':
+    resolution: {integrity: sha512-D7sSxQLRU4pHWvz9o+SXtfGgRgQ/UEi4DKXNZViSIvCctq5rSzQFioD7M0BigUBLYTxxb7cAbY9PFNmPbe8rkw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@turbo/gen-linux-64@2.8.11':
+    resolution: {integrity: sha512-NmzZ+GVs2DuJFBsTXlViOcANA4xWmOl1VN8UfmbYuZzkaH9oIB4L5ehg88PZkzO12yn8qULnyzqGxNYa/YzAKw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@turbo/gen-linux-arm64@2.8.11':
+    resolution: {integrity: sha512-Y4yqldcNZXdIYWfm/iByOxYjeXYw53gHU0NRlbwD4hqW5v/Hi/846ehVtEGH4hzmy4r94k4jrEu+ftxK/oJSUw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@turbo/gen-windows-64@2.8.11':
+    resolution: {integrity: sha512-qHGQum/Xae5BThd0A/a8w3yjq5EndJj4szjXxZlzTQEddzMCAFSO5DfJpRWkSZ/g8ei/6JebFiIAxZMkuQ1SAw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@turbo/gen@2.8.11':
+    resolution: {integrity: sha512-WgTEEwq1NOmDjDRUu+F1qLJtyIDnguWX/GxML6Q+MnOQDk9va+pkkdWsscIy/CqOputOgCE5wOlEgefE+frydg==}
+    hasBin: true
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/glob@7.2.0':
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+
+  '@types/inquirer@6.5.0':
+    resolution: {integrity: sha512-rjaYQ9b9y/VFGOpqBEXRavc3jh0a+e6evAbI31tMda8VlPaSy0AZJfXsvmIe3wklc7W6C3zCSfleuMXR7NOyXw==}
+
+  '@types/minimatch@6.0.0':
+    resolution: {integrity: sha512-zmPitbQ8+6zNutpwgcQuLcsEpn/Cj54Kbn7L5pX0Os5kdWplB7xPgEh/g+SWOB/qmows2gpuCaPyduq8ZZRnxA==}
+    deprecated: This is a stub types definition. minimatch provides its own type definitions, so you do not need this installed.
+
+  '@types/node@25.3.0':
+    resolution: {integrity: sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+
+  '@types/statuses@2.0.6':
+    resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
+
+  '@types/through@0.0.33':
+    resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
+
+  '@types/validate-npm-package-name@4.0.2':
+    resolution: {integrity: sha512-lrpDziQipxCEeK5kWxvljWYhUvOiB2A9izZd9B2AFarYAkqZshb4lPbRs7zKEic6eGtH8V/2qJW+dPp9OtF6bw==}
+
+  accepts@1.3.8:
+    resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
+    engines: {node: '>= 0.6'}
+
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
+  agent-base@7.1.4:
+    resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
+    engines: {node: '>= 14'}
+
+  aggregate-error@3.1.0:
+    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
+    engines: {node: '>=8'}
+
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv@8.18.0:
+    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
+
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@6.2.2:
+    resolution: {integrity: sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==}
+    engines: {node: '>=12'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansis@4.2.0:
+    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
+    engines: {node: '>=14'}
+
+  arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
+  array-flatten@1.1.1:
+    resolution: {integrity: sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
+  babel-dead-code-elimination@1.0.12:
+    resolution: {integrity: sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  baseline-browser-mapping@2.10.0:
+    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  basic-auth@2.0.1:
+    resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
+    engines: {node: '>= 0.8'}
+
+  body-parser@1.20.4:
+    resolution: {integrity: sha512-ZTgYYLMOXY9qKU/57FAo8F+HA2dGX7bqGc71txDRC1rS4frdFI5R7NhluHxH6M0YItAP0sHB4uqAOcYKxO6uGA==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
+  body-parser@2.2.2:
+    resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==}
+    engines: {node: '>=18'}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@5.0.3:
+    resolution: {integrity: sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==}
+    engines: {node: 18 || 20 || >=22}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  buffer-from@1.1.2:
+    resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
+
+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
+  bytes@3.1.2:
+    resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==}
+    engines: {node: '>= 0.8'}
+
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
+  call-bind-apply-helpers@1.0.2:
+    resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==}
+    engines: {node: '>= 0.4'}
+
+  call-bound@1.0.4:
+    resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==}
+    engines: {node: '>= 0.4'}
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camel-case@3.0.0:
+    resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
+
+  caniuse-lite@1.0.30001774:
+    resolution: {integrity: sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  chalk@5.6.2:
+    resolution: {integrity: sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==}
+    engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
+
+  change-case@3.1.0:
+    resolution: {integrity: sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==}
+
+  chardet@0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+
+  chardet@2.1.1:
+    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
+
+  chokidar@4.0.3:
+    resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
+    engines: {node: '>= 14.16.0'}
+
+  class-variance-authority@0.7.1:
+    resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
+
+  clean-stack@2.2.0:
+    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
+    engines: {node: '>=6'}
+
+  cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+
+  cli-cursor@5.0.0:
+    resolution: {integrity: sha512-aCj4O5wKyszjMmDT4tZj93kxyydN/K5zPWSCe6/0AV/AA1pqe5ZBIw0a2ZfPQV7lL5/yb5HsUreJ6UFAF1tEQw==}
+    engines: {node: '>=18'}
+
+  cli-spinners@2.9.2:
+    resolution: {integrity: sha512-ywqV+5MmyL4E7ybXgKys4DugZbX0FC6LnwrhjuykIjnK9k8OQacQ7axGKnjDXWNhns0xot3bZI5h55H8yo9cJg==}
+    engines: {node: '>=6'}
+
+  cli-width@3.0.0:
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
+  cliui@8.0.1:
+    resolution: {integrity: sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==}
+    engines: {node: '>=12'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
+  code-block-writer@13.0.3:
+    resolution: {integrity: sha512-Oofo0pq3IKnsFtuHqSF7TqBfr71aeyZDVJ0HpmqB7FBM2qEigL0iPONSCZSO9pE9dZTAxANe5XHG9Uy0YMv8cg==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  commander@11.1.0:
+    resolution: {integrity: sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==}
+    engines: {node: '>=16'}
+
+  commander@14.0.3:
+    resolution: {integrity: sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw==}
+    engines: {node: '>=20'}
+
+  compressible@2.0.18:
+    resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
+    engines: {node: '>= 0.6'}
+
+  compression@1.8.1:
+    resolution: {integrity: sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==}
+    engines: {node: '>= 0.8.0'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  confbox@0.2.4:
+    resolution: {integrity: sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==}
+
+  constant-case@2.0.0:
+    resolution: {integrity: sha512-eS0N9WwmjTqrOmR3o83F5vW8Z+9R1HnVz3xmzT2PMFug9ly+Au/fxRWlEBSb6LcZwspSsEn9Xs1uw9YgzAg1EQ==}
+
+  content-disposition@0.5.4:
+    resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
+    engines: {node: '>= 0.6'}
+
+  content-disposition@1.0.1:
+    resolution: {integrity: sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==}
+    engines: {node: '>=18'}
+
+  content-type@1.0.5:
+    resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
+    engines: {node: '>= 0.6'}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie-signature@1.0.7:
+    resolution: {integrity: sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==}
+
+  cookie-signature@1.2.2:
+    resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==}
+    engines: {node: '>=6.6.0'}
+
+  cookie@0.7.2:
+    resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==}
+    engines: {node: '>= 0.6'}
+
+  cookie@1.1.1:
+    resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+    engines: {node: '>=18'}
+
+  core-js-pure@3.48.0:
+    resolution: {integrity: sha512-1slJgk89tWC51HQ1AEqG+s2VuwpTRr8ocu4n20QUcH1v9lAN0RXen0Q0AABa/DK1I7RrNWLucplOHMx8hfTGTw==}
+
+  cors@2.8.6:
+    resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==}
+    engines: {node: '>= 0.10'}
+
+  cosmiconfig@9.0.0:
+    resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      typescript: '>=4.9.5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  cssesc@3.0.0:
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+
+  debug@2.6.9:
+    resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  dedent@1.7.1:
+    resolution: {integrity: sha512-9JmrhGZpOlEgOLdQgSm0zxFaYoQon408V1v49aqTWuXENVlnCuY9JBZcXZiCsZQWDjTm5Qf/nIvAy77mXDAjEg==}
+    peerDependencies:
+      babel-plugin-macros: ^3.1.0
+    peerDependenciesMeta:
+      babel-plugin-macros:
+        optional: true
+
+  deepmerge@4.3.1:
+    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
+    engines: {node: '>=0.10.0'}
+
+  default-browser-id@5.0.1:
+    resolution: {integrity: sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==}
+    engines: {node: '>=18'}
+
+  default-browser@5.5.0:
+    resolution: {integrity: sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==}
+    engines: {node: '>=18'}
+
+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
+  del@5.1.0:
+    resolution: {integrity: sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==}
+    engines: {node: '>=8'}
+
+  depd@2.0.0:
+    resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
+    engines: {node: '>= 0.8'}
+
+  destroy@1.2.0:
+    resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
+    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
+  diff@8.0.3:
+    resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
+    engines: {node: '>=0.3.1'}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dot-case@2.1.1:
+    resolution: {integrity: sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==}
+
+  dotenv@17.3.1:
+    resolution: {integrity: sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==}
+    engines: {node: '>=12'}
+
+  dunder-proto@1.0.1:
+    resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
+    engines: {node: '>= 0.4'}
+
+  eciesjs@0.4.17:
+    resolution: {integrity: sha512-TOOURki4G7sD1wDCjj7NfLaXZZ49dFOeEb5y39IXpb8p0hRzVvfvzZHOi5JcT+PpyAbi/Y+lxPb8eTag2WYH8w==}
+    engines: {bun: '>=1', deno: '>=2', node: '>=16'}
+
+  ee-first@1.1.1:
+    resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
+
+  electron-to-chromium@1.5.302:
+    resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
+
+  emoji-regex@10.6.0:
+    resolution: {integrity: sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  encodeurl@2.0.0:
+    resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
+    engines: {node: '>= 0.8'}
+
+  enhanced-resolve@5.19.0:
+    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
+    engines: {node: '>=10.13.0'}
+
+  env-paths@2.2.1:
+    resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
+    engines: {node: '>=6'}
+
+  error-ex@1.3.4:
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
+
+  es-define-property@1.0.1:
+    resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
+    engines: {node: '>= 0.4'}
+
+  es-errors@1.3.0:
+    resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==}
+    engines: {node: '>= 0.4'}
+
+  es-module-lexer@1.7.0:
+    resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==}
+
+  es-object-atoms@1.1.1:
+    resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==}
+    engines: {node: '>= 0.4'}
+
+  esbuild@0.27.3:
+    resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-html@1.0.3:
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  etag@1.8.1:
+    resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==}
+    engines: {node: '>= 0.6'}
+
+  eventsource-parser@3.0.6:
+    resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==}
+    engines: {node: '>=18.0.0'}
+
+  eventsource@3.0.7:
+    resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
+    engines: {node: '>=18.0.0'}
+
+  execa@5.1.1:
+    resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
+    engines: {node: '>=10'}
+
+  execa@9.6.1:
+    resolution: {integrity: sha512-9Be3ZoN4LmYR90tUoVu2te2BsbzHfhJyfEiAVfz7N5/zv+jduIfLrV2xdQXOHbaD6KgpGdO9PRPM1Y4Q9QkPkA==}
+    engines: {node: ^18.19.0 || >=20.5.0}
+
+  exit-hook@2.2.1:
+    resolution: {integrity: sha512-eNTPlAD67BmP31LDINZ3U7HSF8l57TxOY2PmBJ1shpCvpnxBF93mWCE8YHBnXs8qiUZJc9WDcWIeC3a2HIAMfw==}
+    engines: {node: '>=6'}
+
+  express-rate-limit@8.2.1:
+    resolution: {integrity: sha512-PCZEIEIxqwhzw4KF0n7QF4QqruVTcF73O5kFKUnGOyjbCCgizBBiFaYpd/fnBLUMPw/BWw9OsiN7GgrNYr7j6g==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      express: '>= 4.11'
+
+  express@4.22.1:
+    resolution: {integrity: sha512-F2X8g9P1X7uCPZMA3MVf9wcTqlyNp7IhH5qPCI0izhaOIYXaW9L535tGA3qmjRzpH+bZczqq7hVKxTR4NWnu+g==}
+    engines: {node: '>= 0.10.0'}
+
+  express@5.2.1:
+    resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==}
+    engines: {node: '>= 18'}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
+  external-editor@3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-uri@3.1.0:
+    resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+
+  figures@6.1.0:
+    resolution: {integrity: sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg==}
+    engines: {node: '>=18'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  finalhandler@1.3.2:
+    resolution: {integrity: sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==}
+    engines: {node: '>= 0.8'}
+
+  finalhandler@2.1.1:
+    resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==}
+    engines: {node: '>= 18.0.0'}
+
+  formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+
+  forwarded@0.2.0:
+    resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
+    engines: {node: '>= 0.6'}
+
+  fresh@0.5.2:
+    resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
+    engines: {node: '>= 0.6'}
+
+  fresh@2.0.0:
+    resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==}
+    engines: {node: '>= 0.8'}
+
+  fs-extra@11.3.3:
+    resolution: {integrity: sha512-VWSRii4t0AFm6ixFFmLLx1t7wS1gh+ckoa84aOeapGum0h+EZd1EhEumSB+ZdDLnEPuucsVB9oB7cxJHap6Afg==}
+    engines: {node: '>=14.14'}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  fuzzysort@3.1.0:
+    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
+
+  fzf@0.5.2:
+    resolution: {integrity: sha512-Tt4kuxLXFKHy8KT40zwsUPUkg1CrsgY25FxA2U/j/0WgEDCk3ddc/zLTCCcbSHX9FcKtLuVaDGtGE/STWC+j3Q==}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
+  get-east-asian-width@1.5.0:
+    resolution: {integrity: sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==}
+    engines: {node: '>=18'}
+
+  get-intrinsic@1.3.0:
+    resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
+    engines: {node: '>= 0.4'}
+
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
+  get-own-enumerable-keys@1.0.0:
+    resolution: {integrity: sha512-PKsK2FSrQCyxcGHsGrLDcK0lx+0Ke+6e8KFFozA9/fIQLhQzPaRvJFdcz7+Axg3jUH/Mq+NI4xa5u/UT2tQskA==}
+    engines: {node: '>=14.16'}
+
+  get-port@5.1.1:
+    resolution: {integrity: sha512-g/Q1aTSDOxFpchXC4i8ZWvxA1lnPqx/JHqcpIw0/LX9T8x/GBbi6YnlN5nhaKIFkT8oFsscUKgDJYxfwfS6QsQ==}
+    engines: {node: '>=8'}
+
+  get-proto@1.0.1:
+    resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
+    engines: {node: '>= 0.4'}
+
+  get-stream@6.0.1:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+
+  get-stream@9.0.1:
+    resolution: {integrity: sha512-kVCxPF3vQM/N0B1PmoqVUqgHP+EeVjmZSQn+1oCRPxd2P21P2F19lIgbR3HBosbB1PUhOAoctJnfEn2GbN2eZA==}
+    engines: {node: '>=18'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
+  globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
+  gopd@1.2.0:
+    resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
+    engines: {node: '>= 0.4'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  graphql@16.13.0:
+    resolution: {integrity: sha512-uSisMYERbaB9bkA9M4/4dnqyktaEkf1kMHNKq/7DHyxVeWqHQ2mBmVqm5u6/FVHwF3iCNalKcg82Zfl+tffWoA==}
+    engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  has-symbols@1.1.0:
+    resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
+    engines: {node: '>= 0.4'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  header-case@1.0.1:
+    resolution: {integrity: sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==}
+
+  headers-polyfill@4.0.3:
+    resolution: {integrity: sha512-IScLbePpkvO846sIwOtOTDjutRMWdXdJmXdMvk6gCBHxFO8d+QKOQedyZSxFTTFYRSmlgSTDtXqqq4pcenBXLQ==}
+
+  hono@4.12.2:
+    resolution: {integrity: sha512-gJnaDHXKDayjt8ue0n8Gs0A007yKXj4Xzb8+cNjZeYsSzzwKc0Lr+OZgYwVfB0pHfUs17EPoLvrOsEaJ9mj+Tg==}
+    engines: {node: '>=16.9.0'}
+
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
+
+  https-proxy-agent@7.0.6:
+    resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==}
+    engines: {node: '>= 14'}
+
+  human-signals@2.1.0:
+    resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
+    engines: {node: '>=10.17.0'}
+
+  human-signals@8.0.1:
+    resolution: {integrity: sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ==}
+    engines: {node: '>=18.18.0'}
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  inquirer@7.3.3:
+    resolution: {integrity: sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==}
+    engines: {node: '>=8.0.0'}
+
+  ip-address@10.0.1:
+    resolution: {integrity: sha512-NWv9YLW4PoW2B7xtzaS3NCot75m6nK7Icdv0o3lfMceJVRfSoQwqD4wEH5rLwoKJwUiZ/rfpiVBhnaF0FK4HoA==}
+    engines: {node: '>= 12'}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-in-ssh@1.0.0:
+    resolution: {integrity: sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==}
+    engines: {node: '>=20'}
+
+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
+  is-interactive@2.0.0:
+    resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
+    engines: {node: '>=12'}
+
+  is-lower-case@1.1.3:
+    resolution: {integrity: sha512-+5A1e/WJpLLXZEDlgz4G//WYSHyQBD32qa4Jd3Lw06qQlv3fJHnp3YIHjTQSGzHMgzmVKz2ZP3rBxTHkPw/lxA==}
+
+  is-node-process@1.2.0:
+    resolution: {integrity: sha512-Vg4o6/fqPxIjtxgUH5QLJhwZ7gW5diGCVlXpuUfELC62CuxM1iHcRe51f2W1FDy04Ai4KJkagKjx3XaqyfRKXw==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-obj@3.0.0:
+    resolution: {integrity: sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==}
+    engines: {node: '>=12'}
+
+  is-path-cwd@2.2.0:
+    resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
+    engines: {node: '>=6'}
+
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-promise@4.0.0:
+    resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
+
+  is-regexp@3.1.0:
+    resolution: {integrity: sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==}
+    engines: {node: '>=12'}
+
+  is-stream@2.0.1:
+    resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
+    engines: {node: '>=8'}
+
+  is-stream@4.0.1:
+    resolution: {integrity: sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A==}
+    engines: {node: '>=18'}
+
+  is-unicode-supported@1.3.0:
+    resolution: {integrity: sha512-43r2mRvz+8JRIKnWJ+3j8JtjRKZ6GmjzfaE/qiBJnikNnYv/6bagRJ1kUhNk8R5EX/GkobD+r+sfxCPJsiKBLQ==}
+    engines: {node: '>=12'}
+
+  is-unicode-supported@2.1.0:
+    resolution: {integrity: sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ==}
+    engines: {node: '>=18'}
+
+  is-upper-case@1.1.2:
+    resolution: {integrity: sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==}
+
+  is-wsl@3.1.1:
+    resolution: {integrity: sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==}
+    engines: {node: '>=16'}
+
+  isbinaryfile@4.0.10:
+    resolution: {integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==}
+    engines: {node: '>= 8.0.0'}
+
+  isbot@5.1.35:
+    resolution: {integrity: sha512-waFfC72ZNfwLLuJ2iLaoVaqcNo+CAaLR7xCpAn0Y5WfGzkNHv7ZN39Vbi1y+kb+Zs46XHOX3tZNExroFUPX+Kg==}
+    engines: {node: '>=18'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  isexe@3.1.5:
+    resolution: {integrity: sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==}
+    engines: {node: '>=18'}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  jose@6.1.3:
+    resolution: {integrity: sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==}
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
+  json-schema-typed@8.0.2:
+    resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  jsonfile@6.2.0:
+    resolution: {integrity: sha512-FGuPw30AdOIUTRMC2OMRtQV+jkVj2cfPqSeWXv1NEAJ1qZ5zb1X6z1mFhbfOB/iy3ssJCD+3KuZ8r8C3uVFlAg==}
+
+  kleur@3.0.3:
+    resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
+    engines: {node: '>=6'}
+
+  kleur@4.1.5:
+    resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
+    engines: {node: '>=6'}
+
+  lightningcss-android-arm64@1.31.1:
+    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.31.1:
+    resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.31.1:
+    resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.31.1:
+    resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.31.1:
+    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.31.1:
+    resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
+    engines: {node: '>= 12.0.0'}
+
+  lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
+
+  lodash@4.17.23:
+    resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
+
+  log-symbols@6.0.0:
+    resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==}
+    engines: {node: '>=18'}
+
+  lower-case-first@1.0.2:
+    resolution: {integrity: sha512-UuxaYakO7XeONbKrZf5FEgkantPf5DUqDayzP5VXZrtRPdH86s4kN47I8B3TW10S4QKiE3ziHNf3kRN//okHjA==}
+
+  lower-case@1.1.4:
+    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  math-intrinsics@1.1.0:
+    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
+    engines: {node: '>= 0.4'}
+
+  media-typer@0.3.0:
+    resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
+    engines: {node: '>= 0.6'}
+
+  media-typer@1.1.0:
+    resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==}
+    engines: {node: '>= 0.8'}
+
+  merge-descriptors@1.0.3:
+    resolution: {integrity: sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==}
+
+  merge-descriptors@2.0.0:
+    resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==}
+    engines: {node: '>=18'}
+
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  methods@1.1.2:
+    resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
+    engines: {node: '>= 0.6'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mime-db@1.52.0:
+    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
+    engines: {node: '>= 0.6'}
+
+  mime-db@1.54.0:
+    resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@2.1.35:
+    resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
+    engines: {node: '>= 0.6'}
+
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
+  mime@1.6.0:
+    resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
+  minimatch@10.2.4:
+    resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
+    engines: {node: 18 || 20 || >=22}
+
+  minimatch@3.1.5:
+    resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+
+  morgan@1.10.1:
+    resolution: {integrity: sha512-223dMRJtI/l25dJKWpgij2cMtywuG/WiUKXdvwfbhGKBhy1puASqXwFzmWZ7+K73vUPoR7SS2Qz2cI/g9MKw0A==}
+    engines: {node: '>= 0.8.0'}
+
+  ms@2.0.0:
+    resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==}
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  msw@2.12.10:
+    resolution: {integrity: sha512-G3VUymSE0/iegFnuipujpwyTM2GuZAKXNeerUSrG2+Eg391wW63xFs5ixWsK9MWzr1AGoSkYGmyAzNgbR3+urw==}
+    engines: {node: '>=18'}
+    hasBin: true
+    peerDependencies:
+      typescript: '>= 4.8.x'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  mute-stream@0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+
+  mute-stream@2.0.0:
+    resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  negotiator@0.6.3:
+    resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==}
+    engines: {node: '>= 0.6'}
+
+  negotiator@0.6.4:
+    resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
+    engines: {node: '>= 0.6'}
+
+  negotiator@1.0.0:
+    resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==}
+    engines: {node: '>= 0.6'}
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  no-case@2.3.2:
+    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
+
+  node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    deprecated: Use your platform's native DOMException instead
+
+  node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
+  node-plop@0.26.3:
+    resolution: {integrity: sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==}
+    engines: {node: '>=8.9.4'}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  npm-run-path@4.0.1:
+    resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
+    engines: {node: '>=8'}
+
+  npm-run-path@6.0.0:
+    resolution: {integrity: sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA==}
+    engines: {node: '>=18'}
+
+  object-assign@4.1.1:
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
+    engines: {node: '>=0.10.0'}
+
+  object-inspect@1.13.4:
+    resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
+    engines: {node: '>= 0.4'}
+
+  object-treeify@1.1.33:
+    resolution: {integrity: sha512-EFVjAYfzWqWsBMRHPMAXLCDIJnpMhdWAqR7xG6M6a2cs6PMFpl/+Z20w9zDW4vkxOFfddegBKq9Rehd0bxWE7A==}
+    engines: {node: '>= 10'}
+
+  on-finished@2.3.0:
+    resolution: {integrity: sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww==}
+    engines: {node: '>= 0.8'}
+
+  on-finished@2.4.1:
+    resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
+    engines: {node: '>= 0.8'}
+
+  on-headers@1.1.0:
+    resolution: {integrity: sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==}
+    engines: {node: '>= 0.8'}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
+  open@11.0.0:
+    resolution: {integrity: sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==}
+    engines: {node: '>=20'}
+
+  ora@8.2.0:
+    resolution: {integrity: sha512-weP+BZ8MVNnlCm8c0Qdc1WSWq4Qn7I+9CJGm7Qali6g44e/PUzbjNqJX5NJ9ljlNMosfJvg1fKEGILklK9cwnw==}
+    engines: {node: '>=18'}
+
+  os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+
+  outvariant@1.4.3:
+    resolution: {integrity: sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==}
+
+  p-map@3.0.0:
+    resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
+    engines: {node: '>=8'}
+
+  p-map@7.0.4:
+    resolution: {integrity: sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==}
+    engines: {node: '>=18'}
+
+  package-manager-detector@1.6.0:
+    resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
+
+  param-case@2.1.1:
+    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
+  parse-ms@4.0.0:
+    resolution: {integrity: sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==}
+    engines: {node: '>=18'}
+
+  parseurl@1.3.3:
+    resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
+    engines: {node: '>= 0.8'}
+
+  pascal-case@2.0.1:
+    resolution: {integrity: sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==}
+
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
+  path-case@2.1.1:
+    resolution: {integrity: sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-to-regexp@0.1.12:
+    resolution: {integrity: sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==}
+
+  path-to-regexp@6.3.0:
+    resolution: {integrity: sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ==}
+
+  path-to-regexp@8.3.0:
+    resolution: {integrity: sha512-7jdwVIRtsP8MYpdXSwOS0YdD0Du+qOoF/AEPIt88PcCFrZCzx41oxku1jD88hZBwbNUIEfpqvuhjFaMAqMTWnA==}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  pathe@1.1.2:
+    resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  pkce-challenge@5.0.1:
+    resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==}
+    engines: {node: '>=16.20.0'}
+
+  pkg-types@2.3.0:
+    resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
+
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
+    engines: {node: '>=4'}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  powershell-utils@0.1.0:
+    resolution: {integrity: sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==}
+    engines: {node: '>=20'}
+
+  prettier-plugin-tailwindcss@0.7.2:
+    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  pretty-ms@9.3.0:
+    resolution: {integrity: sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==}
+    engines: {node: '>=18'}
+
+  prompts@2.4.2:
+    resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
+    engines: {node: '>= 6'}
+
+  proxy-addr@2.0.7:
+    resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==}
+    engines: {node: '>= 0.10'}
+
+  qs@6.14.2:
+    resolution: {integrity: sha512-V/yCWTTF7VJ9hIh18Ugr2zhJMP01MY7c5kh4J870L7imm6/DIzBsNLTXzMwUA3yZ5b/KBqLx8Kp3uRvd7xSe3Q==}
+    engines: {node: '>=0.6'}
+
+  qs@6.15.0:
+    resolution: {integrity: sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==}
+    engines: {node: '>=0.6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  radix-ui@1.4.3:
+    resolution: {integrity: sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  range-parser@1.2.1:
+    resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
+    engines: {node: '>= 0.6'}
+
+  raw-body@2.5.3:
+    resolution: {integrity: sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==}
+    engines: {node: '>= 0.8'}
+
+  raw-body@3.0.2:
+    resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==}
+    engines: {node: '>= 0.10'}
+
+  react-dom@19.2.4:
+    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+    peerDependencies:
+      react: ^19.2.4
+
+  react-refresh@0.14.2:
+    resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
+    engines: {node: '>=0.10.0'}
+
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-router@7.12.0:
+    resolution: {integrity: sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==}
+    engines: {node: '>=20.0.0'}
+    peerDependencies:
+      react: '>=18'
+      react-dom: '>=18'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
+  readdirp@4.1.2:
+    resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
+    engines: {node: '>= 14.18.0'}
+
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
+  restore-cursor@5.1.0:
+    resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
+    engines: {node: '>=18'}
+
+  rettime@0.10.1:
+    resolution: {integrity: sha512-uyDrIlUEH37cinabq0AX4QbgV4HbFZ/gqoiunWQ1UqBtRvTTytwhNYjE++pO/MjPTZL5KQCf2bEoJ/BJNVQ5Kw==}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  rollup@4.59.0:
+    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  router@2.2.0:
+    resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==}
+    engines: {node: '>= 18'}
+
+  run-applescript@7.1.0:
+    resolution: {integrity: sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==}
+    engines: {node: '>=18'}
+
+  run-async@2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rxjs@6.6.7:
+    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
+    engines: {npm: '>=2.0.0'}
+
+  safe-buffer@5.1.2:
+    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}
+
+  safe-buffer@5.2.1:
+    resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  send@0.19.2:
+    resolution: {integrity: sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==}
+    engines: {node: '>= 0.8.0'}
+
+  send@1.2.1:
+    resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==}
+    engines: {node: '>= 18'}
+
+  sentence-case@2.1.1:
+    resolution: {integrity: sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==}
+
+  serve-static@1.16.3:
+    resolution: {integrity: sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==}
+    engines: {node: '>= 0.8.0'}
+
+  serve-static@2.2.1:
+    resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==}
+    engines: {node: '>= 18'}
+
+  set-cookie-parser@2.7.2:
+    resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
+
+  setprototypeof@1.2.0:
+    resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
+
+  shadcn@3.8.5:
+    resolution: {integrity: sha512-jPRx44e+eyeV7xwY3BLJXcfrks00+M0h5BGB9l6DdcBW4BpAj4x3lVmVy0TXPEs2iHEisxejr62sZAAw6B1EVA==}
+    hasBin: true
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  side-channel-list@1.0.0:
+    resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-map@1.0.1:
+    resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==}
+    engines: {node: '>= 0.4'}
+
+  side-channel-weakmap@1.0.2:
+    resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==}
+    engines: {node: '>= 0.4'}
+
+  side-channel@1.1.0:
+    resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==}
+    engines: {node: '>= 0.4'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  sisteransi@1.0.5:
+    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  snake-case@2.1.0:
+    resolution: {integrity: sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map-support@0.5.21:
+    resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  statuses@2.0.2:
+    resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==}
+    engines: {node: '>= 0.8'}
+
+  stdin-discarder@0.2.2:
+    resolution: {integrity: sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ==}
+    engines: {node: '>=18'}
+
+  strict-event-emitter@0.5.1:
+    resolution: {integrity: sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  string-width@7.2.0:
+    resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
+    engines: {node: '>=18'}
+
+  stringify-object@5.0.0:
+    resolution: {integrity: sha512-zaJYxz2FtcMb4f+g60KsRNFOpVMUyuJgA51Zi5Z1DOTC3S59+OQiVOzE9GZt0x72uBGWKsQIuBKeF9iusmKFsg==}
+    engines: {node: '>=14.16'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-ansi@7.1.2:
+    resolution: {integrity: sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==}
+    engines: {node: '>=12'}
+
+  strip-bom@3.0.0:
+    resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
+    engines: {node: '>=4'}
+
+  strip-final-newline@2.0.0:
+    resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
+    engines: {node: '>=6'}
+
+  strip-final-newline@4.0.0:
+    resolution: {integrity: sha512-aulFJcD6YK8V1G7iRB5tigAP4TsHBZZrOV8pjV++zdUwmeV8uzbY7yn6h9MswN62adStNZFuCIx4haBnRuMDaw==}
+    engines: {node: '>=18'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  swap-case@1.1.2:
+    resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
+
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
+  tailwind-merge@3.5.0:
+    resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
+
+  tailwindcss@4.2.1:
+    resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tinyexec@1.0.2:
+    resolution: {integrity: sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg==}
+    engines: {node: '>=18'}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  title-case@2.1.1:
+    resolution: {integrity: sha512-EkJoZ2O3zdCz3zJsYCsxyq2OC5hrxR9mfdd5I+w8h/tmFfeOxJ+vvkxsKxdmN0WtS9zLdHEgfgVOiMVgv+Po4Q==}
+
+  tldts-core@7.0.23:
+    resolution: {integrity: sha512-0g9vrtDQLrNIiCj22HSe9d4mLVG3g5ph5DZ8zCKBr4OtrspmNB6ss7hVyzArAeE88ceZocIEGkyW1Ime7fxPtQ==}
+
+  tldts@7.0.23:
+    resolution: {integrity: sha512-ASdhgQIBSay0R/eXggAkQ53G4nTJqTXqC2kbaBbdDwM7SkjyZyO0OaaN1/FH7U/yCeqOHDwFO5j8+Os/IS1dXw==}
+    hasBin: true
+
+  tmp@0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  toidentifier@1.0.1:
+    resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
+    engines: {node: '>=0.6'}
+
+  tough-cookie@6.0.0:
+    resolution: {integrity: sha512-kXuRi1mtaKMrsLUxz3sQYvVl37B0Ns6MzfrtV5DvJceE9bPyspOqk9xxv7XbZWcfLWbFmm997vl83qUWVJA64w==}
+    engines: {node: '>=16'}
+
+  ts-morph@26.0.0:
+    resolution: {integrity: sha512-ztMO++owQnz8c/gIENcM9XfCEzgoGphTv+nKpYNM1bgsdOVC/jRZuEBf6N+mLLDNg68Kl+GgUZfOySaRiG1/Ug==}
+
+  tsconfck@3.1.6:
+    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  tsconfig-paths@4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  turbo-darwin-64@2.8.11:
+    resolution: {integrity: sha512-XKaCWaz4OCt77oYYvGCIRpvYD4c/aNaKjRkUpv+e8rN3RZb+5Xsyew4yRO+gaHdMIUhQznXNXfHlhs+/p7lIhA==}
+    cpu: [x64]
+    os: [darwin]
+
+  turbo-darwin-arm64@2.8.11:
+    resolution: {integrity: sha512-VvynLHGUNvQ9k7GZjRPSsRcK4VkioTfFb7O7liAk4nHKjEcMdls7GqxzjVWgJiKz3hWmQGaP9hRa9UUnhVWCxA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  turbo-linux-64@2.8.11:
+    resolution: {integrity: sha512-cbSn37dcm+EmkQ7DD0euy7xV7o2el4GAOr1XujvkAyKjjNvQ+6QIUeDgQcwAx3D17zPpDvfDMJY2dLQadWnkmQ==}
+    cpu: [x64]
+    os: [linux]
+
+  turbo-linux-arm64@2.8.11:
+    resolution: {integrity: sha512-+trymp2s2aBrhS04l6qFxcExzZ8ffndevuUB9c5RCeqsVpZeiWuGQlWNm5XjOmzoMayxRARZ5ma7yiWbGMiLqQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  turbo-windows-64@2.8.11:
+    resolution: {integrity: sha512-3kJjFSM4yw1n9Uzmi+XkAUgCae19l/bH6RJ442xo7mnZm0tpOjo33F+FYHoSVpIWVMd0HG0LDccyafPSdylQbA==}
+    cpu: [x64]
+    os: [win32]
+
+  turbo-windows-arm64@2.8.11:
+    resolution: {integrity: sha512-JOM4uF2vuLsJUvibdR6X9QqdZr6BhC6Nhlrw4LKFPsXZZI/9HHLoqAiYRpE4MuzIwldCH/jVySnWXrI1SKto0g==}
+    cpu: [arm64]
+    os: [win32]
+
+  turbo@2.8.11:
+    resolution: {integrity: sha512-H+rwSHHPLoyPOSoHdmI1zY0zy0GGj1Dmr7SeJW+nZiWLz2nex8EJ+fkdVabxXFMNEux+aywI4Sae8EqhmnOv4A==}
+    hasBin: true
+
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  type-fest@5.4.4:
+    resolution: {integrity: sha512-JnTrzGu+zPV3aXIUhnyWJj4z/wigMsdYajGLIYakqyOW1nPllzXEJee0QQbHj+CTIQtXGlAjuK0UY+2xTyjVAw==}
+    engines: {node: '>=20'}
+
+  type-is@1.6.18:
+    resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
+    engines: {node: '>= 0.6'}
+
+  type-is@2.0.1:
+    resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==}
+    engines: {node: '>= 0.6'}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  undici-types@7.18.2:
+    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
+
+  unicorn-magic@0.3.0:
+    resolution: {integrity: sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA==}
+    engines: {node: '>=18'}
+
+  universalify@2.0.1:
+    resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==}
+    engines: {node: '>= 10.0.0'}
+
+  unpipe@1.0.0:
+    resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
+    engines: {node: '>= 0.8'}
+
+  until-async@3.0.2:
+    resolution: {integrity: sha512-IiSk4HlzAMqTUseHHe3VhIGyuFmN90zMTpD3Z3y8jeQbzLIq500MVM7Jq2vUAnTKAFPJrqwkzr6PoTcPhGcOiw==}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  upper-case-first@1.1.2:
+    resolution: {integrity: sha512-wINKYvI3Db8dtjikdAqoBbZoP6Q+PZUyfMR7pmwHzjC2quzSkUq5DmPrTtPEqHaz8AGtmsB4TqwapMTM1QAQOQ==}
+
+  upper-case@1.1.3:
+    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
+
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  util-deprecate@1.0.2:
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+
+  utils-merge@1.0.1:
+    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
+    engines: {node: '>= 0.4.0'}
+
+  valibot@1.2.0:
+    resolution: {integrity: sha512-mm1rxUsmOxzrwnX5arGS+U4T25RdvpPjPN4yR0u9pUBov9+zGVtO84tif1eY4r6zWxVxu3KzIyknJy3rxfRZZg==}
+    peerDependencies:
+      typescript: '>=5'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  validate-npm-package-name@7.0.2:
+    resolution: {integrity: sha512-hVDIBwsRruT73PbK7uP5ebUt+ezEtCmzZz3F59BSr2F6OVFnJ/6h8liuvdLrQ88Xmnk6/+xGGuq+pG9WwTuy3A==}
+    engines: {node: ^20.17.0 || >=22.9.0}
+
+  vary@1.1.2:
+    resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
+    engines: {node: '>= 0.8'}
+
+  vite-node@3.2.4:
+    resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    hasBin: true
+
+  vite-tsconfig-paths@5.1.4:
+    resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  vite@7.3.1:
+    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrap-ansi@7.0.0:
+    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
+    engines: {node: '>=10'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  wsl-utils@0.3.1:
+    resolution: {integrity: sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==}
+    engines: {node: '>=20'}
+
+  y18n@5.0.8:
+    resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
+    engines: {node: '>=10'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yargs-parser@21.1.1:
+    resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
+    engines: {node: '>=12'}
+
+  yargs@17.7.2:
+    resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
+    engines: {node: '>=12'}
+
+  yoctocolors-cjs@2.1.3:
+    resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
+    engines: {node: '>=18'}
+
+  yoctocolors@2.1.2:
+    resolution: {integrity: sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug==}
+    engines: {node: '>=18'}
+
+  zod-to-json-schema@3.25.1:
+    resolution: {integrity: sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==}
+    peerDependencies:
+      zod: ^3.25 || ^4
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+snapshots:
+
+  '@antfu/ni@25.0.0':
+    dependencies:
+      ansis: 4.2.0
+      fzf: 0.5.2
+      package-manager-detector: 1.6.0
+      tinyexec: 1.0.2
+
+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.0': {}
+
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.28.6
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.0.2
+
+  '@babel/helper-annotate-as-pure@7.27.3':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.29.0
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/helper-plugin-utils@7.28.6': {}
+
+  '@babel/helper-replace-supers@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.6':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-modules-commonjs@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-plugin-utils': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.0)
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-typescript@7.28.5(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-transform-modules-commonjs': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime-corejs3@7.29.0':
+    dependencies:
+      core-js-pure: 3.48.0
+
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@dotenvx/dotenvx@1.52.0':
+    dependencies:
+      commander: 11.1.0
+      dotenv: 17.3.1
+      eciesjs: 0.4.17
+      execa: 5.1.1
+      fdir: 6.5.0(picomatch@4.0.3)
+      ignore: 5.3.2
+      object-treeify: 1.1.33
+      picomatch: 4.0.3
+      which: 4.0.0
+
+  '@ecies/ciphers@0.2.5(@noble/ciphers@1.3.0)':
+    dependencies:
+      '@noble/ciphers': 1.3.0
+
+  '@esbuild/aix-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm@0.27.3':
+    optional: true
+
+  '@esbuild/android-x64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.3':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.3':
+    optional: true
+
+  '@floating-ui/core@1.7.4':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.5':
+    dependencies:
+      '@floating-ui/core': 1.7.4
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/react-dom@2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@floating-ui/dom': 1.7.5
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
+  '@floating-ui/utils@0.2.10': {}
+
+  '@fontsource-variable/outfit@5.2.8': {}
+
+  '@hono/node-server@1.19.9(hono@4.12.2)':
+    dependencies:
+      hono: 4.12.2
+
+  '@inquirer/ansi@1.0.2': {}
+
+  '@inquirer/checkbox@4.3.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/confirm@5.1.21(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/core@10.3.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      cli-width: 4.1.0
+      mute-stream: 2.0.0
+      signal-exit: 4.1.0
+      wrap-ansi: 6.2.0
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/editor@4.2.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/external-editor': 1.0.3(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/expand@4.0.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/external-editor@1.0.3(@types/node@25.3.0)':
+    dependencies:
+      chardet: 2.1.1
+      iconv-lite: 0.7.2
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/figures@1.0.15': {}
+
+  '@inquirer/input@4.3.1(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/number@3.0.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/password@4.0.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/prompts@7.10.1(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/checkbox': 4.3.2(@types/node@25.3.0)
+      '@inquirer/confirm': 5.1.21(@types/node@25.3.0)
+      '@inquirer/editor': 4.2.23(@types/node@25.3.0)
+      '@inquirer/expand': 4.0.23(@types/node@25.3.0)
+      '@inquirer/input': 4.3.1(@types/node@25.3.0)
+      '@inquirer/number': 3.0.23(@types/node@25.3.0)
+      '@inquirer/password': 4.0.23(@types/node@25.3.0)
+      '@inquirer/rawlist': 4.1.11(@types/node@25.3.0)
+      '@inquirer/search': 3.2.2(@types/node@25.3.0)
+      '@inquirer/select': 4.4.2(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/rawlist@4.1.11(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/search@3.2.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/select@4.4.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/type@3.0.10(@types/node@25.3.0)':
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@mjackson/node-fetch-server@0.2.0': {}
+
+  '@modelcontextprotocol/sdk@1.27.1(zod@3.25.76)':
+    dependencies:
+      '@hono/node-server': 1.19.9(hono@4.12.2)
+      ajv: 8.18.0
+      ajv-formats: 3.0.1(ajv@8.18.0)
+      content-type: 1.0.5
+      cors: 2.8.6
+      cross-spawn: 7.0.6
+      eventsource: 3.0.7
+      eventsource-parser: 3.0.6
+      express: 5.2.1
+      express-rate-limit: 8.2.1(express@5.2.1)
+      hono: 4.12.2
+      jose: 6.1.3
+      json-schema-typed: 8.0.2
+      pkce-challenge: 5.0.1
+      raw-body: 3.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.1(zod@3.25.76)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@mswjs/interceptors@0.41.3':
+    dependencies:
+      '@open-draft/deferred-promise': 2.2.0
+      '@open-draft/logger': 0.3.0
+      '@open-draft/until': 2.1.0
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      strict-event-emitter: 0.5.1
+
+  '@noble/ciphers@1.3.0': {}
+
+  '@noble/curves@1.9.7':
+    dependencies:
+      '@noble/hashes': 1.8.0
+
+  '@noble/hashes@1.8.0': {}
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@open-draft/deferred-promise@2.2.0': {}
+
+  '@open-draft/logger@0.3.0':
+    dependencies:
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+
+  '@open-draft/until@2.1.0': {}
+
+  '@radix-ui/number@1.1.1': {}
+
+  '@radix-ui/primitive@1.1.3': {}
+
+  '@radix-ui/react-accessible-icon@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-accordion@1.2.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-alert-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-aspect-ratio@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-avatar@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-context-menu@2.2.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-dropdown-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-form@0.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-hover-card@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-label@2.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-menu@2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-menubar@1.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-one-time-password-field@0.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-password-toggle-field@0.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-popover@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-popper@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@floating-ui/react-dom': 2.1.7(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-progress@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      aria-hidden: 1.2.6
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      react-remove-scroll: 2.7.2(@types/react@19.2.14)(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-separator@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-slider@1.3.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-toast@1.2.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-toggle-group@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-toggle@1.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-toolbar@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-tooltip@1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+      use-sync-external-store: 1.6.0(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.14)(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      react: 19.2.4
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  '@radix-ui/rect@1.1.1': {}
+
+  '@react-router/dev@7.12.0(@react-router/serve@7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3))(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/parser': 7.29.0
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@react-router/node': 7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      '@remix-run/node-fetch-server': 0.9.0
+      arg: 5.0.2
+      babel-dead-code-elimination: 1.0.12
+      chokidar: 4.0.3
+      dedent: 1.7.1
+      es-module-lexer: 1.7.0
+      exit-hook: 2.2.1
+      isbot: 5.1.35
+      jsesc: 3.0.2
+      lodash: 4.17.23
+      p-map: 7.0.4
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      pkg-types: 2.3.0
+      prettier: 3.8.1
+      react-refresh: 0.14.2
+      react-router: 7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      semver: 7.7.4
+      tinyglobby: 0.2.15
+      valibot: 1.2.0(typescript@5.9.3)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)
+      vite-node: 3.2.4(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)
+    optionalDependencies:
+      '@react-router/serve': 7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  '@react-router/express@7.12.0(express@4.22.1)(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)':
+    dependencies:
+      '@react-router/node': 7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      express: 4.22.1
+      react-router: 7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@react-router/node@7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)':
+    dependencies:
+      '@mjackson/node-fetch-server': 0.2.0
+      react-router: 7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@react-router/serve@7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)':
+    dependencies:
+      '@mjackson/node-fetch-server': 0.2.0
+      '@react-router/express': 7.12.0(express@4.22.1)(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      '@react-router/node': 7.12.0(react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+      compression: 1.8.1
+      express: 4.22.1
+      get-port: 5.1.1
+      morgan: 1.10.1
+      react-router: 7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      source-map-support: 0.5.21
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@remix-run/node-fetch-server@0.9.0': {}
+
+  '@remixicon/react@4.9.0(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    optional: true
+
+  '@sec-ant/readable-stream@0.4.1': {}
+
+  '@sindresorhus/merge-streams@4.0.0': {}
+
+  '@tailwindcss/node@4.2.1':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.1
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-x64': 4.2.1
+      '@tailwindcss/oxide-freebsd-x64': 4.2.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.1
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
+
+  '@tailwindcss/vite@4.2.1(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))':
+    dependencies:
+      '@tailwindcss/node': 4.2.1
+      '@tailwindcss/oxide': 4.2.1
+      tailwindcss: 4.2.1
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)
+
+  '@ts-morph/common@0.27.0':
+    dependencies:
+      fast-glob: 3.3.3
+      minimatch: 10.2.4
+      path-browserify: 1.0.1
+
+  '@turbo/gen-darwin-64@2.8.11':
+    optional: true
+
+  '@turbo/gen-darwin-arm64@2.8.11':
+    optional: true
+
+  '@turbo/gen-linux-64@2.8.11':
+    optional: true
+
+  '@turbo/gen-linux-arm64@2.8.11':
+    optional: true
+
+  '@turbo/gen-windows-64@2.8.11':
+    optional: true
+
+  '@turbo/gen@2.8.11(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/prompts': 7.10.1(@types/node@25.3.0)
+      node-plop: 0.26.3
+    optionalDependencies:
+      '@turbo/gen-darwin-64': 2.8.11
+      '@turbo/gen-darwin-arm64': 2.8.11
+      '@turbo/gen-linux-64': 2.8.11
+      '@turbo/gen-linux-arm64': 2.8.11
+      '@turbo/gen-windows-64': 2.8.11
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@types/estree@1.0.8': {}
+
+  '@types/glob@7.2.0':
+    dependencies:
+      '@types/minimatch': 6.0.0
+      '@types/node': 25.3.0
+
+  '@types/inquirer@6.5.0':
+    dependencies:
+      '@types/through': 0.0.33
+      rxjs: 6.6.7
+
+  '@types/minimatch@6.0.0':
+    dependencies:
+      minimatch: 10.2.4
+
+  '@types/node@25.3.0':
+    dependencies:
+      undici-types: 7.18.2
+
+  '@types/react-dom@19.2.3(@types/react@19.2.14)':
+    dependencies:
+      '@types/react': 19.2.14
+
+  '@types/react@19.2.14':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/statuses@2.0.6': {}
+
+  '@types/through@0.0.33':
+    dependencies:
+      '@types/node': 25.3.0
+
+  '@types/validate-npm-package-name@4.0.2': {}
+
+  accepts@1.3.8:
+    dependencies:
+      mime-types: 2.1.35
+      negotiator: 0.6.3
+
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.0.0
+
+  agent-base@7.1.4: {}
+
+  aggregate-error@3.1.0:
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+
+  ajv-formats@3.0.1(ajv@8.18.0):
+    optionalDependencies:
+      ajv: 8.18.0
+
+  ajv@8.18.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.0
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-regex@5.0.1: {}
+
+  ansi-regex@6.2.2: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansis@4.2.0: {}
+
+  arg@5.0.2: {}
+
+  argparse@2.0.1: {}
+
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
+  array-flatten@1.1.1: {}
+
+  array-union@2.1.0: {}
+
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
+  babel-dead-code-elimination@1.0.12:
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@4.0.4: {}
+
+  baseline-browser-mapping@2.10.0: {}
+
+  basic-auth@2.0.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  body-parser@1.20.4:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      on-finished: 2.4.1
+      qs: 6.14.2
+      raw-body: 2.5.3
+      type-is: 1.6.18
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  body-parser@2.2.2:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 4.4.3
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      on-finished: 2.4.1
+      qs: 6.15.0
+      raw-body: 3.0.2
+      type-is: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@5.0.3:
+    dependencies:
+      balanced-match: 4.0.4
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.10.0
+      caniuse-lite: 1.0.30001774
+      electron-to-chromium: 1.5.302
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  buffer-from@1.1.2: {}
+
+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.1.0
+
+  bytes@3.1.2: {}
+
+  cac@6.7.14: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  callsites@3.1.0: {}
+
+  camel-case@3.0.0:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  caniuse-lite@1.0.30001774: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  chalk@5.6.2: {}
+
+  change-case@3.1.0:
+    dependencies:
+      camel-case: 3.0.0
+      constant-case: 2.0.0
+      dot-case: 2.1.1
+      header-case: 1.0.1
+      is-lower-case: 1.1.3
+      is-upper-case: 1.1.2
+      lower-case: 1.1.4
+      lower-case-first: 1.0.2
+      no-case: 2.3.2
+      param-case: 2.1.1
+      pascal-case: 2.0.1
+      path-case: 2.1.1
+      sentence-case: 2.1.1
+      snake-case: 2.1.0
+      swap-case: 1.1.2
+      title-case: 2.1.1
+      upper-case: 1.1.3
+      upper-case-first: 1.1.2
+
+  chardet@0.7.0: {}
+
+  chardet@2.1.1: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  clean-stack@2.2.0: {}
+
+  cli-cursor@3.1.0:
+    dependencies:
+      restore-cursor: 3.1.0
+
+  cli-cursor@5.0.0:
+    dependencies:
+      restore-cursor: 5.1.0
+
+  cli-spinners@2.9.2: {}
+
+  cli-width@3.0.0: {}
+
+  cli-width@4.1.0: {}
+
+  cliui@8.0.1:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 7.0.0
+
+  clsx@2.1.1: {}
+
+  code-block-writer@13.0.3: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  commander@11.1.0: {}
+
+  commander@14.0.3: {}
+
+  compressible@2.0.18:
+    dependencies:
+      mime-db: 1.54.0
+
+  compression@1.8.1:
+    dependencies:
+      bytes: 3.1.2
+      compressible: 2.0.18
+      debug: 2.6.9
+      negotiator: 0.6.4
+      on-headers: 1.1.0
+      safe-buffer: 5.2.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  concat-map@0.0.1: {}
+
+  confbox@0.2.4: {}
+
+  constant-case@2.0.0:
+    dependencies:
+      snake-case: 2.1.0
+      upper-case: 1.1.3
+
+  content-disposition@0.5.4:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  content-disposition@1.0.1: {}
+
+  content-type@1.0.5: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie-signature@1.0.7: {}
+
+  cookie-signature@1.2.2: {}
+
+  cookie@0.7.2: {}
+
+  cookie@1.1.1: {}
+
+  core-js-pure@3.48.0: {}
+
+  cors@2.8.6:
+    dependencies:
+      object-assign: 4.1.1
+      vary: 1.1.2
+
+  cosmiconfig@9.0.0(typescript@5.9.3):
+    dependencies:
+      env-paths: 2.2.1
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      parse-json: 5.2.0
+    optionalDependencies:
+      typescript: 5.9.3
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  cssesc@3.0.0: {}
+
+  csstype@3.2.3: {}
+
+  data-uri-to-buffer@4.0.1: {}
+
+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  dedent@1.7.1: {}
+
+  deepmerge@4.3.1: {}
+
+  default-browser-id@5.0.1: {}
+
+  default-browser@5.5.0:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.1
+
+  define-lazy-prop@3.0.0: {}
+
+  del@5.1.0:
+    dependencies:
+      globby: 10.0.2
+      graceful-fs: 4.2.11
+      is-glob: 4.0.3
+      is-path-cwd: 2.2.0
+      is-path-inside: 3.0.3
+      p-map: 3.0.0
+      rimraf: 3.0.2
+      slash: 3.0.0
+
+  depd@2.0.0: {}
+
+  destroy@1.2.0: {}
+
+  detect-libc@2.1.2: {}
+
+  detect-node-es@1.1.0: {}
+
+  diff@8.0.3: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dot-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  dotenv@17.3.1: {}
+
+  dunder-proto@1.0.1:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
+
+  eciesjs@0.4.17:
+    dependencies:
+      '@ecies/ciphers': 0.2.5(@noble/ciphers@1.3.0)
+      '@noble/ciphers': 1.3.0
+      '@noble/curves': 1.9.7
+      '@noble/hashes': 1.8.0
+
+  ee-first@1.1.1: {}
+
+  electron-to-chromium@1.5.302: {}
+
+  emoji-regex@10.6.0: {}
+
+  emoji-regex@8.0.0: {}
+
+  encodeurl@2.0.0: {}
+
+  enhanced-resolve@5.19.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  env-paths@2.2.1: {}
+
+  error-ex@1.3.4:
+    dependencies:
+      is-arrayish: 0.2.1
+
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  es-object-atoms@1.1.1:
+    dependencies:
+      es-errors: 1.3.0
+
+  esbuild@0.27.3:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.3
+      '@esbuild/android-arm': 0.27.3
+      '@esbuild/android-arm64': 0.27.3
+      '@esbuild/android-x64': 0.27.3
+      '@esbuild/darwin-arm64': 0.27.3
+      '@esbuild/darwin-x64': 0.27.3
+      '@esbuild/freebsd-arm64': 0.27.3
+      '@esbuild/freebsd-x64': 0.27.3
+      '@esbuild/linux-arm': 0.27.3
+      '@esbuild/linux-arm64': 0.27.3
+      '@esbuild/linux-ia32': 0.27.3
+      '@esbuild/linux-loong64': 0.27.3
+      '@esbuild/linux-mips64el': 0.27.3
+      '@esbuild/linux-ppc64': 0.27.3
+      '@esbuild/linux-riscv64': 0.27.3
+      '@esbuild/linux-s390x': 0.27.3
+      '@esbuild/linux-x64': 0.27.3
+      '@esbuild/netbsd-arm64': 0.27.3
+      '@esbuild/netbsd-x64': 0.27.3
+      '@esbuild/openbsd-arm64': 0.27.3
+      '@esbuild/openbsd-x64': 0.27.3
+      '@esbuild/openharmony-arm64': 0.27.3
+      '@esbuild/sunos-x64': 0.27.3
+      '@esbuild/win32-arm64': 0.27.3
+      '@esbuild/win32-ia32': 0.27.3
+      '@esbuild/win32-x64': 0.27.3
+
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  esprima@4.0.1: {}
+
+  etag@1.8.1: {}
+
+  eventsource-parser@3.0.6: {}
+
+  eventsource@3.0.7:
+    dependencies:
+      eventsource-parser: 3.0.6
+
+  execa@5.1.1:
+    dependencies:
+      cross-spawn: 7.0.6
+      get-stream: 6.0.1
+      human-signals: 2.1.0
+      is-stream: 2.0.1
+      merge-stream: 2.0.0
+      npm-run-path: 4.0.1
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+      strip-final-newline: 2.0.0
+
+  execa@9.6.1:
+    dependencies:
+      '@sindresorhus/merge-streams': 4.0.0
+      cross-spawn: 7.0.6
+      figures: 6.1.0
+      get-stream: 9.0.1
+      human-signals: 8.0.1
+      is-plain-obj: 4.1.0
+      is-stream: 4.0.1
+      npm-run-path: 6.0.0
+      pretty-ms: 9.3.0
+      signal-exit: 4.1.0
+      strip-final-newline: 4.0.0
+      yoctocolors: 2.1.2
+
+  exit-hook@2.2.1: {}
+
+  express-rate-limit@8.2.1(express@5.2.1):
+    dependencies:
+      express: 5.2.1
+      ip-address: 10.0.1
+
+  express@4.22.1:
+    dependencies:
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.4
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.0.7
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.3.2
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      merge-descriptors: 1.0.3
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.12
+      proxy-addr: 2.0.7
+      qs: 6.14.2
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.19.2
+      serve-static: 1.16.3
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  express@5.2.1:
+    dependencies:
+      accepts: 2.0.0
+      body-parser: 2.2.2
+      content-disposition: 1.0.1
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.2.2
+      debug: 4.4.3
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 2.1.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      merge-descriptors: 2.0.0
+      mime-types: 3.0.2
+      on-finished: 2.4.1
+      once: 1.4.0
+      parseurl: 1.3.3
+      proxy-addr: 2.0.7
+      qs: 6.15.0
+      range-parser: 1.2.1
+      router: 2.2.0
+      send: 1.2.1
+      serve-static: 2.2.1
+      statuses: 2.0.2
+      type-is: 2.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  exsolve@1.0.8: {}
+
+  external-editor@3.1.0:
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-uri@3.1.0: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  fetch-blob@3.2.0:
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+
+  figures@3.2.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  figures@6.1.0:
+    dependencies:
+      is-unicode-supported: 2.1.0
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  finalhandler@1.3.2:
+    dependencies:
+      debug: 2.6.9
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  finalhandler@2.1.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  formdata-polyfill@4.0.10:
+    dependencies:
+      fetch-blob: 3.2.0
+
+  forwarded@0.2.0: {}
+
+  fresh@0.5.2: {}
+
+  fresh@2.0.0: {}
+
+  fs-extra@11.3.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      jsonfile: 6.2.0
+      universalify: 2.0.1
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  fuzzysort@3.1.0: {}
+
+  fzf@0.5.2: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-caller-file@2.0.5: {}
+
+  get-east-asian-width@1.5.0: {}
+
+  get-intrinsic@1.3.0:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
+      es-errors: 1.3.0
+      es-object-atoms: 1.1.1
+      function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
+
+  get-nonce@1.0.1: {}
+
+  get-own-enumerable-keys@1.0.0: {}
+
+  get-port@5.1.1: {}
+
+  get-proto@1.0.1:
+    dependencies:
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
+
+  get-stream@6.0.1: {}
+
+  get-stream@9.0.1:
+    dependencies:
+      '@sec-ant/readable-stream': 0.4.1
+      is-stream: 4.0.1
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.5
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  globby@10.0.2:
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      glob: 7.2.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  globrex@0.1.2: {}
+
+  gopd@1.2.0: {}
+
+  graceful-fs@4.2.11: {}
+
+  graphql@16.13.0: {}
+
+  handlebars@4.7.8:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.3
+
+  has-flag@4.0.0: {}
+
+  has-symbols@1.1.0: {}
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  header-case@1.0.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  headers-polyfill@4.0.3: {}
+
+  hono@4.12.2: {}
+
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
+
+  https-proxy-agent@7.0.6:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  human-signals@2.1.0: {}
+
+  human-signals@8.0.1: {}
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ignore@5.3.2: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  indent-string@4.0.0: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  inquirer@7.3.3:
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.23
+      mute-stream: 0.0.8
+      run-async: 2.4.1
+      rxjs: 6.6.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+
+  ip-address@10.0.1: {}
+
+  ipaddr.js@1.9.1: {}
+
+  is-arrayish@0.2.1: {}
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-docker@3.0.0: {}
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-in-ssh@1.0.0: {}
+
+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
+  is-interactive@2.0.0: {}
+
+  is-lower-case@1.1.3:
+    dependencies:
+      lower-case: 1.1.4
+
+  is-node-process@1.2.0: {}
+
+  is-number@7.0.0: {}
+
+  is-obj@3.0.0: {}
+
+  is-path-cwd@2.2.0: {}
+
+  is-path-inside@3.0.3: {}
+
+  is-plain-obj@4.1.0: {}
+
+  is-promise@4.0.0: {}
+
+  is-regexp@3.1.0: {}
+
+  is-stream@2.0.1: {}
+
+  is-stream@4.0.1: {}
+
+  is-unicode-supported@1.3.0: {}
+
+  is-unicode-supported@2.1.0: {}
+
+  is-upper-case@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  is-wsl@3.1.1:
+    dependencies:
+      is-inside-container: 1.0.0
+
+  isbinaryfile@4.0.10: {}
+
+  isbot@5.1.35: {}
+
+  isexe@2.0.0: {}
+
+  isexe@3.1.5: {}
+
+  jiti@2.6.1: {}
+
+  jose@6.1.3: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsesc@3.0.2: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
+  json-schema-traverse@1.0.0: {}
+
+  json-schema-typed@8.0.2: {}
+
+  json5@2.2.3: {}
+
+  jsonfile@6.2.0:
+    dependencies:
+      universalify: 2.0.1
+    optionalDependencies:
+      graceful-fs: 4.2.11
+
+  kleur@3.0.3: {}
+
+  kleur@4.1.5: {}
+
+  lightningcss-android-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.31.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.31.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    optional: true
+
+  lightningcss@1.31.1:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.31.1
+      lightningcss-darwin-arm64: 1.31.1
+      lightningcss-darwin-x64: 1.31.1
+      lightningcss-freebsd-x64: 1.31.1
+      lightningcss-linux-arm-gnueabihf: 1.31.1
+      lightningcss-linux-arm64-gnu: 1.31.1
+      lightningcss-linux-arm64-musl: 1.31.1
+      lightningcss-linux-x64-gnu: 1.31.1
+      lightningcss-linux-x64-musl: 1.31.1
+      lightningcss-win32-arm64-msvc: 1.31.1
+      lightningcss-win32-x64-msvc: 1.31.1
+
+  lines-and-columns@1.2.4: {}
+
+  lodash.get@4.4.2: {}
+
+  lodash@4.17.23: {}
+
+  log-symbols@6.0.0:
+    dependencies:
+      chalk: 5.6.2
+      is-unicode-supported: 1.3.0
+
+  lower-case-first@1.0.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  lower-case@1.1.4: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  math-intrinsics@1.1.0: {}
+
+  media-typer@0.3.0: {}
+
+  media-typer@1.1.0: {}
+
+  merge-descriptors@1.0.3: {}
+
+  merge-descriptors@2.0.0: {}
+
+  merge-stream@2.0.0: {}
+
+  merge2@1.4.1: {}
+
+  methods@1.1.2: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mime-db@1.52.0: {}
+
+  mime-db@1.54.0: {}
+
+  mime-types@2.1.35:
+    dependencies:
+      mime-db: 1.52.0
+
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
+  mime@1.6.0: {}
+
+  mimic-fn@2.1.0: {}
+
+  mimic-function@5.0.1: {}
+
+  minimatch@10.2.4:
+    dependencies:
+      brace-expansion: 5.0.3
+
+  minimatch@3.1.5:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimist@1.2.8: {}
+
+  mkdirp@0.5.6:
+    dependencies:
+      minimist: 1.2.8
+
+  morgan@1.10.1:
+    dependencies:
+      basic-auth: 2.0.1
+      debug: 2.6.9
+      depd: 2.0.0
+      on-finished: 2.3.0
+      on-headers: 1.1.0
+    transitivePeerDependencies:
+      - supports-color
+
+  ms@2.0.0: {}
+
+  ms@2.1.3: {}
+
+  msw@2.12.10(@types/node@25.3.0)(typescript@5.9.3):
+    dependencies:
+      '@inquirer/confirm': 5.1.21(@types/node@25.3.0)
+      '@mswjs/interceptors': 0.41.3
+      '@open-draft/deferred-promise': 2.2.0
+      '@types/statuses': 2.0.6
+      cookie: 1.1.1
+      graphql: 16.13.0
+      headers-polyfill: 4.0.3
+      is-node-process: 1.2.0
+      outvariant: 1.4.3
+      path-to-regexp: 6.3.0
+      picocolors: 1.1.1
+      rettime: 0.10.1
+      statuses: 2.0.2
+      strict-event-emitter: 0.5.1
+      tough-cookie: 6.0.0
+      type-fest: 5.4.4
+      until-async: 3.0.2
+      yargs: 17.7.2
+    optionalDependencies:
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+
+  mute-stream@0.0.8: {}
+
+  mute-stream@2.0.0: {}
+
+  nanoid@3.3.11: {}
+
+  negotiator@0.6.3: {}
+
+  negotiator@0.6.4: {}
+
+  negotiator@1.0.0: {}
+
+  neo-async@2.6.2: {}
+
+  no-case@2.3.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  node-domexception@1.0.0: {}
+
+  node-fetch@3.3.2:
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+
+  node-plop@0.26.3:
+    dependencies:
+      '@babel/runtime-corejs3': 7.29.0
+      '@types/inquirer': 6.5.0
+      change-case: 3.1.0
+      del: 5.1.0
+      globby: 10.0.2
+      handlebars: 4.7.8
+      inquirer: 7.3.3
+      isbinaryfile: 4.0.10
+      lodash.get: 4.4.2
+      mkdirp: 0.5.6
+      resolve: 1.22.11
+
+  node-releases@2.0.27: {}
+
+  npm-run-path@4.0.1:
+    dependencies:
+      path-key: 3.1.1
+
+  npm-run-path@6.0.0:
+    dependencies:
+      path-key: 4.0.0
+      unicorn-magic: 0.3.0
+
+  object-assign@4.1.1: {}
+
+  object-inspect@1.13.4: {}
+
+  object-treeify@1.1.33: {}
+
+  on-finished@2.3.0:
+    dependencies:
+      ee-first: 1.1.1
+
+  on-finished@2.4.1:
+    dependencies:
+      ee-first: 1.1.1
+
+  on-headers@1.1.0: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
+  open@11.0.0:
+    dependencies:
+      default-browser: 5.5.0
+      define-lazy-prop: 3.0.0
+      is-in-ssh: 1.0.0
+      is-inside-container: 1.0.0
+      powershell-utils: 0.1.0
+      wsl-utils: 0.3.1
+
+  ora@8.2.0:
+    dependencies:
+      chalk: 5.6.2
+      cli-cursor: 5.0.0
+      cli-spinners: 2.9.2
+      is-interactive: 2.0.0
+      is-unicode-supported: 2.1.0
+      log-symbols: 6.0.0
+      stdin-discarder: 0.2.2
+      string-width: 7.2.0
+      strip-ansi: 7.1.2
+
+  os-tmpdir@1.0.2: {}
+
+  outvariant@1.4.3: {}
+
+  p-map@3.0.0:
+    dependencies:
+      aggregate-error: 3.1.0
+
+  p-map@7.0.4: {}
+
+  package-manager-detector@1.6.0: {}
+
+  param-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      error-ex: 1.3.4
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
+  parse-ms@4.0.0: {}
+
+  parseurl@1.3.3: {}
+
+  pascal-case@2.0.1:
+    dependencies:
+      camel-case: 3.0.0
+      upper-case-first: 1.1.2
+
+  path-browserify@1.0.1: {}
+
+  path-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-key@4.0.0: {}
+
+  path-parse@1.0.7: {}
+
+  path-to-regexp@0.1.12: {}
+
+  path-to-regexp@6.3.0: {}
+
+  path-to-regexp@8.3.0: {}
+
+  path-type@4.0.0: {}
+
+  pathe@1.1.2: {}
+
+  pathe@2.0.3: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  pkce-challenge@5.0.1: {}
+
+  pkg-types@2.3.0:
+    dependencies:
+      confbox: 0.2.4
+      exsolve: 1.0.8
+      pathe: 2.0.3
+
+  postcss-selector-parser@7.1.1:
+    dependencies:
+      cssesc: 3.0.0
+      util-deprecate: 1.0.2
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  powershell-utils@0.1.0: {}
+
+  prettier-plugin-tailwindcss@0.7.2(prettier@3.8.1):
+    dependencies:
+      prettier: 3.8.1
+
+  prettier@3.8.1: {}
+
+  pretty-ms@9.3.0:
+    dependencies:
+      parse-ms: 4.0.0
+
+  prompts@2.4.2:
+    dependencies:
+      kleur: 3.0.3
+      sisteransi: 1.0.5
+
+  proxy-addr@2.0.7:
+    dependencies:
+      forwarded: 0.2.0
+      ipaddr.js: 1.9.1
+
+  qs@6.14.2:
+    dependencies:
+      side-channel: 1.1.0
+
+  qs@6.15.0:
+    dependencies:
+      side-channel: 1.1.0
+
+  queue-microtask@1.2.3: {}
+
+  radix-ui@1.4.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-accessible-icon': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-aspect-ratio': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-avatar': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-form': 0.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-label': 2.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-menu': 2.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-menubar': 1.1.16(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-one-time-password-field': 0.1.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-password-toggle-field': 0.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-progress': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-select': 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-separator': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slider': 1.3.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-switch': 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-toast': 1.2.15(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-toggle': 1.1.10(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-toolbar': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.14)(react@19.2.4)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+      '@types/react-dom': 19.2.3(@types/react@19.2.14)
+
+  range-parser@1.2.1: {}
+
+  raw-body@2.5.3:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      unpipe: 1.0.0
+
+  raw-body@3.0.2:
+    dependencies:
+      bytes: 3.1.2
+      http-errors: 2.0.1
+      iconv-lite: 0.7.2
+      unpipe: 1.0.0
+
+  react-dom@19.2.4(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      scheduler: 0.27.0
+
+  react-refresh@0.14.2: {}
+
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.14)(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  react-remove-scroll@2.7.2(@types/react@19.2.14)(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.14)(react@19.2.4)
+      react-style-singleton: 2.2.3(@types/react@19.2.14)(react@19.2.4)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.14)(react@19.2.4)
+      use-sidecar: 1.1.3(@types/react@19.2.14)(react@19.2.4)
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  react-router@7.12.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      cookie: 1.1.1
+      react: 19.2.4
+      set-cookie-parser: 2.7.2
+    optionalDependencies:
+      react-dom: 19.2.4(react@19.2.4)
+
+  react-style-singleton@2.2.3(@types/react@19.2.14)(react@19.2.4):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.4
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  react@19.2.4: {}
+
+  readdirp@4.1.2: {}
+
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
+  require-directory@2.1.1: {}
+
+  require-from-string@2.0.2: {}
+
+  resolve-from@4.0.0: {}
+
+  resolve@1.22.11:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@3.1.0:
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+
+  restore-cursor@5.1.0:
+    dependencies:
+      onetime: 7.0.0
+      signal-exit: 4.1.0
+
+  rettime@0.10.1: {}
+
+  reusify@1.1.0: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  rollup@4.59.0:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.59.0
+      '@rollup/rollup-android-arm64': 4.59.0
+      '@rollup/rollup-darwin-arm64': 4.59.0
+      '@rollup/rollup-darwin-x64': 4.59.0
+      '@rollup/rollup-freebsd-arm64': 4.59.0
+      '@rollup/rollup-freebsd-x64': 4.59.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.59.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.59.0
+      '@rollup/rollup-linux-arm64-gnu': 4.59.0
+      '@rollup/rollup-linux-arm64-musl': 4.59.0
+      '@rollup/rollup-linux-loong64-gnu': 4.59.0
+      '@rollup/rollup-linux-loong64-musl': 4.59.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.59.0
+      '@rollup/rollup-linux-ppc64-musl': 4.59.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.59.0
+      '@rollup/rollup-linux-riscv64-musl': 4.59.0
+      '@rollup/rollup-linux-s390x-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-musl': 4.59.0
+      '@rollup/rollup-openbsd-x64': 4.59.0
+      '@rollup/rollup-openharmony-arm64': 4.59.0
+      '@rollup/rollup-win32-arm64-msvc': 4.59.0
+      '@rollup/rollup-win32-ia32-msvc': 4.59.0
+      '@rollup/rollup-win32-x64-gnu': 4.59.0
+      '@rollup/rollup-win32-x64-msvc': 4.59.0
+      fsevents: 2.3.3
+
+  router@2.2.0:
+    dependencies:
+      debug: 4.4.3
+      depd: 2.0.0
+      is-promise: 4.0.0
+      parseurl: 1.3.3
+      path-to-regexp: 8.3.0
+    transitivePeerDependencies:
+      - supports-color
+
+  run-applescript@7.1.0: {}
+
+  run-async@2.4.1: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rxjs@6.6.7:
+    dependencies:
+      tslib: 1.14.1
+
+  safe-buffer@5.1.2: {}
+
+  safe-buffer@5.2.1: {}
+
+  safer-buffer@2.1.2: {}
+
+  scheduler@0.27.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.7.4: {}
+
+  send@0.19.2:
+    dependencies:
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      mime: 1.6.0
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  send@1.2.1:
+    dependencies:
+      debug: 4.4.3
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      fresh: 2.0.0
+      http-errors: 2.0.1
+      mime-types: 3.0.2
+      ms: 2.1.3
+      on-finished: 2.4.1
+      range-parser: 1.2.1
+      statuses: 2.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  sentence-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case-first: 1.1.2
+
+  serve-static@1.16.3:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 0.19.2
+    transitivePeerDependencies:
+      - supports-color
+
+  serve-static@2.2.1:
+    dependencies:
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      parseurl: 1.3.3
+      send: 1.2.1
+    transitivePeerDependencies:
+      - supports-color
+
+  set-cookie-parser@2.7.2: {}
+
+  setprototypeof@1.2.0: {}
+
+  shadcn@3.8.5(@types/node@25.3.0)(typescript@5.9.3):
+    dependencies:
+      '@antfu/ni': 25.0.0
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.0)
+      '@dotenvx/dotenvx': 1.52.0
+      '@modelcontextprotocol/sdk': 1.27.1(zod@3.25.76)
+      '@types/validate-npm-package-name': 4.0.2
+      browserslist: 4.28.1
+      commander: 14.0.3
+      cosmiconfig: 9.0.0(typescript@5.9.3)
+      dedent: 1.7.1
+      deepmerge: 4.3.1
+      diff: 8.0.3
+      execa: 9.6.1
+      fast-glob: 3.3.3
+      fs-extra: 11.3.3
+      fuzzysort: 3.1.0
+      https-proxy-agent: 7.0.6
+      kleur: 4.1.5
+      msw: 2.12.10(@types/node@25.3.0)(typescript@5.9.3)
+      node-fetch: 3.3.2
+      open: 11.0.0
+      ora: 8.2.0
+      postcss: 8.5.6
+      postcss-selector-parser: 7.1.1
+      prompts: 2.4.2
+      recast: 0.23.11
+      stringify-object: 5.0.0
+      tailwind-merge: 3.5.0
+      ts-morph: 26.0.0
+      tsconfig-paths: 4.2.0
+      validate-npm-package-name: 7.0.2
+      zod: 3.25.76
+      zod-to-json-schema: 3.25.1(zod@3.25.76)
+    transitivePeerDependencies:
+      - '@cfworker/json-schema'
+      - '@types/node'
+      - babel-plugin-macros
+      - supports-color
+      - typescript
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  side-channel-list@1.0.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-map@1.0.1:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+
+  side-channel-weakmap@1.0.2:
+    dependencies:
+      call-bound: 1.0.4
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-map: 1.0.1
+
+  side-channel@1.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      object-inspect: 1.13.4
+      side-channel-list: 1.0.0
+      side-channel-map: 1.0.1
+      side-channel-weakmap: 1.0.2
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  sisteransi@1.0.5: {}
+
+  slash@3.0.0: {}
+
+  snake-case@2.1.0:
+    dependencies:
+      no-case: 2.3.2
+
+  source-map-js@1.2.1: {}
+
+  source-map-support@0.5.21:
+    dependencies:
+      buffer-from: 1.1.2
+      source-map: 0.6.1
+
+  source-map@0.6.1: {}
+
+  statuses@2.0.2: {}
+
+  stdin-discarder@0.2.2: {}
+
+  strict-event-emitter@0.5.1: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  string-width@7.2.0:
+    dependencies:
+      emoji-regex: 10.6.0
+      get-east-asian-width: 1.5.0
+      strip-ansi: 7.1.2
+
+  stringify-object@5.0.0:
+    dependencies:
+      get-own-enumerable-keys: 1.0.0
+      is-obj: 3.0.0
+      is-regexp: 3.1.0
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-ansi@7.1.2:
+    dependencies:
+      ansi-regex: 6.2.2
+
+  strip-bom@3.0.0: {}
+
+  strip-final-newline@2.0.0: {}
+
+  strip-final-newline@4.0.0: {}
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  swap-case@1.1.2:
+    dependencies:
+      lower-case: 1.1.4
+      upper-case: 1.1.3
+
+  tagged-tag@1.0.0: {}
+
+  tailwind-merge@3.5.0: {}
+
+  tailwindcss@4.2.1: {}
+
+  tapable@2.3.0: {}
+
+  through@2.3.8: {}
+
+  tiny-invariant@1.3.3: {}
+
+  tinyexec@1.0.2: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  title-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  tldts-core@7.0.23: {}
+
+  tldts@7.0.23:
+    dependencies:
+      tldts-core: 7.0.23
+
+  tmp@0.0.33:
+    dependencies:
+      os-tmpdir: 1.0.2
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  toidentifier@1.0.1: {}
+
+  tough-cookie@6.0.0:
+    dependencies:
+      tldts: 7.0.23
+
+  ts-morph@26.0.0:
+    dependencies:
+      '@ts-morph/common': 0.27.0
+      code-block-writer: 13.0.3
+
+  tsconfck@3.1.6(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
+  tsconfig-paths@4.2.0:
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+
+  tslib@1.14.1: {}
+
+  tslib@2.8.1: {}
+
+  turbo-darwin-64@2.8.11:
+    optional: true
+
+  turbo-darwin-arm64@2.8.11:
+    optional: true
+
+  turbo-linux-64@2.8.11:
+    optional: true
+
+  turbo-linux-arm64@2.8.11:
+    optional: true
+
+  turbo-windows-64@2.8.11:
+    optional: true
+
+  turbo-windows-arm64@2.8.11:
+    optional: true
+
+  turbo@2.8.11:
+    optionalDependencies:
+      turbo-darwin-64: 2.8.11
+      turbo-darwin-arm64: 2.8.11
+      turbo-linux-64: 2.8.11
+      turbo-linux-arm64: 2.8.11
+      turbo-windows-64: 2.8.11
+      turbo-windows-arm64: 2.8.11
+
+  tw-animate-css@1.4.0: {}
+
+  type-fest@0.21.3: {}
+
+  type-fest@5.4.4:
+    dependencies:
+      tagged-tag: 1.0.0
+
+  type-is@1.6.18:
+    dependencies:
+      media-typer: 0.3.0
+      mime-types: 2.1.35
+
+  type-is@2.0.1:
+    dependencies:
+      content-type: 1.0.5
+      media-typer: 1.1.0
+      mime-types: 3.0.2
+
+  typescript@5.9.3: {}
+
+  uglify-js@3.19.3:
+    optional: true
+
+  undici-types@7.18.2: {}
+
+  unicorn-magic@0.3.0: {}
+
+  universalify@2.0.1: {}
+
+  unpipe@1.0.0: {}
+
+  until-async@3.0.2: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  upper-case-first@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  upper-case@1.1.3: {}
+
+  use-callback-ref@1.3.3(@types/react@19.2.14)(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  use-sidecar@1.1.3(@types/react@19.2.14)(react@19.2.4):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 19.2.4
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.14
+
+  use-sync-external-store@1.6.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  util-deprecate@1.0.2: {}
+
+  utils-merge@1.0.1: {}
+
+  valibot@1.2.0(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
+  validate-npm-package-name@7.0.2: {}
+
+  vary@1.1.2: {}
+
+  vite-node@3.2.4(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.4.3
+      es-module-lexer: 1.7.0
+      pathe: 2.0.3
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)
+    transitivePeerDependencies:
+      - '@types/node'
+      - jiti
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)):
+    dependencies:
+      debug: 4.4.3
+      globrex: 0.1.2
+      tsconfck: 3.1.6(typescript@5.9.3)
+    optionalDependencies:
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1):
+    dependencies:
+      esbuild: 0.27.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.59.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 25.3.0
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+
+  web-streams-polyfill@3.3.3: {}
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.5
+
+  wordwrap@1.0.0: {}
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrap-ansi@7.0.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrappy@1.0.2: {}
+
+  wsl-utils@0.3.1:
+    dependencies:
+      is-wsl: 3.1.1
+      powershell-utils: 0.1.0
+
+  y18n@5.0.8: {}
+
+  yallist@3.1.1: {}
+
+  yargs-parser@21.1.1: {}
+
+  yargs@17.7.2:
+    dependencies:
+      cliui: 8.0.1
+      escalade: 3.2.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      string-width: 4.2.3
+      y18n: 5.0.8
+      yargs-parser: 21.1.1
+
+  yoctocolors-cjs@2.1.3: {}
+
+  yoctocolors@2.1.2: {}
+
+  zod-to-json-schema@3.25.1(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod@3.25.76: {}
diff --git a/templates/react-router-monorepo/pnpm-workspace.yaml b/templates/react-router-monorepo/pnpm-workspace.yaml
new file mode 100644
index 0000000000..3ff5faaaf5
--- /dev/null
+++ b/templates/react-router-monorepo/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"
diff --git a/templates/react-router-monorepo/tsconfig.json b/templates/react-router-monorepo/tsconfig.json
new file mode 100644
index 0000000000..63b9f0ef83
--- /dev/null
+++ b/templates/react-router-monorepo/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
diff --git a/templates/react-router-monorepo/turbo.json b/templates/react-router-monorepo/turbo.json
new file mode 100644
index 0000000000..5dd439a245
--- /dev/null
+++ b/templates/react-router-monorepo/turbo.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": ["build/**"]
+    },
+    "format": {
+      "dependsOn": ["^format"]
+    },
+    "typecheck": {
+      "dependsOn": ["^typecheck"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
diff --git a/templates/start-app/.cta.json b/templates/start-app/.cta.json
index 66693b519e..d79d99693c 100644
--- a/templates/start-app/.cta.json
+++ b/templates/start-app/.cta.json
@@ -13,4 +13,4 @@
     "nitro",
     "start"
   ]
-}
\ No newline at end of file
+}
diff --git a/templates/start-app/.gitignore b/templates/start-app/.gitignore
index 6221ecbd0e..d782054e3d 100644
--- a/templates/start-app/.gitignore
+++ b/templates/start-app/.gitignore
@@ -10,4 +10,5 @@ count.txt
 .wrangler
 .output
 .vinxi
+__unconfig*
 todos.json
diff --git a/templates/start-app/.prettierrc b/templates/start-app/.prettierrc
new file mode 100644
index 0000000000..517e3a2e19
--- /dev/null
+++ b/templates/start-app/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "src/styles.css",
+  "tailwindFunctions": ["cn", "cva"]
+}
diff --git a/templates/start-app/README.md b/templates/start-app/README.md
index 115a35f221..b24a1e8e94 100644
--- a/templates/start-app/README.md
+++ b/templates/start-app/README.md
@@ -1,3 +1,21 @@
 # TanStack Start + shadcn/ui
 
 This is a template for a new TanStack Start project with React, TypeScript, and shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command:
+
+```bash
+npx shadcn@latest add button
+```
+
+This will place the ui components in the `components` directory.
+
+## Using components
+
+To use the components in your app, import them as follows:
+
+```tsx
+import { Button } from "@/components/ui/button";
+```
diff --git a/templates/start-app/eslint.config.js b/templates/start-app/eslint.config.js
index 676b32a87f..68a51d6cc0 100644
--- a/templates/start-app/eslint.config.js
+++ b/templates/start-app/eslint.config.js
@@ -1,5 +1,5 @@
 //  @ts-check
 
-import { tanstackConfig } from '@tanstack/eslint-config'
+import { tanstackConfig } from "@tanstack/eslint-config"
 
 export default [...tanstackConfig]
diff --git a/templates/start-app/package.json b/templates/start-app/package.json
index 6b571f9ca5..77b29faad2 100644
--- a/templates/start-app/package.json
+++ b/templates/start-app/package.json
@@ -8,11 +8,11 @@
     "preview": "vite preview",
     "test": "vitest run",
     "lint": "eslint",
-    "format": "prettier",
-    "check": "prettier --write . && eslint --fix"
+    "format": "prettier --write \"**/*.{ts,tsx,js,jsx}\"",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.0.6",
+    "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-devtools": "^0.7.0",
     "@tanstack/react-router": "^1.132.0",
     "@tanstack/react-router-devtools": "^1.132.0",
@@ -36,6 +36,7 @@
     "@vitejs/plugin-react": "^5.0.4",
     "jsdom": "^27.0.0",
     "prettier": "^3.5.3",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "typescript": "^5.7.2",
     "vite": "^7.1.7",
     "vitest": "^3.0.5",
diff --git a/templates/start-app/prettier.config.js b/templates/start-app/prettier.config.js
deleted file mode 100644
index aea1c4804b..0000000000
--- a/templates/start-app/prettier.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-//  @ts-check
-
-/** @type {import('prettier').Config} */
-const config = {
-  semi: false,
-  singleQuote: true,
-  trailingComma: "all",
-};
-
-export default config;
diff --git a/templates/start-app/public/logo192.png b/templates/start-app/public/logo192.png
deleted file mode 100644
index fc44b0a379..0000000000
Binary files a/templates/start-app/public/logo192.png and /dev/null differ
diff --git a/templates/start-app/public/logo512.png b/templates/start-app/public/logo512.png
deleted file mode 100644
index a4e47a6545..0000000000
Binary files a/templates/start-app/public/logo512.png and /dev/null differ
diff --git a/templates/start-app/public/tanstack-circle-logo.png b/templates/start-app/public/tanstack-circle-logo.png
deleted file mode 100644
index 9db3e67bad..0000000000
Binary files a/templates/start-app/public/tanstack-circle-logo.png and /dev/null differ
diff --git a/templates/start-app/public/tanstack-word-logo-white.svg b/templates/start-app/public/tanstack-word-logo-white.svg
deleted file mode 100644
index b6ec5086c2..0000000000
--- a/templates/start-app/public/tanstack-word-logo-white.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg height="660" viewBox="0 0 3178 660" width="3178" xmlns="http://www.w3.org/2000/svg"><g fill="#fff" transform="translate(.9778)"><g transform="translate(740.0222 38)"><path d="m101.695801 467h101.445312v-264.858398h90.917969v-80.390625h-283.28125v80.390625h90.917969z"/><path d="m241.544434 467h106.708984l68.666992-262.944336h33.017578v-82.304687h-95.703125zm70.820312-68.666992h211.025391l-21.054688-71.538086h-168.916015zm175.136719 68.666992h106.708984l-112.690429-345.249023h-62.685547v82.304687z"/><path d="m600.313965 467h101.445312v-179.443359h41.391602l-66.274414-38.759766 149.536133 218.203125h83.500976v-345.249023h-101.445312v176.572265h-41.391602l66.513672 38.759766-148.818359-215.332031h-84.458008z"/><path d="m1072.01318 473.220703c31.74154 0 58.85743-4.74528 81.34766-14.23584s39.67692-22.96875 51.56006-40.43457 17.82471-38.081869 17.82471-61.848145v-.239257c0-18.66211-3.94776-34.572754-11.84327-47.731934-7.8955-13.15918-19.89827-23.965658-36.0083-32.419434-16.11002-8.453776-36.52669-14.913737-61.25-19.379882l-34.69238-6.220703c-17.22656-3.190105-29.74772-6.898601-37.56348-11.125489-7.81575-4.226888-11.72363-10.248209-11.72363-18.063965v-.239257c0-5.263672 1.59505-10.008952 4.78516-14.23584 3.1901-4.226888 7.93538-7.576498 14.23584-10.048828 6.30045-2.472331 14.07633-3.708497 23.32763-3.708497 9.25131 0 17.5057 1.276042 24.76319 3.828126 7.25748 2.552083 13.07942 6.101074 17.46582 10.646972 4.38639 4.545899 6.8986 10.008952 7.53662 16.38916l.23926 2.392578h93.31054l-.23925-5.263671c-.95704-21.533204-7.01823-40.235189-18.1836-56.105957-11.16536-15.870769-27.27539-28.112793-48.33008-36.726075-21.05468-8.613281-46.97428-12.919922-77.75879-12.919922-27.27539 0-51.59993 4.625651-72.973628 13.876954-21.373698 9.251302-38.161621 22.330729-50.36377 39.238281-12.202148 16.907552-18.303222 36.925456-18.303222 60.053711v.239258c0 26.796875 9.131673 48.728841 27.395019 65.795898s44.541831 28.631185 78.835451 34.692383l34.69238 6.220703c19.14063 3.509115 32.61882 7.33724 40.43457 11.484375 7.81576 4.147135 11.72363 10.288086 11.72363 18.422852v.239257c0 5.742188-1.99381 10.846354-5.98144 15.3125s-9.61019 7.975261-16.86768 10.527344c-7.25748 2.552083-15.99039 3.828125-26.19873 3.828125-9.57031 0-18.3431-1.315918-26.31836-3.947754s-14.59472-6.260579-19.8584-10.88623c-5.26367-4.625651-8.61328-10.048828-10.04882-16.269532l-.47852-2.15332h-93.310546l.239258 4.545899c1.276042 22.649739 8.015137 41.909993 20.217285 57.780761 12.202149 15.870769 29.189453 27.953288 50.961914 36.247559 21.772459 8.294271 47.572429 12.441406 77.399899 12.441406z"/><path d="m1303.73682 467h101.44531v-264.858398h90.91797v-80.390625h-283.28125v80.390625h90.91797z"/><path d="m1443.58545 467h106.70898l68.667-262.944336h33.01757v-82.304687h-95.70312zm70.82031-68.666992h211.02539l-21.05469-71.538086h-168.91601zm175.13672 68.666992h106.70898l-112.69042-345.249023h-62.68555v82.304687z"/><path d="m1941.12451 473.220703c31.74154 0 59.65495-6.300456 83.74024-18.901367 24.08528-12.600912 42.94677-29.667969 56.58447-51.201172 13.63769-21.533203 20.45654-45.777995 20.45654-72.734375v-2.631836h-97.13867l-.23926 2.631836c-1.11653 12.122396-4.46614 22.689616-10.04883 31.70166-5.58268 9.012044-12.91992 15.990397-22.01171 20.935059-9.0918 4.944661-19.45964 7.416992-31.10352 7.416992-13.87695 0-25.9196-3.748372-36.12793-11.245117s-18.06396-18.462728-23.56689-32.897949c-5.50293-14.435222-8.2544-31.861166-8.2544-52.277832v-.239258c0-20.257162 2.75147-37.483724 8.2544-51.679688 5.50293-14.195963 13.31868-25.042317 23.44726-32.539062s22.13135-11.245117 36.0083-11.245117c12.60091 0 23.40739 2.591959 32.41944 7.775878 9.01204 5.18392 16.11002 12.281902 21.29394 21.293946s8.2544 19.260254 9.21143 30.744629l.23925 2.871093h97.13868v-2.15332c0-27.115885-6.69922-51.480306-20.09766-73.093262-13.39844-21.612955-32.10042-38.719889-56.10596-51.3208-24.00553-12.600912-52.03857-18.901368-84.09912-18.901368-35.09114 0-65.43701 6.978353-91.0376 20.935059-25.60058 13.956706-45.33935 34.213867-59.2163 60.771484-13.87696 26.557618-20.81543 58.817546-20.81543 96.779786v.239257c0 37.96224 6.8986 70.262045 20.6958 96.899414 13.7972 26.63737 33.49609 46.974284 59.09668 61.010743 25.60058 14.036458 56.0262 21.054687 91.27685 21.054687z"/><path d="m2214.23975 379.670898 75.36621-101.445312h26.0791l116.04004-156.474609h-106.46973l-106.70898 146.425781h-4.30664zm-99.05274 87.329102h101.44531v-345.249023h-101.44531zm203.84766 0h117.9541l-140.20508-226.577148-74.16992 64.121093z"/></g><path d="m305.114318.62443771c8.717817-1.14462121 17.926803-.36545135 26.712694-.36545135 32.548987 0 64.505987 5.05339923 95.64868 14.63098274 39.74418 12.2236582 76.762804 31.7666864 109.435876 57.477568 40.046637 31.5132839 73.228974 72.8472109 94.520714 119.2362609 39.836383 86.790386 39.544267 191.973146-1.268422 278.398081-26.388695 55.880442-68.724007 102.650458-119.964986 136.75724-41.808813 27.828603-90.706831 44.862601-140.45707 50.89341-63.325458 7.677926-131.784923-3.541603-188.712259-32.729444-106.868873-54.795293-179.52309291-165.076271-180.9604082-285.932068-.27660564-23.300971.08616998-46.74071 4.69884909-69.814998 7.51316071-37.57857 20.61272131-73.903917 40.28618971-106.877282 21.2814003-35.670293 48.7704861-67.1473767 81.6882804-92.5255597 38.602429-29.7610135 83.467691-51.1674988 130.978372-62.05777669 11.473831-2.62966514 22.9946-4.0869914 34.57273-5.4964306l3.658171-.44480576c3.050084-.37153079 6.104217-.74794222 9.162589-1.14972654zm-110.555861 549.44131429c-14.716752 1.577863-30.238964 4.25635-42.869928 12.522173 2.84343.683658 6.102369.004954 9.068638 0 7.124652-.011559 14.317732-.279903 21.434964.032202 17.817402.781913 36.381729 3.63214 53.58741 8.350042 22.029372 6.040631 41.432961 17.928687 62.656049 25.945156 22.389644 8.456554 44.67706 11.084675 68.427 11.084675 11.96813 0 23.845573-.035504 35.450133-3.302696-6.056202-3.225083-14.72582-2.619864-21.434964-3.963236-14.556814-2.915455-28.868774-6.474936-42.869928-11.470264-10.304996-3.676672-20.230803-8.214291-30.11097-12.848661l-6.348531-2.985046c-9.1705-4.309263-18.363277-8.560752-27.845391-12.142608-24.932161-9.418465-52.560181-14.071964-79.144482-11.221737zm22.259385-62.614168c-29.163917 0-58.660076 5.137344-84.915434 18.369597-6.361238 3.206092-12.407546 7.02566-18.137277 11.258891-1.746125 1.290529-4.841829 2.948483-5.487351 5.191839-.654591 2.275558 1.685942 4.182039 3.014086 5.637703 6.562396-3.497556 12.797498-7.199878 19.78612-9.855246 45.19892-17.169893 99.992458-13.570779 145.098218 2.172348 22.494346 7.851335 43.219483 19.592421 65.129314 28.800338 24.503461 10.297807 49.53043 16.975034 75.846795 20.399104 31.04195 4.037546 66.433549.7654 94.808495-13.242161 9.970556-4.921843 23.814245-12.422267 28.030337-23.320339-5.207047.454947-9.892236 2.685918-14.83959 4.224149-7.866632 2.445646-15.827248 4.51974-23.908229 6.138887-27.388113 5.486604-56.512458 6.619429-84.091013 1.639788-25.991939-4.693152-50.142596-14.119246-74.179513-24.03502l-3.068058-1.268177c-2.045137-.846788-4.089983-1.695816-6.135603-2.544467l-3.069142-1.272366c-12.279956-5.085721-24.606928-10.110797-37.210937-14.51024-24.485325-8.546552-50.726667-13.784628-76.671218-13.784628zm51.114145-447.9909432c-34.959602 7.7225298-66.276908 22.7605319-96.457338 41.7180089-17.521434 11.0054099-34.281927 22.2799893-49.465301 36.4444283-22.5792616 21.065423-39.8360564 46.668751-54.8866988 73.411509-15.507372 27.55357-25.4498976 59.665686-30.2554517 90.824149-4.7140432 30.568106-5.4906485 62.70747-.0906864 93.301172 6.7503648 38.248526 19.5989769 74.140579 39.8896436 107.337631 6.8187918-3.184625 11.659796-10.445603 17.3128555-15.336896 11.4149428-9.875888 23.3995608-19.029311 36.2745548-26.928535 4.765981-2.923712 9.662222-5.194315 14.83959-7.275014 1.953055-.785216 5.14604-1.502727 6.06527-3.647828 1.460876-3.406732-1.240754-9.335897-1.704904-12.865654-1.324845-10.095517-2.124534-20.362774-1.874735-30.549941.725492-29.668947 6.269727-59.751557 16.825623-87.521453 7.954845-20.924233 20.10682-39.922168 34.502872-56.971512 4.884699-5.785498 10.077731-11.170545 15.437296-16.512656 3.167428-3.157378 7.098271-5.858983 9.068639-9.908915-10.336599.006606-20.674847 2.987289-30.503603 6.013385-21.174447 6.519522-41.801477 16.19312-59.358362 29.841512-8.008432 6.226409-13.873368 14.387371-21.44733 20.939921-2.32322 2.010516-6.484901 4.704691-9.695199 3.187928-4.8500728-2.29042-4.1014979-11.835213-4.6571581-16.222019-2.1369011-16.873476 4.2548401-38.216325 12.3778671-52.843142 13.039878-23.479694 37.150915-43.528712 65.467327-42.82854 12.228647.302197 22.934587 4.551115 34.625711 7.324555-2.964621-4.211764-6.939158-7.28162-10.717482-10.733763-9.257431-8.459031-19.382979-16.184864-30.503603-22.028985-4.474136-2.350694-9.291232-3.77911-14.015169-5.506421-2.375159-.867783-5.36616-2.062533-6.259834-4.702213-1.654614-4.888817 7.148561-9.416813 10.381943-11.478522 12.499882-7.969406 27.826705-14.525258 42.869928-14.894334 23.509209-.577147 46.479246 12.467678 56.162903 34.665926 3.404469 7.803171 4.411273 16.054969 5.079109 24.382907l.121749 1.56229.174325 2.345587c.01913.260708.038244.521433.057403.782164l.11601 1.56437.120128 1.563971c7.38352-6.019164 12.576553-14.876995 19.78612-21.323859 16.861073-15.07846 39.936636-21.7722 61.831627-14.984333 19.786945 6.133107 36.984382 19.788105 47.105807 37.959541 2.648042 4.754231 10.035685 16.373942 4.698379 21.109183-4.177345 3.707277-9.475079.818243-13.880788-.719162-3.33605-1.16376-6.782939-1.90214-10.241828-2.585698l-1.887262-.369639c-.629089-.122886-1.257979-.246187-1.886079-.372129-11.980496-2.401886-25.91652-2.152533-37.923398-.041284-7.762754 1.364839-15.349083 4.127545-23.083807 5.271929v1.651348c21.149714.175043 41.608563 12.240618 52.043268 30.549941 4.323267 7.585468 6.482428 16.267431 8.138691 24.770223 2.047864 10.50918.608423 21.958802-2.263037 32.201289-.962925 3.433979-2.710699 9.255807-6.817143 10.046802-2.902789.558982-5.36781-2.330878-7.024898-4.279468-4.343878-5.10762-8.475879-9.96341-13.573278-14.374161-12.895604-11.157333-26.530715-21.449361-40.396663-31.373138-7.362086-5.269452-15.425755-12.12007-23.908229-15.340199 2.385052 5.745041 4.721463 11.086326 5.532694 17.339156 2.385876 18.392716-5.314223 35.704625-16.87179 49.540445-3.526876 4.222498-7.29943 8.475545-11.744712 11.755948-1.843407 1.360711-4.156734 3.137561-6.595373 2.752797-7.645687-1.207961-8.555849-12.73272-9.728176-18.637115-3.970415-19.998652-2.375984-39.861068 3.132802-59.448534-4.901187 2.485279-8.443727 7.923994-11.521293 12.385111-6.770975 9.816439-12.645804 20.199291-16.858599 31.375615-16.777806 44.519521-16.616219 96.664142 5.118834 139.523233 2.427098 4.786433 6.110614 4.144058 10.894733 4.144058.720854 0 1.44257-.004515 2.164851-.010924l2.168232-.022283c4.338648-.045438 8.686803-.064635 12.979772.508795 2.227588.297243 5.320818.032202 7.084256 1.673642 2.111344 1.966755.986008 5.338808.4996 7.758859-1.358647 6.765574-1.812904 12.914369-1.812904 19.816178 9.02412-1.398692 11.525415-15.866153 14.724172-23.118874 3.624982-8.216283 7.313444-16.440823 10.667192-24.770223 1.648843-4.093692 3.854171-8.671229 3.275427-13.210785-.649644-5.10184-4.335633-10.510831-6.904531-14.862134-4.86244-8.234447-10.389363-16.70834-13.969002-25.595896-2.861567-7.104926-.197036-15.983399 7.871579-18.521521 4.450228-1.400344 9.198073 1.345848 12.094266 4.562675 6.07269 6.74328 9.992815 16.777697 14.401823 24.692609l34.394873 61.925556c2.920926 5.243856 5.848447 10.481933 8.836976 15.687808 1.165732 2.031158 2.352075 5.167068 4.740424 6.0332 2.127008.77118 5.033095-.325315 7.148561-.748886 5.492297-1.099798 10.97635-2.287117 16.488434-3.28288 6.605266-1.193099 16.673928-.969342 21.434964-6.129805-6.963066-2.205375-15.011895-2.074919-22.259386-1.577863-4.352947.298894-9.178287 1.856116-13.178381-.686135-5.953149-3.783239-9.910373-12.522173-13.552668-18.377854-8.980425-14.439388-17.441465-29.095929-26.041008-43.760726l-1.376261-2.335014-2.765943-4.665258c-1.380597-2.334387-2.750786-4.67476-4.079753-7.036188-1.02723-1.826391-2.549937-4.233231-1.078344-6.24705 1.545791-2.114476 4.91472-2.239146 7.956473-2.243117l.603351.000261c1.195428.001526 2.315572.002427 3.222811-.11692 12.27399-1.615019 24.718635-2.952611 37.098976-2.952611-.963749-3.352237-3.719791-7.141255-2.838484-10.73046 1.972017-8.030506 13.526287-10.543033 18.899867-4.780653 3.60767 3.868283 5.704174 9.192229 8.051303 13.859765 3.097352 6.162006 6.624228 12.118418 9.940876 18.16483 5.805578 10.585967 12.146205 20.881297 18.116667 31.375615.49237.865561.999687 1.726685 1.512269 2.587098l.771613 1.290552c2.577138 4.303168 5.164895 8.635123 6.553094 13.461506-20.735854-.9487-36.30176-25.018751-45.343193-41.283704-.721369 2.604176.450959 4.928448 1.388326 7.431066 1.948109 5.197619 4.276275 10.147535 7.20627 14.862134 4.184765 6.732546 8.982075 13.665732 15.313633 18.553722 11.236043 8.673707 26.05255 8.721596 39.572241 7.794364 8.669619-.595311 19.50252-4.542034 28.030338-1.864372 8.513803 2.673532 11.940924 12.063098 6.884745 19.276187-3.787393 5.403211-8.842747 7.443452-15.128962 8.257566 4.445282 9.53571 10.268996 18.385285 14.490036 28.072919 1.758491 4.035895 3.59118 10.22102 7.8048 12.350433 2.805507 1.416857 6.824562.09743 9.85761.034678-3.043765-8.053625-8.742992-14.887729-11.541904-23.118874 8.533589.390544 16.786875 4.843404 24.732651 7.685374 15.630376 5.590144 31.063836 11.701854 46.475333 17.86913l7.112077 2.848685c6.338978 2.538947 12.71588 5.052299 18.961699 7.812528 2.285297 1.009799 5.449427 3.370401 7.975455 1.917215 2.061054-1.186494 3.394144-4.015253 4.665403-5.931643 3.55573-5.361927 6.775921-10.928622 9.965609-16.513481 12.774414-22.36586 22.143967-46.872692 28.402976-71.833646 20.645168-82.323009 2.934117-173.156241-46.677107-241.922507-19.061454-26.420745-43.033164-49.262193-69.46165-68.1783861-66.13923-47.336721-152.911262-66.294198-232.486917-48.7172481zm135.205158 410.5292842c-17.532977 4.570931-35.601827 8.714164-53.58741 11.040088 2.365265 8.052799 8.145286 15.885969 12.376218 23.118874 1.635653 2.796558 3.3859 6.541816 6.618457 7.755557 3.651364 1.370619 8.063669-.853747 11.508927-1.975838-1.595256-4.364513-4.279573-8.292245-6.476657-12.385112-.905215-1.687677-2.305907-3.685809-1.559805-5.68972 1.410585-3.786541 7.266452-3.563609 10.509727-4.221671 8.54678-1.733916 17.004522-3.898008 25.557073-5.611281 3.150939-.631641 7.538512-2.342438 10.705115-1.285575 2.371037.791232 3.800147 2.744743 5.152304 4.781948l.606196.918752c.80912 1.222827 1.637246 2.41754 2.671212 3.351165 3.457625 3.121874 8.628398 3.60159 13.017619 4.453686-2.678546-6.027421-7.130424-11.301001-9.984571-17.339156-1.659561-3.511592-3.023155-8.677834-6.656381-10.707341-5.005064-2.795733-15.341663 2.461334-20.458024 3.795624zm-110.472507-40.151706c-.825246 10.467897-4.036369 18.984725-9.068639 28.072919 5.76683.729896 11.649079.989984 17.312856 2.39363 4.244947 1.051908 8.156828 3.058296 12.366325 4.211763-2.250671-6.157877-6.426367-11.651913-9.661398-17.339156-3.266358-5.740912-6.189758-12.717032-10.949144-17.339156z"/></g></svg>
\ No newline at end of file
diff --git a/templates/start-app/src/lib/utils.ts b/templates/start-app/src/lib/utils.ts
new file mode 100644
index 0000000000..8b99c9f203
--- /dev/null
+++ b/templates/start-app/src/lib/utils.ts
@@ -0,0 +1,7 @@
+import {  clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+import type {ClassValue} from "clsx";
+
+export function cn(...inputs: Array<ClassValue>) {
+  return twMerge(clsx(inputs))
+}
diff --git a/templates/start-app/src/routeTree.gen.ts b/templates/start-app/src/routeTree.gen.ts
index dceedffdc1..3b361e90d4 100644
--- a/templates/start-app/src/routeTree.gen.ts
+++ b/templates/start-app/src/routeTree.gen.ts
@@ -8,43 +8,43 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-import { Route as rootRouteImport } from './routes/__root'
-import { Route as IndexRouteImport } from './routes/index'
+import { Route as rootRouteImport } from "./routes/__root"
+import { Route as IndexRouteImport } from "./routes/index"
 
 const IndexRoute = IndexRouteImport.update({
-  id: '/',
-  path: '/',
+  id: "/",
+  path: "/",
   getParentRoute: () => rootRouteImport,
 } as any)
 
 export interface FileRoutesByFullPath {
-  '/': typeof IndexRoute
+  "/": typeof IndexRoute
 }
 export interface FileRoutesByTo {
-  '/': typeof IndexRoute
+  "/": typeof IndexRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
-  '/': typeof IndexRoute
+  "/": typeof IndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/'
+  fullPaths: "/"
   fileRoutesByTo: FileRoutesByTo
-  to: '/'
-  id: '__root__' | '/'
+  to: "/"
+  id: "__root__" | "/"
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
 }
 
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface FileRoutesByPath {
-    '/': {
-      id: '/'
-      path: '/'
-      fullPath: '/'
+    "/": {
+      id: "/"
+      path: "/"
+      fullPath: "/"
       preLoaderRoute: typeof IndexRouteImport
       parentRoute: typeof rootRouteImport
     }
@@ -58,9 +58,9 @@ export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
 
-import type { getRouter } from './router.tsx'
-import type { createStart } from '@tanstack/react-start'
-declare module '@tanstack/react-start' {
+import type { getRouter } from "./router.tsx"
+import type { createStart } from "@tanstack/react-start"
+declare module "@tanstack/react-start" {
   interface Register {
     ssr: true
     router: Awaited<ReturnType<typeof getRouter>>
diff --git a/templates/start-app/src/router.tsx b/templates/start-app/src/router.tsx
index efee944f92..d91c3378b3 100644
--- a/templates/start-app/src/router.tsx
+++ b/templates/start-app/src/router.tsx
@@ -1,15 +1,20 @@
-import { createRouter } from '@tanstack/react-router'
+import { createRouter as createTanStackRouter } from "@tanstack/react-router"
+import { routeTree } from "./routeTree.gen"
 
-// Import the generated route tree
-import { routeTree } from './routeTree.gen'
-
-// Create a new router instance
-export const getRouter = () => {
-  const router = createRouter({
+export function getRouter() {
+  const router = createTanStackRouter({
     routeTree,
+
     scrollRestoration: true,
+    defaultPreload: "intent",
     defaultPreloadStaleTime: 0,
   })
 
   return router
 }
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}
diff --git a/templates/start-app/src/routes/__root.tsx b/templates/start-app/src/routes/__root.tsx
index 1810d79e6b..c6988c007e 100644
--- a/templates/start-app/src/routes/__root.tsx
+++ b/templates/start-app/src/routes/__root.tsx
@@ -1,31 +1,30 @@
-import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
-import { TanStackDevtools } from '@tanstack/react-devtools'
+import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools"
+import { TanStackDevtools } from "@tanstack/react-devtools"
 
-import appCss from '../styles.css?url'
+import appCss from "../styles.css?url"
 
 export const Route = createRootRoute({
   head: () => ({
     meta: [
       {
-        charSet: 'utf-8',
+        charSet: "utf-8",
       },
       {
-        name: 'viewport',
-        content: 'width=device-width, initial-scale=1',
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
       },
       {
-        title: 'TanStack Start Starter',
+        title: "TanStack Start Starter",
       },
     ],
     links: [
       {
-        rel: 'stylesheet',
+        rel: "stylesheet",
         href: appCss,
       },
     ],
   }),
-
   shellComponent: RootDocument,
 })
 
@@ -39,11 +38,11 @@ function RootDocument({ children }: { children: React.ReactNode }) {
         {children}
         <TanStackDevtools
           config={{
-            position: 'bottom-right',
+            position: "bottom-right",
           }}
           plugins={[
             {
-              name: 'Tanstack Router',
+              name: "Tanstack Router",
               render: <TanStackRouterDevtoolsPanel />,
             },
           ]}
diff --git a/templates/start-app/src/routes/index.tsx b/templates/start-app/src/routes/index.tsx
index 8f26ade195..7933a4992c 100644
--- a/templates/start-app/src/routes/index.tsx
+++ b/templates/start-app/src/routes/index.tsx
@@ -1,11 +1,19 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router"
+import { Button } from "@/components/ui/button"
 
-export const Route = createFileRoute("/")({ component: App });
+export const Route = createFileRoute("/")({ component: App })
 
 function App() {
   return (
-    <div className="min-h-screen flex flex-col items-center justify-center">
-      <div className="font-medium">Hello World</div>
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="font-medium">Project ready!</h1>
+          <p>You may now add components and start building.</p>
+          <p>We&apos;ve already added the button component for you.</p>
+          <Button className="mt-2">Button</Button>
+        </div>
+      </div>
     </div>
-  );
+  )
 }
diff --git a/templates/start-app/tsconfig.json b/templates/start-app/tsconfig.json
index 0b0985e66d..d5ab49db9c 100644
--- a/templates/start-app/tsconfig.json
+++ b/templates/start-app/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
-  
+
   "compilerOptions": {
     "target": "ES2022",
     "jsx": "react-jsx",
@@ -11,7 +11,7 @@
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": false,
+    "verbatimModuleSyntax": true,
     "noEmit": true,
 
     /* Linting */
@@ -21,6 +21,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
+    "allowJs": true,
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
diff --git a/templates/start-app/vite.config.ts b/templates/start-app/vite.config.ts
index 5294ebcaf9..22d8518874 100644
--- a/templates/start-app/vite.config.ts
+++ b/templates/start-app/vite.config.ts
@@ -1,10 +1,10 @@
-import { defineConfig } from 'vite'
-import { devtools } from '@tanstack/devtools-vite'
-import { tanstackStart } from '@tanstack/react-start/plugin/vite'
-import viteReact from '@vitejs/plugin-react'
-import viteTsConfigPaths from 'vite-tsconfig-paths'
-import tailwindcss from '@tailwindcss/vite'
-import { nitro } from 'nitro/vite'
+import { defineConfig } from "vite"
+import { devtools } from "@tanstack/devtools-vite"
+import { tanstackStart } from "@tanstack/react-start/plugin/vite"
+import viteReact from "@vitejs/plugin-react"
+import viteTsConfigPaths from "vite-tsconfig-paths"
+import tailwindcss from "@tailwindcss/vite"
+import { nitro } from "nitro/vite"
 
 const config = defineConfig({
   plugins: [
@@ -12,7 +12,7 @@ const config = defineConfig({
     nitro(),
     // this is the plugin that enables path aliases
     viteTsConfigPaths({
-      projects: ['./tsconfig.json'],
+      projects: ["./tsconfig.json"],
     }),
     tailwindcss(),
     tanstackStart(),
diff --git a/templates/start-monorepo/.gitignore b/templates/start-monorepo/.gitignore
new file mode 100644
index 0000000000..200f966198
--- /dev/null
+++ b/templates/start-monorepo/.gitignore
@@ -0,0 +1,34 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+dist
+.output
+.nitro
+.tanstack
+.vinxi
+
+# Debug
+npm-debug.log*
+
+# Misc
+.DS_Store
+*.pem
diff --git a/templates/start-monorepo/.npmrc b/templates/start-monorepo/.npmrc
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/start-monorepo/.prettierignore b/templates/start-monorepo/.prettierignore
new file mode 100644
index 0000000000..6b00aa1e10
--- /dev/null
+++ b/templates/start-monorepo/.prettierignore
@@ -0,0 +1,10 @@
+dist/
+node_modules/
+.turbo/
+.output/
+.nitro/
+.tanstack/
+.vinxi/
+coverage/
+pnpm-lock.yaml
+.pnpm-store/
\ No newline at end of file
diff --git a/templates/start-monorepo/.prettierrc b/templates/start-monorepo/.prettierrc
new file mode 100644
index 0000000000..40ce0679f4
--- /dev/null
+++ b/templates/start-monorepo/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "packages/ui/src/styles/globals.css",
+  "tailwindFunctions": ["cn", "cva"]
+}
diff --git a/templates/start-monorepo/README.md b/templates/start-monorepo/README.md
new file mode 100644
index 0000000000..4042488321
--- /dev/null
+++ b/templates/start-monorepo/README.md
@@ -0,0 +1,21 @@
+# shadcn/ui monorepo template
+
+This is a TanStack Start monorepo template with shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command at the root of your `web` app:
+
+```bash
+pnpm dlx shadcn@latest add button -c apps/web
+```
+
+This will place the ui components in the `packages/ui/src/components` directory.
+
+## Using components
+
+To use the components in your app, import them from the `ui` package.
+
+```tsx
+import { Button } from "@workspace/ui/components/button";
+```
diff --git a/templates/start-monorepo/apps/web/components.json b/templates/start-monorepo/apps/web/components.json
new file mode 100644
index 0000000000..963cc37627
--- /dev/null
+++ b/templates/start-monorepo/apps/web/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}
diff --git a/templates/start-monorepo/apps/web/eslint.config.js b/templates/start-monorepo/apps/web/eslint.config.js
new file mode 100644
index 0000000000..68a51d6cc0
--- /dev/null
+++ b/templates/start-monorepo/apps/web/eslint.config.js
@@ -0,0 +1,5 @@
+//  @ts-check
+
+import { tanstackConfig } from "@tanstack/eslint-config"
+
+export default [...tanstackConfig]
diff --git a/templates/start-monorepo/apps/web/package.json b/templates/start-monorepo/apps/web/package.json
new file mode 100644
index 0000000000..a06ef57484
--- /dev/null
+++ b/templates/start-monorepo/apps/web/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "build": "vite build",
+    "preview": "vite preview",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-router": "^1.132.0",
+    "@tanstack/react-start": "^1.132.0",
+    "@tanstack/router-plugin": "^1.132.0",
+    "@workspace/ui": "workspace:*",
+    "nitro": "latest",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.1.18",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "devDependencies": {
+    "@tanstack/eslint-config": "^0.3.0",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.2",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.4"
+  }
+}
diff --git a/templates/start-monorepo/apps/web/public/favicon.ico b/templates/start-monorepo/apps/web/public/favicon.ico
new file mode 100644
index 0000000000..a11777cc47
Binary files /dev/null and b/templates/start-monorepo/apps/web/public/favicon.ico differ
diff --git a/templates/start-monorepo/apps/web/public/manifest.json b/templates/start-monorepo/apps/web/public/manifest.json
new file mode 100644
index 0000000000..078ef50116
--- /dev/null
+++ b/templates/start-monorepo/apps/web/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "TanStack App",
+  "name": "Create TanStack App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/templates/start-monorepo/apps/web/public/robots.txt b/templates/start-monorepo/apps/web/public/robots.txt
new file mode 100644
index 0000000000..e9e57dc4d4
--- /dev/null
+++ b/templates/start-monorepo/apps/web/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/templates/start-monorepo/apps/web/src/routeTree.gen.ts b/templates/start-monorepo/apps/web/src/routeTree.gen.ts
new file mode 100644
index 0000000000..3b361e90d4
--- /dev/null
+++ b/templates/start-monorepo/apps/web/src/routeTree.gen.ts
@@ -0,0 +1,68 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+import { Route as rootRouteImport } from "./routes/__root"
+import { Route as IndexRouteImport } from "./routes/index"
+
+const IndexRoute = IndexRouteImport.update({
+  id: "/",
+  path: "/",
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  "/": typeof IndexRoute
+}
+export interface FileRoutesByTo {
+  "/": typeof IndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  "/": typeof IndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: "/"
+  fileRoutesByTo: FileRoutesByTo
+  to: "/"
+  id: "__root__" | "/"
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+declare module "@tanstack/react-router" {
+  interface FileRoutesByPath {
+    "/": {
+      id: "/"
+      path: "/"
+      fullPath: "/"
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from "./router.tsx"
+import type { createStart } from "@tanstack/react-start"
+declare module "@tanstack/react-start" {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}
diff --git a/templates/start-monorepo/apps/web/src/router.tsx b/templates/start-monorepo/apps/web/src/router.tsx
new file mode 100644
index 0000000000..d91c3378b3
--- /dev/null
+++ b/templates/start-monorepo/apps/web/src/router.tsx
@@ -0,0 +1,20 @@
+import { createRouter as createTanStackRouter } from "@tanstack/react-router"
+import { routeTree } from "./routeTree.gen"
+
+export function getRouter() {
+  const router = createTanStackRouter({
+    routeTree,
+
+    scrollRestoration: true,
+    defaultPreload: "intent",
+    defaultPreloadStaleTime: 0,
+  })
+
+  return router
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>
+  }
+}
diff --git a/templates/start-monorepo/apps/web/src/routes/__root.tsx b/templates/start-monorepo/apps/web/src/routes/__root.tsx
new file mode 100644
index 0000000000..259f4a49ee
--- /dev/null
+++ b/templates/start-monorepo/apps/web/src/routes/__root.tsx
@@ -0,0 +1,41 @@
+import { HeadContent, Scripts, createRootRoute } from "@tanstack/react-router"
+
+import appCss from "@workspace/ui/globals.css?url"
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      {
+        charSet: "utf-8",
+      },
+      {
+        name: "viewport",
+        content: "width=device-width, initial-scale=1",
+      },
+      {
+        title: "TanStack Start Starter",
+      },
+    ],
+    links: [
+      {
+        rel: "stylesheet",
+        href: appCss,
+      },
+    ],
+  }),
+  shellComponent: RootDocument,
+})
+
+function RootDocument({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  )
+}
diff --git a/templates/start-monorepo/apps/web/src/routes/index.tsx b/templates/start-monorepo/apps/web/src/routes/index.tsx
new file mode 100644
index 0000000000..4a2709124e
--- /dev/null
+++ b/templates/start-monorepo/apps/web/src/routes/index.tsx
@@ -0,0 +1,19 @@
+import { createFileRoute } from "@tanstack/react-router"
+import { Button } from "@workspace/ui/components/button"
+
+export const Route = createFileRoute("/")({ component: App })
+
+function App() {
+  return (
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="font-medium">Project ready!</h1>
+          <p>You may now add components and start building.</p>
+          <p>We&apos;ve already added the button component for you.</p>
+          <Button className="mt-2">Button</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/templates/start-monorepo/apps/web/tsconfig.json b/templates/start-monorepo/apps/web/tsconfig.json
new file mode 100644
index 0000000000..ca970115b2
--- /dev/null
+++ b/templates/start-monorepo/apps/web/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "include": ["**/*.ts", "**/*.tsx", "eslint.config.js", "prettier.config.js", "vite.config.js"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    /* Linting */
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "allowJs": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"]
+    }
+  }
+}
diff --git a/templates/start-monorepo/apps/web/vite.config.ts b/templates/start-monorepo/apps/web/vite.config.ts
new file mode 100644
index 0000000000..402be255e8
--- /dev/null
+++ b/templates/start-monorepo/apps/web/vite.config.ts
@@ -0,0 +1,20 @@
+import { defineConfig } from "vite"
+import { tanstackStart } from "@tanstack/react-start/plugin/vite"
+import viteReact from "@vitejs/plugin-react"
+import viteTsConfigPaths from "vite-tsconfig-paths"
+import tailwindcss from "@tailwindcss/vite"
+import { nitro } from "nitro/vite"
+
+const config = defineConfig({
+  plugins: [
+    nitro(),
+    viteTsConfigPaths({
+      projects: ["./tsconfig.json"],
+    }),
+    tailwindcss(),
+    tanstackStart(),
+    viteReact(),
+  ],
+})
+
+export default config
diff --git a/templates/start-monorepo/package.json b/templates/start-monorepo/package.json
new file mode 100644
index 0000000000..61cf76f04b
--- /dev/null
+++ b/templates/start-monorepo/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "start-monorepo",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "format": "turbo format",
+    "typecheck": "turbo typecheck"
+  },
+  "devDependencies": {
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "turbo": "^2.8.8",
+    "typescript": "5.9.3"
+  },
+  "packageManager": "pnpm@9.0.6",
+  "engines": {
+    "node": ">=20"
+  }
+}
diff --git a/templates/start-monorepo/packages/ui/components.json b/templates/start-monorepo/packages/ui/components.json
new file mode 100644
index 0000000000..e2686f3797
--- /dev/null
+++ b/templates/start-monorepo/packages/ui/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  }
+}
diff --git a/templates/start-monorepo/packages/ui/eslint.config.ts b/templates/start-monorepo/packages/ui/eslint.config.ts
new file mode 100644
index 0000000000..d734ef382e
--- /dev/null
+++ b/templates/start-monorepo/packages/ui/eslint.config.ts
@@ -0,0 +1,3 @@
+import { tanstackConfig } from "@tanstack/eslint-config"
+
+export default [...tanstackConfig]
diff --git a/templates/start-monorepo/packages/ui/package.json b/templates/start-monorepo/packages/ui/package.json
new file mode 100644
index 0000000000..3cf2046add
--- /dev/null
+++ b/templates/start-monorepo/packages/ui/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@workspace/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@turbo/gen": "^2.8.1",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@tanstack/eslint-config": "^0.3.0",
+    "eslint": "^9.39.2",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}
diff --git a/templates/start-monorepo/packages/ui/src/components/.gitkeep b/templates/start-monorepo/packages/ui/src/components/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/start-monorepo/packages/ui/src/hooks/.gitkeep b/templates/start-monorepo/packages/ui/src/hooks/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/start-monorepo/packages/ui/src/lib/.gitkeep b/templates/start-monorepo/packages/ui/src/lib/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/start-monorepo/packages/ui/src/styles/globals.css b/templates/start-monorepo/packages/ui/src/styles/globals.css
new file mode 100644
index 0000000000..e0c4ce5156
--- /dev/null
+++ b/templates/start-monorepo/packages/ui/src/styles/globals.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
diff --git a/templates/start-monorepo/packages/ui/tsconfig.json b/templates/start-monorepo/packages/ui/tsconfig.json
new file mode 100644
index 0000000000..db4b78de10
--- /dev/null
+++ b/templates/start-monorepo/packages/ui/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@workspace/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/start-monorepo/packages/ui/tsconfig.lint.json b/templates/start-monorepo/packages/ui/tsconfig.lint.json
new file mode 100644
index 0000000000..08a184e477
--- /dev/null
+++ b/templates/start-monorepo/packages/ui/tsconfig.lint.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/start-monorepo/pnpm-lock.yaml b/templates/start-monorepo/pnpm-lock.yaml
new file mode 100644
index 0000000000..70968538be
--- /dev/null
+++ b/templates/start-monorepo/pnpm-lock.yaml
@@ -0,0 +1,5609 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      prettier:
+        specifier: ^3.8.1
+        version: 3.8.1
+      prettier-plugin-tailwindcss:
+        specifier: ^0.7.2
+        version: 0.7.2(prettier@3.8.1)
+      turbo:
+        specifier: ^2.8.8
+        version: 2.8.11
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+
+  apps/web:
+    dependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.18
+        version: 4.2.1(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@tanstack/react-router':
+        specifier: ^1.132.0
+        version: 1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/react-start':
+        specifier: ^1.132.0
+        version: 1.163.2(crossws@0.4.4(srvx@0.10.1))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@tanstack/router-plugin':
+        specifier: ^1.132.0
+        version: 1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@workspace/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      nitro:
+        specifier: latest
+        version: 3.0.1-alpha.2(rollup@4.59.0)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      react:
+        specifier: ^19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
+      tailwindcss:
+        specifier: ^4.1.18
+        version: 4.2.1
+      vite-tsconfig-paths:
+        specifier: ^5.1.4
+        version: 5.1.4(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+    devDependencies:
+      '@tanstack/eslint-config':
+        specifier: ^0.3.0
+        version: 0.3.4(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@types/node':
+        specifier: ^25.1.0
+        version: 25.3.0
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.1
+        version: 5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      eslint:
+        specifier: ^9.39.2
+        version: 9.39.3(jiti@2.6.1)
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.2.4
+        version: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+
+  packages/ui:
+    dependencies:
+      react:
+        specifier: ^19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
+      zod:
+        specifier: ^3.25.76
+        version: 3.25.76
+    devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.18
+        version: 4.2.1(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@tanstack/eslint-config':
+        specifier: ^0.3.0
+        version: 0.3.4(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@turbo/gen':
+        specifier: ^2.8.1
+        version: 2.8.11(@types/node@25.3.0)
+      '@types/node':
+        specifier: ^25.1.0
+        version: 25.3.0
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      eslint:
+        specifier: ^9.39.2
+        version: 9.39.3(jiti@2.6.1)
+      tailwindcss:
+        specifier: ^4.1.18
+        version: 4.2.1
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+
+packages:
+
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.6':
+    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-syntax-jsx@7.28.6':
+    resolution: {integrity: sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-syntax-typescript@7.28.6':
+    resolution: {integrity: sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1':
+    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1':
+    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime-corejs3@7.29.0':
+    resolution: {integrity: sha512-TgUkdp71C9pIbBcHudc+gXZnihEDOjUAmXO1VO4HHGES7QLZcShR0stfKIxLSNIYx2fqhmJChOjm/wkF8wv4gA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
+  '@emnapi/core@1.8.1':
+    resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
+
+  '@emnapi/runtime@1.8.1':
+    resolution: {integrity: sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==}
+
+  '@emnapi/wasi-threads@1.1.0':
+    resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
+
+  '@esbuild/aix-ppc64@0.27.3':
+    resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.3':
+    resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.3':
+    resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.3':
+    resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.3':
+    resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.3':
+    resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.3':
+    resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.3':
+    resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.3':
+    resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.3':
+    resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.3':
+    resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.3':
+    resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.3':
+    resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.3':
+    resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.3':
+    resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.3':
+    resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.3':
+    resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.3':
+    resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.3':
+    resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.3':
+    resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.3':
+    resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.3':
+    resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.4':
+    resolution: {integrity: sha512-4h4MVF8pmBsncB60r0wSJiIeUKTSD4m7FmTFThG8RHlsg9ajqckLm9OraguFGZE4vVdpiI1Q4+hFnisopmG6gQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.39.3':
+    resolution: {integrity: sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@inquirer/ansi@1.0.2':
+    resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
+    engines: {node: '>=18'}
+
+  '@inquirer/checkbox@4.3.2':
+    resolution: {integrity: sha512-VXukHf0RR1doGe6Sm4F0Em7SWYLTHSsbGfJdS9Ja2bX5/D5uwVOEjr07cncLROdBvmnvCATYEWlHqYmXv2IlQA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/confirm@5.1.21':
+    resolution: {integrity: sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@10.3.2':
+    resolution: {integrity: sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/editor@4.2.23':
+    resolution: {integrity: sha512-aLSROkEwirotxZ1pBaP8tugXRFCxW94gwrQLxXfrZsKkfjOYC1aRvAZuhpJOb5cu4IBTJdsCigUlf2iCOu4ZDQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/expand@4.0.23':
+    resolution: {integrity: sha512-nRzdOyFYnpeYTTR2qFwEVmIWypzdAx/sIkCMeTNTcflFOovfqUk+HcFhQQVBftAh9gmGrpFj6QcGEqrDMDOiew==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@1.0.15':
+    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
+    engines: {node: '>=18'}
+
+  '@inquirer/input@4.3.1':
+    resolution: {integrity: sha512-kN0pAM4yPrLjJ1XJBjDxyfDduXOuQHrBB8aLDMueuwUGn+vNpF7Gq7TvyVxx8u4SHlFFj4trmj+a2cbpG4Jn1g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/number@3.0.23':
+    resolution: {integrity: sha512-5Smv0OK7K0KUzUfYUXDXQc9jrf8OHo4ktlEayFlelCjwMXz0299Y8OrI+lj7i4gCBY15UObk76q0QtxjzFcFcg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/password@4.0.23':
+    resolution: {integrity: sha512-zREJHjhT5vJBMZX/IUbyI9zVtVfOLiTO66MrF/3GFZYZ7T4YILW5MSkEYHceSii/KtRk+4i3RE7E1CUXA2jHcA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/prompts@7.10.1':
+    resolution: {integrity: sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/rawlist@4.1.11':
+    resolution: {integrity: sha512-+LLQB8XGr3I5LZN/GuAHo+GpDJegQwuPARLChlMICNdwW7OwV2izlCSCxN6cqpL0sMXmbKbFcItJgdQq5EBXTw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/search@3.2.2':
+    resolution: {integrity: sha512-p2bvRfENXCZdWF/U2BXvnSI9h+tuA8iNqtUKb9UWbmLYCRQxd8WkvwWvYn+3NgYaNwdUkHytJMGG4MMLucI1kA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/select@4.4.2':
+    resolution: {integrity: sha512-l4xMuJo55MAe+N7Qr4rX90vypFwCajSakx59qe/tMaC1aEHWLyw68wF4o0A4SLAY4E0nd+Vt+EyskeDIqu1M6w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/type@3.0.10':
+    resolution: {integrity: sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    resolution: {integrity: sha512-ZVWUcfwY4E/yPitQJl481FjFo3K22D6qF0DuFH6Y/nbnE11GY5uguDxZMGXPQ8WQ0128MXQD7TnfHyK4oWoIJQ==}
+
+  '@napi-rs/wasm-runtime@1.1.1':
+    resolution: {integrity: sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A==}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@oozcitak/dom@2.0.2':
+    resolution: {integrity: sha512-GjpKhkSYC3Mj4+lfwEyI1dqnsKTgwGy48ytZEhm4A/xnH/8z9M3ZVXKr/YGQi3uCLs1AEBS+x5T2JPiueEDW8w==}
+    engines: {node: '>=20.0'}
+
+  '@oozcitak/infra@2.0.2':
+    resolution: {integrity: sha512-2g+E7hoE2dgCz/APPOEK5s3rMhJvNxSMBrP+U+j1OWsIbtSpWxxlUjq1lU8RIsFJNYv7NMlnVsCuHcUzJW+8vA==}
+    engines: {node: '>=20.0'}
+
+  '@oozcitak/url@3.0.0':
+    resolution: {integrity: sha512-ZKfET8Ak1wsLAiLWNfFkZc/BraDccuTJKR6svTYc7sVjbR+Iu0vtXdiDMY4o6jaFl5TW2TlS7jbLl4VovtAJWQ==}
+    engines: {node: '>=20.0'}
+
+  '@oozcitak/util@10.0.0':
+    resolution: {integrity: sha512-hAX0pT/73190NLqBPPWSdBVGtbY6VOhWYK3qqHqtXQ1gK7kS2yz4+ivsN07hpJ6I3aeMtKP6J6npsEKOAzuTLA==}
+    engines: {node: '>=20.0'}
+
+  '@oxc-minify/binding-android-arm-eabi@0.110.0':
+    resolution: {integrity: sha512-43fMTO8/5bMlqfOiNSZNKUzIqeLIYuB9Hr1Ohyf58B1wU11S2dPGibTXOGNaWsfgHy99eeZ1bSgeIHy/fEYqbw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-minify/binding-android-arm64@0.110.0':
+    resolution: {integrity: sha512-5oQrnn9eK/ccOp80PTrNj0Vq893NPNNRryjGpOIVsYNgWFuoGCfpnKg68oEFcN8bArizYAqw4nvgHljEnar69w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-minify/binding-darwin-arm64@0.110.0':
+    resolution: {integrity: sha512-dqBDgTG9tF2z2lrZp9E8wU+Godz1i8gCGSei2eFKS2hRploBOD5dmOLp1j4IMornkPvSQmbwB3uSjPq7fjx4EA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-minify/binding-darwin-x64@0.110.0':
+    resolution: {integrity: sha512-U0AqabqaooDOpYmeeOye8wClv8PSScELXgOfYqyqgrwH9J9KrpCE1jL8Rlqgz68QbL4mPw3V6sKiiHssI4CLeQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-minify/binding-freebsd-x64@0.110.0':
+    resolution: {integrity: sha512-H0w8o/Wo1072WSdLfhwwrpFpwZnPpjQODlHuRYkTfsSSSJbTxQtjJd4uxk7YJsRv5RQp69y0I7zvdH6f8Xueyw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-minify/binding-linux-arm-gnueabihf@0.110.0':
+    resolution: {integrity: sha512-qd6sW0AvEVYZhbVVMGtmKZw3b1zDYGIW+54Uh42moWRAj6i4Jhk/LGr6r9YNZpOINeuvZfkFuEeDD/jbu7xPUA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-arm-musleabihf@0.110.0':
+    resolution: {integrity: sha512-7WXP0aXMrWSn0ScppUBi3jf68ebfBG0eri8kxLmBOVSBj6jw1repzkHMITJMBeLr5d0tT/51qFEptiAk2EP2iA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-arm64-gnu@0.110.0':
+    resolution: {integrity: sha512-LYfADrq5x1W5gs+u9OIbMbDQNYkAECTXX0ufnAuf3oGmO51rF98kGFR5qJqC/6/csokDyT3wwTpxhE0TkcF/Og==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-arm64-musl@0.110.0':
+    resolution: {integrity: sha512-53GjCVY8kvymk9P6qNDh6zyblcehF5QHstq9QgCjv13ONGRnSHjeds0PxIwiihD7h295bxsWs84DN39syLPH4Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-ppc64-gnu@0.110.0':
+    resolution: {integrity: sha512-li8XcN81dxbJDMBESnTgGhoiAQ+CNIdM0QGscZ4duVPjCry1RpX+5FJySFbGqG3pk4s9ZzlL/vtQtbRzZIZOzg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-riscv64-gnu@0.110.0':
+    resolution: {integrity: sha512-SweKfsnLKShu6UFV8mwuj1d1wmlNoL/FlAxPUzwjEBgwiT2HQkY24KnjBH+TIA+//1O83kzmWKvvs4OuEhdIEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-riscv64-musl@0.110.0':
+    resolution: {integrity: sha512-oH8G4aFMP8XyTsEpdANC5PQyHgSeGlopHZuW1rpyYcaErg5YaK0vXjQ4EM5HVvPm+feBV24JjxgakTnZoF3aOQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-s390x-gnu@0.110.0':
+    resolution: {integrity: sha512-W9na+Vza7XVUlpf8wMt4QBfH35KeTENEmnpPUq3NSlbQHz8lSlSvhAafvo43NcKvHAXV3ckD/mUf2VkqSdbklg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-x64-gnu@0.110.0':
+    resolution: {integrity: sha512-XJdA4mmmXOjJxSRgNJXsDP7Xe8h3gQhmb56hUcCrvq5d+h5UcEi2pR8rxsdIrS8QmkLuBA3eHkGK8E27D7DTgQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-minify/binding-linux-x64-musl@0.110.0':
+    resolution: {integrity: sha512-QqzvALuOTtSckI8x467R4GNArzYDb/yEh6aNzLoeaY1O7vfT7SPDwlOEcchaTznutpeS9Dy8gUS/AfqtUHaufw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-minify/binding-openharmony-arm64@0.110.0':
+    resolution: {integrity: sha512-gAMssLs2Q3+uhLZxanh1DF+27Kaug3cf4PXb9AB7XK81DR+LVcKySXaoGYoOs20Co0fFSphd6rRzKge2qDK3dA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-minify/binding-wasm32-wasi@0.110.0':
+    resolution: {integrity: sha512-7Wqi5Zjl022bs2zXq+ICdalDPeDuCH/Nhbi8q2isLihAonMVIT0YH2hqqnNEylRNGYck+FJ6gRZwMpGCgrNxPg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-minify/binding-win32-arm64-msvc@0.110.0':
+    resolution: {integrity: sha512-ZPx+0Tj4dqn41ecyoGotlvekQKy6JxJCixn9Rw7h/dafZ3eDuBcEVh3c2ZoldXXsyMIt5ywI8IWzFZsjNedd5Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-minify/binding-win32-ia32-msvc@0.110.0':
+    resolution: {integrity: sha512-H0Oyd3RWBfpEyvJIrFK94RYiY7KKSQl11Ym7LMDwLEagelIAfRCkt1amHZhFa/S3ZRoaOJFXzEw4YKeSsjVFsg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-minify/binding-win32-x64-msvc@0.110.0':
+    resolution: {integrity: sha512-Hr3nK90+qXKJ2kepXwFIcNfQQIOBecB4FFCyaMMypthoEEhVP08heRynj4eSXZ8NL9hLjs3fQzH8PJXfpznRnQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@oxc-transform/binding-android-arm-eabi@0.110.0':
+    resolution: {integrity: sha512-sE9dxvqqAax1YYJ3t7j+h5ZSI9jl6dYuDfngl6ieZUrIy5P89/8JKVgAzgp8o3wQSo7ndpJvYsi1K4ZqrmbP7w==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-transform/binding-android-arm64@0.110.0':
+    resolution: {integrity: sha512-nqtbP4aMCtsCZ6qpHlHaQoWVHSBtlKzwaAgwEOvR+9DWqHjk31BHvpGiDXlMeed6CVNpl3lCbWgygb3RcSjcfw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-transform/binding-darwin-arm64@0.110.0':
+    resolution: {integrity: sha512-oeSeHnL4Z4cMXtc8V0/rwoVn0dgwlS9q0j6LcHn9dIhtFEdp3W0iSBF8YmMQA+E7sILeLDjsHmHE4Kp0sOScXw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-transform/binding-darwin-x64@0.110.0':
+    resolution: {integrity: sha512-nL9K5x7OuZydobAGPylsEW9d4APs2qEkIBLMgQPA+kY8dtVD3IR87QsTbs4l4DBQYyun/+ay6qVCDlxqxdX2Jg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-transform/binding-freebsd-x64@0.110.0':
+    resolution: {integrity: sha512-GS29zXXirDQhZEUq8xKJ1azAWMuUy3Ih3W5Bc5ddk12LRthO5wRLFcKIyeHpAXCoXymQ+LmxbMtbPf84GPxouw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.110.0':
+    resolution: {integrity: sha512-glzDHak8ISyZJemCUi7RCvzNSl+MQ1ly9RceT2qRufhUsvNZ4C/2QLJ1HJwd2N6E88bO4laYn+RofdRzNnGGEA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-arm-musleabihf@0.110.0':
+    resolution: {integrity: sha512-8JThvgJ2FRoTVfbp7e4wqeZqCZbtudM06SfZmNzND9kPNu/LVYygIR+72RWs+xm4bWkuYHg/islo/boNPtMT5Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-arm64-gnu@0.110.0':
+    resolution: {integrity: sha512-IRh21Ub/g4bkHoErZ0AUWMlWfoZaS0A6EaOVtbcY70RSYIMlrsbjiFwJCzM+b/1DD1rXbH5tsGcH7GweTbfRqg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-arm64-musl@0.110.0':
+    resolution: {integrity: sha512-e5JN94/oy+wevk76q+LMr+2klTTcO60uXa+Wkq558Ms7mdF2TvkKFI++d/JeiuIwJLTi/BxQ4qdT5FWcsHM/ug==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-ppc64-gnu@0.110.0':
+    resolution: {integrity: sha512-Y3/Tnnz1GvDpmv8FXBIKtdZPsdZklOEPdrL6NHrN5i2u54BOkybFaDSptgWF53wOrJlTrcmAVSE6fRKK9XCM2Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-riscv64-gnu@0.110.0':
+    resolution: {integrity: sha512-Y0E35iA9/v9jlkNcP6tMJ+ZFOS0rLsWDqG6rU9z+X2R3fBFJBO9UARIK6ngx8upxk81y1TFR2CmBFhupfYdH6Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-riscv64-musl@0.110.0':
+    resolution: {integrity: sha512-JOUSYFfHjBUs7xp2FHmZHb8eTYD/oEu0NklS6JgUauqnoXZHiTLPLVW2o2uVCqldnabYHcomuwI2iqVFYJNhTw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-s390x-gnu@0.110.0':
+    resolution: {integrity: sha512-7blgoXF9D3Ngzb7eun23pNrHJpoV/TtE6LObwlZ3Nmb4oZ6Z+yMvBVaoW68NarbmvNGfZ95zrOjgm6cVETLYBA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-x64-gnu@0.110.0':
+    resolution: {integrity: sha512-YQ2joGWCVDZVEU2cD/r/w49hVjDm/Qu1BvC/7zs8LvprzdLS/HyMXGF2oA0puw0b+AqgYaz3bhwKB2xexHyITQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-transform/binding-linux-x64-musl@0.110.0':
+    resolution: {integrity: sha512-fkjr5qE632ULmNgvFXWDR/8668WxERz3tU7TQFp6JebPBneColitjSkdx6VKNVXEoMmQnOvBIGeP5tUNT384oA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-transform/binding-openharmony-arm64@0.110.0':
+    resolution: {integrity: sha512-HWH9Zj+lMrdSTqFRCZsvDWMz7OnMjbdGsm3xURXWfRZpuaz0bVvyuZNDQXc4FyyhRDsemICaJbU1bgeIpUJDGw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-transform/binding-wasm32-wasi@0.110.0':
+    resolution: {integrity: sha512-ejdxHmYfIcHDPhZUe3WklViLt9mDEJE5BzcW7+R1vc5i/5JFA8D0l7NUSsHBJ7FB8Bu9gF+5iMDm6cXGAgaghw==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-transform/binding-win32-arm64-msvc@0.110.0':
+    resolution: {integrity: sha512-9VTwpXCZs7xkV+mKhQ62dVk7KLnLXtEUxNS2T4nLz3iMl1IJbA4h5oltK0JoobtiUAnbkV53QmMVGW8+Nh3bDQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-transform/binding-win32-ia32-msvc@0.110.0':
+    resolution: {integrity: sha512-5y0fzuNON7/F2hh2P94vANFaRPJ/3DI1hVl5rseCT8VUVqOGIjWaza0YS/D1g6t1WwycW2LWDMi2raOKoWU5GQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
+  '@oxc-transform/binding-win32-x64-msvc@0.110.0':
+    resolution: {integrity: sha512-QROrowwlrApI1fEScMknGWKM6GTM/Z2xwMnDqvSaEmzNazBsDUlE08Jasw610hFEsYAVU2K5sp/YaCa9ORdP4A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.0.0-beta.40':
+    resolution: {integrity: sha512-s3GeJKSQOwBlzdUrj4ISjJj5SfSh+aqn0wjOar4Bx95iV1ETI7F6S/5hLcfAxZ9kXDcyrAkxPlqmd1ZITttf+w==}
+
+  '@rolldown/pluginutils@1.0.0-rc.3':
+    resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    resolution: {integrity: sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    resolution: {integrity: sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    resolution: {integrity: sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    resolution: {integrity: sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    resolution: {integrity: sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    resolution: {integrity: sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    resolution: {integrity: sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    resolution: {integrity: sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    resolution: {integrity: sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@stylistic/eslint-plugin@5.9.0':
+    resolution: {integrity: sha512-FqqSkvDMYJReydrMhlugc71M76yLLQWNfmGq+SIlLa7N3kHp8Qq8i2PyWrVNAfjOyOIY+xv9XaaYwvVW7vroMA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^9.0.0 || ^10.0.0
+
+  '@tailwindcss/node@4.2.1':
+    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.1':
+    resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.1':
+    resolution: {integrity: sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
+  '@tanstack/eslint-config@0.3.4':
+    resolution: {integrity: sha512-5Ou1XWJRCTx5G8WoCbT7+6nQ4iNdsISzBAc4lXpFy2fEOO7xioOSPvcPIv+r9V0drPPETou2tr6oLGZZ909FKg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: ^8.0.0 || ^9.0.0
+
+  '@tanstack/history@1.161.4':
+    resolution: {integrity: sha512-Kp/WSt411ZWYvgXy6uiv5RmhHrz9cAml05AQPrtdAp7eUqvIDbMGPnML25OKbzR3RJ1q4wgENxDTvlGPa9+Mww==}
+    engines: {node: '>=20.19'}
+
+  '@tanstack/react-router@1.163.2':
+    resolution: {integrity: sha512-1LosUlpL2mRMWxUZXmkEg5+Br5P5j9TrLngqRgHVbZoFkjnbcj1x9fQN2OVLrBv9Npw97NRsHeJljnAH/c7oSw==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      react: '>=18.0.0 || >=19.0.0'
+      react-dom: '>=18.0.0 || >=19.0.0'
+
+  '@tanstack/react-start-client@1.163.2':
+    resolution: {integrity: sha512-JBlJflRK9lIkuOySEdwrAAyhbIc3DCrUsLUT59+oX7DntBsFnfWLEhXNtZ58PcSR7G6fprGLF4ASW6VAMmA87g==}
+    engines: {node: '>=22.12.0'}
+    peerDependencies:
+      react: '>=18.0.0 || >=19.0.0'
+      react-dom: '>=18.0.0 || >=19.0.0'
+
+  '@tanstack/react-start-server@1.163.2':
+    resolution: {integrity: sha512-Qjg4hZf10GlgH+Mod/yrStHvYOb2XkDjzdMUJ+KX63XlZBT/+0mhg90NgqXAIfa1D3g45caCFrGg4Xd+imYpig==}
+    engines: {node: '>=22.12.0'}
+    peerDependencies:
+      react: '>=18.0.0 || >=19.0.0'
+      react-dom: '>=18.0.0 || >=19.0.0'
+
+  '@tanstack/react-start@1.163.2':
+    resolution: {integrity: sha512-Y/dxoxH1+YLeRECvMlcHaCgL6YdKXO5D5P5ZInjGAha/GJ0v3KNwS5u+45UZfmQRZXqmilsgaeLEMVV5AvgBnw==}
+    engines: {node: '>=22.12.0'}
+    peerDependencies:
+      react: '>=18.0.0 || >=19.0.0'
+      react-dom: '>=18.0.0 || >=19.0.0'
+      vite: '>=7.0.0'
+
+  '@tanstack/react-store@0.9.1':
+    resolution: {integrity: sha512-YzJLnRvy5lIEFTLWBAZmcOjK3+2AepnBv/sr6NZmiqJvq7zTQggyK99Gw8fqYdMdHPQWXjz0epFKJXC+9V2xDA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  '@tanstack/router-core@1.163.2':
+    resolution: {integrity: sha512-mD0Pav6kcpS317XSJN+wCZaxLLngDhlwgzPNca56dWCp8YKPEvhhj/Zdl+LdRlJQ2VJ5BOy7FbOV1hErc9Nj5Q==}
+    engines: {node: '>=20.19'}
+
+  '@tanstack/router-generator@1.163.2':
+    resolution: {integrity: sha512-6LjU3+8iKEgt8iOaYCmCnQCs0jsOhc7z8fa1yAYlj3s82uYWv3g5CB9mwv8wZXblXBQWOl+hW4PI6WNjP/CK9w==}
+    engines: {node: '>=20.19'}
+
+  '@tanstack/router-plugin@1.163.2':
+    resolution: {integrity: sha512-SrVILMz/c15RYWxIMG+bf/glLbP/O9DUxOg0E7bo9pooBxGPvgWSlEzHNjhVekLhK5l7fiuQZzKsfksVeIEqDA==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@rsbuild/core': '>=1.0.2'
+      '@tanstack/react-router': ^1.163.2
+      vite: '>=5.0.0 || >=6.0.0 || >=7.0.0'
+      vite-plugin-solid: ^2.11.10
+      webpack: '>=5.92.0'
+    peerDependenciesMeta:
+      '@rsbuild/core':
+        optional: true
+      '@tanstack/react-router':
+        optional: true
+      vite:
+        optional: true
+      vite-plugin-solid:
+        optional: true
+      webpack:
+        optional: true
+
+  '@tanstack/router-utils@1.161.4':
+    resolution: {integrity: sha512-r8TpjyIZoqrXXaf2DDyjd44gjGBoyE+/oEaaH68yLI9ySPO1gUWmQENZ1MZnmBnpUGN24NOZxdjDLc8npK0SAw==}
+    engines: {node: '>=20.19'}
+
+  '@tanstack/start-client-core@1.163.2':
+    resolution: {integrity: sha512-PiOnvd83rqOsyWcN3CxJqoqr41pxM2wAHfchMITKz7rlsX+4J8CWMpHM3yNnLrKRqUnqX3Td9VUV4ueU+4ZCNA==}
+    engines: {node: '>=22.12.0'}
+
+  '@tanstack/start-fn-stubs@1.161.4':
+    resolution: {integrity: sha512-b8s6iSQ+ny0P4lGK0n3DKaL6EI7SECG0/89svDeYieVw2+MaFOJVcQo3rU3BUvmuOcIkgkE5IhdzkmzPXH6yfA==}
+    engines: {node: '>=22.12.0'}
+
+  '@tanstack/start-plugin-core@1.163.2':
+    resolution: {integrity: sha512-y+ransqRMyvTCLd4xU7feo57YsFT8oX++gKfh8pjNgzZTmkbySKBGv8UmO2mvwaNMkZmPwABYOPz60zd3Ls5DQ==}
+    engines: {node: '>=22.12.0'}
+    peerDependencies:
+      vite: '>=7.0.0'
+
+  '@tanstack/start-server-core@1.163.2':
+    resolution: {integrity: sha512-2BJzeIuBuHSSQL119vx4MlXktorwOiRqCUaeQOi84LQMbcM78vVl1vWwgU/e/Hjzwz44dwcs5KHaFgfPeRNduA==}
+    engines: {node: '>=22.12.0'}
+
+  '@tanstack/start-storage-context@1.163.2':
+    resolution: {integrity: sha512-zBCn0XqrcS0SDjmRjnnxVMLNCpOx6tveCzKvsoI3xwnJ4iIEMyo2HAS4i3qw+EbAaBam2g5skN9OLd46VEY4uw==}
+    engines: {node: '>=22.12.0'}
+
+  '@tanstack/store@0.9.1':
+    resolution: {integrity: sha512-+qcNkOy0N1qSGsP7omVCW0SDrXtaDcycPqBDE726yryiA5eTDFpjBReaYjghVJwNf1pcPMyzIwTGlYjCSQR0Fg==}
+
+  '@tanstack/virtual-file-routes@1.161.4':
+    resolution: {integrity: sha512-42WoRePf8v690qG8yGRe/YOh+oHni9vUaUUfoqlS91U2scd3a5rkLtVsc6b7z60w3RogH0I00vdrC5AaeiZ18w==}
+    engines: {node: '>=20.19'}
+
+  '@turbo/gen-darwin-64@2.8.11':
+    resolution: {integrity: sha512-xrx2diQfiZOQ//BTDDjBfT8GG5gKUQ15QlvHFn/9kSyZSBZUkgDeuCbk12K15/kZfjfa6e0Il0guVCKld2pzhg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@turbo/gen-darwin-arm64@2.8.11':
+    resolution: {integrity: sha512-D7sSxQLRU4pHWvz9o+SXtfGgRgQ/UEi4DKXNZViSIvCctq5rSzQFioD7M0BigUBLYTxxb7cAbY9PFNmPbe8rkw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@turbo/gen-linux-64@2.8.11':
+    resolution: {integrity: sha512-NmzZ+GVs2DuJFBsTXlViOcANA4xWmOl1VN8UfmbYuZzkaH9oIB4L5ehg88PZkzO12yn8qULnyzqGxNYa/YzAKw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@turbo/gen-linux-arm64@2.8.11':
+    resolution: {integrity: sha512-Y4yqldcNZXdIYWfm/iByOxYjeXYw53gHU0NRlbwD4hqW5v/Hi/846ehVtEGH4hzmy4r94k4jrEu+ftxK/oJSUw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@turbo/gen-windows-64@2.8.11':
+    resolution: {integrity: sha512-qHGQum/Xae5BThd0A/a8w3yjq5EndJj4szjXxZlzTQEddzMCAFSO5DfJpRWkSZ/g8ei/6JebFiIAxZMkuQ1SAw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@turbo/gen@2.8.11':
+    resolution: {integrity: sha512-WgTEEwq1NOmDjDRUu+F1qLJtyIDnguWX/GxML6Q+MnOQDk9va+pkkdWsscIy/CqOputOgCE5wOlEgefE+frydg==}
+    hasBin: true
+
+  '@tybys/wasm-util@0.10.1':
+    resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/esrecurse@4.3.1':
+    resolution: {integrity: sha512-xJBAbDifo5hpffDBuHl0Y8ywswbiAp/Wi7Y/GtAgSlZyIABppyurxVueOPE8LUQOxdlgi6Zqce7uoEpqNTeiUw==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/glob@7.2.0':
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+
+  '@types/inquirer@6.5.0':
+    resolution: {integrity: sha512-rjaYQ9b9y/VFGOpqBEXRavc3jh0a+e6evAbI31tMda8VlPaSy0AZJfXsvmIe3wklc7W6C3zCSfleuMXR7NOyXw==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/minimatch@6.0.0':
+    resolution: {integrity: sha512-zmPitbQ8+6zNutpwgcQuLcsEpn/Cj54Kbn7L5pX0Os5kdWplB7xPgEh/g+SWOB/qmows2gpuCaPyduq8ZZRnxA==}
+    deprecated: This is a stub types definition. minimatch provides its own type definitions, so you do not need this installed.
+
+  '@types/node@25.3.0':
+    resolution: {integrity: sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+
+  '@types/through@0.0.33':
+    resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
+
+  '@typescript-eslint/eslint-plugin@8.56.1':
+    resolution: {integrity: sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.56.1
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.56.1':
+    resolution: {integrity: sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.56.1':
+    resolution: {integrity: sha512-TAdqQTzHNNvlVFfR+hu2PDJrURiwKsUvxFn1M0h95BB8ah5jejas08jUWG4dBA68jDMI988IvtfdAI53JzEHOQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.56.1':
+    resolution: {integrity: sha512-YAi4VDKcIZp0O4tz/haYKhmIDZFEUPOreKbfdAN3SzUDMcPhJ8QI99xQXqX+HoUVq8cs85eRKnD+rne2UAnj2w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.56.1':
+    resolution: {integrity: sha512-qOtCYzKEeyr3aR9f28mPJqBty7+DBqsdd63eO0yyDwc6vgThj2UjWfJIcsFeSucYydqcuudMOprZ+x1SpF3ZuQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.56.1':
+    resolution: {integrity: sha512-yB/7dxi7MgTtGhZdaHCemf7PuwrHMenHjmzgUW1aJpO+bBU43OycnM3Wn+DdvDO/8zzA9HlhaJ0AUGuvri4oGg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.56.1':
+    resolution: {integrity: sha512-dbMkdIUkIkchgGDIv7KLUpa0Mda4IYjo4IAMJUZ+3xNoUXxMsk9YtKpTHSChRS85o+H9ftm51gsK1dZReY9CVw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.56.1':
+    resolution: {integrity: sha512-qzUL1qgalIvKWAf9C1HpvBjif+Vm6rcT5wZd4VoMb9+Km3iS3Cv9DY6dMRMDtPnwRAFyAi7YXJpTIEXLvdfPxg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.56.1':
+    resolution: {integrity: sha512-HPAVNIME3tABJ61siYlHzSWCGtOoeP2RTIaHXFMPqjrQKCGB9OgUVdiNgH7TJS2JNIQ5qQ4RsAUDuGaGme/KOA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.56.1':
+    resolution: {integrity: sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    resolution: {integrity: sha512-ppLRUgHVaGRWUx0R0Ut06Mjo9gBaBkg3v/8AxusGLhsIotbBLuRk51rAzqLC8gq6NyyAojEXglNjzf6R948DNw==}
+    cpu: [arm]
+    os: [android]
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    resolution: {integrity: sha512-lCxkVtb4wp1v+EoN+HjIG9cIIzPkX5OtM03pQYkG+U5O/wL53LC4QbIeazgiKqluGeVEeBlZahHalCaBvU1a2g==}
+    cpu: [arm64]
+    os: [android]
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    resolution: {integrity: sha512-gPVA1UjRu1Y/IsB/dQEsp2V1pm44Of6+LWvbLc9SDk1c2KhhDRDBUkQCYVWe6f26uJb3fOK8saWMgtX8IrMk3g==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    resolution: {integrity: sha512-cFzP7rWKd3lZaCsDze07QX1SC24lO8mPty9vdP+YVa3MGdVgPmFc59317b2ioXtgCMKGiCLxJ4HQs62oz6GfRQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    resolution: {integrity: sha512-fqtGgak3zX4DCB6PFpsH5+Kmt/8CIi4Bry4rb1ho6Av2QHTREM+47y282Uqiu3ZRF5IQioJQ5qWRV6jduA+iGw==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    resolution: {integrity: sha512-u92mvlcYtp9MRKmP+ZvMmtPN34+/3lMHlyMj7wXJDeXxuM0Vgzz0+PPJNsro1m3IZPYChIkn944wW8TYgGKFHw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    resolution: {integrity: sha512-cINaoY2z7LVCrfHkIcmvj7osTOtm6VVT16b5oQdS4beibX2SYBwgYLmqhBjA1t51CarSaBuX5YNsWLjsqfW5Cw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
+    cpu: [x64]
+    os: [linux]
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    resolution: {integrity: sha512-nRcz5Il4ln0kMhfL8S3hLkxI85BXs3o8EYoattsJNdsX4YUU89iOkVn7g0VHSRxFuVMdM4Q1jEpIId1Ihim/Uw==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    resolution: {integrity: sha512-DCEI6t5i1NmAZp6pFonpD5m7i6aFrpofcp4LA2i8IIq60Jyo28hamKBxNrZcyOwVOZkgsRp9O2sXWBWP8MnvIQ==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    resolution: {integrity: sha512-lrW200hZdbfRtztbygyaq/6jP6AKE8qQN2KvPcJ+x7wiD038YtnYtZ82IMNJ69GJibV7bwL3y9FgK+5w/pYt6g==}
+    cpu: [x64]
+    os: [win32]
+
+  '@vitejs/plugin-react@5.1.4':
+    resolution: {integrity: sha512-VIcFLdRi/VYRU8OL/puL7QXMYafHmqOnwTZY50U1JPlCNj30PxCMx65c494b1K9be9hX83KVt0+gTEwTWLqToA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  aggregate-error@3.1.0:
+    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
+    engines: {node: '>=8'}
+
+  ajv@6.14.0:
+    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
+
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  ansis@4.2.0:
+    resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
+    engines: {node: '>=14'}
+
+  anymatch@3.1.3:
+    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
+    engines: {node: '>= 8'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  ast-types@0.16.1:
+    resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
+    engines: {node: '>=4'}
+
+  babel-dead-code-elimination@1.0.12:
+    resolution: {integrity: sha512-GERT7L2TiYcYDtYk1IpD+ASAYXjKbLTDPhBtYj7X1NuRMDTMtAx9kyBenub1Ev41lo91OHCKdmP+egTDmfQ7Ig==}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  baseline-browser-mapping@2.10.0:
+    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
+    engines: {node: '>=8'}
+
+  boolbase@1.0.0:
+    resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@5.0.3:
+    resolution: {integrity: sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==}
+    engines: {node: 18 || 20 || >=22}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camel-case@3.0.0:
+    resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
+
+  caniuse-lite@1.0.30001774:
+    resolution: {integrity: sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  change-case@3.1.0:
+    resolution: {integrity: sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==}
+
+  chardet@0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+
+  chardet@2.1.1:
+    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
+
+  cheerio-select@2.1.0:
+    resolution: {integrity: sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==}
+
+  cheerio@1.2.0:
+    resolution: {integrity: sha512-WDrybc/gKFpTYQutKIK6UvfcuxijIZfMfXaYm8NMsPQxSYvf+13fXUJ4rztGGbJcBQ/GF55gvrZ0Bc0bj/mqvg==}
+    engines: {node: '>=20.18.1'}
+
+  chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
+    engines: {node: '>= 8.10.0'}
+
+  clean-stack@2.2.0:
+    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
+    engines: {node: '>=6'}
+
+  cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+
+  cli-width@3.0.0:
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  comment-parser@1.4.5:
+    resolution: {integrity: sha512-aRDkn3uyIlCFfk5NUA+VdwMmMsh8JGhc4hapfV4yxymHGQ3BVskMQfoXGpCo5IoBuQ9tS5iiVKhCpTcB4pW4qw==}
+    engines: {node: '>= 12.0.0'}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
+  constant-case@2.0.0:
+    resolution: {integrity: sha512-eS0N9WwmjTqrOmR3o83F5vW8Z+9R1HnVz3xmzT2PMFug9ly+Au/fxRWlEBSb6LcZwspSsEn9Xs1uw9YgzAg1EQ==}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  cookie-es@2.0.0:
+    resolution: {integrity: sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==}
+
+  core-js-pure@3.48.0:
+    resolution: {integrity: sha512-1slJgk89tWC51HQ1AEqG+s2VuwpTRr8ocu4n20QUcH1v9lAN0RXen0Q0AABa/DK1I7RrNWLucplOHMx8hfTGTw==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  crossws@0.4.4:
+    resolution: {integrity: sha512-w6c4OdpRNnudVmcgr7brb/+/HmYjMQvYToO/oTrprTwxRUiom3LYWU1PMWuD006okbUWpII1Ea9/+kwpUfmyRg==}
+    peerDependencies:
+      srvx: '>=0.7.1'
+    peerDependenciesMeta:
+      srvx:
+        optional: true
+
+  css-select@5.2.2:
+    resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
+
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  db0@0.3.4:
+    resolution: {integrity: sha512-RiXXi4WaNzPTHEOu8UPQKMooIbqOEyqA1t7Z6MsdxSCeb8iUC9ko3LcmsLmeUt2SM5bctfArZKkRQggKZz7JNw==}
+    peerDependencies:
+      '@electric-sql/pglite': '*'
+      '@libsql/client': '*'
+      better-sqlite3: '*'
+      drizzle-orm: '*'
+      mysql2: '*'
+      sqlite3: '*'
+    peerDependenciesMeta:
+      '@electric-sql/pglite':
+        optional: true
+      '@libsql/client':
+        optional: true
+      better-sqlite3:
+        optional: true
+      drizzle-orm:
+        optional: true
+      mysql2:
+        optional: true
+      sqlite3:
+        optional: true
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  del@5.1.0:
+    resolution: {integrity: sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==}
+    engines: {node: '>=8'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  diff@8.0.3:
+    resolution: {integrity: sha512-qejHi7bcSD4hQAZE0tNAawRK1ZtafHDmMTMkrrIGgSLl7hTnQHmKCeB45xAcbfTqK2zowkM3j3bHt/4b/ARbYQ==}
+    engines: {node: '>=0.3.1'}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dom-serializer@2.0.0:
+    resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
+
+  domelementtype@2.3.0:
+    resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
+
+  domhandler@5.0.3:
+    resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
+    engines: {node: '>= 4'}
+
+  domutils@3.2.2:
+    resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
+
+  dot-case@2.1.1:
+    resolution: {integrity: sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==}
+
+  electron-to-chromium@1.5.302:
+    resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  encoding-sniffer@0.2.1:
+    resolution: {integrity: sha512-5gvq20T6vfpekVtqrYQsSCFZ1wEg5+wW0/QaZMWkFr6BqD3NfKs0rLCx4rrVlSWJeZb5NBJgVLswK/w2MWU+Gw==}
+
+  enhanced-resolve@5.19.0:
+    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
+    engines: {node: '>=10.13.0'}
+
+  entities@4.5.0:
+    resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
+    engines: {node: '>=0.12'}
+
+  entities@6.0.1:
+    resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
+    engines: {node: '>=0.12'}
+
+  entities@7.0.1:
+    resolution: {integrity: sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA==}
+    engines: {node: '>=0.12'}
+
+  esbuild@0.27.3:
+    resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eslint-compat-utils@0.5.1:
+    resolution: {integrity: sha512-3z3vFexKIEnjHE3zCMRo6fn/e44U7T1khUjg+Hp0ZQMCigh28rALD0nPFBcGZuiLC5rLZa2ubQHDRln09JfU2Q==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      eslint: '>=6.0.0'
+
+  eslint-import-context@0.1.9:
+    resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      unrs-resolver: ^1.0.0
+    peerDependenciesMeta:
+      unrs-resolver:
+        optional: true
+
+  eslint-plugin-es-x@7.8.0:
+    resolution: {integrity: sha512-7Ds8+wAAoV3T+LAKeu39Y5BzXCrGKrcISfgKEqTS4BDN8SFEDQd0S43jiQ8vIa3wUKD07qitZdfzlenSi8/0qQ==}
+    engines: {node: ^14.18.0 || >=16.0.0}
+    peerDependencies:
+      eslint: '>=8'
+
+  eslint-plugin-import-x@4.16.1:
+    resolution: {integrity: sha512-vPZZsiOKaBAIATpFE2uMI4w5IRwdv/FpQ+qZZMR4E+PeOcM4OeoEbqxRMnywdxP19TyB/3h6QBB0EWon7letSQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/utils': ^8.0.0
+      eslint: ^8.57.0 || ^9.0.0
+      eslint-import-resolver-node: '*'
+    peerDependenciesMeta:
+      '@typescript-eslint/utils':
+        optional: true
+      eslint-import-resolver-node:
+        optional: true
+
+  eslint-plugin-n@17.24.0:
+    resolution: {integrity: sha512-/gC7/KAYmfNnPNOb3eu8vw+TdVnV0zhdQwexsw6FLXbhzroVj20vRn2qL8lDWDGnAQ2J8DhdfvXxX9EoxvERvw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: '>=8.23.0'
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-scope@9.1.1:
+    resolution: {integrity: sha512-GaUN0sWim5qc8KVErfPBWmc31LEsOkrUJbvJZV+xuL3u2phMUK4HIvXlWAakfC8W4nzlK+chPEAkYOYb5ZScIw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@9.39.3:
+    resolution: {integrity: sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  espree@11.1.1:
+    resolution: {integrity: sha512-AVHPqQoZYc+RUM4/3Ly5udlZY/U4LS8pIG05jEjWM2lQMU/oaZ7qshzAl2YP1tfNmXfftH3ohurfwNAug+MnsQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  esprima@4.0.1:
+    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
+    engines: {node: '>=4'}
+    hasBin: true
+
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  exsolve@1.0.8:
+    resolution: {integrity: sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==}
+
+  external-editor@3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  get-tsconfig@4.13.6:
+    resolution: {integrity: sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@15.15.0:
+    resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
+    engines: {node: '>=18'}
+
+  globals@16.5.0:
+    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
+    engines: {node: '>=18'}
+
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
+  globrex@0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  h3@2.0.1-rc.14:
+    resolution: {integrity: sha512-163qbGmTr/9rqQRNuqMqtgXnOUAkE4KTdauiC9y0E5iG1I65kte9NyfWvZw5RTDMt6eY+DtyoNzrQ9wA2BfvGQ==}
+    engines: {node: '>=20.11.1'}
+    hasBin: true
+    peerDependencies:
+      crossws: ^0.4.1
+    peerDependenciesMeta:
+      crossws:
+        optional: true
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  header-case@1.0.1:
+    resolution: {integrity: sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==}
+
+  htmlparser2@10.1.0:
+    resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.6.3:
+    resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  inquirer@7.3.3:
+    resolution: {integrity: sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==}
+    engines: {node: '>=8.0.0'}
+
+  is-binary-path@2.1.0:
+    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
+    engines: {node: '>=8'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-lower-case@1.1.3:
+    resolution: {integrity: sha512-+5A1e/WJpLLXZEDlgz4G//WYSHyQBD32qa4Jd3Lw06qQlv3fJHnp3YIHjTQSGzHMgzmVKz2ZP3rBxTHkPw/lxA==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-path-cwd@2.2.0:
+    resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
+    engines: {node: '>=6'}
+
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+
+  is-upper-case@1.1.2:
+    resolution: {integrity: sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==}
+
+  isbinaryfile@4.0.10:
+    resolution: {integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==}
+    engines: {node: '>= 8.0.0'}
+
+  isbot@5.1.35:
+    resolution: {integrity: sha512-waFfC72ZNfwLLuJ2iLaoVaqcNo+CAaLR7xCpAn0Y5WfGzkNHv7ZN39Vbi1y+kb+Zs46XHOX3tZNExroFUPX+Kg==}
+    engines: {node: '>=18'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-android-arm64@1.31.1:
+    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.31.1:
+    resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.31.1:
+    resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.31.1:
+    resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.31.1:
+    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.31.1:
+    resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
+    engines: {node: '>= 12.0.0'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash@4.17.23:
+    resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
+
+  lower-case-first@1.0.2:
+    resolution: {integrity: sha512-UuxaYakO7XeONbKrZf5FEgkantPf5DUqDayzP5VXZrtRPdH86s4kN47I8B3TW10S4QKiE3ziHNf3kRN//okHjA==}
+
+  lower-case@1.1.4:
+    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  minimatch@10.2.4:
+    resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
+    engines: {node: 18 || 20 || >=22}
+
+  minimatch@3.1.5:
+    resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mute-stream@0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+
+  mute-stream@2.0.0:
+    resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  napi-postinstall@0.3.4:
+    resolution: {integrity: sha512-PHI5f1O0EP5xJ9gQmFGMS6IZcrVvTjpXjz7Na41gTE7eE2hK11lg04CECCYEEjdc17EV4DO+fkGEtt7TpTaTiQ==}
+    engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  nf3@0.3.10:
+    resolution: {integrity: sha512-UlqmHkZiHGgSkRj17yrOXEsSu5ECvtlJ3Xm1W5WsWrTKgu9m7OjrMZh9H/ME2LcWrTlMD0/vmmNVpyBG4yRdGg==}
+
+  nitro@3.0.1-alpha.2:
+    resolution: {integrity: sha512-YviDY5J/trS821qQ1fpJtpXWIdPYiOizC/meHavlm1Hfuhx//H+Egd1+4C5SegJRgtWMnRPW9n//6Woaw81cTQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      rolldown: '>=1.0.0-beta.0'
+      rollup: ^4
+      vite: ^7 || ^8 || >=8.0.0-0
+      xml2js: ^0.6.2
+    peerDependenciesMeta:
+      rolldown:
+        optional: true
+      rollup:
+        optional: true
+      vite:
+        optional: true
+      xml2js:
+        optional: true
+
+  no-case@2.3.2:
+    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
+
+  node-plop@0.26.3:
+    resolution: {integrity: sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==}
+    engines: {node: '>=8.9.4'}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  normalize-path@3.0.0:
+    resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
+    engines: {node: '>=0.10.0'}
+
+  nth-check@2.1.1:
+    resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
+
+  ofetch@2.0.0-alpha.3:
+    resolution: {integrity: sha512-zpYTCs2byOuft65vI3z43Dd6iSdFbOZZLb9/d21aCpx2rGastVU9dOCv0lu4ykc1Ur1anAYjDi3SUvR0vq50JA==}
+
+  ohash@2.0.11:
+    resolution: {integrity: sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ==}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+
+  oxc-minify@0.110.0:
+    resolution: {integrity: sha512-KWGTzPo83QmGrXC4ml83PM9HDwUPtZFfasiclUvTV4i3/0j7xRRqINVkrL77CbQnoWura3CMxkRofjQKVDuhBw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-transform@0.110.0:
+    resolution: {integrity: sha512-/fymQNzzUoKZweH0nC5yvbI2eR0yWYusT9TEKDYVgOgYrf9Qmdez9lUFyvxKR9ycx+PTHi/reIOzqf3wkShQsw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-map@3.0.0:
+    resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
+    engines: {node: '>=8'}
+
+  param-case@2.1.1:
+    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    resolution: {integrity: sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==}
+
+  parse5-parser-stream@7.1.2:
+    resolution: {integrity: sha512-JyeQc9iwFLn5TbvvqACIF/VXG6abODeB3Fwmv/TGdLk2LfbWkaySGY72at4+Ty7EkPZj854u4CrICqNk2qIbow==}
+
+  parse5@7.3.0:
+    resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
+
+  pascal-case@2.0.1:
+    resolution: {integrity: sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==}
+
+  path-case@2.1.1:
+    resolution: {integrity: sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  pathe@2.0.3:
+    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier-plugin-tailwindcss@0.7.2:
+    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  react-dom@19.2.4:
+    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+    peerDependencies:
+      react: ^19.2.4
+
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+    engines: {node: '>=0.10.0'}
+
+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
+  readdirp@3.6.0:
+    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
+    engines: {node: '>=8.10.0'}
+
+  recast@0.23.11:
+    resolution: {integrity: sha512-YTUo+Flmw4ZXiWfQKGcwwc11KnoRAYgzAE2E7mXKCjSviTKShtxBsN6YUUBB2gtaBzKzeKunxhUwNHQuRryhWA==}
+    engines: {node: '>= 4'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  rollup@4.59.0:
+    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  rou3@0.7.12:
+    resolution: {integrity: sha512-iFE4hLDuloSWcD7mjdCDhx2bKcIsYbtOTpfH5MHHLSKMOUyjqQXTeZVa289uuwEGEKFoE/BAPbhaU4B774nceg==}
+
+  run-async@2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rxjs@6.6.7:
+    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
+    engines: {npm: '>=2.0.0'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  sentence-case@2.1.1:
+    resolution: {integrity: sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==}
+
+  seroval-plugins@1.5.0:
+    resolution: {integrity: sha512-EAHqADIQondwRZIdeW2I636zgsODzoBDwb3PT/+7TLDWyw1Dy/Xv7iGUIEXXav7usHDE9HVhOU61irI3EnyyHA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval@1.5.0:
+    resolution: {integrity: sha512-OE4cvmJ1uSPrKorFIH9/w/Qwuvi/IMcGbv5RKgcJ/zjA/IohDLU6SVaxFN9FwajbP7nsX0dQqMDes1whk3y+yw==}
+    engines: {node: '>=10'}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  snake-case@2.1.0:
+    resolution: {integrity: sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.7.6:
+    resolution: {integrity: sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==}
+    engines: {node: '>= 12'}
+
+  srvx@0.10.1:
+    resolution: {integrity: sha512-A//xtfak4eESMWWydSRFUVvCTQbSwivnGCEf8YGPe2eHU0+Z6znfUTCPF0a7oV3sObSOcrXHlL6Bs9vVctfXdg==}
+    engines: {node: '>=20.16.0'}
+    hasBin: true
+
+  srvx@0.11.8:
+    resolution: {integrity: sha512-2n9t0YnAXPJjinytvxccNgs7rOA5gmE7Wowt/8Dy2dx2fDC6sBhfBpbrCvjYKALlVukPS/Uq3QwkolKNa7P/2Q==}
+    engines: {node: '>=20.16.0'}
+    hasBin: true
+
+  stable-hash-x@0.2.0:
+    resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
+    engines: {node: '>=12.0.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  swap-case@1.1.2:
+    resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
+
+  tailwindcss@4.2.1:
+    resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
+  tiny-warning@1.0.3:
+    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  title-case@2.1.1:
+    resolution: {integrity: sha512-EkJoZ2O3zdCz3zJsYCsxyq2OC5hrxR9mfdd5I+w8h/tmFfeOxJ+vvkxsKxdmN0WtS9zLdHEgfgVOiMVgv+Po4Q==}
+
+  tmp@0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  ts-declaration-location@1.0.7:
+    resolution: {integrity: sha512-EDyGAwH1gO0Ausm9gV6T2nUvBgXT5kGoCMJPllOaooZ+4VvJiKBdZE7wK18N1deEowhcUptS+5GXZK8U/fvpwA==}
+    peerDependencies:
+      typescript: '>=4.0.0'
+
+  tsconfck@3.1.6:
+    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    peerDependencies:
+      typescript: ^5.0.0
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
+  tslib@2.8.1:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
+  turbo-darwin-64@2.8.11:
+    resolution: {integrity: sha512-XKaCWaz4OCt77oYYvGCIRpvYD4c/aNaKjRkUpv+e8rN3RZb+5Xsyew4yRO+gaHdMIUhQznXNXfHlhs+/p7lIhA==}
+    cpu: [x64]
+    os: [darwin]
+
+  turbo-darwin-arm64@2.8.11:
+    resolution: {integrity: sha512-VvynLHGUNvQ9k7GZjRPSsRcK4VkioTfFb7O7liAk4nHKjEcMdls7GqxzjVWgJiKz3hWmQGaP9hRa9UUnhVWCxA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  turbo-linux-64@2.8.11:
+    resolution: {integrity: sha512-cbSn37dcm+EmkQ7DD0euy7xV7o2el4GAOr1XujvkAyKjjNvQ+6QIUeDgQcwAx3D17zPpDvfDMJY2dLQadWnkmQ==}
+    cpu: [x64]
+    os: [linux]
+
+  turbo-linux-arm64@2.8.11:
+    resolution: {integrity: sha512-+trymp2s2aBrhS04l6qFxcExzZ8ffndevuUB9c5RCeqsVpZeiWuGQlWNm5XjOmzoMayxRARZ5ma7yiWbGMiLqQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  turbo-windows-64@2.8.11:
+    resolution: {integrity: sha512-3kJjFSM4yw1n9Uzmi+XkAUgCae19l/bH6RJ442xo7mnZm0tpOjo33F+FYHoSVpIWVMd0HG0LDccyafPSdylQbA==}
+    cpu: [x64]
+    os: [win32]
+
+  turbo-windows-arm64@2.8.11:
+    resolution: {integrity: sha512-JOM4uF2vuLsJUvibdR6X9QqdZr6BhC6Nhlrw4LKFPsXZZI/9HHLoqAiYRpE4MuzIwldCH/jVySnWXrI1SKto0g==}
+    cpu: [arm64]
+    os: [win32]
+
+  turbo@2.8.11:
+    resolution: {integrity: sha512-H+rwSHHPLoyPOSoHdmI1zY0zy0GGj1Dmr7SeJW+nZiWLz2nex8EJ+fkdVabxXFMNEux+aywI4Sae8EqhmnOv4A==}
+    hasBin: true
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  typescript-eslint@8.56.1:
+    resolution: {integrity: sha512-U4lM6pjmBX7J5wk4szltF7I1cGBHXZopnAXCMXb3+fZ3B/0Z3hq3wS/CCUB2NZBNAExK92mCU2tEohWuwVMsDQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  ufo@1.6.3:
+    resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
+
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  undici-types@7.18.2:
+    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
+
+  undici@7.22.0:
+    resolution: {integrity: sha512-RqslV2Us5BrllB+JeiZnK4peryVTndy9Dnqq62S3yYRRTj0tFQCwEniUy2167skdGOy3vqRzEvl1Dm4sV2ReDg==}
+    engines: {node: '>=20.18.1'}
+
+  unenv@2.0.0-rc.24:
+    resolution: {integrity: sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==}
+
+  unplugin@2.3.11:
+    resolution: {integrity: sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==}
+    engines: {node: '>=18.12.0'}
+
+  unrs-resolver@1.11.1:
+    resolution: {integrity: sha512-bSjt9pjaEBnNiGgc9rUiHGKv5l4/TGzDmYw3RhnkJGtLhbnnA/5qJj7x3dNDCRx/PJxu774LlH8lCOlB4hEfKg==}
+
+  unstorage@2.0.0-alpha.6:
+    resolution: {integrity: sha512-w5vLYCJtnSx3OBtDk7cG4c1p3dfAnHA4WSZq9Xsurjbl2wMj7zqfOIjaHQI1Bl7yKzUxXAi+kbMr8iO2RhJmBA==}
+    peerDependencies:
+      '@azure/app-configuration': ^1.11.0
+      '@azure/cosmos': ^4.9.1
+      '@azure/data-tables': ^13.3.2
+      '@azure/identity': ^4.13.0
+      '@azure/keyvault-secrets': ^4.10.0
+      '@azure/storage-blob': ^12.31.0
+      '@capacitor/preferences': ^6 || ^7 || ^8
+      '@deno/kv': '>=0.13.0'
+      '@netlify/blobs': ^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0
+      '@planetscale/database': ^1.19.0
+      '@upstash/redis': ^1.36.2
+      '@vercel/blob': '>=0.27.3'
+      '@vercel/functions': ^2.2.12 || ^3.0.0
+      '@vercel/kv': ^1.0.1
+      aws4fetch: ^1.0.20
+      chokidar: ^4 || ^5
+      db0: '>=0.3.4'
+      idb-keyval: ^6.2.2
+      ioredis: ^5.9.3
+      lru-cache: ^11.2.6
+      mongodb: ^6 || ^7
+      ofetch: '*'
+      uploadthing: ^7.7.4
+    peerDependenciesMeta:
+      '@azure/app-configuration':
+        optional: true
+      '@azure/cosmos':
+        optional: true
+      '@azure/data-tables':
+        optional: true
+      '@azure/identity':
+        optional: true
+      '@azure/keyvault-secrets':
+        optional: true
+      '@azure/storage-blob':
+        optional: true
+      '@capacitor/preferences':
+        optional: true
+      '@deno/kv':
+        optional: true
+      '@netlify/blobs':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@upstash/redis':
+        optional: true
+      '@vercel/blob':
+        optional: true
+      '@vercel/functions':
+        optional: true
+      '@vercel/kv':
+        optional: true
+      aws4fetch:
+        optional: true
+      chokidar:
+        optional: true
+      db0:
+        optional: true
+      idb-keyval:
+        optional: true
+      ioredis:
+        optional: true
+      lru-cache:
+        optional: true
+      mongodb:
+        optional: true
+      ofetch:
+        optional: true
+      uploadthing:
+        optional: true
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  upper-case-first@1.1.2:
+    resolution: {integrity: sha512-wINKYvI3Db8dtjikdAqoBbZoP6Q+PZUyfMR7pmwHzjC2quzSkUq5DmPrTtPEqHaz8AGtmsB4TqwapMTM1QAQOQ==}
+
+  upper-case@1.1.3:
+    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  use-sync-external-store@1.6.0:
+    resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
+  vite-tsconfig-paths@5.1.4:
+    resolution: {integrity: sha512-cYj0LRuLV2c2sMqhqhGpaO3LretdtMn/BVX4cPLanIZuwwrkVl+lK84E/miEXkCHWXuq65rhNN4rXsBcOB3S4w==}
+    peerDependencies:
+      vite: '*'
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  vite@7.3.1:
+    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitefu@1.1.2:
+    resolution: {integrity: sha512-zpKATdUbzbsycPFBN71nS2uzBUQiVnFoOrr2rvqv34S1lcAgMKKkjWleLGeiJlZ8lwCXvtWaRn7R3ZC16SYRuw==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-beta.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+  vue-eslint-parser@10.4.0:
+    resolution: {integrity: sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+
+  webpack-virtual-modules@0.6.2:
+    resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
+
+  whatwg-encoding@3.1.1:
+    resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
+    engines: {node: '>=18'}
+    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
+
+  whatwg-mimetype@4.0.0:
+    resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
+    engines: {node: '>=18'}
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  xmlbuilder2@4.0.3:
+    resolution: {integrity: sha512-bx8Q1STctnNaaDymWnkfQLKofs0mGNN7rLLapJlGuV3VlvegD7Ls4ggMjE3aUSWItCCzU0PEv45lI87iSigiCA==}
+    engines: {node: '>=20.0'}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yoctocolors-cjs@2.1.3:
+    resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
+    engines: {node: '>=18'}
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+snapshots:
+
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.0': {}
+
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.28.6
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.28.6': {}
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.6':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/runtime-corejs3@7.29.0':
+    dependencies:
+      core-js-pure: 3.48.0
+
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@emnapi/core@1.8.1':
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.8.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.1.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@esbuild/aix-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm@0.27.3':
+    optional: true
+
+  '@esbuild/android-x64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.3':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.3':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.3(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.39.3(jiti@2.6.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.21.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3
+      minimatch: 3.1.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
+
+  '@eslint/core@0.17.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.4':
+    dependencies:
+      ajv: 6.14.0
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      minimatch: 3.1.5
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.39.3': {}
+
+  '@eslint/object-schema@2.1.7': {}
+
+  '@eslint/plugin-kit@0.4.1':
+    dependencies:
+      '@eslint/core': 0.17.0
+      levn: 0.4.1
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@inquirer/ansi@1.0.2': {}
+
+  '@inquirer/checkbox@4.3.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/confirm@5.1.21(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/core@10.3.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      cli-width: 4.1.0
+      mute-stream: 2.0.0
+      signal-exit: 4.1.0
+      wrap-ansi: 6.2.0
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/editor@4.2.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/external-editor': 1.0.3(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/expand@4.0.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/external-editor@1.0.3(@types/node@25.3.0)':
+    dependencies:
+      chardet: 2.1.1
+      iconv-lite: 0.7.2
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/figures@1.0.15': {}
+
+  '@inquirer/input@4.3.1(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/number@3.0.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/password@4.0.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/prompts@7.10.1(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/checkbox': 4.3.2(@types/node@25.3.0)
+      '@inquirer/confirm': 5.1.21(@types/node@25.3.0)
+      '@inquirer/editor': 4.2.23(@types/node@25.3.0)
+      '@inquirer/expand': 4.0.23(@types/node@25.3.0)
+      '@inquirer/input': 4.3.1(@types/node@25.3.0)
+      '@inquirer/number': 3.0.23(@types/node@25.3.0)
+      '@inquirer/password': 4.0.23(@types/node@25.3.0)
+      '@inquirer/rawlist': 4.1.11(@types/node@25.3.0)
+      '@inquirer/search': 3.2.2(@types/node@25.3.0)
+      '@inquirer/select': 4.4.2(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/rawlist@4.1.11(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/search@3.2.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/select@4.4.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/type@3.0.10(@types/node@25.3.0)':
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@napi-rs/wasm-runtime@0.2.12':
+    dependencies:
+      '@emnapi/core': 1.8.1
+      '@emnapi/runtime': 1.8.1
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.1.1':
+    dependencies:
+      '@emnapi/core': 1.8.1
+      '@emnapi/runtime': 1.8.1
+      '@tybys/wasm-util': 0.10.1
+    optional: true
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@oozcitak/dom@2.0.2':
+    dependencies:
+      '@oozcitak/infra': 2.0.2
+      '@oozcitak/url': 3.0.0
+      '@oozcitak/util': 10.0.0
+
+  '@oozcitak/infra@2.0.2':
+    dependencies:
+      '@oozcitak/util': 10.0.0
+
+  '@oozcitak/url@3.0.0':
+    dependencies:
+      '@oozcitak/infra': 2.0.2
+      '@oozcitak/util': 10.0.0
+
+  '@oozcitak/util@10.0.0': {}
+
+  '@oxc-minify/binding-android-arm-eabi@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-android-arm64@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-darwin-arm64@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-darwin-x64@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-freebsd-x64@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-arm-gnueabihf@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-arm-musleabihf@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-arm64-gnu@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-arm64-musl@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-ppc64-gnu@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-riscv64-gnu@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-riscv64-musl@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-s390x-gnu@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-x64-gnu@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-linux-x64-musl@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-openharmony-arm64@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-wasm32-wasi@0.110.0':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
+  '@oxc-minify/binding-win32-arm64-msvc@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-win32-ia32-msvc@0.110.0':
+    optional: true
+
+  '@oxc-minify/binding-win32-x64-msvc@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-android-arm-eabi@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-android-arm64@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-darwin-arm64@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-darwin-x64@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-freebsd-x64@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm-gnueabihf@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm-musleabihf@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm64-gnu@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-arm64-musl@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-ppc64-gnu@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-riscv64-gnu@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-riscv64-musl@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-s390x-gnu@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-x64-gnu@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-linux-x64-musl@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-openharmony-arm64@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-wasm32-wasi@0.110.0':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
+  '@oxc-transform/binding-win32-arm64-msvc@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-win32-ia32-msvc@0.110.0':
+    optional: true
+
+  '@oxc-transform/binding-win32-x64-msvc@0.110.0':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.0-beta.40': {}
+
+  '@rolldown/pluginutils@1.0.0-rc.3': {}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    optional: true
+
+  '@stylistic/eslint-plugin@5.9.0(eslint@9.39.3(jiti@2.6.1))':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
+      '@typescript-eslint/types': 8.56.1
+      eslint: 9.39.3(jiti@2.6.1)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.3
+
+  '@tailwindcss/node@4.2.1':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.1
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-x64': 4.2.1
+      '@tailwindcss/oxide-freebsd-x64': 4.2.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.1
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
+
+  '@tailwindcss/vite@4.2.1(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+    dependencies:
+      '@tailwindcss/node': 4.2.1
+      '@tailwindcss/oxide': 4.2.1
+      tailwindcss: 4.2.1
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+
+  '@tanstack/eslint-config@0.3.4(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint/js': 9.39.3
+      '@stylistic/eslint-plugin': 5.9.0(eslint@9.39.3(jiti@2.6.1))
+      eslint: 9.39.3(jiti@2.6.1)
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))
+      eslint-plugin-n: 17.24.0(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      globals: 16.5.0
+      typescript-eslint: 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      vue-eslint-parser: 10.4.0(eslint@9.39.3(jiti@2.6.1))
+    transitivePeerDependencies:
+      - '@typescript-eslint/utils'
+      - eslint-import-resolver-node
+      - supports-color
+      - typescript
+
+  '@tanstack/history@1.161.4': {}
+
+  '@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/history': 1.161.4
+      '@tanstack/react-store': 0.9.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/router-core': 1.163.2
+      isbot: 5.1.35
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+
+  '@tanstack/react-start-client@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/react-router': 1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/router-core': 1.163.2
+      '@tanstack/start-client-core': 1.163.2
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+
+  '@tanstack/react-start-server@1.163.2(crossws@0.4.4(srvx@0.10.1))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/history': 1.161.4
+      '@tanstack/react-router': 1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/router-core': 1.163.2
+      '@tanstack/start-client-core': 1.163.2
+      '@tanstack/start-server-core': 1.163.2(crossws@0.4.4(srvx@0.10.1))
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+    transitivePeerDependencies:
+      - crossws
+
+  '@tanstack/react-start@1.163.2(crossws@0.4.4(srvx@0.10.1))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+    dependencies:
+      '@tanstack/react-router': 1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/react-start-client': 1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/react-start-server': 1.163.2(crossws@0.4.4(srvx@0.10.1))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      '@tanstack/router-utils': 1.161.4
+      '@tanstack/start-client-core': 1.163.2
+      '@tanstack/start-plugin-core': 1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(crossws@0.4.4(srvx@0.10.1))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@tanstack/start-server-core': 1.163.2(crossws@0.4.4(srvx@0.10.1))
+      pathe: 2.0.3
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - '@rsbuild/core'
+      - crossws
+      - supports-color
+      - vite-plugin-solid
+      - webpack
+
+  '@tanstack/react-store@0.9.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      '@tanstack/store': 0.9.1
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+      use-sync-external-store: 1.6.0(react@19.2.4)
+
+  '@tanstack/router-core@1.163.2':
+    dependencies:
+      '@tanstack/history': 1.161.4
+      '@tanstack/store': 0.9.1
+      cookie-es: 2.0.0
+      seroval: 1.5.0
+      seroval-plugins: 1.5.0(seroval@1.5.0)
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+
+  '@tanstack/router-generator@1.163.2':
+    dependencies:
+      '@tanstack/router-core': 1.163.2
+      '@tanstack/router-utils': 1.161.4
+      '@tanstack/virtual-file-routes': 1.161.4
+      prettier: 3.8.1
+      recast: 0.23.11
+      source-map: 0.7.6
+      tsx: 4.21.0
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tanstack/router-plugin@1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0)
+      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.0)
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@tanstack/router-core': 1.163.2
+      '@tanstack/router-generator': 1.163.2
+      '@tanstack/router-utils': 1.161.4
+      '@tanstack/virtual-file-routes': 1.161.4
+      chokidar: 3.6.0
+      unplugin: 2.3.11
+      zod: 3.25.76
+    optionalDependencies:
+      '@tanstack/react-router': 1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tanstack/router-utils@1.161.4':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      ansis: 4.2.0
+      babel-dead-code-elimination: 1.0.12
+      diff: 8.0.3
+      pathe: 2.0.3
+      tinyglobby: 0.2.15
+    transitivePeerDependencies:
+      - supports-color
+
+  '@tanstack/start-client-core@1.163.2':
+    dependencies:
+      '@tanstack/router-core': 1.163.2
+      '@tanstack/start-fn-stubs': 1.161.4
+      '@tanstack/start-storage-context': 1.163.2
+      seroval: 1.5.0
+      tiny-invariant: 1.3.3
+      tiny-warning: 1.0.3
+
+  '@tanstack/start-fn-stubs@1.161.4': {}
+
+  '@tanstack/start-plugin-core@1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(crossws@0.4.4(srvx@0.10.1))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/core': 7.29.0
+      '@babel/types': 7.29.0
+      '@rolldown/pluginutils': 1.0.0-beta.40
+      '@tanstack/router-core': 1.163.2
+      '@tanstack/router-generator': 1.163.2
+      '@tanstack/router-plugin': 1.163.2(@tanstack/react-router@1.163.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      '@tanstack/router-utils': 1.161.4
+      '@tanstack/start-client-core': 1.163.2
+      '@tanstack/start-server-core': 1.163.2(crossws@0.4.4(srvx@0.10.1))
+      cheerio: 1.2.0
+      exsolve: 1.0.8
+      pathe: 2.0.3
+      picomatch: 4.0.3
+      source-map: 0.7.6
+      srvx: 0.11.8
+      tinyglobby: 0.2.15
+      ufo: 1.6.3
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+      vitefu: 1.1.2(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))
+      xmlbuilder2: 4.0.3
+      zod: 3.25.76
+    transitivePeerDependencies:
+      - '@rsbuild/core'
+      - '@tanstack/react-router'
+      - crossws
+      - supports-color
+      - vite-plugin-solid
+      - webpack
+
+  '@tanstack/start-server-core@1.163.2(crossws@0.4.4(srvx@0.10.1))':
+    dependencies:
+      '@tanstack/history': 1.161.4
+      '@tanstack/router-core': 1.163.2
+      '@tanstack/start-client-core': 1.163.2
+      '@tanstack/start-storage-context': 1.163.2
+      h3-v2: h3@2.0.1-rc.14(crossws@0.4.4(srvx@0.10.1))
+      seroval: 1.5.0
+      tiny-invariant: 1.3.3
+    transitivePeerDependencies:
+      - crossws
+
+  '@tanstack/start-storage-context@1.163.2':
+    dependencies:
+      '@tanstack/router-core': 1.163.2
+
+  '@tanstack/store@0.9.1': {}
+
+  '@tanstack/virtual-file-routes@1.161.4': {}
+
+  '@turbo/gen-darwin-64@2.8.11':
+    optional: true
+
+  '@turbo/gen-darwin-arm64@2.8.11':
+    optional: true
+
+  '@turbo/gen-linux-64@2.8.11':
+    optional: true
+
+  '@turbo/gen-linux-arm64@2.8.11':
+    optional: true
+
+  '@turbo/gen-windows-64@2.8.11':
+    optional: true
+
+  '@turbo/gen@2.8.11(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/prompts': 7.10.1(@types/node@25.3.0)
+      node-plop: 0.26.3
+    optionalDependencies:
+      '@turbo/gen-darwin-64': 2.8.11
+      '@turbo/gen-darwin-arm64': 2.8.11
+      '@turbo/gen-linux-64': 2.8.11
+      '@turbo/gen-linux-arm64': 2.8.11
+      '@turbo/gen-windows-64': 2.8.11
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@tybys/wasm-util@0.10.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/esrecurse@4.3.1': {}
+
+  '@types/estree@1.0.8': {}
+
+  '@types/glob@7.2.0':
+    dependencies:
+      '@types/minimatch': 6.0.0
+      '@types/node': 25.3.0
+
+  '@types/inquirer@6.5.0':
+    dependencies:
+      '@types/through': 0.0.33
+      rxjs: 6.6.7
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/minimatch@6.0.0':
+    dependencies:
+      minimatch: 10.2.4
+
+  '@types/node@25.3.0':
+    dependencies:
+      undici-types: 7.18.2
+
+  '@types/react-dom@19.2.3(@types/react@19.2.14)':
+    dependencies:
+      '@types/react': 19.2.14
+
+  '@types/react@19.2.14':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/through@0.0.33':
+    dependencies:
+      '@types/node': 25.3.0
+
+  '@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.56.1
+      '@typescript-eslint/type-utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.56.1
+      eslint: 9.39.3(jiti@2.6.1)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.56.1
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.56.1
+      debug: 4.4.3
+      eslint: 9.39.3(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.56.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.56.1
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.56.1':
+    dependencies:
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/visitor-keys': 8.56.1
+
+  '@typescript-eslint/tsconfig-utils@8.56.1(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.3(jiti@2.6.1)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.56.1': {}
+
+  '@typescript-eslint/typescript-estree@8.56.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/visitor-keys': 8.56.1
+      debug: 4.4.3
+      minimatch: 10.2.4
+      semver: 7.7.4
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.56.1
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
+      eslint: 9.39.3(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.56.1':
+    dependencies:
+      '@typescript-eslint/types': 8.56.1
+      eslint-visitor-keys: 5.0.1
+
+  '@unrs/resolver-binding-android-arm-eabi@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-android-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-arm64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-darwin-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-freebsd-x64@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-gnueabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm-musleabihf@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-linux-x64-musl@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-wasm32-wasi@1.11.1':
+    dependencies:
+      '@napi-rs/wasm-runtime': 0.2.12
+    optional: true
+
+  '@unrs/resolver-binding-win32-arm64-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-ia32-msvc@1.11.1':
+    optional: true
+
+  '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
+    optional: true
+
+  '@vitejs/plugin-react@5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
+      '@rolldown/pluginutils': 1.0.0-rc.3
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - supports-color
+
+  acorn-jsx@5.3.2(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
+  acorn@8.16.0: {}
+
+  aggregate-error@3.1.0:
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+
+  ajv@6.14.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  ansis@4.2.0: {}
+
+  anymatch@3.1.3:
+    dependencies:
+      normalize-path: 3.0.0
+      picomatch: 2.3.1
+
+  argparse@2.0.1: {}
+
+  array-union@2.1.0: {}
+
+  ast-types@0.16.1:
+    dependencies:
+      tslib: 2.8.1
+
+  babel-dead-code-elimination@1.0.12:
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@4.0.4: {}
+
+  baseline-browser-mapping@2.10.0: {}
+
+  binary-extensions@2.3.0: {}
+
+  boolbase@1.0.0: {}
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@5.0.3:
+    dependencies:
+      balanced-match: 4.0.4
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.10.0
+      caniuse-lite: 1.0.30001774
+      electron-to-chromium: 1.5.302
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  callsites@3.1.0: {}
+
+  camel-case@3.0.0:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  caniuse-lite@1.0.30001774: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  change-case@3.1.0:
+    dependencies:
+      camel-case: 3.0.0
+      constant-case: 2.0.0
+      dot-case: 2.1.1
+      header-case: 1.0.1
+      is-lower-case: 1.1.3
+      is-upper-case: 1.1.2
+      lower-case: 1.1.4
+      lower-case-first: 1.0.2
+      no-case: 2.3.2
+      param-case: 2.1.1
+      pascal-case: 2.0.1
+      path-case: 2.1.1
+      sentence-case: 2.1.1
+      snake-case: 2.1.0
+      swap-case: 1.1.2
+      title-case: 2.1.1
+      upper-case: 1.1.3
+      upper-case-first: 1.1.2
+
+  chardet@0.7.0: {}
+
+  chardet@2.1.1: {}
+
+  cheerio-select@2.1.0:
+    dependencies:
+      boolbase: 1.0.0
+      css-select: 5.2.2
+      css-what: 6.2.2
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+
+  cheerio@1.2.0:
+    dependencies:
+      cheerio-select: 2.1.0
+      dom-serializer: 2.0.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      encoding-sniffer: 0.2.1
+      htmlparser2: 10.1.0
+      parse5: 7.3.0
+      parse5-htmlparser2-tree-adapter: 7.1.0
+      parse5-parser-stream: 7.1.2
+      undici: 7.22.0
+      whatwg-mimetype: 4.0.0
+
+  chokidar@3.6.0:
+    dependencies:
+      anymatch: 3.1.3
+      braces: 3.0.3
+      glob-parent: 5.1.2
+      is-binary-path: 2.1.0
+      is-glob: 4.0.3
+      normalize-path: 3.0.0
+      readdirp: 3.6.0
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  clean-stack@2.2.0: {}
+
+  cli-cursor@3.1.0:
+    dependencies:
+      restore-cursor: 3.1.0
+
+  cli-width@3.0.0: {}
+
+  cli-width@4.1.0: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  comment-parser@1.4.5: {}
+
+  concat-map@0.0.1: {}
+
+  consola@3.4.2: {}
+
+  constant-case@2.0.0:
+    dependencies:
+      snake-case: 2.1.0
+      upper-case: 1.1.3
+
+  convert-source-map@2.0.0: {}
+
+  cookie-es@2.0.0: {}
+
+  core-js-pure@3.48.0: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  crossws@0.4.4(srvx@0.10.1):
+    optionalDependencies:
+      srvx: 0.10.1
+
+  css-select@5.2.2:
+    dependencies:
+      boolbase: 1.0.0
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      nth-check: 2.1.1
+
+  css-what@6.2.2: {}
+
+  csstype@3.2.3: {}
+
+  db0@0.3.4: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  deep-is@0.1.4: {}
+
+  del@5.1.0:
+    dependencies:
+      globby: 10.0.2
+      graceful-fs: 4.2.11
+      is-glob: 4.0.3
+      is-path-cwd: 2.2.0
+      is-path-inside: 3.0.3
+      p-map: 3.0.0
+      rimraf: 3.0.2
+      slash: 3.0.0
+
+  detect-libc@2.1.2: {}
+
+  diff@8.0.3: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dom-serializer@2.0.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      entities: 4.5.0
+
+  domelementtype@2.3.0: {}
+
+  domhandler@5.0.3:
+    dependencies:
+      domelementtype: 2.3.0
+
+  domutils@3.2.2:
+    dependencies:
+      dom-serializer: 2.0.0
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+
+  dot-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  electron-to-chromium@1.5.302: {}
+
+  emoji-regex@8.0.0: {}
+
+  encoding-sniffer@0.2.1:
+    dependencies:
+      iconv-lite: 0.6.3
+      whatwg-encoding: 3.1.1
+
+  enhanced-resolve@5.19.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  entities@4.5.0: {}
+
+  entities@6.0.1: {}
+
+  entities@7.0.1: {}
+
+  esbuild@0.27.3:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.3
+      '@esbuild/android-arm': 0.27.3
+      '@esbuild/android-arm64': 0.27.3
+      '@esbuild/android-x64': 0.27.3
+      '@esbuild/darwin-arm64': 0.27.3
+      '@esbuild/darwin-x64': 0.27.3
+      '@esbuild/freebsd-arm64': 0.27.3
+      '@esbuild/freebsd-x64': 0.27.3
+      '@esbuild/linux-arm': 0.27.3
+      '@esbuild/linux-arm64': 0.27.3
+      '@esbuild/linux-ia32': 0.27.3
+      '@esbuild/linux-loong64': 0.27.3
+      '@esbuild/linux-mips64el': 0.27.3
+      '@esbuild/linux-ppc64': 0.27.3
+      '@esbuild/linux-riscv64': 0.27.3
+      '@esbuild/linux-s390x': 0.27.3
+      '@esbuild/linux-x64': 0.27.3
+      '@esbuild/netbsd-arm64': 0.27.3
+      '@esbuild/netbsd-x64': 0.27.3
+      '@esbuild/openbsd-arm64': 0.27.3
+      '@esbuild/openbsd-x64': 0.27.3
+      '@esbuild/openharmony-arm64': 0.27.3
+      '@esbuild/sunos-x64': 0.27.3
+      '@esbuild/win32-arm64': 0.27.3
+      '@esbuild/win32-ia32': 0.27.3
+      '@esbuild/win32-x64': 0.27.3
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  eslint-compat-utils@0.5.1(eslint@9.39.3(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.3(jiti@2.6.1)
+      semver: 7.7.4
+
+  eslint-import-context@0.1.9(unrs-resolver@1.11.1):
+    dependencies:
+      get-tsconfig: 4.13.6
+      stable-hash-x: 0.2.0
+    optionalDependencies:
+      unrs-resolver: 1.11.1
+
+  eslint-plugin-es-x@7.8.0(eslint@9.39.3(jiti@2.6.1)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      eslint: 9.39.3(jiti@2.6.1)
+      eslint-compat-utils: 0.5.1(eslint@9.39.3(jiti@2.6.1))
+
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1)):
+    dependencies:
+      '@typescript-eslint/types': 8.56.1
+      comment-parser: 1.4.5
+      debug: 4.4.3
+      eslint: 9.39.3(jiti@2.6.1)
+      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
+      is-glob: 4.0.3
+      minimatch: 10.2.4
+      semver: 7.7.4
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-n@17.24.0(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
+      enhanced-resolve: 5.19.0
+      eslint: 9.39.3(jiti@2.6.1)
+      eslint-plugin-es-x: 7.8.0(eslint@9.39.3(jiti@2.6.1))
+      get-tsconfig: 4.13.6
+      globals: 15.15.0
+      globrex: 0.1.2
+      ignore: 5.3.2
+      semver: 7.7.4
+      ts-declaration-location: 1.0.7(typescript@5.9.3)
+    transitivePeerDependencies:
+      - typescript
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-scope@9.1.1:
+    dependencies:
+      '@types/esrecurse': 4.3.1
+      '@types/estree': 1.0.8
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint-visitor-keys@5.0.1: {}
+
+  eslint@9.39.3(jiti@2.6.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.4
+      '@eslint/js': 9.39.3
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.14.0
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.5
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 4.2.1
+
+  espree@11.1.1:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 5.0.1
+
+  esprima@4.0.1: {}
+
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  esutils@2.0.3: {}
+
+  exsolve@1.0.8: {}
+
+  external-editor@3.1.0:
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  figures@3.2.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flatted@3.3.3: {}
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  get-tsconfig@4.13.6:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.5
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  globals@14.0.0: {}
+
+  globals@15.15.0: {}
+
+  globals@16.5.0: {}
+
+  globby@10.0.2:
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      glob: 7.2.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  globrex@0.1.2: {}
+
+  graceful-fs@4.2.11: {}
+
+  h3@2.0.1-rc.14(crossws@0.4.4(srvx@0.10.1)):
+    dependencies:
+      rou3: 0.7.12
+      srvx: 0.11.8
+    optionalDependencies:
+      crossws: 0.4.4(srvx@0.10.1)
+
+  handlebars@4.7.8:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.3
+
+  has-flag@4.0.0: {}
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  header-case@1.0.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  htmlparser2@10.1.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 7.0.1
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.6.3:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@4.0.0: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  inquirer@7.3.3:
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.23
+      mute-stream: 0.0.8
+      run-async: 2.4.1
+      rxjs: 6.6.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+
+  is-binary-path@2.1.0:
+    dependencies:
+      binary-extensions: 2.3.0
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-lower-case@1.1.3:
+    dependencies:
+      lower-case: 1.1.4
+
+  is-number@7.0.0: {}
+
+  is-path-cwd@2.2.0: {}
+
+  is-path-inside@3.0.3: {}
+
+  is-upper-case@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  isbinaryfile@4.0.10: {}
+
+  isbot@5.1.35: {}
+
+  isexe@2.0.0: {}
+
+  jiti@2.6.1: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json5@2.2.3: {}
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-android-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.31.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.31.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    optional: true
+
+  lightningcss@1.31.1:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.31.1
+      lightningcss-darwin-arm64: 1.31.1
+      lightningcss-darwin-x64: 1.31.1
+      lightningcss-freebsd-x64: 1.31.1
+      lightningcss-linux-arm-gnueabihf: 1.31.1
+      lightningcss-linux-arm64-gnu: 1.31.1
+      lightningcss-linux-arm64-musl: 1.31.1
+      lightningcss-linux-x64-gnu: 1.31.1
+      lightningcss-linux-x64-musl: 1.31.1
+      lightningcss-win32-arm64-msvc: 1.31.1
+      lightningcss-win32-x64-msvc: 1.31.1
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.get@4.4.2: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash@4.17.23: {}
+
+  lower-case-first@1.0.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  lower-case@1.1.4: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mimic-fn@2.1.0: {}
+
+  minimatch@10.2.4:
+    dependencies:
+      brace-expansion: 5.0.3
+
+  minimatch@3.1.5:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimist@1.2.8: {}
+
+  mkdirp@0.5.6:
+    dependencies:
+      minimist: 1.2.8
+
+  ms@2.1.3: {}
+
+  mute-stream@0.0.8: {}
+
+  mute-stream@2.0.0: {}
+
+  nanoid@3.3.11: {}
+
+  napi-postinstall@0.3.4: {}
+
+  natural-compare@1.4.0: {}
+
+  neo-async@2.6.2: {}
+
+  nf3@0.3.10: {}
+
+  nitro@3.0.1-alpha.2(rollup@4.59.0)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)):
+    dependencies:
+      consola: 3.4.2
+      crossws: 0.4.4(srvx@0.10.1)
+      db0: 0.3.4
+      h3: 2.0.1-rc.14(crossws@0.4.4(srvx@0.10.1))
+      jiti: 2.6.1
+      nf3: 0.3.10
+      ofetch: 2.0.0-alpha.3
+      ohash: 2.0.11
+      oxc-minify: 0.110.0
+      oxc-transform: 0.110.0
+      srvx: 0.10.1
+      undici: 7.22.0
+      unenv: 2.0.0-rc.24
+      unstorage: 2.0.0-alpha.6(db0@0.3.4)(ofetch@2.0.0-alpha.3)
+    optionalDependencies:
+      rollup: 4.59.0
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@deno/kv'
+      - '@electric-sql/pglite'
+      - '@libsql/client'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@upstash/redis'
+      - '@vercel/blob'
+      - '@vercel/functions'
+      - '@vercel/kv'
+      - aws4fetch
+      - better-sqlite3
+      - chokidar
+      - drizzle-orm
+      - idb-keyval
+      - ioredis
+      - lru-cache
+      - mongodb
+      - mysql2
+      - sqlite3
+      - uploadthing
+
+  no-case@2.3.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  node-plop@0.26.3:
+    dependencies:
+      '@babel/runtime-corejs3': 7.29.0
+      '@types/inquirer': 6.5.0
+      change-case: 3.1.0
+      del: 5.1.0
+      globby: 10.0.2
+      handlebars: 4.7.8
+      inquirer: 7.3.3
+      isbinaryfile: 4.0.10
+      lodash.get: 4.4.2
+      mkdirp: 0.5.6
+      resolve: 1.22.11
+
+  node-releases@2.0.27: {}
+
+  normalize-path@3.0.0: {}
+
+  nth-check@2.1.1:
+    dependencies:
+      boolbase: 1.0.0
+
+  ofetch@2.0.0-alpha.3: {}
+
+  ohash@2.0.11: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  os-tmpdir@1.0.2: {}
+
+  oxc-minify@0.110.0:
+    optionalDependencies:
+      '@oxc-minify/binding-android-arm-eabi': 0.110.0
+      '@oxc-minify/binding-android-arm64': 0.110.0
+      '@oxc-minify/binding-darwin-arm64': 0.110.0
+      '@oxc-minify/binding-darwin-x64': 0.110.0
+      '@oxc-minify/binding-freebsd-x64': 0.110.0
+      '@oxc-minify/binding-linux-arm-gnueabihf': 0.110.0
+      '@oxc-minify/binding-linux-arm-musleabihf': 0.110.0
+      '@oxc-minify/binding-linux-arm64-gnu': 0.110.0
+      '@oxc-minify/binding-linux-arm64-musl': 0.110.0
+      '@oxc-minify/binding-linux-ppc64-gnu': 0.110.0
+      '@oxc-minify/binding-linux-riscv64-gnu': 0.110.0
+      '@oxc-minify/binding-linux-riscv64-musl': 0.110.0
+      '@oxc-minify/binding-linux-s390x-gnu': 0.110.0
+      '@oxc-minify/binding-linux-x64-gnu': 0.110.0
+      '@oxc-minify/binding-linux-x64-musl': 0.110.0
+      '@oxc-minify/binding-openharmony-arm64': 0.110.0
+      '@oxc-minify/binding-wasm32-wasi': 0.110.0
+      '@oxc-minify/binding-win32-arm64-msvc': 0.110.0
+      '@oxc-minify/binding-win32-ia32-msvc': 0.110.0
+      '@oxc-minify/binding-win32-x64-msvc': 0.110.0
+
+  oxc-transform@0.110.0:
+    optionalDependencies:
+      '@oxc-transform/binding-android-arm-eabi': 0.110.0
+      '@oxc-transform/binding-android-arm64': 0.110.0
+      '@oxc-transform/binding-darwin-arm64': 0.110.0
+      '@oxc-transform/binding-darwin-x64': 0.110.0
+      '@oxc-transform/binding-freebsd-x64': 0.110.0
+      '@oxc-transform/binding-linux-arm-gnueabihf': 0.110.0
+      '@oxc-transform/binding-linux-arm-musleabihf': 0.110.0
+      '@oxc-transform/binding-linux-arm64-gnu': 0.110.0
+      '@oxc-transform/binding-linux-arm64-musl': 0.110.0
+      '@oxc-transform/binding-linux-ppc64-gnu': 0.110.0
+      '@oxc-transform/binding-linux-riscv64-gnu': 0.110.0
+      '@oxc-transform/binding-linux-riscv64-musl': 0.110.0
+      '@oxc-transform/binding-linux-s390x-gnu': 0.110.0
+      '@oxc-transform/binding-linux-x64-gnu': 0.110.0
+      '@oxc-transform/binding-linux-x64-musl': 0.110.0
+      '@oxc-transform/binding-openharmony-arm64': 0.110.0
+      '@oxc-transform/binding-wasm32-wasi': 0.110.0
+      '@oxc-transform/binding-win32-arm64-msvc': 0.110.0
+      '@oxc-transform/binding-win32-ia32-msvc': 0.110.0
+      '@oxc-transform/binding-win32-x64-msvc': 0.110.0
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-map@3.0.0:
+    dependencies:
+      aggregate-error: 3.1.0
+
+  param-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse5-htmlparser2-tree-adapter@7.1.0:
+    dependencies:
+      domhandler: 5.0.3
+      parse5: 7.3.0
+
+  parse5-parser-stream@7.1.2:
+    dependencies:
+      parse5: 7.3.0
+
+  parse5@7.3.0:
+    dependencies:
+      entities: 6.0.1
+
+  pascal-case@2.0.1:
+    dependencies:
+      camel-case: 3.0.0
+      upper-case-first: 1.1.2
+
+  path-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  path-exists@4.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-type@4.0.0: {}
+
+  pathe@2.0.3: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prettier-plugin-tailwindcss@0.7.2(prettier@3.8.1):
+    dependencies:
+      prettier: 3.8.1
+
+  prettier@3.8.1: {}
+
+  punycode@2.3.1: {}
+
+  queue-microtask@1.2.3: {}
+
+  react-dom@19.2.4(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      scheduler: 0.27.0
+
+  react-refresh@0.18.0: {}
+
+  react@19.2.4: {}
+
+  readdirp@3.6.0:
+    dependencies:
+      picomatch: 2.3.1
+
+  recast@0.23.11:
+    dependencies:
+      ast-types: 0.16.1
+      esprima: 4.0.1
+      source-map: 0.6.1
+      tiny-invariant: 1.3.3
+      tslib: 2.8.1
+
+  resolve-from@4.0.0: {}
+
+  resolve-pkg-maps@1.0.0: {}
+
+  resolve@1.22.11:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@3.1.0:
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+
+  reusify@1.1.0: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  rollup@4.59.0:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.59.0
+      '@rollup/rollup-android-arm64': 4.59.0
+      '@rollup/rollup-darwin-arm64': 4.59.0
+      '@rollup/rollup-darwin-x64': 4.59.0
+      '@rollup/rollup-freebsd-arm64': 4.59.0
+      '@rollup/rollup-freebsd-x64': 4.59.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.59.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.59.0
+      '@rollup/rollup-linux-arm64-gnu': 4.59.0
+      '@rollup/rollup-linux-arm64-musl': 4.59.0
+      '@rollup/rollup-linux-loong64-gnu': 4.59.0
+      '@rollup/rollup-linux-loong64-musl': 4.59.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.59.0
+      '@rollup/rollup-linux-ppc64-musl': 4.59.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.59.0
+      '@rollup/rollup-linux-riscv64-musl': 4.59.0
+      '@rollup/rollup-linux-s390x-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-musl': 4.59.0
+      '@rollup/rollup-openbsd-x64': 4.59.0
+      '@rollup/rollup-openharmony-arm64': 4.59.0
+      '@rollup/rollup-win32-arm64-msvc': 4.59.0
+      '@rollup/rollup-win32-ia32-msvc': 4.59.0
+      '@rollup/rollup-win32-x64-gnu': 4.59.0
+      '@rollup/rollup-win32-x64-msvc': 4.59.0
+      fsevents: 2.3.3
+
+  rou3@0.7.12: {}
+
+  run-async@2.4.1: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rxjs@6.6.7:
+    dependencies:
+      tslib: 1.14.1
+
+  safer-buffer@2.1.2: {}
+
+  scheduler@0.27.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.7.4: {}
+
+  sentence-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case-first: 1.1.2
+
+  seroval-plugins@1.5.0(seroval@1.5.0):
+    dependencies:
+      seroval: 1.5.0
+
+  seroval@1.5.0: {}
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  slash@3.0.0: {}
+
+  snake-case@2.1.0:
+    dependencies:
+      no-case: 2.3.2
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1: {}
+
+  source-map@0.7.6: {}
+
+  srvx@0.10.1: {}
+
+  srvx@0.11.8: {}
+
+  stable-hash-x@0.2.0: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-json-comments@3.1.1: {}
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  swap-case@1.1.2:
+    dependencies:
+      lower-case: 1.1.4
+      upper-case: 1.1.3
+
+  tailwindcss@4.2.1: {}
+
+  tapable@2.3.0: {}
+
+  through@2.3.8: {}
+
+  tiny-invariant@1.3.3: {}
+
+  tiny-warning@1.0.3: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  title-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  tmp@0.0.33:
+    dependencies:
+      os-tmpdir: 1.0.2
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-api-utils@2.4.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  ts-declaration-location@1.0.7(typescript@5.9.3):
+    dependencies:
+      picomatch: 4.0.3
+      typescript: 5.9.3
+
+  tsconfck@3.1.6(typescript@5.9.3):
+    optionalDependencies:
+      typescript: 5.9.3
+
+  tslib@1.14.1: {}
+
+  tslib@2.8.1: {}
+
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.3
+      get-tsconfig: 4.13.6
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  turbo-darwin-64@2.8.11:
+    optional: true
+
+  turbo-darwin-arm64@2.8.11:
+    optional: true
+
+  turbo-linux-64@2.8.11:
+    optional: true
+
+  turbo-linux-arm64@2.8.11:
+    optional: true
+
+  turbo-windows-64@2.8.11:
+    optional: true
+
+  turbo-windows-arm64@2.8.11:
+    optional: true
+
+  turbo@2.8.11:
+    optionalDependencies:
+      turbo-darwin-64: 2.8.11
+      turbo-darwin-arm64: 2.8.11
+      turbo-linux-64: 2.8.11
+      turbo-linux-arm64: 2.8.11
+      turbo-windows-64: 2.8.11
+      turbo-windows-arm64: 2.8.11
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@0.21.3: {}
+
+  typescript-eslint@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.3(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
+
+  ufo@1.6.3: {}
+
+  uglify-js@3.19.3:
+    optional: true
+
+  undici-types@7.18.2: {}
+
+  undici@7.22.0: {}
+
+  unenv@2.0.0-rc.24:
+    dependencies:
+      pathe: 2.0.3
+
+  unplugin@2.3.11:
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      acorn: 8.16.0
+      picomatch: 4.0.3
+      webpack-virtual-modules: 0.6.2
+
+  unrs-resolver@1.11.1:
+    dependencies:
+      napi-postinstall: 0.3.4
+    optionalDependencies:
+      '@unrs/resolver-binding-android-arm-eabi': 1.11.1
+      '@unrs/resolver-binding-android-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-arm64': 1.11.1
+      '@unrs/resolver-binding-darwin-x64': 1.11.1
+      '@unrs/resolver-binding-freebsd-x64': 1.11.1
+      '@unrs/resolver-binding-linux-arm-gnueabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm-musleabihf': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-arm64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-ppc64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-riscv64-musl': 1.11.1
+      '@unrs/resolver-binding-linux-s390x-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-gnu': 1.11.1
+      '@unrs/resolver-binding-linux-x64-musl': 1.11.1
+      '@unrs/resolver-binding-wasm32-wasi': 1.11.1
+      '@unrs/resolver-binding-win32-arm64-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-ia32-msvc': 1.11.1
+      '@unrs/resolver-binding-win32-x64-msvc': 1.11.1
+
+  unstorage@2.0.0-alpha.6(db0@0.3.4)(ofetch@2.0.0-alpha.3):
+    optionalDependencies:
+      db0: 0.3.4
+      ofetch: 2.0.0-alpha.3
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  upper-case-first@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  upper-case@1.1.3: {}
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  use-sync-external-store@1.6.0(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+
+  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)):
+    dependencies:
+      debug: 4.4.3
+      globrex: 0.1.2
+      tsconfck: 3.1.6(typescript@5.9.3)
+    optionalDependencies:
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0):
+    dependencies:
+      esbuild: 0.27.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.59.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 25.3.0
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      tsx: 4.21.0
+
+  vitefu@1.1.2(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)):
+    optionalDependencies:
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)(tsx@4.21.0)
+
+  vue-eslint-parser@10.4.0(eslint@9.39.3(jiti@2.6.1)):
+    dependencies:
+      debug: 4.4.3
+      eslint: 9.39.3(jiti@2.6.1)
+      eslint-scope: 9.1.1
+      eslint-visitor-keys: 5.0.1
+      espree: 11.1.1
+      esquery: 1.7.0
+      semver: 7.7.4
+    transitivePeerDependencies:
+      - supports-color
+
+  webpack-virtual-modules@0.6.2: {}
+
+  whatwg-encoding@3.1.1:
+    dependencies:
+      iconv-lite: 0.6.3
+
+  whatwg-mimetype@4.0.0: {}
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  wordwrap@1.0.0: {}
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrappy@1.0.2: {}
+
+  xmlbuilder2@4.0.3:
+    dependencies:
+      '@oozcitak/dom': 2.0.2
+      '@oozcitak/infra': 2.0.2
+      '@oozcitak/util': 10.0.0
+      js-yaml: 4.1.1
+
+  yallist@3.1.1: {}
+
+  yocto-queue@0.1.0: {}
+
+  yoctocolors-cjs@2.1.3: {}
+
+  zod@3.25.76: {}
diff --git a/templates/start-monorepo/pnpm-workspace.yaml b/templates/start-monorepo/pnpm-workspace.yaml
new file mode 100644
index 0000000000..3ff5faaaf5
--- /dev/null
+++ b/templates/start-monorepo/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"
diff --git a/templates/start-monorepo/tsconfig.json b/templates/start-monorepo/tsconfig.json
new file mode 100644
index 0000000000..63b9f0ef83
--- /dev/null
+++ b/templates/start-monorepo/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
diff --git a/templates/start-monorepo/turbo.json b/templates/start-monorepo/turbo.json
new file mode 100644
index 0000000000..6af9eda355
--- /dev/null
+++ b/templates/start-monorepo/turbo.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": [".output/**"]
+    },
+    "lint": {
+      "dependsOn": ["^lint"]
+    },
+    "format": {
+      "dependsOn": ["^format"]
+    },
+    "typecheck": {
+      "dependsOn": ["^typecheck"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
diff --git a/templates/vite-app/.prettierignore b/templates/vite-app/.prettierignore
new file mode 100644
index 0000000000..0b4a1db4da
--- /dev/null
+++ b/templates/vite-app/.prettierignore
@@ -0,0 +1,7 @@
+node_modules/
+coverage/
+.pnpm-store/
+pnpm-lock.yaml
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
diff --git a/templates/vite-app/.prettierrc b/templates/vite-app/.prettierrc
new file mode 100644
index 0000000000..9000bfaa58
--- /dev/null
+++ b/templates/vite-app/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "src/index.css",
+  "tailwindFunctions": ["cn", "cva"]
+}
diff --git a/templates/vite-app/README.md b/templates/vite-app/README.md
index d4b9dd4781..811328a458 100644
--- a/templates/vite-app/README.md
+++ b/templates/vite-app/README.md
@@ -1,3 +1,21 @@
 # React + TypeScript + Vite + shadcn/ui
 
 This is a template for a new Vite project with React, TypeScript, and shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command:
+
+```bash
+npx shadcn@latest add button
+```
+
+This will place the ui components in the `src/components` directory.
+
+## Using components
+
+To use the components in your app, import them as follows:
+
+```tsx
+import { Button } from "@/components/ui/button"
+```
diff --git a/templates/vite-app/package.json b/templates/vite-app/package.json
index 7763a95396..5a1dd70945 100644
--- a/templates/vite-app/package.json
+++ b/templates/vite-app/package.json
@@ -1,12 +1,14 @@
 {
   "name": "vite-app",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -25,6 +27,8 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4"
diff --git a/templates/vite-app/src/App.tsx b/templates/vite-app/src/App.tsx
index eec166ff17..4fddc488ff 100644
--- a/templates/vite-app/src/App.tsx
+++ b/templates/vite-app/src/App.tsx
@@ -1,7 +1,19 @@
+import { Button } from "@/components/ui/button"
+
 export function App() {
   return (
-    <div className="flex items-center justify-center min-h-screen">
-      <div className="font-medium">Hello World</div>
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="font-medium">Project ready!</h1>
+          <p>You may now add components and start building.</p>
+          <p>We&apos;ve already added the button component for you.</p>
+          <Button className="mt-2">Button</Button>
+        </div>
+        <div className="font-mono text-xs text-muted-foreground">
+          (Press <kbd>d</kbd> to toggle dark mode)
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/templates/vite-app/src/components/theme-provider.tsx b/templates/vite-app/src/components/theme-provider.tsx
new file mode 100644
index 0000000000..1349a0ca18
--- /dev/null
+++ b/templates/vite-app/src/components/theme-provider.tsx
@@ -0,0 +1,230 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from "react"
+
+type Theme = "dark" | "light" | "system"
+type ResolvedTheme = "dark" | "light"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+  disableTransitionOnChange?: boolean
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)"
+const THEME_VALUES: Theme[] = ["dark", "light", "system"]
+
+const ThemeProviderContext = React.createContext<
+  ThemeProviderState | undefined
+>(undefined)
+
+function isTheme(value: string | null): value is Theme {
+  if (value === null) {
+    return false
+  }
+
+  return THEME_VALUES.includes(value as Theme)
+}
+
+function getSystemTheme(): ResolvedTheme {
+  if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
+    return "dark"
+  }
+
+  return "light"
+}
+
+function disableTransitionsTemporarily() {
+  const style = document.createElement("style")
+  style.appendChild(
+    document.createTextNode(
+      "*,*::before,*::after{-webkit-transition:none!important;transition:none!important}"
+    )
+  )
+  document.head.appendChild(style)
+
+  return () => {
+    window.getComputedStyle(document.body)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        style.remove()
+      })
+    })
+  }
+}
+
+function isEditableTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  if (target.isContentEditable) {
+    return true
+  }
+
+  const editableParent = target.closest(
+    "input, textarea, select, [contenteditable='true']"
+  )
+  if (editableParent) {
+    return true
+  }
+
+  return false
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+  disableTransitionOnChange = true,
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = React.useState<Theme>(() => {
+    const storedTheme = localStorage.getItem(storageKey)
+    if (isTheme(storedTheme)) {
+      return storedTheme
+    }
+
+    return defaultTheme
+  })
+
+  const setTheme = React.useCallback(
+    (nextTheme: Theme) => {
+      localStorage.setItem(storageKey, nextTheme)
+      setThemeState(nextTheme)
+    },
+    [storageKey]
+  )
+
+  const applyTheme = React.useCallback(
+    (nextTheme: Theme) => {
+      const root = document.documentElement
+      const resolvedTheme =
+        nextTheme === "system" ? getSystemTheme() : nextTheme
+      const restoreTransitions = disableTransitionOnChange
+        ? disableTransitionsTemporarily()
+        : null
+
+      root.classList.remove("light", "dark")
+      root.classList.add(resolvedTheme)
+
+      if (restoreTransitions) {
+        restoreTransitions()
+      }
+    },
+    [disableTransitionOnChange]
+  )
+
+  React.useEffect(() => {
+    applyTheme(theme)
+
+    if (theme !== "system") {
+      return undefined
+    }
+
+    const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY)
+    const handleChange = () => {
+      applyTheme("system")
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange)
+    }
+  }, [theme, applyTheme])
+
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.repeat) {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return
+      }
+
+      if (isEditableTarget(event.target)) {
+        return
+      }
+
+      if (event.key.toLowerCase() !== "d") {
+        return
+      }
+
+      setThemeState((currentTheme) => {
+        const nextTheme =
+          currentTheme === "dark"
+            ? "light"
+            : currentTheme === "light"
+              ? "dark"
+              : getSystemTheme() === "dark"
+                ? "light"
+                : "dark"
+
+        localStorage.setItem(storageKey, nextTheme)
+        return nextTheme
+      })
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [storageKey])
+
+  React.useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.storageArea !== localStorage) {
+        return
+      }
+
+      if (event.key !== storageKey) {
+        return
+      }
+
+      if (isTheme(event.newValue)) {
+        setThemeState(event.newValue)
+        return
+      }
+
+      setThemeState(defaultTheme)
+    }
+
+    window.addEventListener("storage", handleStorageChange)
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange)
+    }
+  }, [defaultTheme, storageKey])
+
+  const value = React.useMemo(
+    () => ({
+      theme,
+      setTheme,
+    }),
+    [theme, setTheme]
+  )
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeProviderContext)
+
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+
+  return context
+}
diff --git a/templates/vite-app/src/main.tsx b/templates/vite-app/src/main.tsx
index 50d7a89b9c..2c36773b87 100644
--- a/templates/vite-app/src/main.tsx
+++ b/templates/vite-app/src/main.tsx
@@ -3,9 +3,12 @@ import { createRoot } from "react-dom/client"
 
 import "./index.css"
 import App from "./App.tsx"
+import { ThemeProvider } from "@/components/theme-provider.tsx"
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
   </StrictMode>
 )
diff --git a/templates/vite-monorepo/.gitignore b/templates/vite-monorepo/.gitignore
new file mode 100644
index 0000000000..85f2ceb067
--- /dev/null
+++ b/templates/vite-monorepo/.gitignore
@@ -0,0 +1,30 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Testing
+coverage
+
+# Turbo
+.turbo
+
+# Vercel
+.vercel
+
+# Build Outputs
+dist
+
+# Debug
+npm-debug.log*
+
+# Misc
+.DS_Store
+*.pem
diff --git a/templates/vite-monorepo/.npmrc b/templates/vite-monorepo/.npmrc
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/vite-monorepo/.prettierignore b/templates/vite-monorepo/.prettierignore
new file mode 100644
index 0000000000..209509f4d9
--- /dev/null
+++ b/templates/vite-monorepo/.prettierignore
@@ -0,0 +1,6 @@
+dist/
+node_modules/
+.turbo/
+coverage/
+pnpm-lock.yaml
+.pnpm-store/
\ No newline at end of file
diff --git a/templates/vite-monorepo/.prettierrc b/templates/vite-monorepo/.prettierrc
new file mode 100644
index 0000000000..40ce0679f4
--- /dev/null
+++ b/templates/vite-monorepo/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "endOfLine": "lf",
+  "semi": false,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "tailwindStylesheet": "packages/ui/src/styles/globals.css",
+  "tailwindFunctions": ["cn", "cva"]
+}
diff --git a/templates/vite-monorepo/README.md b/templates/vite-monorepo/README.md
new file mode 100644
index 0000000000..f635370f59
--- /dev/null
+++ b/templates/vite-monorepo/README.md
@@ -0,0 +1,21 @@
+# shadcn/ui monorepo template
+
+This is a Vite monorepo template with shadcn/ui.
+
+## Adding components
+
+To add components to your app, run the following command at the root of your `web` app:
+
+```bash
+pnpm dlx shadcn@latest add button -c apps/web
+```
+
+This will place the ui components in the `packages/ui/src/components` directory.
+
+## Using components
+
+To use the components in your app, import them from the `ui` package.
+
+```tsx
+import { Button } from "@workspace/ui/components/button";
+```
diff --git a/templates/vite-monorepo/apps/web/components.json b/templates/vite-monorepo/apps/web/components.json
new file mode 100644
index 0000000000..963cc37627
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "../../packages/ui/src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "hooks": "@/hooks",
+    "lib": "@/lib",
+    "utils": "@workspace/ui/lib/utils",
+    "ui": "@workspace/ui/components"
+  }
+}
diff --git a/templates/vite-monorepo/apps/web/eslint.config.js b/templates/vite-monorepo/apps/web/eslint.config.js
new file mode 100644
index 0000000000..5e6b472f58
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/templates/vite-monorepo/apps/web/index.html b/templates/vite-monorepo/apps/web/index.html
new file mode 100644
index 0000000000..de8cc51257
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vite-monorepo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/templates/vite-monorepo/apps/web/package.json b/templates/vite-monorepo/apps/web/package.json
new file mode 100644
index 0000000000..43c3cdfc50
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "web",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@workspace/ui": "workspace:*",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@eslint/js": "^9.39.2",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^17.2.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.2.4"
+  }
+}
diff --git a/templates/vite-monorepo/apps/web/src/App.tsx b/templates/vite-monorepo/apps/web/src/App.tsx
new file mode 100644
index 0000000000..55a08a929b
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/src/App.tsx
@@ -0,0 +1,19 @@
+import { Button } from "@workspace/ui/components/button"
+
+export function App() {
+  return (
+    <div className="flex min-h-svh p-6">
+      <div className="flex max-w-md min-w-0 flex-col gap-4 text-sm leading-loose">
+        <div>
+          <h1 className="font-medium">Project ready!</h1>
+          <p>You may now add components and start building.</p>
+          <p>We&apos;ve already added the button component for you.</p>
+          <Button className="mt-2">Button</Button>
+        </div>
+        <div className="text-muted-foreground font-mono text-xs">
+          (Press <kbd>d</kbd> to toggle dark mode)
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/templates/vite-monorepo/apps/web/src/components/.gitkeep b/templates/vite-monorepo/apps/web/src/components/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/vite-monorepo/apps/web/src/components/theme-provider.tsx b/templates/vite-monorepo/apps/web/src/components/theme-provider.tsx
new file mode 100644
index 0000000000..1349a0ca18
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/src/components/theme-provider.tsx
@@ -0,0 +1,230 @@
+/* eslint-disable react-refresh/only-export-components */
+import * as React from "react"
+
+type Theme = "dark" | "light" | "system"
+type ResolvedTheme = "dark" | "light"
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+  disableTransitionOnChange?: boolean
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)"
+const THEME_VALUES: Theme[] = ["dark", "light", "system"]
+
+const ThemeProviderContext = React.createContext<
+  ThemeProviderState | undefined
+>(undefined)
+
+function isTheme(value: string | null): value is Theme {
+  if (value === null) {
+    return false
+  }
+
+  return THEME_VALUES.includes(value as Theme)
+}
+
+function getSystemTheme(): ResolvedTheme {
+  if (window.matchMedia(COLOR_SCHEME_QUERY).matches) {
+    return "dark"
+  }
+
+  return "light"
+}
+
+function disableTransitionsTemporarily() {
+  const style = document.createElement("style")
+  style.appendChild(
+    document.createTextNode(
+      "*,*::before,*::after{-webkit-transition:none!important;transition:none!important}"
+    )
+  )
+  document.head.appendChild(style)
+
+  return () => {
+    window.getComputedStyle(document.body)
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        style.remove()
+      })
+    })
+  }
+}
+
+function isEditableTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  if (target.isContentEditable) {
+    return true
+  }
+
+  const editableParent = target.closest(
+    "input, textarea, select, [contenteditable='true']"
+  )
+  if (editableParent) {
+    return true
+  }
+
+  return false
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "theme",
+  disableTransitionOnChange = true,
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = React.useState<Theme>(() => {
+    const storedTheme = localStorage.getItem(storageKey)
+    if (isTheme(storedTheme)) {
+      return storedTheme
+    }
+
+    return defaultTheme
+  })
+
+  const setTheme = React.useCallback(
+    (nextTheme: Theme) => {
+      localStorage.setItem(storageKey, nextTheme)
+      setThemeState(nextTheme)
+    },
+    [storageKey]
+  )
+
+  const applyTheme = React.useCallback(
+    (nextTheme: Theme) => {
+      const root = document.documentElement
+      const resolvedTheme =
+        nextTheme === "system" ? getSystemTheme() : nextTheme
+      const restoreTransitions = disableTransitionOnChange
+        ? disableTransitionsTemporarily()
+        : null
+
+      root.classList.remove("light", "dark")
+      root.classList.add(resolvedTheme)
+
+      if (restoreTransitions) {
+        restoreTransitions()
+      }
+    },
+    [disableTransitionOnChange]
+  )
+
+  React.useEffect(() => {
+    applyTheme(theme)
+
+    if (theme !== "system") {
+      return undefined
+    }
+
+    const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY)
+    const handleChange = () => {
+      applyTheme("system")
+    }
+
+    mediaQuery.addEventListener("change", handleChange)
+
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange)
+    }
+  }, [theme, applyTheme])
+
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.repeat) {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return
+      }
+
+      if (isEditableTarget(event.target)) {
+        return
+      }
+
+      if (event.key.toLowerCase() !== "d") {
+        return
+      }
+
+      setThemeState((currentTheme) => {
+        const nextTheme =
+          currentTheme === "dark"
+            ? "light"
+            : currentTheme === "light"
+              ? "dark"
+              : getSystemTheme() === "dark"
+                ? "light"
+                : "dark"
+
+        localStorage.setItem(storageKey, nextTheme)
+        return nextTheme
+      })
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [storageKey])
+
+  React.useEffect(() => {
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.storageArea !== localStorage) {
+        return
+      }
+
+      if (event.key !== storageKey) {
+        return
+      }
+
+      if (isTheme(event.newValue)) {
+        setThemeState(event.newValue)
+        return
+      }
+
+      setThemeState(defaultTheme)
+    }
+
+    window.addEventListener("storage", handleStorageChange)
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange)
+    }
+  }, [defaultTheme, storageKey])
+
+  const value = React.useMemo(
+    () => ({
+      theme,
+      setTheme,
+    }),
+    [theme, setTheme]
+  )
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export const useTheme = () => {
+  const context = React.useContext(ThemeProviderContext)
+
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+
+  return context
+}
diff --git a/templates/vite-monorepo/apps/web/src/main.tsx b/templates/vite-monorepo/apps/web/src/main.tsx
new file mode 100644
index 0000000000..242ad829d4
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/src/main.tsx
@@ -0,0 +1,14 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+
+import "@workspace/ui/globals.css"
+import { App } from "./App.tsx"
+import { ThemeProvider } from "@/components/theme-provider.tsx"
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </StrictMode>
+)
diff --git a/templates/vite-monorepo/apps/web/tsconfig.app.json b/templates/vite-monorepo/apps/web/tsconfig.app.json
new file mode 100644
index 0000000000..7c70bb3539
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/tsconfig.app.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/templates/vite-monorepo/apps/web/tsconfig.json b/templates/vite-monorepo/apps/web/tsconfig.json
new file mode 100644
index 0000000000..1dfadd4637
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/tsconfig.json
@@ -0,0 +1,14 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@workspace/ui/*": ["../../packages/ui/src/*"]
+    }
+  }
+}
diff --git a/templates/vite-monorepo/apps/web/tsconfig.node.json b/templates/vite-monorepo/apps/web/tsconfig.node.json
new file mode 100644
index 0000000000..8a67f62f4c
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/templates/vite-monorepo/apps/web/vite.config.ts b/templates/vite-monorepo/apps/web/vite.config.ts
new file mode 100644
index 0000000000..79a65e0aec
--- /dev/null
+++ b/templates/vite-monorepo/apps/web/vite.config.ts
@@ -0,0 +1,14 @@
+import path from "path"
+import tailwindcss from "@tailwindcss/vite"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+})
diff --git a/templates/vite-monorepo/package.json b/templates/vite-monorepo/package.json
new file mode 100644
index 0000000000..73d474feeb
--- /dev/null
+++ b/templates/vite-monorepo/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "vite-monorepo",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "build": "turbo build",
+    "dev": "turbo dev",
+    "lint": "turbo lint",
+    "format": "turbo format",
+    "typecheck": "turbo typecheck"
+  },
+  "devDependencies": {
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "turbo": "^2.8.8",
+    "typescript": "5.9.3"
+  },
+  "packageManager": "pnpm@9.0.6",
+  "engines": {
+    "node": ">=20"
+  }
+}
diff --git a/templates/vite-monorepo/packages/ui/components.json b/templates/vite-monorepo/packages/ui/components.json
new file mode 100644
index 0000000000..e2686f3797
--- /dev/null
+++ b/templates/vite-monorepo/packages/ui/components.json
@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@workspace/ui/components",
+    "utils": "@workspace/ui/lib/utils",
+    "hooks": "@workspace/ui/hooks",
+    "lib": "@workspace/ui/lib",
+    "ui": "@workspace/ui/components"
+  }
+}
diff --git a/templates/vite-monorepo/packages/ui/eslint.config.js b/templates/vite-monorepo/packages/ui/eslint.config.js
new file mode 100644
index 0000000000..5e6b472f58
--- /dev/null
+++ b/templates/vite-monorepo/packages/ui/eslint.config.js
@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])
diff --git a/templates/vite-monorepo/packages/ui/package.json b/templates/vite-monorepo/packages/ui/package.json
new file mode 100644
index 0000000000..ab26802149
--- /dev/null
+++ b/templates/vite-monorepo/packages/ui/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@workspace/ui",
+  "version": "0.0.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@turbo/gen": "^2.8.1",
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@eslint/js": "^9.39.2",
+    "eslint": "^9.39.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^17.2.0",
+    "typescript-eslint": "^8.54.0",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
+  },
+  "exports": {
+    "./globals.css": "./src/styles/globals.css",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts"
+  }
+}
diff --git a/templates/vite-monorepo/packages/ui/src/components/.gitkeep b/templates/vite-monorepo/packages/ui/src/components/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/vite-monorepo/packages/ui/src/hooks/.gitkeep b/templates/vite-monorepo/packages/ui/src/hooks/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/vite-monorepo/packages/ui/src/lib/.gitkeep b/templates/vite-monorepo/packages/ui/src/lib/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/templates/vite-monorepo/packages/ui/src/styles/globals.css b/templates/vite-monorepo/packages/ui/src/styles/globals.css
new file mode 100644
index 0000000000..e0c4ce5156
--- /dev/null
+++ b/templates/vite-monorepo/packages/ui/src/styles/globals.css
@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../components/**/*.{ts,tsx}";
+@source "../**/*.{ts,tsx}";
diff --git a/templates/vite-monorepo/packages/ui/tsconfig.json b/templates/vite-monorepo/packages/ui/tsconfig.json
new file mode 100644
index 0000000000..db4b78de10
--- /dev/null
+++ b/templates/vite-monorepo/packages/ui/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@workspace/ui/*": ["./src/*"]
+    }
+  },
+  "include": ["."],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/vite-monorepo/packages/ui/tsconfig.lint.json b/templates/vite-monorepo/packages/ui/tsconfig.lint.json
new file mode 100644
index 0000000000..08a184e477
--- /dev/null
+++ b/templates/vite-monorepo/packages/ui/tsconfig.lint.json
@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "strict": true,
+    "outDir": "dist"
+  },
+  "include": ["src", "turbo"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/templates/vite-monorepo/pnpm-lock.yaml b/templates/vite-monorepo/pnpm-lock.yaml
new file mode 100644
index 0000000000..c57dc5cfd5
--- /dev/null
+++ b/templates/vite-monorepo/pnpm-lock.yaml
@@ -0,0 +1,3749 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    devDependencies:
+      prettier:
+        specifier: ^3.8.1
+        version: 3.8.1
+      prettier-plugin-tailwindcss:
+        specifier: ^0.7.2
+        version: 0.7.2(prettier@3.8.1)
+      turbo:
+        specifier: ^2.8.8
+        version: 2.8.11
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+
+  apps/web:
+    dependencies:
+      '@workspace/ui':
+        specifier: workspace:*
+        version: link:../../packages/ui
+      react:
+        specifier: ^19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.39.2
+        version: 9.39.3
+      '@tailwindcss/vite':
+        specifier: ^4.1.18
+        version: 4.2.1(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))
+      '@types/node':
+        specifier: ^25.1.0
+        version: 25.3.0
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.1
+        version: 5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))
+      eslint:
+        specifier: ^9.39.2
+        version: 9.39.3(jiti@2.6.1)
+      eslint-plugin-react-hooks:
+        specifier: ^7.0.1
+        version: 7.0.1(eslint@9.39.3(jiti@2.6.1))
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.24
+        version: 0.4.26(eslint@9.39.3(jiti@2.6.1))
+      globals:
+        specifier: ^17.2.0
+        version: 17.3.0
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      typescript-eslint:
+        specifier: ^8.54.0
+        version: 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      vite:
+        specifier: ^7.2.4
+        version: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)
+
+  packages/ui:
+    dependencies:
+      react:
+        specifier: ^19.2.4
+        version: 19.2.4
+      react-dom:
+        specifier: ^19.2.4
+        version: 19.2.4(react@19.2.4)
+      zod:
+        specifier: ^3.25.76
+        version: 3.25.76
+    devDependencies:
+      '@eslint/js':
+        specifier: ^9.39.2
+        version: 9.39.3
+      '@tailwindcss/vite':
+        specifier: ^4.1.18
+        version: 4.2.1(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))
+      '@turbo/gen':
+        specifier: ^2.8.1
+        version: 2.8.11(@types/node@25.3.0)
+      '@types/node':
+        specifier: ^25.1.0
+        version: 25.3.0
+      '@types/react':
+        specifier: ^19.2.10
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      eslint:
+        specifier: ^9.39.2
+        version: 9.39.3(jiti@2.6.1)
+      eslint-plugin-react-hooks:
+        specifier: ^7.0.1
+        version: 7.0.1(eslint@9.39.3(jiti@2.6.1))
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.24
+        version: 0.4.26(eslint@9.39.3(jiti@2.6.1))
+      globals:
+        specifier: ^17.2.0
+        version: 17.3.0
+      tailwindcss:
+        specifier: ^4.1.18
+        version: 4.2.1
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      typescript-eslint:
+        specifier: ^8.54.0
+        version: 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+
+packages:
+
+  '@babel/code-frame@7.29.0':
+    resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/compat-data@7.29.0':
+    resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/core@7.29.0':
+    resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.29.1':
+    resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-compilation-targets@7.28.6':
+    resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-globals@7.28.0':
+    resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.28.6':
+    resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-transforms@7.28.6':
+    resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
+  '@babel/helper-plugin-utils@7.28.6':
+    resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.28.5':
+    resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-option@7.27.1':
+    resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helpers@7.28.6':
+    resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.29.0':
+    resolution: {integrity: sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1':
+    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1':
+    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/runtime-corejs3@7.29.0':
+    resolution: {integrity: sha512-TgUkdp71C9pIbBcHudc+gXZnihEDOjUAmXO1VO4HHGES7QLZcShR0stfKIxLSNIYx2fqhmJChOjm/wkF8wv4gA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/template@7.28.6':
+    resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.29.0':
+    resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.29.0':
+    resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
+    engines: {node: '>=6.9.0'}
+
+  '@esbuild/aix-ppc64@0.27.3':
+    resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.3':
+    resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.3':
+    resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.3':
+    resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.3':
+    resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.3':
+    resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.3':
+    resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.3':
+    resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.3':
+    resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.3':
+    resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.3':
+    resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.3':
+    resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.3':
+    resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.3':
+    resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.3':
+    resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.3':
+    resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.3':
+    resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.3':
+    resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.3':
+    resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.3':
+    resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.3':
+    resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.3':
+    resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
+  '@eslint-community/eslint-utils@4.9.1':
+    resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
+
+  '@eslint-community/regexpp@4.12.2':
+    resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==}
+    engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
+
+  '@eslint/config-array@0.21.1':
+    resolution: {integrity: sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/config-helpers@0.4.2':
+    resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.17.0':
+    resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/eslintrc@3.3.4':
+    resolution: {integrity: sha512-4h4MVF8pmBsncB60r0wSJiIeUKTSD4m7FmTFThG8RHlsg9ajqckLm9OraguFGZE4vVdpiI1Q4+hFnisopmG6gQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/js@9.39.3':
+    resolution: {integrity: sha512-1B1VkCq6FuUNlQvlBYb+1jDu/gV297TIs/OeiaSR9l1H27SVW55ONE1e1Vp16NqP683+xEGzxYtv4XCiDPaQiw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.7':
+    resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.4.1':
+    resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.7':
+    resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanwhocodes/module-importer@1.0.1':
+    resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==}
+    engines: {node: '>=12.22'}
+
+  '@humanwhocodes/retry@0.4.3':
+    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+    engines: {node: '>=18.18'}
+
+  '@inquirer/ansi@1.0.2':
+    resolution: {integrity: sha512-S8qNSZiYzFd0wAcyG5AXCvUHC5Sr7xpZ9wZ2py9XR88jUz8wooStVx5M6dRzczbBWjic9NP7+rY0Xi7qqK/aMQ==}
+    engines: {node: '>=18'}
+
+  '@inquirer/checkbox@4.3.2':
+    resolution: {integrity: sha512-VXukHf0RR1doGe6Sm4F0Em7SWYLTHSsbGfJdS9Ja2bX5/D5uwVOEjr07cncLROdBvmnvCATYEWlHqYmXv2IlQA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/confirm@5.1.21':
+    resolution: {integrity: sha512-KR8edRkIsUayMXV+o3Gv+q4jlhENF9nMYUZs9PA2HzrXeHI8M5uDag70U7RJn9yyiMZSbtF5/UexBtAVtZGSbQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/core@10.3.2':
+    resolution: {integrity: sha512-43RTuEbfP8MbKzedNqBrlhhNKVwoK//vUFNW3Q3vZ88BLcrs4kYpGg+B2mm5p2K/HfygoCxuKwJJiv8PbGmE0A==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/editor@4.2.23':
+    resolution: {integrity: sha512-aLSROkEwirotxZ1pBaP8tugXRFCxW94gwrQLxXfrZsKkfjOYC1aRvAZuhpJOb5cu4IBTJdsCigUlf2iCOu4ZDQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/expand@4.0.23':
+    resolution: {integrity: sha512-nRzdOyFYnpeYTTR2qFwEVmIWypzdAx/sIkCMeTNTcflFOovfqUk+HcFhQQVBftAh9gmGrpFj6QcGEqrDMDOiew==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/external-editor@1.0.3':
+    resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/figures@1.0.15':
+    resolution: {integrity: sha512-t2IEY+unGHOzAaVM5Xx6DEWKeXlDDcNPeDyUpsRc6CUhBfU3VQOEl+Vssh7VNp1dR8MdUJBWhuObjXCsVpjN5g==}
+    engines: {node: '>=18'}
+
+  '@inquirer/input@4.3.1':
+    resolution: {integrity: sha512-kN0pAM4yPrLjJ1XJBjDxyfDduXOuQHrBB8aLDMueuwUGn+vNpF7Gq7TvyVxx8u4SHlFFj4trmj+a2cbpG4Jn1g==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/number@3.0.23':
+    resolution: {integrity: sha512-5Smv0OK7K0KUzUfYUXDXQc9jrf8OHo4ktlEayFlelCjwMXz0299Y8OrI+lj7i4gCBY15UObk76q0QtxjzFcFcg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/password@4.0.23':
+    resolution: {integrity: sha512-zREJHjhT5vJBMZX/IUbyI9zVtVfOLiTO66MrF/3GFZYZ7T4YILW5MSkEYHceSii/KtRk+4i3RE7E1CUXA2jHcA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/prompts@7.10.1':
+    resolution: {integrity: sha512-Dx/y9bCQcXLI5ooQ5KyvA4FTgeo2jYj/7plWfV5Ak5wDPKQZgudKez2ixyfz7tKXzcJciTxqLeK7R9HItwiByg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/rawlist@4.1.11':
+    resolution: {integrity: sha512-+LLQB8XGr3I5LZN/GuAHo+GpDJegQwuPARLChlMICNdwW7OwV2izlCSCxN6cqpL0sMXmbKbFcItJgdQq5EBXTw==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/search@3.2.2':
+    resolution: {integrity: sha512-p2bvRfENXCZdWF/U2BXvnSI9h+tuA8iNqtUKb9UWbmLYCRQxd8WkvwWvYn+3NgYaNwdUkHytJMGG4MMLucI1kA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/select@4.4.2':
+    resolution: {integrity: sha512-l4xMuJo55MAe+N7Qr4rX90vypFwCajSakx59qe/tMaC1aEHWLyw68wF4o0A4SLAY4E0nd+Vt+EyskeDIqu1M6w==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@inquirer/type@3.0.10':
+    resolution: {integrity: sha512-BvziSRxfz5Ov8ch0z/n3oijRSEcEsHnhggm4xFZe93DHcUCTlutlq9Ox4SVENAfcRD22UQq7T/atg9Wr3k09eA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      '@types/node': '>=18'
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.5.5':
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@nodelib/fs.scandir@2.1.5':
+    resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.stat@2.0.5':
+    resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
+    engines: {node: '>= 8'}
+
+  '@nodelib/fs.walk@1.2.8':
+    resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
+    engines: {node: '>= 8'}
+
+  '@rolldown/pluginutils@1.0.0-rc.3':
+    resolution: {integrity: sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q==}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    resolution: {integrity: sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==}
+    cpu: [arm]
+    os: [android]
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    resolution: {integrity: sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    resolution: {integrity: sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    resolution: {integrity: sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    resolution: {integrity: sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    resolution: {integrity: sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    resolution: {integrity: sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    resolution: {integrity: sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==}
+    cpu: [arm]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    resolution: {integrity: sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    resolution: {integrity: sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    resolution: {integrity: sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    resolution: {integrity: sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==}
+    cpu: [loong64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    resolution: {integrity: sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    resolution: {integrity: sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    resolution: {integrity: sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    resolution: {integrity: sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    resolution: {integrity: sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    resolution: {integrity: sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==}
+    cpu: [x64]
+    os: [linux]
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    resolution: {integrity: sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    resolution: {integrity: sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    resolution: {integrity: sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    resolution: {integrity: sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==}
+    cpu: [ia32]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    resolution: {integrity: sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    resolution: {integrity: sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/node@4.2.1':
+    resolution: {integrity: sha512-jlx6sLk4EOwO6hHe1oCGm1Q4AN/s0rSrTTPBGPM0/RQ6Uylwq17FuU8IeJJKEjtc6K6O07zsvP+gDO6MMWo7pg==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    resolution: {integrity: sha512-eZ7G1Zm5EC8OOKaesIKuw77jw++QJ2lL9N+dDpdQiAB/c/B2wDh0QPFHbkBVrXnwNugvrbJFk1gK2SsVjwWReg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    resolution: {integrity: sha512-q/LHkOstoJ7pI1J0q6djesLzRvQSIfEto148ppAd+BVQK0JYjQIFSK3JgYZJa+Yzi0DDa52ZsQx2rqytBnf8Hw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    resolution: {integrity: sha512-/f/ozlaXGY6QLbpvd/kFTro2l18f7dHKpB+ieXz+Cijl4Mt9AI2rTrpq7V+t04nK+j9XBQHnSMdeQRhbGyt6fw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    resolution: {integrity: sha512-5e/AkgYJT/cpbkys/OU2Ei2jdETCLlifwm7ogMC7/hksI2fC3iiq6OcXwjibcIjPung0kRtR3TxEITkqgn0TcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    resolution: {integrity: sha512-Uny1EcVTTmerCKt/1ZuKTkb0x8ZaiuYucg2/kImO5A5Y/kBz41/+j0gxUZl+hTF3xkWpDmHX+TaWhOtba2Fyuw==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    resolution: {integrity: sha512-CTrwomI+c7n6aSSQlsPL0roRiNMDQ/YzMD9EjcR+H4f0I1SQ8QqIuPnsVp7QgMkC1Qi8rtkekLkOFjo7OlEFRQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    resolution: {integrity: sha512-WZA0CHRL/SP1TRbA5mp9htsppSEkWuQ4KsSUumYQnyl8ZdT39ntwqmz4IUHGN6p4XdSlYfJwM4rRzZLShHsGAQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    resolution: {integrity: sha512-qMFzxI2YlBOLW5PhblzuSWlWfwLHaneBE0xHzLrBgNtqN6mWfs+qYbhryGSXQjFYB1Dzf5w+LN5qbUTPhW7Y5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    resolution: {integrity: sha512-5r1X2FKnCMUPlXTWRYpHdPYUY6a1Ar/t7P24OuiEdEOmms5lyqjDRvVY1yy9Rmioh+AunQ0rWiOTPE8F9A3v5g==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    resolution: {integrity: sha512-MGFB5cVPvshR85MTJkEvqDUnuNoysrsRxd6vnk1Lf2tbiqNlXpHYZqkqOQalydienEWOHHFyyuTSYRsLfxFJ2Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    resolution: {integrity: sha512-YlUEHRHBGnCMh4Nj4GnqQyBtsshUPdiNroZj8VPkvTZSoHsilRCwXcVKnG9kyi0ZFAS/3u+qKHBdDc81SADTRA==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    resolution: {integrity: sha512-rbO34G5sMWWyrN/idLeVxAZgAKWrn5LiR3/I90Q9MkA67s6T1oB0xtTe+0heoBvHSpbU9Mk7i6uwJnpo4u21XQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.1':
+    resolution: {integrity: sha512-yv9jeEFWnjKCI6/T3Oq50yQEOqmpmpfzG1hcZsAOaXFQPfzWprWrlHSdGPEF3WQTi8zu8ohC9Mh9J470nT5pUw==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.1':
+    resolution: {integrity: sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7
+
+  '@turbo/gen-darwin-64@2.8.11':
+    resolution: {integrity: sha512-xrx2diQfiZOQ//BTDDjBfT8GG5gKUQ15QlvHFn/9kSyZSBZUkgDeuCbk12K15/kZfjfa6e0Il0guVCKld2pzhg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@turbo/gen-darwin-arm64@2.8.11':
+    resolution: {integrity: sha512-D7sSxQLRU4pHWvz9o+SXtfGgRgQ/UEi4DKXNZViSIvCctq5rSzQFioD7M0BigUBLYTxxb7cAbY9PFNmPbe8rkw==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@turbo/gen-linux-64@2.8.11':
+    resolution: {integrity: sha512-NmzZ+GVs2DuJFBsTXlViOcANA4xWmOl1VN8UfmbYuZzkaH9oIB4L5ehg88PZkzO12yn8qULnyzqGxNYa/YzAKw==}
+    cpu: [x64]
+    os: [linux]
+
+  '@turbo/gen-linux-arm64@2.8.11':
+    resolution: {integrity: sha512-Y4yqldcNZXdIYWfm/iByOxYjeXYw53gHU0NRlbwD4hqW5v/Hi/846ehVtEGH4hzmy4r94k4jrEu+ftxK/oJSUw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@turbo/gen-windows-64@2.8.11':
+    resolution: {integrity: sha512-qHGQum/Xae5BThd0A/a8w3yjq5EndJj4szjXxZlzTQEddzMCAFSO5DfJpRWkSZ/g8ei/6JebFiIAxZMkuQ1SAw==}
+    cpu: [x64]
+    os: [win32]
+
+  '@turbo/gen@2.8.11':
+    resolution: {integrity: sha512-WgTEEwq1NOmDjDRUu+F1qLJtyIDnguWX/GxML6Q+MnOQDk9va+pkkdWsscIy/CqOputOgCE5wOlEgefE+frydg==}
+    hasBin: true
+
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
+  '@types/glob@7.2.0':
+    resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==}
+
+  '@types/inquirer@6.5.0':
+    resolution: {integrity: sha512-rjaYQ9b9y/VFGOpqBEXRavc3jh0a+e6evAbI31tMda8VlPaSy0AZJfXsvmIe3wklc7W6C3zCSfleuMXR7NOyXw==}
+
+  '@types/json-schema@7.0.15':
+    resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
+
+  '@types/minimatch@6.0.0':
+    resolution: {integrity: sha512-zmPitbQ8+6zNutpwgcQuLcsEpn/Cj54Kbn7L5pX0Os5kdWplB7xPgEh/g+SWOB/qmows2gpuCaPyduq8ZZRnxA==}
+    deprecated: This is a stub types definition. minimatch provides its own type definitions, so you do not need this installed.
+
+  '@types/node@25.3.0':
+    resolution: {integrity: sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==}
+
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
+    peerDependencies:
+      '@types/react': ^19.2.0
+
+  '@types/react@19.2.14':
+    resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
+
+  '@types/through@0.0.33':
+    resolution: {integrity: sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==}
+
+  '@typescript-eslint/eslint-plugin@8.56.1':
+    resolution: {integrity: sha512-Jz9ZztpB37dNC+HU2HI28Bs9QXpzCz+y/twHOwhyrIRdbuVDxSytJNDl6z/aAKlaRIwC7y8wJdkBv7FxYGgi0A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      '@typescript-eslint/parser': ^8.56.1
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/parser@8.56.1':
+    resolution: {integrity: sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/project-service@8.56.1':
+    resolution: {integrity: sha512-TAdqQTzHNNvlVFfR+hu2PDJrURiwKsUvxFn1M0h95BB8ah5jejas08jUWG4dBA68jDMI988IvtfdAI53JzEHOQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/scope-manager@8.56.1':
+    resolution: {integrity: sha512-YAi4VDKcIZp0O4tz/haYKhmIDZFEUPOreKbfdAN3SzUDMcPhJ8QI99xQXqX+HoUVq8cs85eRKnD+rne2UAnj2w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/tsconfig-utils@8.56.1':
+    resolution: {integrity: sha512-qOtCYzKEeyr3aR9f28mPJqBty7+DBqsdd63eO0yyDwc6vgThj2UjWfJIcsFeSucYydqcuudMOprZ+x1SpF3ZuQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/type-utils@8.56.1':
+    resolution: {integrity: sha512-yB/7dxi7MgTtGhZdaHCemf7PuwrHMenHjmzgUW1aJpO+bBU43OycnM3Wn+DdvDO/8zzA9HlhaJ0AUGuvri4oGg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/types@8.56.1':
+    resolution: {integrity: sha512-dbMkdIUkIkchgGDIv7KLUpa0Mda4IYjo4IAMJUZ+3xNoUXxMsk9YtKpTHSChRS85o+H9ftm51gsK1dZReY9CVw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@typescript-eslint/typescript-estree@8.56.1':
+    resolution: {integrity: sha512-qzUL1qgalIvKWAf9C1HpvBjif+Vm6rcT5wZd4VoMb9+Km3iS3Cv9DY6dMRMDtPnwRAFyAi7YXJpTIEXLvdfPxg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/utils@8.56.1':
+    resolution: {integrity: sha512-HPAVNIME3tABJ61siYlHzSWCGtOoeP2RTIaHXFMPqjrQKCGB9OgUVdiNgH7TJS2JNIQ5qQ4RsAUDuGaGme/KOA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  '@typescript-eslint/visitor-keys@8.56.1':
+    resolution: {integrity: sha512-KiROIzYdEV85YygXw6BI/Dx4fnBlFQu6Mq4QE4MOH9fFnhohw6wX/OAvDY2/C+ut0I3RSPKenvZJIVYqJNkhEw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@vitejs/plugin-react@5.1.4':
+    resolution: {integrity: sha512-VIcFLdRi/VYRU8OL/puL7QXMYafHmqOnwTZY50U1JPlCNj30PxCMx65c494b1K9be9hX83KVt0+gTEwTWLqToA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+
+  acorn-jsx@5.3.2:
+    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  acorn@8.16.0:
+    resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
+    engines: {node: '>=0.4.0'}
+    hasBin: true
+
+  aggregate-error@3.1.0:
+    resolution: {integrity: sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==}
+    engines: {node: '>=8'}
+
+  ajv@6.14.0:
+    resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==}
+
+  ansi-escapes@4.3.2:
+    resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
+    engines: {node: '>=8'}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
+  argparse@2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+
+  array-union@2.1.0:
+    resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
+    engines: {node: '>=8'}
+
+  balanced-match@1.0.2:
+    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  baseline-browser-mapping@2.10.0:
+    resolution: {integrity: sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
+  brace-expansion@1.1.12:
+    resolution: {integrity: sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==}
+
+  brace-expansion@5.0.3:
+    resolution: {integrity: sha512-fy6KJm2RawA5RcHkLa1z/ScpBeA762UF9KmZQxwIbDtRJrgLzM10depAiEQ+CXYcoiqW1/m96OAAoke2nE9EeA==}
+    engines: {node: 18 || 20 || >=22}
+
+  braces@3.0.3:
+    resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
+    engines: {node: '>=8'}
+
+  browserslist@4.28.1:
+    resolution: {integrity: sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==}
+    engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
+    hasBin: true
+
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
+  camel-case@3.0.0:
+    resolution: {integrity: sha512-+MbKztAYHXPr1jNTSKQF52VpcFjwY5RkR7fxksV8Doo4KAYc5Fl4UJRgthBbTmEx8C54DqahhbLJkDwjI3PI/w==}
+
+  caniuse-lite@1.0.30001774:
+    resolution: {integrity: sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==}
+
+  chalk@4.1.2:
+    resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
+    engines: {node: '>=10'}
+
+  change-case@3.1.0:
+    resolution: {integrity: sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==}
+
+  chardet@0.7.0:
+    resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
+
+  chardet@2.1.1:
+    resolution: {integrity: sha512-PsezH1rqdV9VvyNhxxOW32/d75r01NY7TQCmOqomRo15ZSOKbpTFVsfjghxo6JloQUCGnH4k1LGu0R4yCLlWQQ==}
+
+  clean-stack@2.2.0:
+    resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
+    engines: {node: '>=6'}
+
+  cli-cursor@3.1.0:
+    resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
+    engines: {node: '>=8'}
+
+  cli-width@3.0.0:
+    resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
+    engines: {node: '>= 10'}
+
+  cli-width@4.1.0:
+    resolution: {integrity: sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ==}
+    engines: {node: '>= 12'}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
+  concat-map@0.0.1:
+    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
+
+  constant-case@2.0.0:
+    resolution: {integrity: sha512-eS0N9WwmjTqrOmR3o83F5vW8Z+9R1HnVz3xmzT2PMFug9ly+Au/fxRWlEBSb6LcZwspSsEn9Xs1uw9YgzAg1EQ==}
+
+  convert-source-map@2.0.0:
+    resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+
+  core-js-pure@3.48.0:
+    resolution: {integrity: sha512-1slJgk89tWC51HQ1AEqG+s2VuwpTRr8ocu4n20QUcH1v9lAN0RXen0Q0AABa/DK1I7RrNWLucplOHMx8hfTGTw==}
+
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
+    engines: {node: '>= 8'}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  debug@4.4.3:
+    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
+  deep-is@0.1.4:
+    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
+
+  del@5.1.0:
+    resolution: {integrity: sha512-wH9xOVHnczo9jN2IW68BabcecVPxacIA3g/7z6vhSU/4stOKQzeCRK0yD0A24WiAAUJmmVpWqrERcTxnLo3AnA==}
+    engines: {node: '>=8'}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  dir-glob@3.0.1:
+    resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
+    engines: {node: '>=8'}
+
+  dot-case@2.1.1:
+    resolution: {integrity: sha512-HnM6ZlFqcajLsyudHq7LeeLDr2rFAVYtDv/hV5qchQEidSck8j9OPUsXY9KwJv/lHMtYlX4DjRQqwFYa+0r8Ug==}
+
+  electron-to-chromium@1.5.302:
+    resolution: {integrity: sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==}
+
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
+  enhanced-resolve@5.19.0:
+    resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
+    engines: {node: '>=10.13.0'}
+
+  esbuild@0.27.3:
+    resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
+  escalade@3.2.0:
+    resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
+    engines: {node: '>=6'}
+
+  escape-string-regexp@1.0.5:
+    resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
+    engines: {node: '>=0.8.0'}
+
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eslint-plugin-react-hooks@7.0.1:
+    resolution: {integrity: sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
+  eslint-plugin-react-refresh@0.4.26:
+    resolution: {integrity: sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ==}
+    peerDependencies:
+      eslint: '>=8.40'
+
+  eslint-scope@8.4.0:
+    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@3.4.3:
+    resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
+    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
+
+  eslint-visitor-keys@4.2.1:
+    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  eslint-visitor-keys@5.0.1:
+    resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
+
+  eslint@9.39.3:
+    resolution: {integrity: sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.4.0:
+    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  esquery@1.7.0:
+    resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
+    engines: {node: '>=0.10'}
+
+  esrecurse@4.3.0:
+    resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
+    engines: {node: '>=4.0'}
+
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
+  esutils@2.0.3:
+    resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
+    engines: {node: '>=0.10.0'}
+
+  external-editor@3.1.0:
+    resolution: {integrity: sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==}
+    engines: {node: '>=4'}
+
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-glob@3.3.3:
+    resolution: {integrity: sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==}
+    engines: {node: '>=8.6.0'}
+
+  fast-json-stable-stringify@2.1.0:
+    resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
+
+  fast-levenshtein@2.0.6:
+    resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
+
+  fastq@1.20.1:
+    resolution: {integrity: sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  figures@3.2.0:
+    resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
+    engines: {node: '>=8'}
+
+  file-entry-cache@8.0.0:
+    resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
+    engines: {node: '>=16.0.0'}
+
+  fill-range@7.1.1:
+    resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
+    engines: {node: '>=8'}
+
+  find-up@5.0.0:
+    resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
+    engines: {node: '>=10'}
+
+  flat-cache@4.0.1:
+    resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==}
+    engines: {node: '>=16'}
+
+  flatted@3.3.3:
+    resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
+
+  fs.realpath@1.0.0:
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  function-bind@1.1.2:
+    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
+
+  gensync@1.0.0-beta.2:
+    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
+    engines: {node: '>=6.9.0'}
+
+  glob-parent@5.1.2:
+    resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
+    engines: {node: '>= 6'}
+
+  glob-parent@6.0.2:
+    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
+    engines: {node: '>=10.13.0'}
+
+  glob@7.2.3:
+    resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
+
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
+  globals@17.3.0:
+    resolution: {integrity: sha512-yMqGUQVVCkD4tqjOJf3TnrvaaHDMYp4VlUSObbkIiuCPe/ofdMBFIAcBbCSRFWOnos6qRiTVStDwqPLUclaxIw==}
+    engines: {node: '>=18'}
+
+  globby@10.0.2:
+    resolution: {integrity: sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==}
+    engines: {node: '>=8'}
+
+  graceful-fs@4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
+
+  handlebars@4.7.8:
+    resolution: {integrity: sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==}
+    engines: {node: '>=0.4.7'}
+    hasBin: true
+
+  has-flag@4.0.0:
+    resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
+    engines: {node: '>=8'}
+
+  hasown@2.0.2:
+    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
+    engines: {node: '>= 0.4'}
+
+  header-case@1.0.1:
+    resolution: {integrity: sha512-i0q9mkOeSuhXw6bGgiQCCBgY/jlZuV/7dZXyZ9c6LcBrqwvT8eT719E9uxE5LiZftdl+z81Ugbg/VvXV4OJOeQ==}
+
+  hermes-estree@0.25.1:
+    resolution: {integrity: sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==}
+
+  hermes-parser@0.25.1:
+    resolution: {integrity: sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==}
+
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  iconv-lite@0.7.2:
+    resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==}
+    engines: {node: '>=0.10.0'}
+
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
+  ignore@7.0.5:
+    resolution: {integrity: sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==}
+    engines: {node: '>= 4'}
+
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
+  imurmurhash@0.1.4:
+    resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
+    engines: {node: '>=0.8.19'}
+
+  indent-string@4.0.0:
+    resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
+    engines: {node: '>=8'}
+
+  inflight@1.0.6:
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  inquirer@7.3.3:
+    resolution: {integrity: sha512-JG3eIAj5V9CwcGvuOmoo6LB9kbAYT8HXffUl6memuszlwDC/qvFAJw49XJ5NROSFNPxp3iQg1GqkFhaY/CR0IA==}
+    engines: {node: '>=8.0.0'}
+
+  is-core-module@2.16.1:
+    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
+    engines: {node: '>= 0.4'}
+
+  is-extglob@2.1.1:
+    resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
+    engines: {node: '>=0.10.0'}
+
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
+  is-glob@4.0.3:
+    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
+    engines: {node: '>=0.10.0'}
+
+  is-lower-case@1.1.3:
+    resolution: {integrity: sha512-+5A1e/WJpLLXZEDlgz4G//WYSHyQBD32qa4Jd3Lw06qQlv3fJHnp3YIHjTQSGzHMgzmVKz2ZP3rBxTHkPw/lxA==}
+
+  is-number@7.0.0:
+    resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
+    engines: {node: '>=0.12.0'}
+
+  is-path-cwd@2.2.0:
+    resolution: {integrity: sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==}
+    engines: {node: '>=6'}
+
+  is-path-inside@3.0.3:
+    resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
+    engines: {node: '>=8'}
+
+  is-upper-case@1.1.2:
+    resolution: {integrity: sha512-GQYSJMgfeAmVwh9ixyk888l7OIhNAGKtY6QA+IrWlu9MDTCaXmeozOZ2S9Knj7bQwBO/H6J2kb+pbyTUiMNbsw==}
+
+  isbinaryfile@4.0.10:
+    resolution: {integrity: sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==}
+    engines: {node: '>= 8.0.0'}
+
+  isexe@2.0.0:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-buffer@3.0.1:
+    resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
+
+  json-schema-traverse@0.4.1:
+    resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
+
+  json-stable-stringify-without-jsonify@1.0.1:
+    resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  keyv@4.5.4:
+    resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
+
+  levn@0.4.1:
+    resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
+    engines: {node: '>= 0.8.0'}
+
+  lightningcss-android-arm64@1.31.1:
+    resolution: {integrity: sha512-HXJF3x8w9nQ4jbXRiNppBCqeZPIAfUo8zE/kOEGbW5NZvGc/K7nMxbhIr+YlFlHW5mpbg/YFPdbnCh1wAXCKFg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.31.1:
+    resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.31.1:
+    resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.31.1:
+    resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.31.1:
+    resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.31.1:
+    resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
+    engines: {node: '>= 12.0.0'}
+
+  locate-path@6.0.0:
+    resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
+    engines: {node: '>=10'}
+
+  lodash.get@4.4.2:
+    resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==}
+    deprecated: This package is deprecated. Use the optional chaining (?.) operator instead.
+
+  lodash.merge@4.6.2:
+    resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+
+  lodash@4.17.23:
+    resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
+
+  lower-case-first@1.0.2:
+    resolution: {integrity: sha512-UuxaYakO7XeONbKrZf5FEgkantPf5DUqDayzP5VXZrtRPdH86s4kN47I8B3TW10S4QKiE3ziHNf3kRN//okHjA==}
+
+  lower-case@1.1.4:
+    resolution: {integrity: sha512-2Fgx1Ycm599x+WGpIYwJOvsjmXFzTSc34IwDWALRA/8AopUKAVPwfJ+h5+f85BCp0PWmmJcWzEpxOpoXycMpdA==}
+
+  lru-cache@5.1.1:
+    resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  merge2@1.4.1:
+    resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
+    engines: {node: '>= 8'}
+
+  micromatch@4.0.8:
+    resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
+    engines: {node: '>=8.6'}
+
+  mimic-fn@2.1.0:
+    resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
+    engines: {node: '>=6'}
+
+  minimatch@10.2.4:
+    resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==}
+    engines: {node: 18 || 20 || >=22}
+
+  minimatch@3.1.5:
+    resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==}
+
+  minimist@1.2.8:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+
+  mkdirp@0.5.6:
+    resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
+    hasBin: true
+
+  ms@2.1.3:
+    resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
+
+  mute-stream@0.0.8:
+    resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
+
+  mute-stream@2.0.0:
+    resolution: {integrity: sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA==}
+    engines: {node: ^18.17.0 || >=20.5.0}
+
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  natural-compare@1.4.0:
+    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
+
+  neo-async@2.6.2:
+    resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
+
+  no-case@2.3.2:
+    resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
+
+  node-plop@0.26.3:
+    resolution: {integrity: sha512-Cov028YhBZ5aB7MdMWJEmwyBig43aGL5WT4vdoB28Oitau1zZAcHUn8Sgfk9HM33TqhtLJ9PlM/O0Mv+QpV/4Q==}
+    engines: {node: '>=8.9.4'}
+
+  node-releases@2.0.27:
+    resolution: {integrity: sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==}
+
+  once@1.4.0:
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
+
+  onetime@5.1.2:
+    resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
+    engines: {node: '>=6'}
+
+  optionator@0.9.4:
+    resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
+    engines: {node: '>= 0.8.0'}
+
+  os-tmpdir@1.0.2:
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
+    engines: {node: '>=0.10.0'}
+
+  p-limit@3.1.0:
+    resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
+    engines: {node: '>=10'}
+
+  p-locate@5.0.0:
+    resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==}
+    engines: {node: '>=10'}
+
+  p-map@3.0.0:
+    resolution: {integrity: sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==}
+    engines: {node: '>=8'}
+
+  param-case@2.1.1:
+    resolution: {integrity: sha512-eQE845L6ot89sk2N8liD8HAuH4ca6Vvr7VWAWwt7+kvvG5aBcPmmphQ68JsEG2qa9n1TykS2DLeMt363AAH8/w==}
+
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  pascal-case@2.0.1:
+    resolution: {integrity: sha512-qjS4s8rBOJa2Xm0jmxXiyh1+OFf6ekCWOvUaRgAQSktzlTbMotS0nmG9gyYAybCWBcuP4fsBeRCKNwGBnMe2OQ==}
+
+  path-case@2.1.1:
+    resolution: {integrity: sha512-Ou0N05MioItesaLr9q8TtHVWmJ6fxWdqKB2RohFmNWVyJ+2zeKIeDNWAN6B/Pe7wpzWChhZX6nONYmOnMeJQ/Q==}
+
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
+  path-is-absolute@1.0.1:
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
+    engines: {node: '>=0.10.0'}
+
+  path-key@3.1.1:
+    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
+    engines: {node: '>=8'}
+
+  path-parse@1.0.7:
+    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@2.3.1:
+    resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
+    engines: {node: '>=8.6'}
+
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prelude-ls@1.2.1:
+    resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
+    engines: {node: '>= 0.8.0'}
+
+  prettier-plugin-tailwindcss@0.7.2:
+    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
+    engines: {node: '>=20.19'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      '@zackad/prettier-plugin-twig': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-multiline-arrays: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-sort-imports: '*'
+      prettier-plugin-svelte: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      '@zackad/prettier-plugin-twig':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-multiline-arrays:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-sort-imports:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+
+  prettier@3.8.1:
+    resolution: {integrity: sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
+  queue-microtask@1.2.3:
+    resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
+
+  react-dom@19.2.4:
+    resolution: {integrity: sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==}
+    peerDependencies:
+      react: ^19.2.4
+
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+    engines: {node: '>=0.10.0'}
+
+  react@19.2.4:
+    resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
+    engines: {node: '>=0.10.0'}
+
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
+  restore-cursor@3.1.0:
+    resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
+    engines: {node: '>=8'}
+
+  reusify@1.1.0:
+    resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
+    engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
+
+  rimraf@3.0.2:
+    resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
+    hasBin: true
+
+  rollup@4.59.0:
+    resolution: {integrity: sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
+  run-async@2.4.1:
+    resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
+    engines: {node: '>=0.12.0'}
+
+  run-parallel@1.2.0:
+    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
+
+  rxjs@6.6.7:
+    resolution: {integrity: sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==}
+    engines: {npm: '>=2.0.0'}
+
+  safer-buffer@2.1.2:
+    resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
+
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
+
+  semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+
+  semver@7.7.4:
+    resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
+  sentence-case@2.1.1:
+    resolution: {integrity: sha512-ENl7cYHaK/Ktwk5OTD+aDbQ3uC8IByu/6Bkg+HDv8Mm+XnBnppVNalcfJTNsp1ibstKh030/JKQQWglDvtKwEQ==}
+
+  shebang-command@2.0.0:
+    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
+    engines: {node: '>=8'}
+
+  shebang-regex@3.0.0:
+    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
+    engines: {node: '>=8'}
+
+  signal-exit@3.0.7:
+    resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
+
+  signal-exit@4.1.0:
+    resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
+    engines: {node: '>=14'}
+
+  slash@3.0.0:
+    resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
+    engines: {node: '>=8'}
+
+  snake-case@2.1.0:
+    resolution: {integrity: sha512-FMR5YoPFwOLuh4rRz92dywJjyKYZNLpMn1R5ujVpIYkbA9p01fq8RMg0FkO4M+Yobt4MjHeLTJVm5xFFBHSV2Q==}
+
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
+    engines: {node: '>=0.10.0'}
+
+  source-map@0.6.1:
+    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
+    engines: {node: '>=0.10.0'}
+
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
+  strip-json-comments@3.1.1:
+    resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==}
+    engines: {node: '>=8'}
+
+  supports-color@7.2.0:
+    resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
+    engines: {node: '>=8'}
+
+  supports-preserve-symlinks-flag@1.0.0:
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+
+  swap-case@1.1.2:
+    resolution: {integrity: sha512-BAmWG6/bx8syfc6qXPprof3Mn5vQgf5dwdUNJhsNqU9WdPt5P+ES/wQ5bxfijy8zwZgZZHslC3iAsxsuQMCzJQ==}
+
+  tailwindcss@4.2.1:
+    resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
+
+  tapable@2.3.0:
+    resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
+    engines: {node: '>=6'}
+
+  through@2.3.8:
+    resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
+
+  tinyglobby@0.2.15:
+    resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
+    engines: {node: '>=12.0.0'}
+
+  title-case@2.1.1:
+    resolution: {integrity: sha512-EkJoZ2O3zdCz3zJsYCsxyq2OC5hrxR9mfdd5I+w8h/tmFfeOxJ+vvkxsKxdmN0WtS9zLdHEgfgVOiMVgv+Po4Q==}
+
+  tmp@0.0.33:
+    resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
+    engines: {node: '>=0.6.0'}
+
+  to-regex-range@5.0.1:
+    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
+    engines: {node: '>=8.0'}
+
+  ts-api-utils@2.4.0:
+    resolution: {integrity: sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==}
+    engines: {node: '>=18.12'}
+    peerDependencies:
+      typescript: '>=4.8.4'
+
+  tslib@1.14.1:
+    resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
+
+  turbo-darwin-64@2.8.11:
+    resolution: {integrity: sha512-XKaCWaz4OCt77oYYvGCIRpvYD4c/aNaKjRkUpv+e8rN3RZb+5Xsyew4yRO+gaHdMIUhQznXNXfHlhs+/p7lIhA==}
+    cpu: [x64]
+    os: [darwin]
+
+  turbo-darwin-arm64@2.8.11:
+    resolution: {integrity: sha512-VvynLHGUNvQ9k7GZjRPSsRcK4VkioTfFb7O7liAk4nHKjEcMdls7GqxzjVWgJiKz3hWmQGaP9hRa9UUnhVWCxA==}
+    cpu: [arm64]
+    os: [darwin]
+
+  turbo-linux-64@2.8.11:
+    resolution: {integrity: sha512-cbSn37dcm+EmkQ7DD0euy7xV7o2el4GAOr1XujvkAyKjjNvQ+6QIUeDgQcwAx3D17zPpDvfDMJY2dLQadWnkmQ==}
+    cpu: [x64]
+    os: [linux]
+
+  turbo-linux-arm64@2.8.11:
+    resolution: {integrity: sha512-+trymp2s2aBrhS04l6qFxcExzZ8ffndevuUB9c5RCeqsVpZeiWuGQlWNm5XjOmzoMayxRARZ5ma7yiWbGMiLqQ==}
+    cpu: [arm64]
+    os: [linux]
+
+  turbo-windows-64@2.8.11:
+    resolution: {integrity: sha512-3kJjFSM4yw1n9Uzmi+XkAUgCae19l/bH6RJ442xo7mnZm0tpOjo33F+FYHoSVpIWVMd0HG0LDccyafPSdylQbA==}
+    cpu: [x64]
+    os: [win32]
+
+  turbo-windows-arm64@2.8.11:
+    resolution: {integrity: sha512-JOM4uF2vuLsJUvibdR6X9QqdZr6BhC6Nhlrw4LKFPsXZZI/9HHLoqAiYRpE4MuzIwldCH/jVySnWXrI1SKto0g==}
+    cpu: [arm64]
+    os: [win32]
+
+  turbo@2.8.11:
+    resolution: {integrity: sha512-H+rwSHHPLoyPOSoHdmI1zY0zy0GGj1Dmr7SeJW+nZiWLz2nex8EJ+fkdVabxXFMNEux+aywI4Sae8EqhmnOv4A==}
+    hasBin: true
+
+  type-check@0.4.0:
+    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
+    engines: {node: '>= 0.8.0'}
+
+  type-fest@0.21.3:
+    resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
+    engines: {node: '>=10'}
+
+  typescript-eslint@8.56.1:
+    resolution: {integrity: sha512-U4lM6pjmBX7J5wk4szltF7I1cGBHXZopnAXCMXb3+fZ3B/0Z3hq3wS/CCUB2NZBNAExK92mCU2tEohWuwVMsDQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    peerDependencies:
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+      typescript: '>=4.8.4 <6.0.0'
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  uglify-js@3.19.3:
+    resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==}
+    engines: {node: '>=0.8.0'}
+    hasBin: true
+
+  undici-types@7.18.2:
+    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}
+
+  update-browserslist-db@1.2.3:
+    resolution: {integrity: sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==}
+    hasBin: true
+    peerDependencies:
+      browserslist: '>= 4.21.0'
+
+  upper-case-first@1.1.2:
+    resolution: {integrity: sha512-wINKYvI3Db8dtjikdAqoBbZoP6Q+PZUyfMR7pmwHzjC2quzSkUq5DmPrTtPEqHaz8AGtmsB4TqwapMTM1QAQOQ==}
+
+  upper-case@1.1.3:
+    resolution: {integrity: sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==}
+
+  uri-js@4.4.1:
+    resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
+
+  vite@7.3.1:
+    resolution: {integrity: sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  which@2.0.2:
+    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
+    engines: {node: '>= 8'}
+    hasBin: true
+
+  word-wrap@1.2.5:
+    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
+    engines: {node: '>=0.10.0'}
+
+  wordwrap@1.0.0:
+    resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  wrappy@1.0.2:
+    resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
+
+  yallist@3.1.1:
+    resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
+
+  yocto-queue@0.1.0:
+    resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
+    engines: {node: '>=10'}
+
+  yoctocolors-cjs@2.1.3:
+    resolution: {integrity: sha512-U/PBtDf35ff0D8X8D0jfdzHYEPFxAI7jJlxZXwCSez5M3190m+QobIfh+sWDWSHMCWWJN2AWamkegn6vr6YBTw==}
+    engines: {node: '>=18'}
+
+  zod-validation-error@4.0.2:
+    resolution: {integrity: sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      zod: ^3.25.0 || ^4.0.0
+
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
+snapshots:
+
+  '@babel/code-frame@7.29.0':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/compat-data@7.29.0': {}
+
+  '@babel/core@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.0)
+      '@babel/helpers': 7.28.6
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/generator@7.29.1':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.29.0
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-plugin-utils@7.28.6': {}
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.6':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+
+  '@babel/parser@7.29.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.0)':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/runtime-corejs3@7.29.0':
+    dependencies:
+      core-js-pure: 3.48.0
+
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@babel/traverse@7.29.0':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/generator': 7.29.1
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.29.0
+      '@babel/template': 7.28.6
+      '@babel/types': 7.29.0
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.29.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@esbuild/aix-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm@0.27.3':
+    optional: true
+
+  '@esbuild/android-x64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.3':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.3':
+    optional: true
+
+  '@eslint-community/eslint-utils@4.9.1(eslint@9.39.3(jiti@2.6.1))':
+    dependencies:
+      eslint: 9.39.3(jiti@2.6.1)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.2': {}
+
+  '@eslint/config-array@0.21.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.7
+      debug: 4.4.3
+      minimatch: 3.1.5
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/config-helpers@0.4.2':
+    dependencies:
+      '@eslint/core': 0.17.0
+
+  '@eslint/core@0.17.0':
+    dependencies:
+      '@types/json-schema': 7.0.15
+
+  '@eslint/eslintrc@3.3.4':
+    dependencies:
+      ajv: 6.14.0
+      debug: 4.4.3
+      espree: 10.4.0
+      globals: 14.0.0
+      ignore: 5.3.2
+      import-fresh: 3.3.1
+      js-yaml: 4.1.1
+      minimatch: 3.1.5
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/js@9.39.3': {}
+
+  '@eslint/object-schema@2.1.7': {}
+
+  '@eslint/plugin-kit@0.4.1':
+    dependencies:
+      '@eslint/core': 0.17.0
+      levn: 0.4.1
+
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.7':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.4.3
+
+  '@humanwhocodes/module-importer@1.0.1': {}
+
+  '@humanwhocodes/retry@0.4.3': {}
+
+  '@inquirer/ansi@1.0.2': {}
+
+  '@inquirer/checkbox@4.3.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/confirm@5.1.21(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/core@10.3.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      cli-width: 4.1.0
+      mute-stream: 2.0.0
+      signal-exit: 4.1.0
+      wrap-ansi: 6.2.0
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/editor@4.2.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/external-editor': 1.0.3(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/expand@4.0.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/external-editor@1.0.3(@types/node@25.3.0)':
+    dependencies:
+      chardet: 2.1.1
+      iconv-lite: 0.7.2
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/figures@1.0.15': {}
+
+  '@inquirer/input@4.3.1(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/number@3.0.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/password@4.0.23(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/prompts@7.10.1(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/checkbox': 4.3.2(@types/node@25.3.0)
+      '@inquirer/confirm': 5.1.21(@types/node@25.3.0)
+      '@inquirer/editor': 4.2.23(@types/node@25.3.0)
+      '@inquirer/expand': 4.0.23(@types/node@25.3.0)
+      '@inquirer/input': 4.3.1(@types/node@25.3.0)
+      '@inquirer/number': 3.0.23(@types/node@25.3.0)
+      '@inquirer/password': 4.0.23(@types/node@25.3.0)
+      '@inquirer/rawlist': 4.1.11(@types/node@25.3.0)
+      '@inquirer/search': 3.2.2(@types/node@25.3.0)
+      '@inquirer/select': 4.4.2(@types/node@25.3.0)
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/rawlist@4.1.11(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/search@3.2.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/select@4.4.2(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/ansi': 1.0.2
+      '@inquirer/core': 10.3.2(@types/node@25.3.0)
+      '@inquirer/figures': 1.0.15
+      '@inquirer/type': 3.0.10(@types/node@25.3.0)
+      yoctocolors-cjs: 2.1.3
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@inquirer/type@3.0.10(@types/node@25.3.0)':
+    optionalDependencies:
+      '@types/node': 25.3.0
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.5.5': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  '@nodelib/fs.scandir@2.1.5':
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      run-parallel: 1.2.0
+
+  '@nodelib/fs.stat@2.0.5': {}
+
+  '@nodelib/fs.walk@1.2.8':
+    dependencies:
+      '@nodelib/fs.scandir': 2.1.5
+      fastq: 1.20.1
+
+  '@rolldown/pluginutils@1.0.0-rc.3': {}
+
+  '@rollup/rollup-android-arm-eabi@4.59.0':
+    optional: true
+
+  '@rollup/rollup-android-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-darwin-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-freebsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-gnueabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm-musleabihf@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-arm64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-loong64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-ppc64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-riscv64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-s390x-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-linux-x64-musl@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openbsd-x64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-openharmony-arm64@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-arm64-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-ia32-msvc@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-gnu@4.59.0':
+    optional: true
+
+  '@rollup/rollup-win32-x64-msvc@4.59.0':
+    optional: true
+
+  '@tailwindcss/node@4.2.1':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.1
+
+  '@tailwindcss/oxide-android-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.1':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.1':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-arm64': 4.2.1
+      '@tailwindcss/oxide-darwin-x64': 4.2.1
+      '@tailwindcss/oxide-freebsd-x64': 4.2.1
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.1
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.1
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.1
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.1
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
+
+  '@tailwindcss/vite@4.2.1(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))':
+    dependencies:
+      '@tailwindcss/node': 4.2.1
+      '@tailwindcss/oxide': 4.2.1
+      tailwindcss: 4.2.1
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)
+
+  '@turbo/gen-darwin-64@2.8.11':
+    optional: true
+
+  '@turbo/gen-darwin-arm64@2.8.11':
+    optional: true
+
+  '@turbo/gen-linux-64@2.8.11':
+    optional: true
+
+  '@turbo/gen-linux-arm64@2.8.11':
+    optional: true
+
+  '@turbo/gen-windows-64@2.8.11':
+    optional: true
+
+  '@turbo/gen@2.8.11(@types/node@25.3.0)':
+    dependencies:
+      '@inquirer/prompts': 7.10.1(@types/node@25.3.0)
+      node-plop: 0.26.3
+    optionalDependencies:
+      '@turbo/gen-darwin-64': 2.8.11
+      '@turbo/gen-darwin-arm64': 2.8.11
+      '@turbo/gen-linux-64': 2.8.11
+      '@turbo/gen-linux-arm64': 2.8.11
+      '@turbo/gen-windows-64': 2.8.11
+    transitivePeerDependencies:
+      - '@types/node'
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.29.0
+      '@babel/types': 7.29.0
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.29.0
+
+  '@types/estree@1.0.8': {}
+
+  '@types/glob@7.2.0':
+    dependencies:
+      '@types/minimatch': 6.0.0
+      '@types/node': 25.3.0
+
+  '@types/inquirer@6.5.0':
+    dependencies:
+      '@types/through': 0.0.33
+      rxjs: 6.6.7
+
+  '@types/json-schema@7.0.15': {}
+
+  '@types/minimatch@6.0.0':
+    dependencies:
+      minimatch: 10.2.4
+
+  '@types/node@25.3.0':
+    dependencies:
+      undici-types: 7.18.2
+
+  '@types/react-dom@19.2.3(@types/react@19.2.14)':
+    dependencies:
+      '@types/react': 19.2.14
+
+  '@types/react@19.2.14':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/through@0.0.33':
+    dependencies:
+      '@types/node': 25.3.0
+
+  '@typescript-eslint/eslint-plugin@8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.56.1
+      '@typescript-eslint/type-utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.56.1
+      eslint: 9.39.3(jiti@2.6.1)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.56.1
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.56.1
+      debug: 4.4.3
+      eslint: 9.39.3(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/project-service@8.56.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/tsconfig-utils': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.56.1
+      debug: 4.4.3
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/scope-manager@8.56.1':
+    dependencies:
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/visitor-keys': 8.56.1
+
+  '@typescript-eslint/tsconfig-utils@8.56.1(typescript@5.9.3)':
+    dependencies:
+      typescript: 5.9.3
+
+  '@typescript-eslint/type-utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.3(jiti@2.6.1)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/types@8.56.1': {}
+
+  '@typescript-eslint/typescript-estree@8.56.1(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/project-service': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/visitor-keys': 8.56.1
+      debug: 4.4.3
+      minimatch: 10.2.4
+      semver: 7.7.4
+      tinyglobby: 0.2.15
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/utils@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
+      '@typescript-eslint/scope-manager': 8.56.1
+      '@typescript-eslint/types': 8.56.1
+      '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
+      eslint: 9.39.3(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/visitor-keys@8.56.1':
+    dependencies:
+      '@typescript-eslint/types': 8.56.1
+      eslint-visitor-keys: 5.0.1
+
+  '@vitejs/plugin-react@5.1.4(vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1))':
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.0)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.0)
+      '@rolldown/pluginutils': 1.0.0-rc.3
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
+      vite: 7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1)
+    transitivePeerDependencies:
+      - supports-color
+
+  acorn-jsx@5.3.2(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
+  acorn@8.16.0: {}
+
+  aggregate-error@3.1.0:
+    dependencies:
+      clean-stack: 2.2.0
+      indent-string: 4.0.0
+
+  ajv@6.14.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-json-stable-stringify: 2.1.0
+      json-schema-traverse: 0.4.1
+      uri-js: 4.4.1
+
+  ansi-escapes@4.3.2:
+    dependencies:
+      type-fest: 0.21.3
+
+  ansi-regex@5.0.1: {}
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+
+  argparse@2.0.1: {}
+
+  array-union@2.1.0: {}
+
+  balanced-match@1.0.2: {}
+
+  balanced-match@4.0.4: {}
+
+  baseline-browser-mapping@2.10.0: {}
+
+  brace-expansion@1.1.12:
+    dependencies:
+      balanced-match: 1.0.2
+      concat-map: 0.0.1
+
+  brace-expansion@5.0.3:
+    dependencies:
+      balanced-match: 4.0.4
+
+  braces@3.0.3:
+    dependencies:
+      fill-range: 7.1.1
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.10.0
+      caniuse-lite: 1.0.30001774
+      electron-to-chromium: 1.5.302
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  callsites@3.1.0: {}
+
+  camel-case@3.0.0:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  caniuse-lite@1.0.30001774: {}
+
+  chalk@4.1.2:
+    dependencies:
+      ansi-styles: 4.3.0
+      supports-color: 7.2.0
+
+  change-case@3.1.0:
+    dependencies:
+      camel-case: 3.0.0
+      constant-case: 2.0.0
+      dot-case: 2.1.1
+      header-case: 1.0.1
+      is-lower-case: 1.1.3
+      is-upper-case: 1.1.2
+      lower-case: 1.1.4
+      lower-case-first: 1.0.2
+      no-case: 2.3.2
+      param-case: 2.1.1
+      pascal-case: 2.0.1
+      path-case: 2.1.1
+      sentence-case: 2.1.1
+      snake-case: 2.1.0
+      swap-case: 1.1.2
+      title-case: 2.1.1
+      upper-case: 1.1.3
+      upper-case-first: 1.1.2
+
+  chardet@0.7.0: {}
+
+  chardet@2.1.1: {}
+
+  clean-stack@2.2.0: {}
+
+  cli-cursor@3.1.0:
+    dependencies:
+      restore-cursor: 3.1.0
+
+  cli-width@3.0.0: {}
+
+  cli-width@4.1.0: {}
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+
+  color-name@1.1.4: {}
+
+  concat-map@0.0.1: {}
+
+  constant-case@2.0.0:
+    dependencies:
+      snake-case: 2.1.0
+      upper-case: 1.1.3
+
+  convert-source-map@2.0.0: {}
+
+  core-js-pure@3.48.0: {}
+
+  cross-spawn@7.0.6:
+    dependencies:
+      path-key: 3.1.1
+      shebang-command: 2.0.0
+      which: 2.0.2
+
+  csstype@3.2.3: {}
+
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
+
+  deep-is@0.1.4: {}
+
+  del@5.1.0:
+    dependencies:
+      globby: 10.0.2
+      graceful-fs: 4.2.11
+      is-glob: 4.0.3
+      is-path-cwd: 2.2.0
+      is-path-inside: 3.0.3
+      p-map: 3.0.0
+      rimraf: 3.0.2
+      slash: 3.0.0
+
+  detect-libc@2.1.2: {}
+
+  dir-glob@3.0.1:
+    dependencies:
+      path-type: 4.0.0
+
+  dot-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  electron-to-chromium@1.5.302: {}
+
+  emoji-regex@8.0.0: {}
+
+  enhanced-resolve@5.19.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
+
+  esbuild@0.27.3:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.3
+      '@esbuild/android-arm': 0.27.3
+      '@esbuild/android-arm64': 0.27.3
+      '@esbuild/android-x64': 0.27.3
+      '@esbuild/darwin-arm64': 0.27.3
+      '@esbuild/darwin-x64': 0.27.3
+      '@esbuild/freebsd-arm64': 0.27.3
+      '@esbuild/freebsd-x64': 0.27.3
+      '@esbuild/linux-arm': 0.27.3
+      '@esbuild/linux-arm64': 0.27.3
+      '@esbuild/linux-ia32': 0.27.3
+      '@esbuild/linux-loong64': 0.27.3
+      '@esbuild/linux-mips64el': 0.27.3
+      '@esbuild/linux-ppc64': 0.27.3
+      '@esbuild/linux-riscv64': 0.27.3
+      '@esbuild/linux-s390x': 0.27.3
+      '@esbuild/linux-x64': 0.27.3
+      '@esbuild/netbsd-arm64': 0.27.3
+      '@esbuild/netbsd-x64': 0.27.3
+      '@esbuild/openbsd-arm64': 0.27.3
+      '@esbuild/openbsd-x64': 0.27.3
+      '@esbuild/openharmony-arm64': 0.27.3
+      '@esbuild/sunos-x64': 0.27.3
+      '@esbuild/win32-arm64': 0.27.3
+      '@esbuild/win32-ia32': 0.27.3
+      '@esbuild/win32-x64': 0.27.3
+
+  escalade@3.2.0: {}
+
+  escape-string-regexp@1.0.5: {}
+
+  escape-string-regexp@4.0.0: {}
+
+  eslint-plugin-react-hooks@7.0.1(eslint@9.39.3(jiti@2.6.1)):
+    dependencies:
+      '@babel/core': 7.29.0
+      '@babel/parser': 7.29.0
+      eslint: 9.39.3(jiti@2.6.1)
+      hermes-parser: 0.25.1
+      zod: 3.25.76
+      zod-validation-error: 4.0.2(zod@3.25.76)
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-plugin-react-refresh@0.4.26(eslint@9.39.3(jiti@2.6.1)):
+    dependencies:
+      eslint: 9.39.3(jiti@2.6.1)
+
+  eslint-scope@8.4.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
+  eslint-visitor-keys@3.4.3: {}
+
+  eslint-visitor-keys@4.2.1: {}
+
+  eslint-visitor-keys@5.0.1: {}
+
+  eslint@9.39.3(jiti@2.6.1):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.3(jiti@2.6.1))
+      '@eslint-community/regexpp': 4.12.2
+      '@eslint/config-array': 0.21.1
+      '@eslint/config-helpers': 0.4.2
+      '@eslint/core': 0.17.0
+      '@eslint/eslintrc': 3.3.4
+      '@eslint/js': 9.39.3
+      '@eslint/plugin-kit': 0.4.1
+      '@humanfs/node': 0.16.7
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.3
+      '@types/estree': 1.0.8
+      ajv: 6.14.0
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.4.0
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      esquery: 1.7.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.2
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.5
+      natural-compare: 1.4.0
+      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.4.0:
+    dependencies:
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
+      eslint-visitor-keys: 4.2.1
+
+  esquery@1.7.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  esrecurse@4.3.0:
+    dependencies:
+      estraverse: 5.3.0
+
+  estraverse@5.3.0: {}
+
+  esutils@2.0.3: {}
+
+  external-editor@3.1.0:
+    dependencies:
+      chardet: 0.7.0
+      iconv-lite: 0.4.24
+      tmp: 0.0.33
+
+  fast-deep-equal@3.1.3: {}
+
+  fast-glob@3.3.3:
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.8
+
+  fast-json-stable-stringify@2.1.0: {}
+
+  fast-levenshtein@2.0.6: {}
+
+  fastq@1.20.1:
+    dependencies:
+      reusify: 1.1.0
+
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
+  figures@3.2.0:
+    dependencies:
+      escape-string-regexp: 1.0.5
+
+  file-entry-cache@8.0.0:
+    dependencies:
+      flat-cache: 4.0.1
+
+  fill-range@7.1.1:
+    dependencies:
+      to-regex-range: 5.0.1
+
+  find-up@5.0.0:
+    dependencies:
+      locate-path: 6.0.0
+      path-exists: 4.0.0
+
+  flat-cache@4.0.1:
+    dependencies:
+      flatted: 3.3.3
+      keyv: 4.5.4
+
+  flatted@3.3.3: {}
+
+  fs.realpath@1.0.0: {}
+
+  fsevents@2.3.3:
+    optional: true
+
+  function-bind@1.1.2: {}
+
+  gensync@1.0.0-beta.2: {}
+
+  glob-parent@5.1.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob-parent@6.0.2:
+    dependencies:
+      is-glob: 4.0.3
+
+  glob@7.2.3:
+    dependencies:
+      fs.realpath: 1.0.0
+      inflight: 1.0.6
+      inherits: 2.0.4
+      minimatch: 3.1.5
+      once: 1.4.0
+      path-is-absolute: 1.0.1
+
+  globals@14.0.0: {}
+
+  globals@17.3.0: {}
+
+  globby@10.0.2:
+    dependencies:
+      '@types/glob': 7.2.0
+      array-union: 2.1.0
+      dir-glob: 3.0.1
+      fast-glob: 3.3.3
+      glob: 7.2.3
+      ignore: 5.3.2
+      merge2: 1.4.1
+      slash: 3.0.0
+
+  graceful-fs@4.2.11: {}
+
+  handlebars@4.7.8:
+    dependencies:
+      minimist: 1.2.8
+      neo-async: 2.6.2
+      source-map: 0.6.1
+      wordwrap: 1.0.0
+    optionalDependencies:
+      uglify-js: 3.19.3
+
+  has-flag@4.0.0: {}
+
+  hasown@2.0.2:
+    dependencies:
+      function-bind: 1.1.2
+
+  header-case@1.0.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  hermes-estree@0.25.1: {}
+
+  hermes-parser@0.25.1:
+    dependencies:
+      hermes-estree: 0.25.1
+
+  iconv-lite@0.4.24:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  iconv-lite@0.7.2:
+    dependencies:
+      safer-buffer: 2.1.2
+
+  ignore@5.3.2: {}
+
+  ignore@7.0.5: {}
+
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
+  imurmurhash@0.1.4: {}
+
+  indent-string@4.0.0: {}
+
+  inflight@1.0.6:
+    dependencies:
+      once: 1.4.0
+      wrappy: 1.0.2
+
+  inherits@2.0.4: {}
+
+  inquirer@7.3.3:
+    dependencies:
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      cli-cursor: 3.1.0
+      cli-width: 3.0.0
+      external-editor: 3.1.0
+      figures: 3.2.0
+      lodash: 4.17.23
+      mute-stream: 0.0.8
+      run-async: 2.4.1
+      rxjs: 6.6.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      through: 2.3.8
+
+  is-core-module@2.16.1:
+    dependencies:
+      hasown: 2.0.2
+
+  is-extglob@2.1.1: {}
+
+  is-fullwidth-code-point@3.0.0: {}
+
+  is-glob@4.0.3:
+    dependencies:
+      is-extglob: 2.1.1
+
+  is-lower-case@1.1.3:
+    dependencies:
+      lower-case: 1.1.4
+
+  is-number@7.0.0: {}
+
+  is-path-cwd@2.2.0: {}
+
+  is-path-inside@3.0.3: {}
+
+  is-upper-case@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  isbinaryfile@4.0.10: {}
+
+  isexe@2.0.0: {}
+
+  jiti@2.6.1: {}
+
+  js-tokens@4.0.0: {}
+
+  js-yaml@4.1.1:
+    dependencies:
+      argparse: 2.0.1
+
+  jsesc@3.1.0: {}
+
+  json-buffer@3.0.1: {}
+
+  json-schema-traverse@0.4.1: {}
+
+  json-stable-stringify-without-jsonify@1.0.1: {}
+
+  json5@2.2.3: {}
+
+  keyv@4.5.4:
+    dependencies:
+      json-buffer: 3.0.1
+
+  levn@0.4.1:
+    dependencies:
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+
+  lightningcss-android-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-arm64@1.31.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.31.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.31.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.31.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.31.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.31.1:
+    optional: true
+
+  lightningcss@1.31.1:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.31.1
+      lightningcss-darwin-arm64: 1.31.1
+      lightningcss-darwin-x64: 1.31.1
+      lightningcss-freebsd-x64: 1.31.1
+      lightningcss-linux-arm-gnueabihf: 1.31.1
+      lightningcss-linux-arm64-gnu: 1.31.1
+      lightningcss-linux-arm64-musl: 1.31.1
+      lightningcss-linux-x64-gnu: 1.31.1
+      lightningcss-linux-x64-musl: 1.31.1
+      lightningcss-win32-arm64-msvc: 1.31.1
+      lightningcss-win32-x64-msvc: 1.31.1
+
+  locate-path@6.0.0:
+    dependencies:
+      p-locate: 5.0.0
+
+  lodash.get@4.4.2: {}
+
+  lodash.merge@4.6.2: {}
+
+  lodash@4.17.23: {}
+
+  lower-case-first@1.0.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  lower-case@1.1.4: {}
+
+  lru-cache@5.1.1:
+    dependencies:
+      yallist: 3.1.1
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+
+  merge2@1.4.1: {}
+
+  micromatch@4.0.8:
+    dependencies:
+      braces: 3.0.3
+      picomatch: 2.3.1
+
+  mimic-fn@2.1.0: {}
+
+  minimatch@10.2.4:
+    dependencies:
+      brace-expansion: 5.0.3
+
+  minimatch@3.1.5:
+    dependencies:
+      brace-expansion: 1.1.12
+
+  minimist@1.2.8: {}
+
+  mkdirp@0.5.6:
+    dependencies:
+      minimist: 1.2.8
+
+  ms@2.1.3: {}
+
+  mute-stream@0.0.8: {}
+
+  mute-stream@2.0.0: {}
+
+  nanoid@3.3.11: {}
+
+  natural-compare@1.4.0: {}
+
+  neo-async@2.6.2: {}
+
+  no-case@2.3.2:
+    dependencies:
+      lower-case: 1.1.4
+
+  node-plop@0.26.3:
+    dependencies:
+      '@babel/runtime-corejs3': 7.29.0
+      '@types/inquirer': 6.5.0
+      change-case: 3.1.0
+      del: 5.1.0
+      globby: 10.0.2
+      handlebars: 4.7.8
+      inquirer: 7.3.3
+      isbinaryfile: 4.0.10
+      lodash.get: 4.4.2
+      mkdirp: 0.5.6
+      resolve: 1.22.11
+
+  node-releases@2.0.27: {}
+
+  once@1.4.0:
+    dependencies:
+      wrappy: 1.0.2
+
+  onetime@5.1.2:
+    dependencies:
+      mimic-fn: 2.1.0
+
+  optionator@0.9.4:
+    dependencies:
+      deep-is: 0.1.4
+      fast-levenshtein: 2.0.6
+      levn: 0.4.1
+      prelude-ls: 1.2.1
+      type-check: 0.4.0
+      word-wrap: 1.2.5
+
+  os-tmpdir@1.0.2: {}
+
+  p-limit@3.1.0:
+    dependencies:
+      yocto-queue: 0.1.0
+
+  p-locate@5.0.0:
+    dependencies:
+      p-limit: 3.1.0
+
+  p-map@3.0.0:
+    dependencies:
+      aggregate-error: 3.1.0
+
+  param-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  pascal-case@2.0.1:
+    dependencies:
+      camel-case: 3.0.0
+      upper-case-first: 1.1.2
+
+  path-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+
+  path-exists@4.0.0: {}
+
+  path-is-absolute@1.0.1: {}
+
+  path-key@3.1.1: {}
+
+  path-parse@1.0.7: {}
+
+  path-type@4.0.0: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@2.3.1: {}
+
+  picomatch@4.0.3: {}
+
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
+  prelude-ls@1.2.1: {}
+
+  prettier-plugin-tailwindcss@0.7.2(prettier@3.8.1):
+    dependencies:
+      prettier: 3.8.1
+
+  prettier@3.8.1: {}
+
+  punycode@2.3.1: {}
+
+  queue-microtask@1.2.3: {}
+
+  react-dom@19.2.4(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      scheduler: 0.27.0
+
+  react-refresh@0.18.0: {}
+
+  react@19.2.4: {}
+
+  resolve-from@4.0.0: {}
+
+  resolve@1.22.11:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+
+  restore-cursor@3.1.0:
+    dependencies:
+      onetime: 5.1.2
+      signal-exit: 3.0.7
+
+  reusify@1.1.0: {}
+
+  rimraf@3.0.2:
+    dependencies:
+      glob: 7.2.3
+
+  rollup@4.59.0:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.59.0
+      '@rollup/rollup-android-arm64': 4.59.0
+      '@rollup/rollup-darwin-arm64': 4.59.0
+      '@rollup/rollup-darwin-x64': 4.59.0
+      '@rollup/rollup-freebsd-arm64': 4.59.0
+      '@rollup/rollup-freebsd-x64': 4.59.0
+      '@rollup/rollup-linux-arm-gnueabihf': 4.59.0
+      '@rollup/rollup-linux-arm-musleabihf': 4.59.0
+      '@rollup/rollup-linux-arm64-gnu': 4.59.0
+      '@rollup/rollup-linux-arm64-musl': 4.59.0
+      '@rollup/rollup-linux-loong64-gnu': 4.59.0
+      '@rollup/rollup-linux-loong64-musl': 4.59.0
+      '@rollup/rollup-linux-ppc64-gnu': 4.59.0
+      '@rollup/rollup-linux-ppc64-musl': 4.59.0
+      '@rollup/rollup-linux-riscv64-gnu': 4.59.0
+      '@rollup/rollup-linux-riscv64-musl': 4.59.0
+      '@rollup/rollup-linux-s390x-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-gnu': 4.59.0
+      '@rollup/rollup-linux-x64-musl': 4.59.0
+      '@rollup/rollup-openbsd-x64': 4.59.0
+      '@rollup/rollup-openharmony-arm64': 4.59.0
+      '@rollup/rollup-win32-arm64-msvc': 4.59.0
+      '@rollup/rollup-win32-ia32-msvc': 4.59.0
+      '@rollup/rollup-win32-x64-gnu': 4.59.0
+      '@rollup/rollup-win32-x64-msvc': 4.59.0
+      fsevents: 2.3.3
+
+  run-async@2.4.1: {}
+
+  run-parallel@1.2.0:
+    dependencies:
+      queue-microtask: 1.2.3
+
+  rxjs@6.6.7:
+    dependencies:
+      tslib: 1.14.1
+
+  safer-buffer@2.1.2: {}
+
+  scheduler@0.27.0: {}
+
+  semver@6.3.1: {}
+
+  semver@7.7.4: {}
+
+  sentence-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case-first: 1.1.2
+
+  shebang-command@2.0.0:
+    dependencies:
+      shebang-regex: 3.0.0
+
+  shebang-regex@3.0.0: {}
+
+  signal-exit@3.0.7: {}
+
+  signal-exit@4.1.0: {}
+
+  slash@3.0.0: {}
+
+  snake-case@2.1.0:
+    dependencies:
+      no-case: 2.3.2
+
+  source-map-js@1.2.1: {}
+
+  source-map@0.6.1: {}
+
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+
+  strip-json-comments@3.1.1: {}
+
+  supports-color@7.2.0:
+    dependencies:
+      has-flag: 4.0.0
+
+  supports-preserve-symlinks-flag@1.0.0: {}
+
+  swap-case@1.1.2:
+    dependencies:
+      lower-case: 1.1.4
+      upper-case: 1.1.3
+
+  tailwindcss@4.2.1: {}
+
+  tapable@2.3.0: {}
+
+  through@2.3.8: {}
+
+  tinyglobby@0.2.15:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+
+  title-case@2.1.1:
+    dependencies:
+      no-case: 2.3.2
+      upper-case: 1.1.3
+
+  tmp@0.0.33:
+    dependencies:
+      os-tmpdir: 1.0.2
+
+  to-regex-range@5.0.1:
+    dependencies:
+      is-number: 7.0.0
+
+  ts-api-utils@2.4.0(typescript@5.9.3):
+    dependencies:
+      typescript: 5.9.3
+
+  tslib@1.14.1: {}
+
+  turbo-darwin-64@2.8.11:
+    optional: true
+
+  turbo-darwin-arm64@2.8.11:
+    optional: true
+
+  turbo-linux-64@2.8.11:
+    optional: true
+
+  turbo-linux-arm64@2.8.11:
+    optional: true
+
+  turbo-windows-64@2.8.11:
+    optional: true
+
+  turbo-windows-arm64@2.8.11:
+    optional: true
+
+  turbo@2.8.11:
+    optionalDependencies:
+      turbo-darwin-64: 2.8.11
+      turbo-darwin-arm64: 2.8.11
+      turbo-linux-64: 2.8.11
+      turbo-linux-arm64: 2.8.11
+      turbo-windows-64: 2.8.11
+      turbo-windows-arm64: 2.8.11
+
+  type-check@0.4.0:
+    dependencies:
+      prelude-ls: 1.2.1
+
+  type-fest@0.21.3: {}
+
+  typescript-eslint@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3):
+    dependencies:
+      '@typescript-eslint/eslint-plugin': 8.56.1(@typescript-eslint/parser@8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.56.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.56.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.3(jiti@2.6.1)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
+  typescript@5.9.3: {}
+
+  uglify-js@3.19.3:
+    optional: true
+
+  undici-types@7.18.2: {}
+
+  update-browserslist-db@1.2.3(browserslist@4.28.1):
+    dependencies:
+      browserslist: 4.28.1
+      escalade: 3.2.0
+      picocolors: 1.1.1
+
+  upper-case-first@1.1.2:
+    dependencies:
+      upper-case: 1.1.3
+
+  upper-case@1.1.3: {}
+
+  uri-js@4.4.1:
+    dependencies:
+      punycode: 2.3.1
+
+  vite@7.3.1(@types/node@25.3.0)(jiti@2.6.1)(lightningcss@1.31.1):
+    dependencies:
+      esbuild: 0.27.3
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.59.0
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 25.3.0
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      lightningcss: 1.31.1
+
+  which@2.0.2:
+    dependencies:
+      isexe: 2.0.0
+
+  word-wrap@1.2.5: {}
+
+  wordwrap@1.0.0: {}
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+
+  wrappy@1.0.2: {}
+
+  yallist@3.1.1: {}
+
+  yocto-queue@0.1.0: {}
+
+  yoctocolors-cjs@2.1.3: {}
+
+  zod-validation-error@4.0.2(zod@3.25.76):
+    dependencies:
+      zod: 3.25.76
+
+  zod@3.25.76: {}
diff --git a/templates/vite-monorepo/pnpm-workspace.yaml b/templates/vite-monorepo/pnpm-workspace.yaml
new file mode 100644
index 0000000000..3ff5faaaf5
--- /dev/null
+++ b/templates/vite-monorepo/pnpm-workspace.yaml
@@ -0,0 +1,3 @@
+packages:
+  - "apps/*"
+  - "packages/*"
diff --git a/templates/vite-monorepo/tsconfig.json b/templates/vite-monorepo/tsconfig.json
new file mode 100644
index 0000000000..63b9f0ef83
--- /dev/null
+++ b/templates/vite-monorepo/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "strict": true
+  }
+}
diff --git a/templates/vite-monorepo/turbo.json b/templates/vite-monorepo/turbo.json
new file mode 100644
index 0000000000..c5398f5ce7
--- /dev/null
+++ b/templates/vite-monorepo/turbo.json
@@ -0,0 +1,24 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "ui": "tui",
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "inputs": ["$TURBO_DEFAULT$", ".env*"],
+      "outputs": ["dist/**"]
+    },
+    "lint": {
+      "dependsOn": ["^lint"]
+    },
+    "format": {
+      "dependsOn": ["^format"]
+    },
+    "typecheck": {
+      "dependsOn": ["^typecheck"]
+    },
+    "dev": {
+      "cache": false,
+      "persistent": true
+    }
+  }
+}
diff --git a/turbo.json b/turbo.json
index e289a528c1..2b64e84da1 100644
--- a/turbo.json
+++ b/turbo.json
@@ -16,7 +16,7 @@
         "V0_EDIT_SECRET",
         "DEPLOYMENT_PROTECTION_BYPASS"
       ],
-      "outputs": ["dist/**", ".next/**"]
+      "outputs": ["dist/**", ".next/**", "!.next/cache/**"]
     },
     "preview": {
       "env": ["NEXT_PUBLIC_APP_URL"],